Search the Community

Showing results for tags 'scenes'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 10 results

  1. update vs render - frequency

    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?
  2. I've read through just about all of this guide ( 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?
  3. 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);
  4. Using in phaser3

    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, and Node.js And this one: How to create a multiplayer game with Phaser, Node, 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="//"></script> <script src="/node_modules/"></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);'left', true); } else if (cursors.right.isDown) { player.setVelocityX(160);'right', true) } else if (cursors.up.isDown) { player.setVelocityY(-160);'right', true) } else if (cursors.down.isDown) { player.setVelocityY(160);'left', true) } else{ player.setVelocityX(0); player.setVelocityY(0);'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 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="/"></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 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!
  5. 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 ( 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 (phaser.min.js:1) at (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 (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?
  6. 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.
  7. 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): Demonstration: 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.
  8. Syncronize Audio with Scenes

    Hi Folks, iI try to syncronize my 3D Animation with a music track. How I can do it? Thanx
  9. Changing scenes (locations)

    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).
  10. 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.