Skip to content

Instantly share code, notes, and snippets.

@easierbycode

easierbycode/index.html

Created July 26, 2019 11:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save easierbycode/9f9346d1a783c4d6c8e72eb464652785 to your computer and use it in GitHub Desktop.
Save easierbycode/9f9346d1a783c4d6c8e72eb464652785 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic 4 + Vue.js + IonPhaser
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="module" src="https://unpkg.com/@ion-phaser/core@1.1.0/dist/ionphaser/ionphaser.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@ion-phaser/core@1.1.0/dist/ionphaser/ionphaser.js"></script>
</head>
<body>
<div id="app">
<template>
<ion-app>
<ion-page class="page-home">
<ion-content no-bounce class="content">
<ion-grid>
<ion-row>
<ion-col size-sm="12" size-md="6" size-lg="4">
<ion-phaser v-bind:initialize.prop="initialize" v-bind:game.prop="game1" />
</ion-col>
<ion-col size-sm="12" size-md="6" size-lg="4">
<ion-phaser v-bind:initialize.prop="initialize" v-bind:game.prop="game2" />
</ion-col>
<ion-col size-sm="12" size-md="6" size-lg="4">
<ion-phaser v-bind:initialize.prop="initialize" v-bind:game.prop="game3" />
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-page>
</ion-app>
</template>
</div>
</body>
</html>
Raw
ionic-4-vue-js-ionphaser.markdown
Raw
script.js
// blog.paulhalliday.io/2017/10/04/how-to-use-vue-js-with-ionic-4
Vue.config.ignoredElements = [/ion-\w*/];
var game = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
init: function() {
this.cameras.main.setBackgroundColor('#24252A')
},
create: function() {
/*
Phaser.Display.Canvas.TouchAction(this.game.canvas, 'auto')
this.input.stopPropagation();
this.input.ignoreEvents = true;
Phaser.Display.Canvas.UserSelect(this.game.canvas, 'auto')
*/
//this.input.manager.enabled = false;
//alert(this.input.touch.enabled);
this.helloWorld = this.add.text(
this.cameras.main.centerX,
this.cameras.main.centerY,
"Hello World", {
font: "40px Arial",
fill: "#ffffff"
}
);
this.helloWorld.setOrigin(0.5);
},
update: function() {
this.helloWorld.angle += 1;
}
}
};
new Vue ({
el: '#app',
data: {
initialize: true,
game1: {...game},
game2: {...game},
game3: {...game},
}
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.17.0/phaser.min.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/@ionic/core@4.4.2/dist/ionic.js"></script>
Raw
style.scss
.content, .page-home {
height: 100%;
border: 2px solid black;
}
.content {
margin-bottom: 65px;
}
ion-grid, ion-row {
height: 100%;
}
ion-col {
border: 2px solid black;
background-color: red;
}
ion-phaser {
display: block;
background-color: blue;
width: 100%;
height: 100%;
}
Raw
styles
<link href="https://unpkg.com/@ionic/core@4.4.2/css/ionic.bundle.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment