Search the Community

Right now, my main game has 2 scenes: The main game A score counter HUD at the top I am trying to create a Game Over screen with a Play Again button, where once the button is pressed, the score is reset and the main game is reloaded. Currently I am doing this: this.play_again_button.on('pointerdown', () => { console.log('Play again button has been clicked'); this.scene.stop(); this.scene.launch('Game'); this.scene.launch('Score'); }); Where basically, the current "Game Over" screen is stopped, and the 2 scenes for the main game mentioned above are reloaded. While this sort of works, I have a problem where the reload is taking forever and the browser is warning me that the game is making the page very slow. I am not sure if this is the best practice to go about creating a restart button for a game. Does anyone have any advice/tips?

Hi, Does anyone know if a single frame in an animated sprite can be used as a trigger to change scene (Phaser 3)? I have an interface with about 30 images set in an animation loop and would like to be able to click on a particular image to change the scene. The result I would like resembles a JavaScript switch statement. Thanks

Hi everyone. I'm trying to implement a pause option in my game. I have two scenes, the scene where the game is being played and the scene when it's telling you that the game is paused. From the playGame scene I have this code to move to the paused scene goToPaused(){ this.scene.pause(); this.scene.start('paused'); } This works as intended. The playGame scene is paused and it starts the paused scene. Now, from my paused scene I have this code to resume the playGame scene and stop the paused scene. resumeGame(){ this.scene.stop(); this.scene.resume('playGame'); } However this gets me the following error: Uncaught TypeError: can't access property "cut", s is null I don't know whats happening. Any ideas? Here is my project: Spaceship Shooter

//Here is a template for scenes in Phaser3. //This can be used to ease the development of Phaser 3 games. New scenes can be added in a similar manner and existing scenes can be removed easily. //For any changes in the number of scenes do not forget to make appropriate changes in the scene:[ ] in the config settings at the end of the code. //Each scene is labelled with corresponding scene number. //The scenes can be switched to the next scene using the next button. //The main menu button can bring you back to GameScene1 from any other page. //Each Gamescene has 4 functions. // -The GameScene function calls the scene. // -The preload function is where you load all the media. // -The create function can be used to call items and events when the scene is invoked. // -The update function calls the methods inside it once per frame. var mainbtn; var GameScene1 = new Phaser.Class({ //The scene is noted. Extends: Phaser.Scene, initialize: function GameScene1 () { //GameScene1 is called Phaser.Scene.call(this, { key: 'GameScene1' }); }, preload: function () { //preload media for GameScene1 here }, create: function () { var gs = this.add.text(500,500, 'GameScene1'); var txt1 = this.add.text(400,300, 'next'); txt1.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); }); }, update:function(){ } }); //create a scene with class var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene2' }); }, preload: function () { //preload media for GameScene2 here }, create: function () { var gs2 = this.add.text(500,500, 'GameScene2'); mainbtn = this.add.text(400,50, 'main menu'); var txt2 = this.add.text(400,320, 'next'); txt2.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene3'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene3 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene3' }); }, preload: function () { //preload media for GameScene3 here }, create: function () { var gs3 = this.add.text(500,500, 'GameScene3'); mainbtn = this.add.text(400,50, 'main menu'); var txt3 = this.add.text(400,340, 'next'); txt3.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene4'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene4 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene4' }); }, preload: function () { //preload media for GameScene4 here }, create: function () { var gs4 = this.add.text(500,500, 'GameScene4'); mainbtn = this.add.text(400,50, 'main menu'); var mainbtn1 = this.add.text(400,360, 'next'); mainbtn1.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene5'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene5 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene5' }); }, preload: function () { //preload media for GameScene5 here }, create: function () { var gs5 = this.add.text(500,500, 'GameScene5'); mainbtn = this.add.text(400,50, 'main menu'); var txt5 = this.add.text(400,380, 'next'); txt5.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene6'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene6 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene6' }); }, preload: function () { //preload media for GameScene6 here }, create: function () { var gs6 = this.add.text(500,500, 'GameScene6'); mainbtn = this.add.text(400,50, 'main menu'); var txt6 = this.add.text(400,400, 'next'); txt6.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene7'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene7 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene7' }); }, preload: function () { //preload media for GameScene7 here }, create: function () { var gs7 = this.add.text(500,500, 'GameScene7'); mainbtn = this.add.text(400,50, 'main menu'); var txt7 = this.add.text(400,420, 'next'); txt7.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene8'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene8 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene8' }); }, preload: function () { //preload media for GameScene8 here }, create: function () { var gs8 = this.add.text(500,500, 'GameScene8'); mainbtn = this.add.text(400,50, 'main menu'); var txt8 = this.add.text(400,440, 'next'); txt8.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene9'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene9 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene9' }); }, preload: function () { //preload media for GameScene9 here }, create: function () { var gs9 = this.add.text(500,500, 'GameScene9'); mainbtn = this.add.text(400,50, 'main menu'); var txt9 = this.add.text(400,460, 'next'); txt9.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene10'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene10 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene10' }); }, preload: function () { //preload media for GameScene10 here }, create: function () { mainbtn = this.add.text(400,50, 'main menu'); var gs10 = this.add.text(500,500, 'GameScene10'); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); //settings required to configure the game are as follows //the physics type applied is arcade. // the resolution is set to 800 x 600 pixels. // the background color is set to brick red. //Make changes in the scene[ ] attribute for any corresponding change in the number of scenes. var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, //set background color backgroundColor: 0x841F27 , scale: { //we place it in the middle of the page. autoCenter: Phaser.Scale.CENTER_BOTH }, //set scenes scene:[GameScene1,GameScene2,GameScene3,GameScene4,GameScene5,GameScene6,GameScene7,GameScene8,GameScene9,GameScene10] }; var game = new Phaser.Game(config);

