Joetan83

Members
  • Content Count

    6
  • Joined

  • Last visited

  1. Hi all, Thank you for your responses, I have cleared up the subclasses as Xeke suggested. The game.state.start('GameState'); now is executed after the "Complete" However there seems to be a slight problem on the loading percentage is quite fast and skips on the countdown timer. What I see on screen is there is no loading percentage but the box and "Complete" text fading out before going to the "GameState". Is there a way to slow it down from the current script below? Help is appreciated again. class Preload extends Phaser.State { constructor(game, progress,cacheKey,progressDisplay) { super(game, progress,cacheKey,progressDisplay); this.progress = progress; this.cacheKey = cacheKey; this.progressDisplay = progressDisplay; } loadStart(){ let box = this.make.graphics(0, 0); box.lineStyle(8, 0xFF0000, 0.8); box.beginFill(0xFF700B, 1); box.drawRect(-50, -50, 100, 100); box.endFill(); this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture()); this.spinner.anchor.set(0.5); this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250); } preload(game,progressDisplay){ let center = { x: this.game.world.centerX, y: this.game.world.centerY }; game.load.image("player", Images.lander); game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30); game.load.onLoadStart.add(this.loadStart,this); let loadingText = new Text(this.game, center.x, center.y); loadingText.anchor.set(0.5); var timerEvt = this.game.time.events.loop(100, function (){ if(progressDisplay <= 100){ if (game.load.totalQueuedFiles() != 0) loadingText.text = 'Loading...'+(++progressDisplay)+'%'; progressDisplay ++; }else{ game.time.events.remove(timerEvt); } }, this); } create(game){ let center = { x: this.game.world.centerX, y: this.game.world.centerY }; let loadingText = new Text(this.game, center.x, center.y); loadingText.text = 'Completed'; game.add.tween(loadingText).to({alpha: 0},1000, Phaser.Easing.Linear.None, true).onComplete.add(function() { game.state.start('GameState'); }); } }
  2. Hi all, I am currently running into Phaser's problems on the preload state with the code snippet as below class Preload extends Phaser.State { constructor(game, progress,cacheKey,progressDisplay) { super(game, progress,cacheKey,progressDisplay); this.progress = progress; this.cacheKey = cacheKey; this.progressDisplay = progressDisplay; } loadStart(){ let box = this.make.graphics(0, 0); box.lineStyle(8, 0xFF0000, 0.8); box.beginFill(0xFF700B, 1); box.drawRect(-50, -50, 100, 100); box.endFill(); this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture()); this.spinner.anchor.set(0.5); this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250); } preload(game,progressDisplay){ let center = { x: this.game.world.centerX, y: this.game.world.centerY }; game.load.image("player", Images.lander); game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30); game.load.onLoadStart.add(this.loadStart,this); let loadingText = new Text(this.game, center.x, center.y); loadingText.anchor.set(0.5); var timerEvt = this.game.time.events.loop(100, function (){ if(progressDisplay <= 100){ loadingText.text = 'Loading...'+(++progressDisplay)+'%'; } else{ game.time.events.remove(timerEvt); let loadingText = new Text(this.game, center.x, center.y); loadingText.text = 'Completed'; game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true); game.load.onLoadComplete.add(this.loadComplete, this); } }, this); } create(){ this.game.state.start('GameState'); } loadComplete(){ this.create(); } } Somehow the this.game.state.start('GameState'); was executed before the Complete text could fade out. Is there anyway to resolve the bug where to get the complete text to fade out first then execute the GameState? Thanks.
  3. Ah okay I got it. Correct its one way I am choosing to implement as I have my own coding style and the industry representation itself. Well as they all say if you can't make something perfect, have to make something workable. I'll make use of what you suggest and finish the game. Thanks again for your comments.
  4. Hi Glantucan, Thank you for your post. I have manage to fix it but not exactly the way I wanted it. Ideally I would like the snippet below: this.game.load.image("player", Images.lander); on its own file as Player.js and imported into the GameState.js. A good example would be from RainbowText.js which is placed into the GameState.js of the ES6 boilerplate. ES6 has a distinct pattern which needs to be followed in order for it to work with Phaser.io and I am just asking if anyone here has done it in ES6. I could stick to ES5 with gulp + browserify which works in a similar way as require.js however it defeats the purpose. That's all the code I've pasted on my recent post as workable on Chrome browser.
  5. Hi Rich, Thank you for your reply. Well for the Player extends Phaser.Image I was trying to keep all of the player assets and coded attributes in a separate file called Player.js as seen on the example of Daneil's Belohlavek boilerplate template on the link in the first post. His RainbowText extends Phaser.Text is a very good example for keeping RainbowText codded attributes in its own module and imported into the GameState module. I've seen other examples that uses ES6 to import images but they all involved loading images into GameState.js, not very good way of making efficient use of ES6 plus there are hundereds of lines of code within GameState file itself. What you have stated out the way Phaser imports images my guess it is the limits of the Phaser itself ( I could be wrong as I am still a beginner using Phaser). Don't get me wrong, I really appreciated what you have done for Phaser and its a very good HTML5 game framework, but I am putting up my own standards as I am a front-end developer by profession. Still I have manage to fix my own problem from what I gather from you reply but it isn't entirely the answer seek. Its just a different way to import an image into Phaser's GameState with ES6. I have changed the GameState.js to be this: import {Images} from "../global"; import GetImages from "../objects/GetImages"; class GameState extends Phaser.State { constructor(){ super(); } preload(){ let image = new GetImages(this.game,0,0); image.loadImage("player", Images.lander); } create() { let player = this.game.add.sprite(1,1,"player"); } } export default GameState; The Player.js is changed to GetImages.js class GetImages extends Phaser.Image { constructor(game, x, y, key,frame){ super(game, x, y, key, frame); } loadImage(key,frame){ this.game.load.image(key, frame); } } export default GetImages; the code in global.js is the same. I am still open to suggestions on how to keep things modular if the HTML5 game dev community has any?
  6. Hi everyone, I am currently using Phaser,io with ES6 syntax , gulp, babelify, browserify and browsersync that is something similar to the ES6 boilerplate but I am using my own gulp file. I am encountering a bug where I import an image there is a green square behind it and there is a warning of "Phaser.Cache.getImage: Key "player" not found in Cache." on the Chrome browser debug tool show on the attached image. I have a GameState.js file as so: import Player from "../objects/Player"; class GameState extends Phaser.State { constructor(){ super(); } preload(){ let lander = new Player(this.game,0, 0); lander.loadImage(); } create() { let lander = new Player(this.game,0,0); lander.setSprite(); } } export default GameState; I am importing the image from the Player.js file: import {Images} from "../global"; class Player extends Phaser.Image { constructor(game, x, y, key,frame){ super(game, x, y, key, frame); this.loadImage(); this.setSprite(); } loadImage(){ this.game.load.image("player", Images.lander); } setSprite(){ this.game.add.sprite(10,10,"player"); } } export default Player; the global.js file contains variables like so: var gameScreen = { Width: window.innerWidth, Height: window.innerHeight }; var Images = { lander: '/images/player.png' }; export {gameScreen, Images}; Is there anyway to fix this bug? Thanks