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 110 results

  1. hassan

    Construct 2 To Phaser 3

    hi guys I have a Construct 2 Project i want to transfer it to phaser 3 any idea ! hope someone can help asap thank you so much
  2. I recently made a pop-up menu for my game which pops up after pushing a button. The problem is now that I need to figure out how to make a function that closes the menu. Here is the code: this.input.keyboard.once("keydown_D", event => { var StoreWindow = this.add.image(0, 0, 'StoreWindow').setOrigin(0); var backbutton = this.add.image(32, 34, 'backbutton', 0).setOrigin(0).setInteractive(); var testButton = this.add.image(64, 110, 'testButton', 0).setOrigin(0).setInteractive(); var storeContainer = this.add.container(32, 70, [ StoreWindow, backbutton, testButton]); storeContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, StoreWindow.width, StoreWindow.height), Phaser.Geom.Rectangle.Contains); this.input.setDraggable(storeContainer); storeContainer.on('drag', function (pointer, dragX, dragY) { this.x = dragX; this.y = dragY; backbutton.on('pointerup', function (storeContainer) { this.deletecontainer(true); }, this); }) .setScrollFactor(0) .setDepth(30);
  3. I've seen a gantt chart with a planned "phaser 2 to 3 migration guide" but now it seems to be deleted. I have a lot of 2.x code and I would love to migrate to 3.x in an ordered way. So, will there be any migration guide or should I just start seeing the examples and tutorials and figure out the best way to do it? It's nice to have such amazing library!
  4. I am making a top down zombie shooter and I am using the moveToObject function for the zombies to follow the player but as you can see, as soon as the player walks behind a wall the zombies get stuck. Is there an easy way to fix this issue?
  5. Hi! I'm doing a school assignment about Phaser and I was wondering can someone explain the differences in Phaser 2 and Phaser 3 physics engines? Phaser 2 has: Arcade, P2 and Ninja physics and I know pretty much the differences in them. Phaser 3 has: Arcade, Impact, Matter and Multi physics, I guess the arcade is the same as in Phaser 2, but what about impact and matter? Can someone smarter than me explain how these work? Thank you in advance!
  6. I am creating a game in phaser 3 where I need to work with texture atlas. There are no useful tutorial available online and I have no idea how to even start. So here are my questions. 1) How to load a JSON atlas and draw images from it? 2) How to randomly select a texture from the atlas and draw it? Note : While packing my textures I selected JSON array option. Some tutorials which I found online. LoadingTextures RandomTexture AddingAtlas
  7. Hirikgg

    Need help in resizing sprite sheet

    so I created a spritesheet online and and added to my game. but some sprites are small in size so how do I change the size of sprite: { "filename": "Attack__004", "frame": { "x": 1, "y": 1951, "w": 111, "h": 96 }, "rotated": false, "trimmed": true, "spriteSourceSize": { "x": 9, "y": 5, "w": 111, "h": 96 }, "sourceSize": { "w": 120, "h": 110 }, "pivot": { "x": 0.5, "y": 0.5 } }, I don't know which one is the height and width of image. So do can I resize the image inside the json file or I must manually resize and pack it again? Btw, I used this tool (no PC to use texture packer :-) ) Thanks in advance
  8. Hey everyone, I looked around for details on this but I am trying to determine the difference between the Physic types: Arcade, Impact, Matter to see what would be best for my type of game or to experiment with. I read in the Dev blogs that "Arcade" was meant for very simple physics in a game, while somewhere else I read that "Matter" was meant for debugging... I would like to know what the real differences are and which would make the most sense for a given game type. Does anyone know what the differences between the Physic types are? Thanks!!!
  9. Hey guys, I have searched all over to figure this our but no luck. How do I enable the debug to show the bounding/collision boxes on sprites in Phaser 3? this was pretty easy to do in Phaser 2 but I dont see any docs on how to do this for 3. Thanks!!!
  10. holysheepcoder

    Don`t see text in container

    let width =; let height =; let startGameText = this.make.text(findGameButtonText).setOrigin(0.5, 0.5); let startGameButton = this.add.sprite(0, 0, 'ui-spritesheet-blue', 'blue_button00.png'); let startGameContainer = this.add.container(0, 0, [ startGameButton, startGameText ]); startGameContainer.setSize(190, 50).setInteractive(); let optionsText = this.make.text(menuOptionsButtonText).setOrigin(0.5, 0.5); let optionsButton = this.add.sprite(0, 0, 'ui-spritesheet-blue', 'blue_button00.png'); let optionsContainer = this.add.container(0 + 200, 0, [ optionsText, optionsButton ]); optionsContainer.setSize(190, 50).setInteractive(); let mainMenuButtons = this.add.container(width / 2, height / 2 + 200, [ startGameContainer, optionsContainer ]); mainMenuButtons.setSize(width, 50); Options for texts export const menuOptionsButtonText = { x: 0, y: 0, text: 'Options', style: { fontSize: '16px', fontFamily: 'Monospace', color: '#ffffff', align: 'center', shadow: { color: '#000000', fill: true, offsetX: 2, offsetY: 2, blur: 8 } } }; export const findGameButtonText = { x: 0, y: 0, text: 'Start game', style: { fontSize: '16px', fontFamily: 'Monospace', color: '#ffffff', align: 'center', shadow: { color: '#000000', fill: true, offsetX: 2, offsetY: 2, blur: 8 } } } I can not understand why the text "Options" is not displayed
  11. Description: Sushi Chef is puzzle game for sushi and puzzle lovers that test your eyes and your hand movement coordination. In this game, you play as new sushi chef at the sushi restaurant that have firm employer who will fire you if you fail to please the customers. Your job is to match three or more similar sushi while you try to fill up customers sushi’s orders that visit your restaurant in limited time that given to you. You have to pleased your customer before they lost their interest to eat and leave the restaurant unsatisfied. If you fail, your employer will fire you or make you back to lower level. But if you success, your employer will promote you to run another sushi restaurant. Enjoy and challenge yourselves in this addictive game, get more promotion from the employer so you can run various sushi restaurant and be famous as great Sushi Chef. Play Store Can this game will be added to Phaser game showcase? Thank you!
  12. Diper

    Line add physics

    Hey together I am trying to add a collision to my line in Phaser 3, but as I read, it is not possible to add physics to a line in Phaser 2. Is this still a thing with Phaser 3 and if yes, has someone a idea how to add a collision to the line properly?
  13. Hi Everyone, I want to create same thing like this in phaser 3 using graphics library or by any other way. I cannot find compatible code for replacement in graphics library. Any help will be highly apprecited Many Thanks
  14. Try my christmas event game. very short, one button game. Press spacebar or mouse/touch to Jump. jump higher when holding button. Goal is this gift bag. You can see ending CG when you get gift bag Thank you for playing.
  15. I am trying to make a snow effect on the main menu using the particle emitter but particles spawn way to fast. I have this code: var particles = this.add.particles('snow'); var emitter = particles.createEmitter({ speedY: { min: 15, max: 40 }, gravityY: 0, scale: 0.2, quantity: 1, lifespan: { min: 28000, max: 30000 }, emitZone: { source: new Phaser.Geom.Line(-20, -100, 820, -100 )} }); And quantity is only one, so I do not know how to fix this.
  16. Lmon_The_Tie

    Collision Issue with phaser 3

    Hi First time posting on this forum and using Phaser 3. I am having some issues with collision between two objects which seem overlap if the player is moving left or right. However the player can jump on top of the object without going through it. Any help would be greatly appreaciated. My Code: Main Class let phase; let plr; let config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; phase= new Phaser.Game(config); function preload (){ this.load.image('Ground','src/assets/Tiles/ground/ground01.png'); // this.load.image('bg1','src/assets/BG/BG.png'); // this.load.image('fox','src/assets/Object/Mushroom_1.png'); } function create (){ this.add.image(500,100,'bg1').setScale(1.50); plr = new Player(); platform = this.physics.add.staticGroup(); platform.create(191,550,'Ground').refreshBody(); platform.create(319,550,'Ground').refreshBody() platform.create(420,550,'Ground').refreshBody() platform.create(800,550,'Ground').refreshBody() this.physics.add.collider(plr.sprite,platform); //this.physics.add.collider(plat.sprite2,plr.sprite); //this.physics.add.overlap(plr.sprite,plat.sprite2,null,plat); // console.log(plat.sprite2); console.log(plr); cursors = this.input.keyboard.createCursorKeys(); } function update(){ if (cursors.up.isDown) { plr.jumpM(); } else if(cursors.right.isDown){ plr.rightM(); } else if(cursors.left.isDown){ plr.leftM(); } else if(cursors.down.isDown){ plr.sprite.y +=10; } } Player Class class Player { constructor() { const playerSprite = game.physics.add.sprite(300, 600, 'fox'); playerSprite.setCollideWorldBounds(true); playerSprite.setOrigin(0, 0); playerSprite.setGravity(0, 450); this.sprite = playerSprite; } leftM() { this.sprite.x += -3; } rightM() { this.sprite.x += 3; } jumpM() { this.sprite.y += -5; } getYV() { return this.sprite.y; } getXV() { return this.sprite.x; } }
  17. I have this code: scene.physics.add.overlap(spears.children.entries[numberOfSpearThrowerMachines], platforms, stopSpear, null, this); function stopSpear(number) { spears.children.entries[number].setVelocityX(0); } I am trying to send a parameter to the function stopSpear when calling it. Like this: scene.physics.add.overlap(spears.children.entries[numberOfSpearThrowerMachines], platforms, stopSpear(numberOfSpearThrowerMachines), null, this); but this does not work obviously, so how do I do it instead?
  18. Game Link: Vocab RPG Vocab RPG is an Online RPG about catching Monsters & collecting Vocabulary Cards! Features: Open world with unique zones to explore MMO: Online multiplayer Monsters: Hunt, battle, and catch many unique monsters! Crafting: Collect different resources and use them to craft items & consumables Language Learning: Unlock vocabulary cards! Currently 4 vocabulary languages to choose from: Chinese, German, Japanese, Russian Overview: In Vocab RPG, you have all the elements of a monster-focused RPG: Hunting, fighting, catching, levelling, crafting, etc. But for every action that you take in the game, it will show you a vocabulary card! As a consequence, the more words you know, the stronger you also become in the game. The game starts very slowly with only 3 words unlocked. But as you progress in the game, you can unlock more cards and expand your vocabulary - at your own pace. Difficulties: To take into account different learning preferences, you can pick your challenge by choosing from 4 difficulty settings: - Normal: Wrong answers reduce your monster's attack or consumables (such as potions) by 25%. - Casual: Even if you answer wrong, you will attack and operate at 100% effectiveness. In other words, you see the cards but there is no consequence for answering wrong. - Hardcore: When you answer wrong, your monster's attack will fail! So answering wrong means 0 damage dealt. - Off: I also want people to enjoy this game, even when they are not really in the mood for studying vocabulary cards right now.... select 'Off' and you will not see any vocabulary cards in the game! Platform: Thanks to the power of Phaser 3, you can play this game on any device in your browser. No installation required. The game is mobile optimized, so whether you play on your laptop or phone / tablet, is only a matter of your preference. Game Link: If you are interested in trying the game, you can jump right into it: Vocab RPG Feedback: Any feedback is much appreciated! We also have a Discord server for the game where players are exchanging ideas, reporting bugs, and giving feedback: Vocab RPG Discord Credits: The game uses a lot of CC0 assets (like the monster sprites in this post) from various artists. I keep a list of all used assets here (which is also accessible from directly inside the game): Credits List
  19. Christian981

    Friction - Phaser 3

    I'm making a game in phaser 3 using the arcade physics and I want the player to be able to move boxes. The player can move the boxes right now but they are to light. Can I solve this with friction between the boxes and the platforms, and if so how do I do that? Here is my code: platforms = this.physics.add.staticGroup(); platforms.create(180, 588, 'platform3').setScale(0.5).refreshBody(); platforms.create(580, 450, 'platform4').setScale(0.5).refreshBody(); platforms.create(980, 450, 'platform4').setScale(0.5).refreshBody(); platforms.create(1280, 450, 'platform4').setScale(0.5).refreshBody(); boxes ={ key: 'box', repeat: 9, setXY: { x: 100, y: 0, stepX: 180 } }); this.physics.add.collider(boxes, platforms); this.physics.add.collider(boxes, boxes);
  20. 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!
  21. 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!
  22. 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.
  23. 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!
  24. 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 } .
  25. 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