SomeCreator

Members
  • Content Count

    2
  • Joined

  • Last visited

About SomeCreator

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. <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()`
  2. SomeCreator

    Stage help

    I'm wondering how to create stages and how to change between them. It seems like there's only 1 stage per application and you just add and remove children from them. I saw the removeChildren() method and I tried invoking it. It does remove the container but it also generates a heap of WebGL errors with INVALID_OPERATION. So I'm wondering how I should be approaching this.