Search the Community

Showing results for tags 'phaser 3'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 94 results

  1. This is how far I got. I want the animation(dragon-attack) to complete when the player hits the dragon and then continue the 'dragon-fly' animation. What would be a solution? function preload() { this.load.spritesheet('dragon', 'assets/demon-idle.png', { frameWidth: 160, frameHeight: 144 }); this.load.spritesheet('dragon-attack', 'assets/demon-attack.png', { frameWidth: 240, frameHeight: 192 }); } function create() { dragon = this.physics.add.sprite(400, 300, 'dragon'); dragon.setBounce(0.4); dragon.setCollideWorldBounds(true); dragon.setDisplaySize(100, 100); this.anims.create({ key: 'dragon-attack', frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'dragon-fly', frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.physics.add.collider(player, dragon, meetsDragon, null, this); } function meetsDragon(player, dragon) { playerHealth -= 10;'dragon-attack', true); } thanks for your help!
  2. Trekin

    Phaser 3 Pinball mechanics

    Hello all! I'm new to Phaser and trying to create my first game using Phaser 3 and Matterjs. I'm trying to create a simple pinball game but I'm having some trouble with the flippers. I've started by trying to modify the Circular Body example (\physics\matterjs\circular body.js). I'm trying to use the ground like a singular flipper. The example has the ground/flipper set to static which I don't think is right for my purpose. I've looked at some phaser/p2 stuff and it looks like some people have made flippers by setting the mass to 9999, gravity to 0. Is this the best way to create a flipper or does Phaser 3/Matterjs have a different way of creating this effect? Thanks for your help!
  3. Hi everyone, I'm working on a javascript clone of superhexagon ( in order to learn to use Phaser 3. I was wondering what was the best way to generate the same shape multiple time with some rotation tweek and animate them. I need generate them, display them, once they display I need to be able to rotate them and scale them down. Once their scale <= 0 I need to hide and destroy them. I know I need to build a kind of Factory but I can't figure out how to do it with gameObj.add.arc Could you point a part of doc or source code I can dig in to find a solution? I created a pen here Thanks in advance ! Paul.
  4. veryeviltomato

    Free Atlas Packer for Phaser 3 users!

    I created a tool alongside Gammafp which could be useful for Phaser 3 users. Gammafp thought of how useful a free Atlas Packer would be for Phaser users. The tool can create atlas.json files from imported spritesheets and sprites. It was very recently developed so you could expect to run into some issues, please let us know! How to use: - You can import sprites or spritesheets depending of your resources. - You can add more sprites or spritesheets too if you missed any file or wish to combine animations. - Once the pictures are correctly displayed, you can click the save button. - This will download a .zip file containing both the sprite files and .JSON file set up. - Done! LINK FOR THE ONLINE TOOL Important: There's an animator section but it's far from complete, this section will be further developed depending on the reception and feedback of this tool! Gammafp programmed the tool and I made the art for most icons!
  5. My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here. My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo! var config = { type: Phaser.AUTO, width: 1000, height: 600, scene: { preload: preload, create: create, pack: { files: [ { type: 'image', key: 'loading', url: 'assets/laptop.png' } ] } } }; var game = new Phaser.Game(config); function preload () { loading = this.add.image(500, 300, 'loading'); var progress =; this.load.on('progress', function (value) { progress.clear(); progress.fillStyle(0xffffff, 1); progress.fillRect(300, 270, 800 * value, 60); }); this.load.on('complete', function () { progress.destroy(); loading.destroy(); }); //...load other files } .
  6. Hey Folks, I hope you can help. I am fairly new to Phaser 3 and am currently working on a platformer where my character can run, jump and collect collectibles. My game is modularised through WebPack everything else is plain JS along with the Phaser 3 framework. I am using Tiled where I export my levels as json files and the initial level loads perfectly with all collision tiles in place and working as expected. I've hit a road block with loading/starting new levels. I'll try and explain with my code to clarify. I've reduce the code significantly to make it easier to read. main.js: Entry file // Main.js import 'phaser'; import { Cave } from 'scenes/cave'; import { Playground } from 'scenes/playground'; var config = {...}, scene: [Cave,Playground] }; var game = new Phaser.Game(config); Cave.js. For the sake of conciseness, I've placed the this.scene.start in the update function so the new scene initialisation happens immediately. MapSetup function is further down. // Cave.js import 'phaser'; import MapSetup from 'modules/map-setup.js'; import CollectibleSetup from 'modules/collectible-setup.js'; const mapSetup = new MapSetup(); const collectibleSetup = new CollectibleSetup(); export class Cave extends Phaser.Scene { constructor () {super('Cave')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/cave/cave.json');// map made with Tiled in JSON format this.load.spritesheet('cave', 'assets/levels/cave/cave.png', {frameWidth: 64, frameHeight: 64});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'cave', 'world') =; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create update () { this.scene.start('Playground') } Playground.js // Playground.js export class Playground extends Phaser.Scene { constructor () {super('Playground')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/playground/map.json');// map made with Tiled in JSON format this.load.spritesheet('tiles', 'assets/levels/playground/tiles.png', {frameWidth: 70, frameHeight: 70});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'tiles', 'World') =; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create } MapSetup.js. The issue occurs here when the PlayGround scene is initiated. import 'phaser'; export default class MapSetup { sceneMap (ctx, key, tileSetImage, dynamicLayer) { // Map var map = ctx.make.tilemap({key: key}); console.log('map',map) // tiles for the ground layer -` var groundTiles = map.addTilesetImage(tileSetImage); // create the ground layer - layers[i].name var groundLayer = map.createDynamicLayer(dynamicLayer, groundTiles, 0, 0); // the player will collide with this layer groundLayer.setCollisionByExclusion([-1]); // set the boundaries of our game world = groundLayer.width; = groundLayer.height; return {map:map, groundTiles:groundTiles, groundLayer:groundLayer} } } I'll try and explain the issue as I understand it. When Playground is initiated, the following error fires in the console and it's because the the groundTiles & groundLayer variables return null so the setCollisionByExclusion doesn't work. When I console.log the map variable that get's assigned in the sceneMap function it returns: The tileset name is still referencing the cave json object and not the playground one. I don't understand why that is. My understanding is that a scene is automatically stopped when a new scene is started and that each scene is it's own class so i'm a bit baffled as to why previous references are still in place. What am I missing? Any help would be much appreciated. Thanks, All Moe
  7. Hi All, To wrap gameobjects around the screen for asteroids clone, I have used arcade physics from asteroids movement.js example., 32); Do you know if I can find or develop a similar function that will work for matter physics? Something like..., 32);
  8. Splashsky

    Grid-based Movement?

    Hey guys! I'm new to Phaser development, to JavaScript as a whole, and to any graphical game development whatsoever. Physics and such elude me still. I've set up a simple tilemap and lil character that you can move around. The collisions and boundaries work fantastically. Buuuut, I need grid-based movement! Think Pokemon, and other JRPGs that move you along a grid and never diagonally. I can more or less snap to the grid right now. The grid is 32x32 (sprite is as well) and I currently work movement like this... function update(time, delta) { const speed = 175; const preVelocity = player.body.velocity.clone(); // stop all velocity from previous frame player.body.setVelocity(0); snapToGrid(player); // horizontal movement if (controls.left.isDown) { player.x -= 32; } else if (controls.right.isDown) { player.x += 32; } // vertical movement if (controls.up.isDown) { player.y -= 32; } else if (controls.down.isDown) { player.y += 32; } // ensure that a player doesn't move faster diagonally player.body.velocity.normalize().scale(speed); if (controls.left.isDown) {"walk-left", true); } else if (controls.right.isDown) {"walk-right", true); } else if (controls.up.isDown) {"walk-up", true); } else if (controls.down.isDown) {"walk-down", true); } else { player.anims.stop(); // if we were moving, pick and idle frame to use if (preVelocity.x < 0) player.setTexture("cAtlas", "left1"); else if (preVelocity.x > 0) player.setTexture("cAtlas", "right1"); else if (preVelocity.y < 0) player.setTexture("cAtlas", "up1"); else if (preVelocity.y > 0) player.setTexture("cAtlas", "down1"); } } But the character zooms around like a caffeine-loaded kid on crack. It also ignores collision with boundaries, though it was working before when I didn't implement incrementing x and y by 32. How would you go about implementing grid-based movement into a game, while honoring collisions?
  9. Hi! I’m new to Phaser 3 and I’m testing a lot of things to create a little platformer, right now I’m using Tiled, and I already did tiles that collide with the player, but I don’t know how to avoid colliding with the bottom part of these tiles. So I’m asking for help. Thanks.
  10. Hey All, I hope you can help me. I'm quite new to Phaser. I've looked all over google and couldn't find an answer to my question. I have an idea for a Tetris-like game. At the moment I'm learning the basics by setting up a single block to fall on the floor before another single block falls after it. The block falls from the air onto the ground just fine. The issue is: I simply want to have a collision call back happen once. I've simplified the code to make the question easier to read: function create () { this.physics.add.collider(block, ground, hitFloor, null, this); } function hitFloor () { console.log('floor hit'); } The block hits the floor and the callBack runs infinitely which makes sense because the block doesn't move and stays on the floor. I was considering setting a flag with a variable like `floorHit`. Something like: function hitFloor() { if (!floorHit) { console.log('do something') floorHit = true } } But I want to have multiple blocks fall and this won't work because the new block that gets created needs to have the `floorHit` variable set to false before it starts falling. What am I missing? Any help would be much appreciated. Thanks MHC
  11. I'm new to Phaser 3 and JS in general, so I apologize if I come off super noobish. I'm trying to wrap my head around animations and how to get specific data from an animation (like, frame number, image/frame displayed on pause) I have a sprite sheet that holds all the animations. Each of the six animations is only 2 frames. I have serious limitations in terms of size and how I pack the final "game" (I'm trying to meet facebook's playable ad requirements - a single html file - so I'm using the "assets as data uri" template as a starting point.) Below is how I am handling my animation (I feel as though it's wrong) I searched for examples of how to trigger the next animation when an animation is complete. function createGameObjects () { bg = this.add.image(512, 512, 'bg'); logo = this.add.image(512, 920, 'logo'); popUp = this.add.image(512, 460, 'popUp'); popUp.depth = -1; /* var data = this.cache.json.get('itemsData'); this.anims.fromJSON(data); */ let gearHelm = { key: 'helm', frames: this.anims.generateFrameNumbers('items', { frames: [1, 8, 8, 8, 8, 8, 8 ] }), frameRate: 12, repeat: -1 }; let gearTop = { key: 'top', frames: this.anims.generateFrameNumbers('items', { frames: [7, 11, 7, 7, 7, 7, 7] }), frameRate: 12, repeat: -1 }; let gearPants = { key: 'pants', frames: this.anims.generateFrameNumbers('items', { frames: [ 5, 5, 9, 5, 5, 5, 5] }), frameRate: 12, repeat: -1 }; let gearBoots = { key: 'boots', frames: this.anims.generateFrameNumbers('items', { frames: [0, 0, 0, 4, 0 ,0, 0] }), frameRate: 12, repeat: -1 }; let gearRing = { key: 'ring', frames: this.anims.generateFrameNumbers('items', { frames: [2, 2, 2, 2, 6, 2, 2] }), frameRate: 12, repeat: -1 }; let gearSword = { key: 'sword', frames: this.anims.generateFrameNumbers('items', { frames: [ 10, 10, 10, 10, 10, 3, 10] }), frameRate: 12, repeat: -1 }; this.anims.create(gearHelm); this.anims.create(gearTop); this.anims.create(gearBoots); this.anims.create(gearPants); this.anims.create(gearRing); this.anims.create(gearSword); // timed event to handle animation timedEvent = this.time.addEvent({ delay: 0, callback: onEvent, callbackScope: this, loop: false }); // log anim item console.log(gearSword); } // update function frameUpdateCallback (sprite, animation) { } // on event function onEvent () { this.add.sprite(512, 192, 'items').play('helm'); this.add.sprite(768, 320, 'items').play('top'); this.add.sprite(768, 576, 'items').play('pants'); this.add.sprite(512, 704, 'items').play('boots'); this.add.sprite(256, 576, 'items').play('ring'); this.add.sprite(256, 320, 'items').play('sword'); // pause on click / touch var _anims = this.anims; this.input.on('pointerup', function () { if (_anims.paused) { _anims.resumeAll(); animStopped = false; console.log(animStopped); popUp.depth = -1; bg.setAlpha(1); } else { _anims.pauseAll(); animStopped = true; console.log(animStopped); console.log(_anims.key); popUp.depth = 4; bg.setAlpha(0.5); } }); } I've also attached an animated gif to show what I am trying to achieve. Animation loops and continues until user clicks - then a popup shows. I would like to display the image of the animation frame within the popup box based on where it's paused at. So if I click and stop on item 6 - then display popup with item 6. Again excuse my noobish question which I'm sure is rather easy - I'm trying, and eager to learn. PS - I am coming from Construct :)~ Thanks in advance!
  12. EDIT Oct. 1st, 2018: EDIT Oct. 5th, 2018: A better way to create these fade-in transitions is to use: this.cameras.main.fadeIn() ------------------------------------------------------------------------------------------- Since Phaser 3.12.0 and 3.13.0 I have this weird error: This error / warning is not displayed in Phaser 3.11.0. With the exact same code, I just loaded an older Phaser version and no error / warning displayed whatsoever. I did some research online and apparently this warning is shown when you render a texture before it was fully loaded into the cache. However, this error is thrown when I create a graphics object - and not a sprite or image - as follows: let width = 288; let height = 480; let g ={ x: 0, y: 0 }); g.fillStyle('0x000000'. 1); g.fillRect(0, 0, width, height); Does anyone know if this is a bug in the newer Phaser 3 versions (as of today: V 3.12.0 and V 3.13.0) or is it linked to a new feature that I'm handling wrong? Thanks!
  13. I want to make a simple 2D game using Phaser 3, but I want it to be available on mobile and the web browser. What is the best way to scale my game and make it responsive? This game is a good example of a responsive canvas.
  14. I'm a newcomer to Phaser 3 and I'm having difficulty getting my user-defined classes to work with physics.add.overlap. I've defined a class Goal that extends Phaser.Physics.Arcade.Image. I've created two instances of this class and they appear in the game window as expected. They also respond to Tweening correctly. However, I haven't yet been able to detect an overlap between the two images with the physics engine. I've been trawling the Phaser 3 docs for hours, but I haven't had much luck. The only solution I've found is creating the goals with the physics.add.image method, but the entire point of this exercise for me was to utilize OOP. Any suggestions? const gameConfig = { parent: 'phaser-app', type: Phaser.CANVAS, width: 320, height: 320, physics: { default: 'arcade' }, scene: { preload: preload, create: create } } var game = new Phaser.Game(gameConfig); class Goal extends Phaser.Physics.Arcade.Image { constructor(scene, position) { super(scene, position.x, position.y, 'goal'); scene.children.add(this); } } function preload() { this.load.image('goal', 'assets/goal.png'); } function create() { var goal1 = new Goal(this, new Phaser.Geom.Point(160, 128)); var goal2 = new Goal(this, new Phaser.Geom.Point(32, 128)); this.physics.add.overlap(goal1, goal2, test); this.tweens.add({ targets: goal2, x: 224, y: 128, duration: 500, }); function test(goal1, goal2) { console.log('This works!'); } }
  15. Antriel

    3 Minute Adventure

    A short interactive story. Get equipment, go fight a dragon, talk with a princess. Epic adventure. Created using Phaser 3 and Haxe, with custom (and for now very simple) "narration engine story" language for writing the actual story in and compiling down to data the game uses to handle the interactions. Play the game here: You can put the game on your portal using this url. The game is also available for licensing.
  16. Hi, I'm having trouble with browsers blocking popups. I know the rule is that it needs to be in response to a user action. Is this a bug with phaser? this.input.on('pointerdown', (pointer, targets) => {'', '_blank'); }); Thanks
  17. Hello game developers, this is my first post on this forum, so let me introduce myself first. My name is Michael, I am 21 years old and located in Germany. I love programming and starting to get involved in game programming. I already build a little prototype for the game where you can move the main character in front of a background image: For this game development project, I gonna use JavaScript and the Phaser 3 framework for the first time. The type will be a 2D side-scroller. The story, animation, art and sound assets are not a problem, so I am only looking for someone who knows or is willing to learn JavaScript and the usage of Phaser 3. If you are interested PM me on this forum. Have fun, Michael
  18. Antriel

    Spot The Spot

    A small skill based game with infinite upgrades. Made in a week using Haxe and Phaser 3. Play the game here: You can put the game on your portal using this url. The game is also available for licensing.
  19. Play Link: Monster Clean-Up Can you fight monsters with a mop? Thanks to player feedback, I've invested all my time in creating this huge update: - New Monster Types - Boss Events - Different Weapons - In-Game Shop - Score System & Online Leaderboard! - Personal Kill Statistics - And more Gameplay You are the janitor entering a monster-infested building. How many monsters can you clear? Find out in Monster-Clean-Up! Clear floor by floor, collect power-ups, buy new weapons and stack up on dollars to save your progress! Check the leaderboard to compare your score with other fellow Janitors! The game works on all mobile devices (phones, tablets). Art & Design All the sprites in the game have been hand-drawn by me, which is a first. I would love to hear all your feedback regarding the art style as well as the overall gameplay! Game Link Thank you for checking it out Play Link: Monster Clean-Up
  20. makis

    Needing some tutorial!

    <script> this.input.keybord_F_key(‘isdown’,go); function go(){ this.add.anims({ targets: rocket, rocketPosition: { t:1, rocket.x: path.get.point.x, rocket.y:path.get.point.y, duration: 500 } }) } this.setColide(rocket, planet, blowUp); function blowUp(){ this.add.anims({ targets: planet, frames: {begins:1,ends:6}, frameRate: 20 }) } </script> I have to say that beeing a newbie on Phaser, I dont know if it is the right tool for little fun animations. If so can I have some help, please. Or, have you any idea for a different tool for projects like that? I know many things about html, css, javascript, d3.js, gsap.js, jquery.js. I have a tilesheet that begins with a planet and ends with the explosion of the planet. I have the rocket. When I push the F (fire) key it moves on path and destroys the planet. It explodes on it! Can I have any help in order to speak Phasers 3 language so I can give flesh and bones to my project? You have to keep in minde the unfortunate scarcity of Phaser 3 tutorials that could help people, thirsty for coding, like us. Again if you know some other tool for little animations, can you tell me what is that? I would be grateful if you do ...
  21. I have problems writing a multiplayer game with phaser 3 and I’ll explain it using a simple example: 2 players P1 and P2, try to kill each other using bullets B1 and B2. Scenario A: Use Pure Javascript and, without any game engine. A1. The server calculates the position of all players and bullets, and send these information to all players for every 30ms. A2. Each player send [inputs] to the server on real time basis. Of course, those inputs may arrive the server later then expected. A3. Each player show objects in screen only according to the information provided by the server, without calculating the objects’ position on the client side. A4. The game runs without any BIG problem since the Unique Game State is only calculated on the server side. A5. However, without using game engine, I need to calculate the [Physics] of all objects by myself on the server side. Scenario B: Use Javascript with phaser 3 and B1. At time 0.000 second, the server ask both players start the game at the same time. B2. At time 0.030 and 0.040, both players start the game accordingly. (As you can see, the network of player P1 is faster) B3. At time 0.200, player P1 fires a bullet B1 and starts to update screen using the phaser 3 engine’s [Physics]. B4. At time 0.280 (here the server takes 10ms to transfer this action from P1 to P2), P2 gets this action from the server, and starts to update screen using the game engine’s [Physics]. (You may probably notice that at this moment, the screens of P1 and P2 are different!) B5. Suppose the bullet B1 is able to hit P2 at time 1.000. At time 0.950, P2 moves away from the bullet and continues playing the game. B6. As you may already figure out, the action that P2 moves away, arrives P1 at time 1.030, at that time, P1 already win the game! At this moment, in P1’s screen, P1 win the game, but in P2’s screen, P2 is still playing the game! It seems that phaser 3 is not suitable for multiplayer games. Did I miss anything? Thanks in advance for your help.
  22. Hi! My game has two BG audio tracks: one for gameplay, and another for menu. I start the scene playing both, the menu sound have volume = 0. When I open the menu i call a tween that raises the menu music to max and decreases the game music to zero. When menu is closed, I call a similar tween that decreases menu music to 0 and increases game music to max volume. It works on Chrome and FIrefox. On Internet Explorer 11 it does not work. After some investigation, I found the volumes are completely ignored. Both sounds play at maximum volume simultaneously. Is there any workaround?
  23. Hi everyone! With the help of Phaser 3 I introduce... Free Rider Jumps! This is using the facebook messenger platform. The first instant game by Kano . Available on desktop, and mobile . Its a single track. Goal is to get the best score you can. You earn points by going the distance and doing it with style by doing tricks! Mobile & Desktop on Messenger Search "Free Rider Jumps" or try Desktop Only on FB Still some work to do on it, like music / sounds, but the bulk of what we wanted is there. Feel free to give feedback / ask questions.
  24. HTML5 Game Link: Snot Kid EDIT: The game is now also available on the Google PlayStore: Snot Kid Android App Hello everyone! I am super excited to share this game with you and I hope you give it a try and let me know what you think. You can also play it on your mobile phone Below is a descriptive overview of the game with more details. Summary: The game is a high-score game with increasing difficulty, with many achievements to unlock and a online leaderboard! What is it about? Throw the kid's snot at the insects and stop them from entering through the window crack. If you hit enough insects you can even charge up a powerful burp to scare the insects away! Controls: Click / tap anywhere on the screen to shoot snot at the crawling insects. Stop the insects from entering through the window crack! Main Features: Funny and beautiful drawings Many achievements to unlock Global leaderboard to compete for the highest scores Easy controls Mobile optimized HTML5 Game Link: Snot Kid Google PlayStore Link: Snot Kid (Is there a way to add the YouTube video in a smaller size?)
  25. In Phaser2.x we can get `events.onOutOfBounds and events.onEnterBounds` for a Sprite object by enabling `sprite.checkWorldBounds = true`, With this event i can track how long an image object appeared on the screen. But in Pasher3.x, looks like it doesn't have events for `.onOutOfBounds and .onEnterBounds` It 'd be great, if you can give some insights on tracking how long an image object appeared on the screen on Phaser3.x