• Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by BdR

  1. Thanks yes that was the problem. The "pack:{files[] }" array has to be passed into the constructor.
  2. I'm also struggling with this payload concept. Looking at this example it seems to me that the "pack" property could be used to load assets before the .preload() function is called. So this would be ideal for loading the images for a loading bar or a "please wait while loading" image. However, when I try it like in the code below the image "nowloading.png" is not loaded. I mean when I try to display it in the .preload() function it just shows the green missing-graphic square. EDIT: Fixed the code below to work, the "pack:{files[]}" part has to be passed into the constructor. var Preloader = new Phaser.Class({ Extends: Phaser.Scene, initialize: function Preloader () {, { key: 'preloader', pack: { files: [ { type: 'image', key: 'nowloading', url: 'img/nowloading.png' } ] } }); }, preload: function () { // nowloading image is available in preload :) so like a pre-preloaded image this.add.sprite(400, 300, "nowloading"); // load all assets'coin', ['snd/coin.mp3', 'snd/coin.ogg']);'bomb', ['snd/expl.mp3', 'snd/expl.ogg']); //etc. }, create: function () { // start the game this.scene.start('mainmenu'); } }); // ..etc. var config = { type: Phaser.AUTO, width: 800, height: 600, backgroundColor: '#006060', parent: 'phaser-example' scene: [ Preloader, MainMenu, TutorScene, GameScene ] }; var game = new Phaser.Game(config);
  3. I've created a Phaser3 game template example, it's available on GitHub here: GitHub: Play demo: Phaser3 example game This is a Phaser v3 example game template, it's intended to show the structure of a typical Phaser3 game and using some of the key features of Phaser. It shows how to use separate scenes, a simple but effective loading bar, sprite atlas loading, sprite animation, buttons similar to Phaser v2 and more. It's a bare minimum game, a starting point of sorts. I hope it's useful for someone just starting out with Phaser development. Have fun with it let me know if you have any improvements. (Btw the only thing still missing is scaling or a scale manager, I'll add that at a later time)
  4. I'm working on a Phaser3 game with mulitple scenes, a mainmenu, a instructions scene and a maingame scene for the actual game. During the game I need an animation, so in the preload of the gamescene I do this preload: function () { // create coin animation this.anims.create({ key: 'cointurn', frames: [ { key: 'sprites', frame: 'coin1' }, { key: 'sprites', frame: 'coin2' }, { key: 'sprites', frame: 'coin3' }, { key: 'sprites', frame: 'coin4' }, { key: 'sprites', frame: 'coin5' }, { key: 'sprites', frame: 'coin6' }, { key: 'sprites', frame: 'coin7' }, { key: 'sprites', frame: 'coin8' } ], frameRate: 15, repeat: -1 // endless }); }, Ok this all works fine and the animation shows. Then, when the game is over it goes back to the menuscene to allow player to select another level, and then start the gamescene again to play another level. However, when I restart the gamescene again I get this warning; Evidently the preload of the gamescene is fired again, and everything loaded and created in that .preload() method is done again. So my question is: Where or when should I add the animations that only have to create once? So animations (and maybe other things?) that will be used throughout the entire session of the game.
  5. In Phaser 3 is it possible to create a group and add multiple sprites at random positions? I've tried looking at the documentation here and the example here but couldn't figure out how to do it. This is my code so far, it does add one coin at a random position each time I run it, butit only seems to add one single coin. // add random coins var coins =; coins.createMultiple( { key: 'sprites', frame: 'coin1', setXY: { x: Phaser.Math.RND.between(0, 800), y: Phaser.Math.RND.between(0, 600) }, frameQuantity: 2, repeat: 5 }); Coming from Phaser v2, I've just started working with Phaser 3 and it takes some time to get to understand the differences.
  6. Thanks @NoxBrutalis I was focusing to much on the .createMultiple() method. Simply creating the coins in a loop and then adding them to the group worked for me this.gameitems =; for (var i = 0; i < 20; i++) { var x = Phaser.Math.RND.between(0, 800); var y = Phaser.Math.RND.between(0, 600); var newobj = this.gameitems.create(x, y, 'sprites', 'coin1'); } Btw is there a way to get the width and height values (800 and 600) from the current scene or game instead of using hardcoded numbers for the RND function?
  7. I'm working on a Phaser 3 game and all my sprites are in a spriteatlas. All the examples about particles and emitters I could find on the forum (like here and here) are using a single image-key as parameter for the particles. But is it also possible to use a spriteatlas as particles? This is my code below, but it doesn't seem to work. There are no errors but nothing appears on the screen. code removed And I have another questions actually: When I'm stuck with a Phaser3 problem like this, where is the best place to look up the info or documentation? So for example I don't know how to use `scene.add.particles`, where can I find the documentation about this constructor? I've looked here, but AFAIK the info I'm looking for is not there. I found the v2 documentation very clear and legible, and I'm struggling a bit with this new v3 documentation. Is it there or am I over looking in the wrong place?
  8. I've found an example with frames and the code below works for me btw somehow the "blendMode: ADD" seem to sometimes make the particles invisible, for example it does work in this example but it doesn't in this example. preload: function () { // sprites this.load.atlas('sprites', 'img/spritearray.png', 'img/spritearray.json'); }, // bomb explosion particles var expl = this.add.particles('sprites'); this.bombexpl = expl.createEmitter({ frame: [ 'bombexpl1', 'bombexpl2', 'bombexpl3' ], // random frames quantity: 10, scale: { start: 1.0, end: 0 }, // particles shrink speed: { min: -1000, max: 1000 }, // speed is variable lifespan: 800, on: false }); // set emitter to position and explode this.bombexpl.setPosition(100, 100); this.bombexpl.explode(); So you can start the emitter with .explode() to release a "quantity" amount of particles at once OR you can do .start() and it will continuously emit "quantity" amount of particles for every "frequency" milliseconds. But I have another question, is it possible to use .start() for a specific amount of times? So emit X particles every Y ms, but stop after let's say 5 times. So can you make the emitter do it 5 times and then automatically stop?
  9. In the distribution folder on GitHub there are 3 flavours of the Phaser3 library. phaser (~4.46 MB) phaser-arcade-physics 3.95 MB) phaser-core (~2.19 MB) (and also minified versions) I guess phaser-arcade-physics includes support for arcade-physics, but then why is Phaser actually bigger? And what is the difference between Phaser and Phaser-core? I've looked in the FAQ, wiki and download page but couldn't find aything on it.
  10. I've just started Phaser 3 development and I noticed there are no buttons, which I found a little odd. Buttons are a very important part of the interactivity of a game. In Phaser 2 I used them all the time for creating menus, select a level, restart level, quit game etc. But ok I understand that you can use a sprite and add .setInteractive() so it will act like a button. The button should change color when on mouse-over and another color when it is pressed down. I'm using a sprite atlas with the different frames for the button faces, and I've tried using the pointerover and pointerout and pointerdown events to change the of the sprite but this doesn't seem to work. preload: function () { this.load.multiatlas('sprites', 'img/sprite_demo.json', 'img'); }, create: function () { // back Button this.btnback = this.add.sprite(400, 480, 'sprites', 'btn_back').setInteractive(); this.btnback.on('pointerover', function (ptr, x, y) { = 'btn_back_hl'} ); this.btnback.on('pointerout', function (ptr) { = 'btn_back'} ); this.btnback.on('pointerdown', function(event){ = 'btn_back_down'; this.scene.start('mainmenu'); }); }, Changing doesn't seem to do anything, it stays the same frame as when the sprite was created, no interactivity. So how can I make buttons work in Phaser 3?
  11. Thanks, that works. I was able to create a button similar to how it works in Phaser v2 Btw will the `Button` be added to Phaser3 in some shape or form at a later time?
  12. Wait what, no buttons? Will they be added at a later time?
  13. BdR

    Is it possible to debug-display sprite?

    If I may tag along with a similar question.. In Phaser 3 is it possible do display debug text in the scene, similar to game.debug.text() in Phaser v2?
  14. BdR

    How make Virtual button in Phaser 3?

    Instead of putting the player move/animate logic inside the update() function, I think it's better to abstract it into separate functions. This makes the code easier to maintain but also makes it easier to support different input methods, like both virtual touch buttons and actual keyboard input. So something like this // virtual buttons input, to move and jump this.leftBtn.on('pointerdown', doGoLeft); this.rightBtn.on('pointerdown', doGoRight); this.jumpBtn.on('pointerdown', doJump); // virtual buttons input, release to stop moving this.leftBtn.on('pointerout', doStop); this.rightBtn.on('pointerout', doStop); function update () { // keyboard input if (cursors.left.isDown) { this.doGoLeft(); } else if (cursors.right.isDown ) { this.doGoRight(); } else { this.doStop(); } if (cursors.up.isDown) { this.doJump(); } } function doGoLeft() { player.setVelocityX(-200);'left', true); } function doGoRight() { player.setVelocityX(200);'right', true); } function doStop() { player.setVelocityX(0);'turn'); } function doJump() { if (player.body.touching.down) { player.setVelocityY(-530); } }
  15. BdR

    [Construct] Stoppage Line

    Nice game Although I think it would also work if the player could just draw lines at their leisure. So I mean instead of a constantly moving snake-like mechanism jsut draw lines like in mspaint.
  16. BdR

    Putz Puzzle

    Nice puzzle game. I like the minimal design One thing I didn't quite get though, was that when you tap a green circle it turns blue, but when you tap is again it turns green again. I only much later understand that actually the level resets, but for a first time player this is not obvious. Maybe the dots should pulse animate when they blow up or change color to make this clear visually (so tween to slightly bigger and fade out). Also, on level 10 there is some sort of bug. When you tap the center blue dot so you get green-green-red-red horizonally, and then tap the top-right most red dot. A chain reaction starts which doesn't remove all dots, but then the "next level" icon appears anyway.
  17. I've been working on my LCDGame.js library some more, and I've added an info pop-up and a highscore list. The actual game is rendered in a canvas and the buttons, infobox and highscore list are DIV elements on top of that canvas. The DOM tree is added at run-time when the Game object in the library starts. I don't know that much about layout and CSS stuff, so my questions are: any tips on scaling the canvas in real-time (so when window resizes)? any tips on scaling the info and highscore DIVs? (without using additional libraries) general improvements any suggestions on making it look prettier are welcome See github and specifically the layout_tester.html here
  18. Cross post I've just updated the lcdgame.js library, see github page: Mario Bros and Highway are playable only on pc and laptop, tablet/mobile support not yet available unfortunately. edit: Sea Ranger is now also playable
  19. I've been working on my LCDGame.js library some more, I've added touch support although it doesn't always work on phones and tablets. Also, I've added menu buttons, an info pop-up and a highscore list. It's an online highscores list, so try the games and see if you can get your name on the list.😃👍
  20. Cool game, it's like an avoid-em-up Don't know why but it reminds me a bit of that old Impossible Mission II game. As for improvements, it is is a bit confusing that the hub world/level select is exactly the same as the actual levels (ok except without enemies). For this type of game I would prefer just a simple level select screen that shows how many levels there are and how many you completed. Another thing, when you have completed the first 2 hubs and then reload the page it starts you in the first hub again, and you have to walk all the way to the last hub where there are uncompleted levels. So I would change the hub "levels" to more structured and less maze-like so they're easier to navigate. Also, the texts on the doors are way too small to read.
  21. I've been working on Impossible Snake 2 for a while now and at this point I feel it's finished. You can play a 9 level preview demo in the link below. Impossible Snake 2 demo It is the sequel to Impossible Snake and it's a one-button snake game. You control the snake with only a single tap to change its direction, each time you tap the snake will toggle between turning clockwise and counter-clockwise. So in a way the controls are similar to Flappy Bird. Eat all apples to open the exit, go through the exit to complete the level. There are bonus coins in difficult to reach spots to add an extra challenge. There are some new features compared to the first Impossible Snake: Go through the exit to complete a level Collect bonus coins for an extra challenge Moving spark enemies, avoid them or you'll get electrocuted Laser beams, some can be switched on and off 27 levels + 9 bonus levels 3 different background themes Some sound & graphics tweaks Btw looking back I don't know why I didn't include screen shake in the previous game, as it's simply built into Phaser. It was just adding one line of code but it gives that much more *oomph* when you hit a wall. 😆 Anyway let me know what you think of the game.
  22. BdR

    I need help closing my score in a Pong game

    What exactly is not working in your current program? I don't think you need to check the win-condition in the update() function. If you do it in the update() then it will be checked for every frame, you only need to check if there is a winner on the moment that a point is scored. I would add an extra variable that remembers if the game is still in progress or if it's gameover and there is a winner. See the "iswinner" variable in code below. /*global Phaser,*/ var clavier, Joueur2, Joueur1, Balle, iswinner, texte //etc. var etat = { //.. create: function () { iswinner = 0; // 0=no winner, 1=player 1 wins, 2=player 2 wins this.winimage =, 100, "winimage"); this.winimage.visible = false; //etc. }, update: function () { //.. if (iswinner == 0) { if (Balle.body.blocked.right) { Point1 += 1;"Point1!"); this.checkWinner(1); } else if (Balle.body.blocked.left) { Point2 += 1;"Point2!"); this.checkWinner(2); } else if //.. etc. } }, checkWinner: function (plr) { if (Point1 >= 2 || Point2 >= 2) { // remember which winner iswinner = (Point1 >= 2 ? 1 : 2); // 1 or 2 // set text Balle.body.velocity.setTo(0, 0); texte.text = 'Game Over! Player ' + iswinner + ' wins!'; texte.visible = true; this.winimage.visible = true; } else { // continue game, reset ball Balle.x = 240; // center Balle.body.velocity.setTo(400, 450); } }
  23. BdR

    Dismemberment function, any advices ?

    Not advice but a question, why do you need 6 bitmaps? Can't it just be 6 sprites? That's probably less taxing on performance.
  24. I'm a bit confused about loading and playing sound effects. My game is setup in different states, first the Preloader state makes sure all images and sounds are loaded. The GameState is the main game, this state is re-started for each next level. There are different levels but the state is the same, it just changes a _levelIndex variable and uses the same state. The GameState adds the needed audio to the game in the .create() function, and this create() function is called every time the GameState is started. See code below mygame.Preloader.prototype = { preload: function(){ this.loadingbar_bg = this.add.sprite(80, 512, "loadingbar_bg"); this.loadingbar_fill = this.add.sprite(80, 512, "loadingbar_fill"); this.load.setPreloadSprite(this.loadingbar_fill); // load sounds"button", ["snd/button.mp3", "snd/button.ogg"]);"punch", ["snd/punch.mp3", "snd/punch.ogg"]);"coin", ["snd/coin.mp3", "snd/coin.ogg"]); }, create: function() { this.state.start("MainGame"); }, }; mygame.GameState.prototype = { create: function() { this.stage.backgroundColor = "#f0f"; // etc. // sound effects this.sound1 ="button"); this.sound2 ="punch"); this.sound3 ="coin"); //etc. }, update: function() { if (hitFace); }, doNextLevel: function() {; this._levelIndex++; // next level this.state.start("MainGame"); // restart this state }, //etc. }; The problem is that when I play the punch sound a couple of times in a row, the console gives this warning: Phaser.Sound: Audio source already exists which Phaser raises in code here. This warning appears even when the GameState is started for the first time. So my questions are: 1) What does this message "Audio source already exists" mean ? Or should I ignore it? 2) if I want to use a sound in a state, do I have to re-add it every time the state is started and .create() is called ? 3) also somewhat related, if I want to use the same sound sample in multiple different States (menu, game, options etc.) do I have to it for each state?
  25. @onlycape The autoDecode is optional and defaults to true, so that is already the situation in my first post. I guess my quesion boils down to this: If my game state is like so: mygame.GameState.prototype = {  create: function() { // add sound effects this.sound1 ="button"); //etc. }, What happens when I do"button") in the .create() method? Specifically what will happen when the State is restarted like 50 times or more? Will Phaser load & reserve memory etc. 50 times for the same sample? Will this impact overall performance?