<template>
<div ref='game' id='gameScreen'></div>
</template>
<script>
/* eslint-disable no-unused-vars */
import * as PIXI from 'pixi.js'
import image from '@/assets/game/background/environment_forest_evening.png'
import button from '@/assets/game/buttons/blank-light-blue-button-md.png'
/* eslint-enable no-unused-vars */
export default{
name: 'game',
data() {
return {
}
},
props: {
width: Number,
height: Number
},
mounted: function () {
if (this.game == null) {
var type = "WebGL"
var settings = {
antialias: true,
backgroundColor : 0x1099bb
}
this.game = new PIXI.Application(800, 600, settings);
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
this.$refs.game.append(this.game.view)
var graphics = new PIXI.Graphics();
// draw a rounded rectangle
graphics.lineStyle(2, 0xFF00FF, 1);
graphics.beginFill(0xFF00BB, 0.25);
graphics.drawRoundedRect(0, 0, 300, 100, 15);
graphics.endFill();
graphics.interactive = true;
graphics.hitArea = graphics.getBounds();
graphics.click = () => console.log("hi")
graphics.anchor = new PIXI.Point(0.5, 0.5)
graphics.x = this.game.view.width / 2
console.log()
var style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 36,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#ffffff', '#00ff99'], // gradient
stroke: '#4a1850',
strokeThickness: 5,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 440
});
var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
richText.anchor = new PIXI.Point(0.5, 0.5)
richText.x = 0
richText.y = 0;
console.log(graphics.position.x)
// this.game.stage.addChild(richText);
graphics.addChild(richText);
this.game.stage.addChild(graphics);
}
},
methods: {
},
destroyed () {
// this.game.destroy()
},
updated () {
}
}
</script>
<style>
#gameScreen {
margin: 0 auto;
}
#gameScreen canvas {
display: block;
margin: 0 auto;
}
</style>
Here's the code snippet. It's written along with Vue.js so I hope it's not confusing. I've removed the line that returned a whole heap of errors `this.game.stage.removeChildren()`. Just wondering what is the best approach. Because if I do an assignment to `this.game.stage` it also gives some warnings/errors, i.e. `this.game.stage = new PIXI.Stage()`
