Search the Community

Showing results for tags 'phaser'.

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
    • 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 3,151 results

  1. p2js prismatic springs

    Hi. Prismatic and Spring joints in p2js seem pretty straightforward. I was wondering why using constant rest length, stiffness and damping for a spring would change its behavior when a body's local anchor is changed. Fiddle: (phaser/p2js template from inkfood) From the fiddle, all the springs use share the same parameters except the local anchor of body A. Why do the springs behave differently? :/
  2. Hey guys, I had related topics before, but let me give a short summary: I am working on a time-based game, roughly similar to guitar hero. For that, I use deltaTime and PhysicsElapsed like this: update: function() { deltaTime = (this.time.elapsedMS)/(1000/60) this.time.physicsElapsed = this.time.elapsedMS*0.001; } So if the framerate drops to 30, deltaTime = 2 and physicsElapsed will also be double the value it is normally (1/60 as in 1/desiredFPS). It always seemed to work perfectly fine. Sure, it leads to a loss of accuracy whith lower framerates or bigger lags, but that's another story. I've tested it with 30fps (forced with a screen capture tool) and it was running at the same speed as it would with 60, so everything is alright. Just yesterday, I found out that when played on a 144hz monitor, the game runs in slow motion. I've checked all the vars above, and I could not find a problem. The game runs at 144 fps, deltaTime is around 0.42 as it should be and physicsElapsed naturally also has the value I expected (0.006999999999999999 for example). But all the motions are at half speed. Or more like 0.42x speed. The spawns, which are also tied to the game time are correct, so no problems there, but everything just moves too slow. The big mistery is: if somebody has a 30hz display, will it run at double speed which wouldn't be playable at all? I just can't think of a reason why this would happen as everything works fine with software caused differences in fps and especially since all the values seem to be in check. Maybe I am overlooking something? Maybe the hardware has some other effect that takes place outside of my code logic? I read that there are issues with other refresh rates, but I was under the impression my code would take care of that. Please help D:
  3. Animating other players

    Hello, I am creating realtime game using node + At the moment I'm trying to figure out how could I animate other players movements. This is how I put other players on map: socket.on('showPlayers', (data) => { for (var key in data.players) { if(key != players[key] = game.add.sprite(data.players[key].position.x, data.players[key].position.y, 'player', 1); } }); And Updating their positions: socket.on('updatePlayers', (data) => { players[].position = data.position; }); To animate my own player I am simply using: // Player player = game.add.sprite(48, 48, 'player', 1); player.animations.add('left', [3,5], 5, true); player.animations.add('right', [6,8], 5, true); player.animations.add('up', [9,11], 5, true); player.animations.add('down', [0,2], 5, true); Best Regards!
  4. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars =; // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants; diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer =, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel =, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  5. Flappy Fish

    My version of the flappy series. You can collect coins and later buy fishes with them. I had fun drawing these fellows. Game made with Phaser Play game: Flappy Fish
  6. Hi Guys, I'm having some issues with an emitter that I am trying to attach to a sprite using the addChild method. The emitter should be a child of the player's arm so that it moves and rotates correctly. When I add the emitter to the game without being added as a child it works fine. As soon as I add it as a child to the arm it disappears from the game world. I've played around with a bunch of different coordinates in case it was being moved slightly off screen but I've come to the conclusion that something is going wrong here. I've also run tests in a new state with just a single sprite and an emitter and as soon as I add the emitter asChild of the sprite it is gone. I'm probably missing the thing that is going wrong here, so any help would be appreciated. I'll put my code snippet below if that helps at all create: function() { = "#000"; this.playerContainer =, 600, null); this.player =, 0, 'player'); this.player.scale.setTo(0.75); this.backArm =, -180, 'backArm'); this.backArm.scale.setTo(0.75); this.frontArm =, -180, 'frontArm'); this.frontArm.scale.setTo(0.75); this.emitter =, 0, 5000); this.emitter.makeParticles('whiteParticle'); this.emitter.minParticleSpeed.setTo(200, 0); this.emitter.maxParticleSpeed.setTo(2000, 0); this.emitter.gravity = 200; this.emitter.lifespan = 0; this.playerContainer.addChild(this.backArm); this.playerContainer.addChild(this.player); this.playerContainer.addChild(this.frontArm); this.frontArm.addChild(this.emitter);;; this.playerContainer.body.collideWorldBounds = true; this.player.anchor.setTo(0.5); this.frontArm.anchor.setTo(0.4866, 0.2925); this.backArm.anchor.setTo(0.4866, 0.2925); },
  7. I'm working on puzzle game about a professor trapped in hamster's body Current prototype is hosted on gamejolt Please try it and give me a feedback on the following issues: - Are controls responsive and intuitive? Whether it could be a good idea to use keyboard controls for desktop version? - Is gameplay boring? - Are puzzles tough? You can follow development process on gamejolt devlog Or in my twitter @kpded
  8. [Phaser] Neon Dunk is here

    Hello! I'm glad to present you my new game Neon Dunk: Both exclusive and non-exclusive licenses are available for now.
  9. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function).
  10. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function). Note: I accidentally posted my question twice please ignore the duplicate. ( I couldn't find a delete button for my duplicate post)
  11. Hi Phaser users, I've been using Phaser for about three weeks and have hit my first wall. I'm making a 2d fighting game and while I have basic attacks working, Phaser apparently kills the sprite on collision with an attack. I'm wanting to set a fixed amount of health so that instead of instantly killing the sprite, the game subtracts the health from the sprite. My sprite names are "player" and "player2", and when I went to the Chrome console, I typed in player and noticed that the player object inherits from Phaser.Sprite. I saw there were already properties in the Phaser.Sprite object that I think would be useful, such as health and damage. I saw in the API they're listed under the Phaser.Component section, but I didn't see any example under the Examples tag that used them. How would I go about using these properties with my "player" and "player2" sprites? Any help you can provide is greatly appreciated.
  12. Camera problem - following player

    Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player this is how it looks following the player... (the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this. here's my code : scenes.scene3 = function(){}; //Player speed var link, vel = 150; //Map/Level var map; //Tiled Layers var floor, water,walls; //Object Tiled Layers var rocks var bushes1, bushes2, bushes3, bushes4; scenes.scene3.prototype = { preload: function (){ game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png'); music ='openWorld'); music.addMarker('openWorld', 0, 16, true); game.renderer.resize( 1216/2, 800/2); }, create: function (){ //Game itself,0, 1216, 800); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level_01'); map.addTilesetImage('tiles'); floor = map.createLayer('ground'); walls = map.createLayer('walls'); water = map.createLayer('water'); map.setCollisionBetween(0, 100, true, 'walls'); map.setCollisionBetween(0, 100, true, 'water'); //Objects layer related rocks = game.add.physicsGroup(); map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks); rocks.forEach(function(rocks){rocks.body.immovable = true;}); bushes = game.add.physicsGroup(); map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes); map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes); map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes); map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes); bushes.forEach(function(bushes){bushes.body.immovable = true;}); //'openWorld', 0,1,true); // Player link = game.add.sprite((centerX-500), 100, 'LinkMovement'); link.scale.setTo(0.25, 0.25); link.animations.add('walkHorizontalRight', [6,7,8]); link.animations.add('walkHorizontalLeft', [9,10,11]); link.animations.add('walkVerticalDown', [0,1,2]); link.animations.add('walkVerticalUp', [3,4,5]); game.physics.enable(link); link.body.collideWorldBounds=true; //Life bar life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar'); life.scale.setTo(0.15, 0.15); life.animations.add('fullHP', [0]); life.animations.add('twoHP', [1]); life.animations.add('oneHP', [2]); life.animations.add('Dead', [3]); cursors = game.input.keyboard.createCursorKeys(); var b1 = game.add.button(900,300, 'buttonFire', function() {fire();}); b1.scale.setTo(0.25,0.25); = (608,400);; }, update: function (){ game.physics.arcade.collide(link, walls); game.physics.arcade.collide(link, water); game.physics.arcade.collide(link, rocks); game.physics.arcade.collide(link, bushes); if(cursors.up.isDown){ link.body.velocity.y = -vel;'walkVerticalUp', 9, true); } else if(cursors.down.isDown){ link.body.velocity.y = vel;'walkVerticalDown', 9, true); } else{ link.body.velocity.y = 0; link.animations.stop('walkVerticalUp'); link.animations.stop('walkVerticalDown'); } if(cursors.left.isDown){ link.body.velocity.x = -vel;'walkHorizontalLeft', 9, true); } else if(cursors.right.isDown){ link.body.velocity.x = vel;'walkHorizontalRight', 9, true); } else{ link.body.velocity.x = 0; link.animations.stop('walkHorizontalRight'); link.animations.stop('walkHorizontalLeft'); } }, fire: function(){ console.log('firing') var bullet = bullets.getFirstDead(); bullet.reset(link.x, link.y); }, drawHealthBar: function(){ if (hitPoints === 3) {'fullHP'); } else if (hitPoints === 2) {'twoHP'); } else if (hitPoints === 1) {'oneHP'); } else if (hitPoints === 0) {'Dead'); } } };
  13. [Phaser] The Last Battery

    Hi! I Just released my new game called "The Last Battery"! You can play it for free at and try to survive until your battery is running out! Also, my other games are at Thanks!
  14. Hi guys, I'm new to the framework but I googled around abit and couldn't find an answer to this: I’m making a tile mapped game where the player needs to make their way through a tiled level by moving upwards. To achieve this the camera follows the player around a rectangular world My question is about creating 2 background TileSprites that scroll with the camera BUT not at the same speed as the camera to achieve the effect of having a background with TileSprite 1 in the distance and TileSprite 2 in the far distance Maybe something like an event handler that works like this: onCameraPositionChange(yDistance){ backgroundTileSprite1.scrollY -= yDistance/2 backgroundTileSprite2.scrollY -= yDistance/4 } Right now my setup is like this: TileSprite 1 -> moves with the camera TileSprite 2 -> stays still in background using TileSprite.fixedToCamera It looks okay right now, but I think this would convey a more convincing sense of distance. Cheers and thank you!
  15. Solitaire Fortune

    One small fun solitaire game. Made with my favorite Phaser Play Game: Solitaire Fortune Get Solitaire Fortune for Android

    Hi Everyone, - original HTML5 multiplayer game. Select your team Counter-terrorists or Terrorists and have fun! Play Made with: Phaser + NodeJS server framework - custom version of Colyseus scheduled to add: 1) Multi-language support 2) May be bots? 3) Mobile device support. 4) More emotions. Any suggestion and feedback are welcome.
  17. Hi All, I have been creating a mobile game using phaser and packaging it using cordova. I need a good video ad plugin for my game. Tried ADMOB, there was a Huge FPS drop while pre-loading the video ad. ( Kindly Suggest me a Good One
  18. How to make a phaser game with a lobby

    I want to design a multiplayer phaser game that has a lobby, you can review your information or talk with friends via chat while you are waiting until you are matched with another player (is a fight game, pokemon style). -How do I get this? should I develop everything like a normal project and then start the game when you find a match? -Should I start the game instance since the beginning, and the lobby would be a state, the fight another state and then back to the lobby? I'm very new to this but I'm excited to start developing, I'll appreciate any guidance, thanks
  19. Phaser game slow on 4k

    Hi, general question about an issue I have encountered with a phaser.js game I have built which is running very slowly on a 4k screen only. Just wondering if anyone has encountered issues with 4k screens before? i'm sure it is something i have done, but just wondering the most likely place to look? Thank you
  20. I'm working on a game that switches through various states for the menu, main game and game-over screens. for the most part I'm happy for antialiasing to be used on my sprites and particularly my text, as forcing a crisp pixelated render on the whole game can lead to some of the text & sprites looking a little janky. I'm instantiating my game pretty simply: ` = new Phaser.Game(800, 600, Phaser.AUTO, 'game');` I'm not setting any scale modes or special rendering prior to playing the game. In the Game Over state I'm loading a small pixel image I created, and adding some bitmapText to the top of the screen. I'm scaling the pixel image up by a factor of 6, and the bitmap text is set at 32px. On both of these, I set `smoothed = false`, because I wanted both the text and the sprite to appear pixel-perfect, and because I use FF by default (which uses WebGL by default), it will usually smooth out sprites unless explicitly told otherwise. It looks like this: var gameOverText =, 0, 'FFF', 'GAME OVER', 32); gameOverText.anchor.setTo(0.5); gameOverText.x = Math.floor( / 2); gameOverText.smoothed = false; var skull =, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.anchor.setTo(0.5); skull.x = Math.floor( / 2); skull.y = Math.floor( / 2); skull.smoothed = false; Here's where it gets weird: if I jump straight from my BootState (which is always loaded before everything else) to my GameOver state, it works perfectly - text and sprite look nice and crisp. However, if I actually go through the game (so, go from BootState to GameState to GameOver state), it doesn't work at all - text is blurry and the sprite looks awful. I've managed to narrow it down to the point at which I start adding sprites: // this.levelData is a previously-loaded JSON map this.parallax =; this.levelData.parallax.clips.forEach(function(element) { var parallax = this.parallax.create(element.x, element.y, 'atlas-sprite',; }, this); (it's worth noting that these loops create sprites way outside of the camera's viewport, as the game is scrolling) If I add `this.state.start('GameOverState')` and return out of the function prior to this loop, my text & sprite in the GameOver state remain perfectly pixelated; if I move `this.state.start('GameOverState')` to after that first loop (or at any point after this), it's as if all of the smoothing arguments are ignored. I've tried a LOT of different methods to try to fix this, but nothing is working. I figured it might be something to do with the world bounds, or the camera position, or the game antialiasing, but nothing seems to work. Any ideas on why this might be happening and how to get around it?
  21. Ignore missing images

    I am making a level viewer for a game using phaser, I loop through a large array representing the game grid and take the item names from the game save and place them in my phaser world in a loop. I take whatever the game name for the item is and map it to a phaser image, my issue is that I don't want to map every possible item type to an image, if phaser askes for an image that i have not loaded, can I just ignore it without the green texture being plastered over it?
  22. Hello guys, I wanted to know how to use the phaser in visual studio 2017? I know you have this tutorial: Only that from 2013 until 2017 much has changed, If someone could update the tutorial, it would help a lot. Also if someone can teach you how to add syntaxes to the autocomplete, it would help. The syntaxes in auto completer are missing a lot, especially for those who are starting!!
  23. Hi, We're having a nightmare trying to incorporate Spriter into our project. It seems that the Spriter library doesn't like sprites living in subfolders within the project. So, as a test, we placed some frames in the project root folder, and made an animation from them ( Here we get: Cannot set frameName: ...with each animation frame displayed. Nothing animates. However, if I change line 3575 in spriter.js to this: this._sprite.frameName = + '.png'; by adding the "+ '.png' " part, it works. ( If we try the modified library with a project containing frames within folders, we get the same problem. I think it stems from Spriter incorporating the folder path into the frame name, but referencing it using only the filename. Obviously, placing hundreds if not thousands of sprite animation frames in the root folder isn't helpful, and will take many days to re-animate everything. Any help is greatfully received and appreciated. Mark & Stoo
  24. Enqueue tweens?

    I have sprite that is animated on a board, let's say a 4x4 grid. If the user presses a button, it will move either one one square up/down or left/right. If the user presses the button multiple times, I want for it to step through the movements but as it is right now the sprite will just move diagonally to the final state. Is there a way to enqueue tweens so that each step runs asynchronously? Here's what the transition from one state to another looks like now, where state is the current state number and the location arrays hold the points at every state: game.add.tween(sprite).to({ x: locationX[state], y: locationY[state]}, 500, Phaser.Easing.Linear.None, true);
  25. Move camera without bounds

    So this seems like it should be fairly simple, I want the camera to always follow the player even if they go outside the bounds of the map. How would I do that?