Hi all, I'm trying to restart a scene but as you can see in this video, rebooting a scene doesn't get rid of the sprites of the scene: I was wondering if I'm making a mistake on how I'm restarting the scene, or if this is a bug and I should open a Github issue. Any help would be much appreciated!

In my game the player will create a character (TODO), then start the game. The game starts by placing one tile on the board Right now I just have a GameController which is a phaser Scene In the Game Controller I want to have instances to the board and the UI Menu so that I can communicate with the other scenes throughout the game The issue that I am currently having (and I think that it is because of JS single threaded nature) is that I need to wait for the Board's create method is complete before I can start calling the other methods, but scene.run does not start until Game.create is done (and I tried Game.preload) So the question is there a way to wait / detect until scene.run is finished? I know that there are certain events that a scene triggers but can I hook into another objects events like on('Board:transitioncomplete',()=>) Is there a cleaner way to structure the order of these events? create() { this.board = this.scene.get('Board'); this.board = this.scene.get('UI'); this.scene.run('Board'); this.startGame(); } startGame() { this.board.createRoom(0, 0, 'N'); // this.UI.renderMessage({ message: 'Welcome to the dungeon', parameters: 'Param1' }, (param) => console.log(`Hello from Game with ${param}`)); }

My scenes with the maps I created are not loading in the browser. To get an overview of what is going on, I am creating a game RPG like game that that has a top down view of the character. The game I am making requires the character go into a store and buy some items. I think I may have found a solution for the problem of switching between maps using multiple scenes. However, the problem now is that the map isn't loading and when inspect the game in chrome an error message that reads "Uncaught Reference Error: SceneA not define at index.js: 19". I thought that I set up the code correctly. But see what I did wrong, so I will include the js file since it is over 360+ lines of code. index.js

