Adel

Members
  • Content Count

    18
  • Joined

  • Last visited

Everything posted by Adel

  1. Try to use inkscape to build the scene, then put inkscape coordinates in the json file.
  2. Phaser.State State = function () { Phaser.State.call(this); }; State.prototype = Object.create(Phaser.State.prototype); /** @type {State} */ State.prototype.constructor = State; State.prototype.init = function () { }; State.prototype.preload = function () { }; State.prototype.create = function () { }; /****************************************************************/ window.onload = function () { const game = new Phaser.Game(360, 640, Phaser.AUTO); game.state.add('State', new State()); game.state.start('State', true, false); }; /*********************************************************************/ // es2015 class State extends Phaser.State { constructor() { super(); } init() { } preload() { } create() { } } export { State };
  3. Try testing various settings, or maybe someone with more phaser experience will answer.
  4. What is the screen size of the device you tested, try this mini game on a mobile browser on portrait mode [only tested on chrome], and click on the full screen button, it uses SHOW_ALL scaling.
  5. I meant a background image to the html document, and when the canvas is centered, if it doesn't fill all the document part of the image will be visible.
  6. This ScaleManager guide is worth reading.
  7. Try setting a background image to the document, after it scales part of the images will show instead of the white borders. Setting a 16by9 resolution scale well on most of the mobile devices using SHOW_ALL.
  8. Have tried SHOW_ALL scaling mode this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(this.game.width / 2, this.game.height / 2, this.game.width * 2, this.game.width * 2); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true;
  9. Have you tried to get a reference to `pointer.interactiveCandidates` on an onDown signal then in the update hook check if `input.activePointer.isDown` and interactiveCandidates[0] is the button you clicked
  10. Adel

    Help with Buttons

    Check Phaser.GameObjectFactory .button method
  11. /** * GameState * @constructor */ App.Game = function () { 'use strict'; Phaser.State.call(this); this.__player = {}; }; /** @type {Phaser.State} */ App.Game.prototype = Object.create(Phaser.State.prototype); /** @type {App.Game|*} */ App.Game.prototype.constructor = App.Game; Once a state is instantiated, all properties declared in the state constructor persists after restarting it. Same if those properties are declared in the global scope, global means they are properties of the window object.
  12. And here the methods to pause the game and display the pause menu App.Game.prototype.__togglePause = function () { 'use strict'; this.game.paused = !this.game.paused; }; App.Game.prototype.__togglePauseMenu = function () { 'use strict'; this.__groups['PauseMenu'].forEach(function (pauseElement) { if (pauseElement.__name !== 'GUI:PauseBtn') { pauseElement.visible = !pauseElement.visible; } }, this); };
  13. When the game is paused you can update the game objects in the .pauseUpdate loop. What I did here is initializing a property onPauseInput to null in the State constructor, when the game is paused, that property will hold a reference to Phaser.Signal, input.onUp. The callback function will have a pointer param, I check the pointer x and y agains the buttons bounds, if pointer.x and pointer.y are in bound that mean the button was clicked. In the resumed hook, the onPauseInput is detached then nullified. App.Game.prototype.pauseUpdate = function () { 'use strict'; if (!this.__onPauseInput) { this.__onPauseInput = this.input.onUp.add(function (pointer) { let x = pointer.position.x; let y = pointer.position.y; let btnBounds = {}; let clickedBtn = null; this.__groups['PauseMenu'].forEach(function (pauseElement) { if (pauseElement.__name !== 'Play:PausePanel') { btnBounds[pauseElement.__name] = pauseElement.getBounds(); } }, this); Object.keys(btnBounds).forEach(function (key) { let btn = btnBounds[key]; if ( x >= btn.x && x <= (btn.x + btn.width) && y >= btn.y && y <= (btn.y + btn.height) ) { clickedBtn = key; } }, this); switch (clickedBtn) { case 'GUI:PauseBtn': this.__togglePause(); break; case 'GUI:BackBtn': this.__togglePause(); break; case 'GUI:FullscreenBtn': this.__toggleFullScreen(); break; case 'GUI:MuteBtn': this.__togglePause(); this.__toggleMute(); break; case 'GUI:HomeBtn': this.__togglePause(); this.__SwitchScreen('Start', false); break; default: } }, this); } }; App.Game.prototype.resumed = function () { 'use strict'; if (this.__onPauseInput) { this.__onPauseInput.detach(); this.__onPauseInput = null; } };
  14. I encountered the same behavior using onDown, replaced it with onUp or onTap and it worked
  15. Hi, You can watch the loading progress using setPreloadSprite and onFileComplete signal from Phaser.Loader. If you want to watch the files loading progress before the page onload event try pace or nprogress.
  16. Hi, To simulate a laser blaster heating and cooling I used setInterval for the cooling and setTimeout to delay the cooling if the weapon overheat (firelimit reached). While the weapon is cooling, if it fires again the cooling is aborted (clearInterval, only if the weapon has not overheated). Although it is working correctly while in game, the cooling or the delay is not paused when the game window loose focus, that's because of setTimeout and setInterval. Here is a demo Blaster heating and cooling, some heating and cooling feedbacks are logged in the browser console and a heating meter in the top right camera corner. The colldown function using setInterval. The overheat handler using setTimeout. The cooldown aborter using clearInterval. The github repo. How should I use Phaser.Timer and Phaser.TimerEvent to implement the same behaviour and then get the cooling timer and cooling delay paused when the game window looses focus.
  17. I'm a beginner too, to handle 8 direction movements in a vertical space shooter I'm building to learn more about phaser API what I used is // Player extends Phaser.Sprite /** * Player movement handler * @param {Object} direction */ Player.prototype.move = function(direction) { this.body.velocity.x = direction.left ? -1 * Player.SPEED : direction.right ? Player.SPEED : 0; this.body.velocity.y = direction.up ? -1 * Player.SPEED : direction.down ? Player.SPEED : 0; }; // An instance of Player {Phaser.Sprite} is created in PlayState {Phaser.State} create hook PlayState.init = function() { this.keys = this.game.input.keyboard.addKeys({ left: Phaser.KeyCode.LEFT, right: Phaser.KeyCode.RIGHT, up: Phaser.KeyCode.UP, down: Phaser.KeyCode.DOWN, shoot: Phaser.KeyCode.SPACEBAR }); }; PlayState.update = function() { this._handleArrowsDirections(); }; PlayState._handleArrowsDirections = function() { this.player.move({ up: this.keys.up.isDown, down: this.keys.down.isDown, left: this.keys.left.isDown, right: this.keys.right.isDown }); };