Search the Community

Showing results for tags 'phaser3'.

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

  1. This plugin will help you build paths for pathfollowers and path tweens. Draw and edit Lines, Bezier Curves, Splines and Ellipses at runtime and export them to Phaser. A useful tool for editing and building paths. Explore your scene while building paths. Draw your path in-game during runtime. Export path as JSON Data. Load them into Phaser and create awesome animations using pathfollowers! Maximum usage of Phaser API. More cool features will be added soon! Demo. Src & Docs NPM Submit an issue
  2. Hey All, I'm using WebPack to build my game and I've run into a scoping issue. I'll try and explain. Below is my TestScene scene/class. import 'phaser'; import Npcs from 'modules/Npcs.js'; const npcs = new Npcs() export class TestScene extends Phaser.Scene { constructor () { super('TestScene') } preload(){...} create(){ this.physics.add.collider( this.player, this.bombs, npcs.hitBomb, null, this ) } } Below is my npcs class import 'phaser'; const gameplayStates = new GameplayStates() export default class Npcs { hitBomb (player, bomb) { this.physics.pause(); player.setTint(0xff0000); this.entityDestroy() } entityDestroy () { console.log('destroyed') } } `this.player` and `this.bombs` are in place and work as expected in every way I intended. The callback in the collider method has `this`(testScene) as the context so, `this.entityDestroy()` no longer seems to work and fires app.bundle.js:116068 Uncaught TypeError: this.entityDestroy is not a function I suspect this is because the `npcs` class is not in the npcs class' scope when the method is called from the collider function. How can I get around this with the collider method? Your help would be much appreciated. Thanks all, Your help is much appreciatd.
  3. sammae

    Create a moving platform

    Hi, I've been stumped by this for quite awhile and I feel as if it's so simple. I'm simply trying to create a platform that moves back and forth that a player can jump on. I got a platform to move by doing something like this: platform = this.physics.add.sprite(300, 100, 'form'); platform.body.allowGravity = false; platform.body.immovable = true; platform.body.velocity.x = 100; But it just keeps moving in one direction and I can't figure out how to make it collide with the player. I tried the: this.physics.add.collider(this.player, platform); But that did not work. I just want a simple platform that moves back and forth that the player can jump on. Please any help is greatly appreciated, I'm ready to pull my hair out over this. 😞
  4. Play Link: Pixel Memory Find all card pairs, level your profile & unlock new cards in this “Memory” classic optimized for mobile! Play Link: Pixel Memory Welcome to the "Memory" classic, expanded with new features & optimized for mobile! Game Features: Play the “Memory” classic in this mobile game. 3 Difficulties: Easy, Medium & Hard. Level up your profile & unlock more cards. Browse your collection to see which cards you’ve already unlocked. 4 card deck skins: Choose the one you like best! View your profile for your game stats & best scores in all difficulties. Gameplay: Find all the matching card pairs on the table. Find them before you run out of guesses. Unlock all the card packages in the game. Controls: The whole game requires only click inputs and is perfectly optimized for mobile! Credits: The game was developed solely by me. All assets in this game were either done by me or from the CC0 assets linked below. These sources are also credited inside the game: Play Button Name: Cartoon Mobile Rounded Icon Buttons Author: Nathan "GDquest" Lovato,, URL: Explosion Sprite: Name: 2D Explosion Animations #2 | Frame by frame Author: Sinestesia,, URL: Audio: Play Link: Pixel Memory
  5. rageofaxe

    How tween circle or graphics?

    Snippet for phaser2: const graphics =, y); graphics.height = 0; graphics.width = 0; alpha = 0.5; const bounce = game.add.tween(graphics);{ height: 300, width: 300, alpha: 0 }, 300); bounce.start(); Actually, is it possible for phaser3? This snippet not resize circle: const circle = new Phaser.Geom.Circle(400, 300, 50); const graphics =; graphics.fillStyle(0x00ff00); graphics.fillCircleShape(circle); this.tweens.add({ targets: graphics, alpha: {getStart: () => 0, getEnd: () => 1}, height: 500, width: 500, // or radius duration: 1000, });
  6. jopcode

    problem with setScale on layers

    Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');
  7. Hi everyone, Looking for some advice on the approach to coding multiple powerups/upgrades. I have googled how to do this but most answers are in c#/java or based on unity so I have trouble understanding what there doing. I am making a geometry wars/asteroids clone and I am giving the player upgrades when they defeat a boss or reach certain multipliers/kills. The problem is that I am having to change lots of code and using lots of if statements to see if a powerup has been activated then changing the bullet effect and then having to change the collision function for the bullets hitting the enemies so that each powerup does something different. For example in my powerup file (handles bullet changes when new power is activated and powerup pick ups) I add more if statements to the bullet logic to change for example the bullet speed and texture then I go into the file that handles collisions and make changes to the bullet / enemies function so that if the bullet is a fire bullet for example, the enemies particle effect is changed to red from blue. I know there are better ways to do this but I'm not sure how in javascript (or any language) any help would be really appreciated some code: powerups.js (bullet logic handler function for special bullets) const scene = this.scene; const utils = this.utils; const player = scene.player.sprite; if (bullet && utils.playerDied === false) { if(utils.explodingBullet) { if(utils.specialLevel > 1) { utils.bulletSpeedSpecial = 120; } else { utils.bulletSpeedSpecial = 250; } bullet.setTexture('explodeBullet'); } else if(utils.flameBullet) { utils.bulletSpeedSpecial = 75; bullet.setTexture('orange'); if(utils.specialLevelCheck === false) { utils.specialLevelCheck = true; scene.flameEmitter.explode(); } if(utils.specialLevel > 1) { player.setTexture('playerO'); scene.playerTrailEmitter.setFrame(['white', 'orange']); } } else { bullet.setTexture('bullet'); player.setTexture('player'); scene.playerTrailEmitter.setFrame(['white']); }, scene.reticle); utils.lastFiredSpecial = time + utils.bulletSpeedSpecial; scene.physics.add.overlap(scene.baddieGroup, bullet, scene.callBacks.shootingBaddies, null, scene);
  8. OtoRexia

    Phaser 3 Board Plugin

    Board Plugin for Phaser 3 solves all of your board related problems. You don't have to create a single board manually ever again. Create all your boards in one single line and don't worry, it never takes controls away from you. customize your boards as much as you need or use it in any case you see fit. Some of the scenarios it can be used in but not limited to are - match3, tic tac toe, memory games, and any others board related projects. Create a full-featured game in just a couple of line of code. Visit for more information. I need your support please buy this product so, I can continue to improve this product and able to do other projects similar to this (possibly in opensource format) - Support me. Also, get $10 off by visiting this link (only for first 10 buyers). Any kind of feedback is welcome. Thank You.
  9. Hi , I prepared an yeoman generator for phaser 3. It is supporting typescript , bower and webpack by default. npm install -g yo npm install -g generator-phaser-3-ts-boilerplate Also it is available via type to search bar phaser-3-ts-boilerplate. Best Regards
  10. 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
  11. We are buying a couple of HTML 5 Phaser (preferably Phaser 3) games. It could be of any categories and being Mobile Friendly is a must. If you are interested, plz drop a line and I will contact. Thanks, Yan
  12. Hi sorry if this question has been asked before. I'm making a simple platform game and I want to make a scoreboard...problem is, I don't know how to transfer the scores from Phaser 3 to backend... If anyone could help me, that would be great, thanks~ ^^
  13. Hi Everyone, I've decided to open source the Mars Explorer game I've been working on in the hopes that some might learn from it or even contribute to its development. the source code is available here on github. I'd love to hear some constructive feedback from the community and contributions to the project would be more than welcome. This is my first attempt at a game using phaser so go easy on me if I've made any rookie mistakes 😊 Its loosely based on the Phaser 2 tanks demo but instead using Phaser 3 and matter.js physics.
  14. Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?
  15. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset ='tilemap'); // # Add Tilemap Layers this.config.layers.background =, tileset); this.config.layers.midground =, tileset) this.config.layers.ground =, tileset); this.config.layers.forground =, tileset); this.config.layers.water =, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]);[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m =;, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  16. Hello everyone! I'm new here and my first question is how to make my Phaser game fill all the document? I mean, take for example, if you resize the browser, the game view will adjust to fit the same resolution while it is ocupying all the document. I wanna do the same thing to my game. How can I achieve this? Thank you for answer me!
  17. Hi guys, in the release of phaser 3.13, the developers of phaser have said that the support of scale manager and dom elements will be available in the phaser's 3.14 release, but after release we see that these functionalities are not available for us for now ? So who can say when it will be available and is there another option to solve problems related to adding dom elements and scaling.
  18. I apologize in advance if this should be obvious... Regarding destroying / removing cameras that I don't need anymore, I came across these two descriptions in the documentation that sound a bit contradicting to me: Camera.destroy(): CameraManager.remove(camera): So for destroy() it says that I should use CameraManager.remove(). However for remove() it says that I need to call Camera.destroy() to clear all references. @rich What's the "clean" way to do it? Call remove() first and then destroy() after? Or just one of the two?
  19. Hi everyone! Before anything I wasn't sure if this was the correct place to post this, please moderators move it as you consider if this should go to some other place like Projects and Demos. Also, please consider that this is my first implementation ever! I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming. This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client. After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow. So.... This is a really simple base MMORPG game created based on the Colyseus samples: And on the Phaser 3 implementation from Jacky Rusly: As you will see I've considerable modified how the jrgame was interacting with in order to make it works as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client sorry Jacky!) The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far). Here's the link to the repo: Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback! I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like: But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus. I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful. I really hope this help more than one person, maybe someone like me who would love to get this as starting point. Best, Damian Reply
  20. Marine

    Get container by name

    I gave the names to my Containers and want to get them using that names(with setName ). For example, I have Container with name 'Container1', 'Container2' ... I want to find the container with 'Container2' name. How can I do that?
  21. Hi all, I am trying to display a character(an extended container) by grouping a collection of body parts(extended Sprites). I have also created a plugin based of of this example to simplify the process. I have traced out the scene, the container, and all of the sprites, and all seems like it should display properly. Everything is properly childed, and everything has the proper texture and frame, but nothing appears on screen. Somewhere between the plugin and my custom classes, something has stopped it from being displayed properly. Does anyone know of something that may be undocumented about any of the thing's I've done that would break what I'm trying to do, maybe about extending classes?
  22. I'm attempting to clear the path within the update function, you can see below: But for some reason, the path won't clear class Gun extends Phaser.Physics.Matter.Image { constructor(config, scene) { super(, config.x, config.y, null, null, config.options); this.scene = scene; this.ship = this.scene.player =; this.path = new Phaser.Curves.Path(0, 0); } update() {, 0xcccccc, 1); this.path.lineTo(this.ship.x, this.ship.y); this.path.lineTo(this.scene.input.mousePointer.x, this.scene.input.mousePointer.y); this.path.draw( } } export default Gun; Here's the live demo - And the project - Any thoughts? Thanks!
  23. Dear community, I would like inform you that "War IOM" v2 have been re-work graphics and added more feature to serve user experience. Here is my banner screenshot: You can access to the website and play it directly on your phone (Chrome mobile, Safari iPhone, iPad) or your Laptop Link to play: ++++ Game description: The rule to win the game is very simple: buy the soldiers, defeat the enemy army and then destroys the flag. Try to use fireball to wipe out the enemy. The game had the shop to buy new soldier, upgrade soldier and choose the team out. Game data be stored on both user's device and server so never lost data again. ++++ Here is the look and feel of War IOM icon on your Home-screen phone Rumor: You can get double gem receive if you beat the mini boss at level 3. Also win level 3 will give you a lot of Gem, use it to buy new solider and upgrade your army! My facebook page: /******** Change log update 08/26 ********/ -- Add new game play for level 6. -- Improve camera. -- Improve game performance. /******** Change log update 08/31 ********/ -- Improve sound load time. No painful for waiting sound loading any more! /******** Change log update 19/09 ********/ -- Add level 7 with new game play. Regards, Gafami .
  24. andrei.nicolae

    Open url in a new new tab Safari

    Hi guys, I've tried multiple solutions found online opening a new tab when a button is hit. buyBtn.on('pointerdown', function (event){ openWindow(myurl); }, this); function openWindow(url) { var result =, "_blank") } function openWindow(url) { document.getElementById('newlink').href = url; document.getElementById('newlink').click(); } function openWindow(url) { window.location.assign(url); } This are some of them. All of these solutions work on other browsers, but not on Safari. Does anyone have a working solution for Phaser3? Thank you.
  25. here's the GitHub repo. Highlights dev server with live-reload and auto port finder simple SHOW_ALL style stretch mode Auto spritesheet with spritesmith Image optimization on build streamlined assets loading modular development setup Inside full Making your first Phaser 3 game made into modular code. All feedbacks are welcome.