Hello Guys! First of all, this is my first topic! I've read some of your questions and answers, and most of them have helped me a lot with Phaser 2 to 3 update. Thanks a lot for all the hard work. But, I have some questions. Right now I'm updating one of my games from Phaser 2 to Phaser 3, and wow its a lot of classes updates. and logic changes. But I need a suggestion in one of them. In Phaser 2, I extended the Phaser.Game class to save some data on it (most of it its configuration data), and I could access it from ANYWHERE in my classes and states. Now in Phaser 3, with the scene logic introduction and game (world) not even accessible (well, I could with Scene Injection Map, but you don't recommend it), I can't reach this data. To make this data 'globally" accessible again, I thought maybe creating an immortal scene should be enough, or maybe an object out of phaser 3 logic. Is this a correct approach? Am I missing something that could make this easier?

I am having some problems with my sprite animations as I move between scenes. Each scene ran ok until I returned to it On my first playthrough, when i returned to the scene i was informed, via console.log, that the various animations' keys "were undefined or already in use" (so after using the github docs (....docs/animations_AnimationManager.js.html) I added the if config.key || this.anims.has(key) check. However it does not play and my console.log now outputs the following RED ERROR: Uncaught TypeError: Cannot read property 'getFirstTick' of null at initialize.play (phaser.min.js:1) at initialize.play (phaser.min.js:1) at scene1.create (PHASER3codePrinter.php:57) at initialize.create (phaser.min.js:1) at initialize.loadComplete (phaser.min.js:1) at initialize.h.emit (phaser.min.js:1) at initialize.processComplete (phaser.min.js:1) at initialize.removeFromQueue (phaser.min.js:1) at initialize.processUpdate (phaser.min.js:1) at Image.data.onload (phaser.min.js:1) Here is my code in create() create(){... if (!config.selectable2ANIMS0 || this.anims.has(config.selectable2ANIMS0)){ var skip = 1; }else{ this.anims.create({ key: 'selectable2ANIMS0', frames: [ { key: 'selectable2ANIMATION0'}, { key: 'selectable2ANIMATION1'}, { key: 'selectable2ANIMATION2'}, { key: 'selectable2ANIMATION3'}, { key: 'selectable2ANIMATION4'}, ], frameRate: 8.0, repeat: -1 }); } selectable2 =this.add.sprite(51.5, 61, 'selectable2').play('selectable2ANIMS0'); ...} Here is my scene calling (proof of concept for checking scenes) this.input.keyboard.on('keyup',function(e){ if(e.key=='1'){ this.scene.start('scene1'); } if(e.key=='2'){ this.scene.start('scene2'); } if(e.key=='3'){ this.scene.start('scene3'); } if(e.key=='4'){ this.scene.start('scene4'); } if(e.key=='5'){ this.scene.start('scene5'); } },this);} Anyone got any ideas?

Hi all, I'm trying to build a demo keeping it simple with ES5, and I'm trying to add a custom method to a scene, in a way similar to how it was done on Phaser 2. I realized this is not possible and was wondering if there is any recommended way to do this (without using ES6 to extend the Scene class, and without adding functions in the global scope either): var GameScene = { preload: ... create: ... update: function() { // custom logic if(...) { // if something happens, game over (doesn't work). this.gameOver is undefined this.time.delayedCall(500, this.gameOver, [], this); } }, // adding this custom method like in Phaser 2 - doesn't work on Phaser 3 gameOver: function() { console.log("game over"); } } var config = { type: Phaser.AUTO, width: 640, height: 360, scene: GameScene }; var game = new Phaser.Game(config);

I was wondering if it's expected behavior that camera effects are not reset when a scene is restarted. The following code will fade out, and the screen will remain black after the scene is restarted: gameScene.create = function() { // create a sprite let bg = this.add.sprite(100, 100, 'treasure'); // fade out this.cameras.main.fade(1000); // restart the scene this.time.delayedCall(2000, function() { this.scene.restart(); }, [], this); What I'm adding at the moment is `this.cameras.main.resetFX();` when initiating a scene in order to have the view back, but it kind of feels like the camera subsystem should refresh as well when using `this.scene.restart()`.

I'm trying to get my head around the scene life-cycle and main methods. I understand render is called (aims at) 60 fps. What's the frequency/time-step of update?

I've read through just about all of this guide (https://github.com/kittykatattack/learningPixi). I think I have a grasp of how to switch stages/scenes. There's one part that doesn't make sense to me however. If I wanted to create a separate .js file for every class and every scene's code, what's the best practice for loading those files? I've seen examples where the index.html file just includes all of the scripts, but isn't that possibly a slow and/or bad experience? A previous flow I read about was loading the bare minimum (a background, logo, and loading graphic) and then loading all other images and javascript files. Is there a best practice to load these separate javascript files through the Pixi loader so the splash screen comes up instantly and show a loading bar while I pull in all these extra assets?

Hi there! I'm relatively new...ok very new to coding with phaser and I'm having a tough time finding tutorials that can help guide me through a few of the basics for what I'm looking for. I've been trying to use this tutorial: How to make a multiplayer online game with Phaser, Socket.io and Node.js And this one: How to create a multiplayer game with Phaser, Node, Socket.io and Express. However, it seems that both tutorials were made using Phaser2 and there are a few fundamental differences that don't function well using the newer code. The biggest part I'm having trouble with is the differences between game states in the old Phaser and how they are different from the scenes the new version uses. game.state.add('Game',Game); game.state.start('Game'); These functions specifically seem to break my game every time I try and use them. Is the new phaser designed to be run entirely through the index.html file? Or is there a way to execute most of my game's code in a separate game.js file? Currently I have at least a functioning game where I can move around on a map, but the entire thing is contained inside a single index.html file. You can see my game's code here: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Top Down Multiplayer Test Game</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.Auto, width: 960, height: 960, physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var blocked; var game = new Phaser.Game(config); function preload () { //assets to use in the loading screen this.load.image('preloadbar', 'assets/images/preloader-bar.png'); //load game assets this.load.image('level1', 'assets/tilemaps/level1.png'); this.load.image('gameTiles', 'assets/images/Outside_A2.png'); this.load.image('gameTiles', 'assets/images/Outside_B.png'); this.load.image('emptypot', 'assets/images/emptypot.png'); this.load.image('filledbucket', 'assets/images/filledbucket'); this.load.image('player', 'assets/images/player.png'); this.load.image('doorleft', 'assets/images/doorleft.png'); this.load.image('doorright', 'assets/images/doorright.png'); this.load.image('tent', 'assets/images/tent.png'); this.load.image('sign', 'assets/images/sign.png'); this.load.image('campfire', 'assets/images/campfire.png'); this.load.image('woodpile', 'assets/images/woodpile.png'); this.load.image('tree', 'assets/images/tree.png'); this.load.image('rock', 'assets/images/rock.png'); this.load.image('grapes', 'assets/images/grapes.png'); this.load.image('log', 'assets/images/log.png'); this.load.spritesheet('dude', 'assets/spritesheets/dude.png',{frameWidth: 32, frameHeight: 48}); } function create () { this.add.image(480, 480, 'level1'); blocked = this.physics.add.staticGroup(); blocked.create(456, 216, 'sign'); blocked.create(648, 168, 'woodpile'); blocked.create(648, 216, 'campfire'); blocked.create(744, 168, 'tent'); blocked.create(840, 216, 'filledbucket'); blocked.create(600, 400, 'rock'); blocked.create(648, 448, 'rock'); blocked.create(600, 448, 'grapes'); blocked.create(214, 720, 'tree'); blocked.create(214, 552, 'tree'); blocked.create(214, 384, 'tree'); blocked.create(214, 286, 'log'); blocked.create(214, 192, 'tree'); blocked.create(358, 192, 'tree'); player = this.physics.add.sprite(480, 480, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider(player, blocked); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3}), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }) this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); } function update () { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true) } else if (cursors.up.isDown) { player.setVelocityY(-160); player.anims.play('right', true) } else if (cursors.down.isDown) { player.setVelocityY(160); player.anims.play('left', true) } else{ player.setVelocityX(0); player.setVelocityY(0); player.anims.play('turn'); } } </script> </body> </html> I'm also having a few issues adapting what I see in these tutorials around using a server to keep track of my player's position and report back locations. Some examples start with something as basic as referencing socket.io in my code as a source. In all the tutorials I can find they say to use this line of code in my index.html file: <script src="/socket.io/socket.io.js"></script> However this doesn't work, as you can see at the top of my game file above, I had to reference the full file path, going in through the node_modules folder and finding the socket.io.js file. Am I doing something wrong? Or am I supposed to reference the full file path and the tutorial is not accurate? Finally when trying to implement some of the code in the tutorials into the game file itself to tell the game to ask the server when a new client is connected, I get an error saying the code is invalid. I'm not sure if this is because I am putting the code in the incorrect place, or if it's because the code doesn't work in Phaser3 the way it did in version 2. Client.askNewPlayer(); The tutorial says to put this "at the end of game.create()" however because I don't have game states, I have nothing I can find as the equivalent. Just for the sake of testing it out, I tried placing this code inside the "function create ()" of my game if only because of the word create, and then also in the "function update ()" of my game because I figured this is where the game is always looping and checking for updates. But both gave me errors saying that "client is not defined" Again I'm sure you can probably tell this is my first time doing this sort of thing with real code, I've been messing around with RPG maker before this, but I really think I can get the hang of it if I can just get a few pointers or tips to get me going in the right direction! Any help or advice would be greatly appreciated!

Hello, I have a script due tomorrow morning, and have asked a question on a seperate post which is the ideal solution. The only other solution I could show have for tomorrow is to start the renderloop, load an OBJ, and then dispose of the scene - but then the scene needs to begin loading new meshes after it detects a new path and mesh in an array, and render without any client interaction. I can't figure out how to load several scenes - lets say 5 scenes - and load scene 1 for 30 seconds, destroy scene one, on destroy scene two loads on it's own, and this process continues until scene 5 is loaded and then disposed.

Hey guys, Just wanted to show my little in-development game engine. I decided to create my own engine as Panda.js didn't got any updates for several months. The goal here is to have a lightweight but powerfull game engine with awesome performances, whatever the device is (ie. Android) while being able to use Canvas+ (so, no DOM is used as Canvas+ doesn't supports DOM). What I've already done: Game config via `config.js` file ; Game scenes ; Ultra-customizable Sprite class that allows to modify everything drawing related ; Mouse events support (click, move, hover, down, release, out) and Drag & Drop support ; Built-in physics engine (made on my own, so a bit hacky/buggy but I plan to fix these issues :p) ; Only redraw what needs to by using a simple variable on every scene children: `needsUpdate`. What I want to do: Implement built-in networking to allow multiplayer games/apps ; Implement UI elements like Text, Buttons, Scrollable panels, Inputs to allow devs to make real Canvas UI ; Fix the overall bugs ; Add some helper classes ; Maybe implement SAT.js for collisions detection/solving ; And finally, build the game I started this engine for :). So this is an "ambitious" project that aims to allow doing things other engines wasn't able to offer me. Source code (Gitlab): https://gitlab.com/skyzohkey/PwassonEngine Demonstration: https://skyzohkey.gitlab.io/PwassonEngine Feel free to contribute to the code, open issues if you find them, create issues for suggestions too. Or simply leave a message here. Thanks for reading, I hope I'll be able to drive this project the right way.

Hi Folks, iI try to syncronize my 3D Animation with a music track. How I can do it? Thanx

With the first days of July! Please tell me the answers to a couple of things: 1. How to make so that when you double-click on any player object transferred from one stage to the stage 2? In other words - how to do that at an event on the gaming facility dblclick a change of scene. 2. How to do that when you click the player's character was directed to the object (the gate) and in their achievement of a change of scene (location).

Hello, how is it going? I have trouble understanding how game states works in Phaser, I've searched the forum and I found a few posts about this, but I don't understand exactly how should I use it, I found it a bit confusing. ^^; I know the basics, but I don't know how to implement it. I mean, I have two files in HTML format, one is the menu and the other one the game itself. Should I write all the code in one document or just leave it like is right now? Thank you so much in advance. Regards, Daniel.