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
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 186 results

  1. Doctor Simon's Time Crash (Download in Google Play) Doctor Simon's Time Machine has crashed and now he is stuck in a time loop! You're his only hope to come back to the present. Memorize the shapes and colors of the combinations and click the buttons on the correct order to break the loops. Travel through time and discover new ages and backgrounds. Play with special features and bonus and unlock all the rewards to complete the game. I developed this game for Ludum Dare, a JAM event in which you have to create a game from scratch in 72 hours or less. In this case, the selected theme was 'Stuck in a loop', a tricky one. I used Phaser 3 for the coding and photoshop for designing characters, backgrounds, buttons and bars. It's my fifth game uploaded to the Google Play Store, with my Game Studio, Funsmith. All of them developed with Phaser. Here's the Google Play link to download in Android devices: If you have iOS or you want to try the game but not download it in your phone, here's a HTML link. But please, remember, if you like it, download it!
  2. sanojian


    I made this collaborative drawing game for Ludum Dare 47 in order to learn Phaser 3. LoopyDraw Entry Page If you try it, please keep the drawings relatively family-friendly. There are a lot of young kids playing it.
  3. How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React. Sorry for my bad English, I'm Spanish-speaking. I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button. All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement. class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing. In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :) class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); } // load images preload () { this.load.image('character', 'assets/sprites/character.png'); } update () { // player movement mechanics } } export default Character;
  4. Hello, I'm looking at creating a fully responsive Phaser 3 game that would work for mobile (landscape/portrait) and desktop. I've been working with game development for a couple of years and I have a total of 7 years of programming experience. I recently started creating a game in Phaser 3 (5 months ago) and found it difficult to scale the game assets if you want the canvas to fit the entire parent div (which happens to be 100% window height and width, without using fullscreen). I've attached an image that somewhat describes what I'm trying to achieve. If the blue rectangle was the canvas I could be using the Phaser.Scale.FIT property and then positioned the canvas using a parent div. But, this is not what I need. My problem is with mobile portrait, I need the red area to also be canvas, whilst the blue area is the game (as it would look on landscape / desktop). This way particle effects or score could be drawn in the red area instead. The dream would be that I could make the game camera act the same way inside the canvas, as the canvas can inside a parent div. But I've only found the setZoom function on cameras that doesn't seem to do the job. Is there anyone of you that can recommend any resources (books, forums) that I can read to get a better understanding of how to scale a game in Phaser 3? Or perhaps have some tips on how assets/game can be scaled this way inside a canvas? I found some examples from phaser 2 and 3 that I've looked at for inspiration before deciding to create this post: Important notes: The game assets are designed based on canvas size 1280x720. The canvas has a transparent background, so it's really only important to make assets fit the blue area and without being stretched.
  5. Hi all, Sorry if this is a very newb question... I have created a scene that uses a class instance. Within the class that is called, I have a constructor method that renders an image to use. The constructor method looks like this: export default class Gamepiece { constructor(scene){this.render = (x,y,sprite) => {let gp = scene.add.image(x,y,sprite).setScale(1.0,1.0).setDepth(100).setInteractive(); scene.input.setDraggable(gp);return gp; }} I call the class from a scene, and the returned class instance works fine until I try to apply drag events to it. Here is the working call to the class: let testObject = new Gamepiece(this); testObject.render(boardLayout[0].x,boardLayout[0].y,'gamePiece'); Unfortunately, it errors if I attempt to assign drag events to it. Here is the snippet for assigning the drag event: testObject.on('dragstart',function(){ console.log("dragstart fired"); }); The error is 'Uncaught TypeError: testObject.on is not a function' I see that an object that works normally with drag events is a graphics object. When I export the object to console, the object I am creating looks like this: Object{ render: function render(x, y, sprite) <prototype>: {…} circlesAvailable: circlesAvailable(gamePiece, connections) length: 2 name: "circlesAvailable" <prototype>: function () constructor: class Gamepiece { constructor(scene) } moveGamePiece: function moveGamePiece() <prototype> How (or is it possible) to reference this object to attach drag events to it? I've dug around, but can't seem to make it work. I'd assume the reference might be something like:{etc}. But I'm stuck. Feel free to suggest more efficient/practical ways to approach this. Thanks for any help you can provide! -Bruce
  6. 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
  7. I made a game in a week for a game jam with Phaser 3 and React:'s page: Youtube let's play (not by me):
  8. Hi, I'm trying to develop a game in Phaser 3 where player is able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map. This is how SVG file looks like. <svg> <g> <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)"> <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204..........."> <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........"> </g> </svg> How do I add event to each of these path ? They all are inside one svg file. Normally, in vanilla JS we could select an element by id or class. If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. After more digging, I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw. But again fillpoints expects arguments to be an array of Geom.Point and SVG's path attribute has different format (d="M238.114,402.543l). So, I can't do this either. I appreciate any help or suggestions for achieving what I am trying to do.
  9. I am trying to get all the children of a container displayed inside a zone. var container = this.add.container(200, 200); var sprite0 = this.add.sprite(0, 0, 'box'); var sprite1 = this.add.sprite(0, 100, 'box'); container.add([ sprite0, sprite1 ]); var graphics =; var color = 0x00ffff; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256); graphics.fillStyle(color, 0); graphics.fillRect(32, 32, 256, 256); container.mask = new Phaser.Display.Masks.GeometryMask(this, graphics); However when they are outside and overlapping is seems like they are blending on each other? How should I proceed?
  10. Hi all, I'm making a shmup game at the moment. I'm trying to animate player's diagonal movements but can't get it to work. Any help you could offer would be greatly appreciated. First, I created the animation: this.anims.create({ key: 'rightUp', frames: this.anims.generateFrameNumbers('player', { start: 30, end: 33 }), frameRate: 10, repeat: -1 }); then when the player wants to go up&&right: if(this.keyLeft.isDown&&this.keyUp.isDown){'rightUp', true); var isPaused = this.player.anims.currentAnim; var progress = this.player.anims.getProgress(); // console.log(isPaused) console.log(progress) } Everything else works perfectly fine (e.g. left, right, up, and down). My console just returns 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 when I press the up and left arrow at the same time. In contrast for any other motion, it returns the frame number it's playing. Thank you in advance, Bong
  11. I was wondering how I could animate my player and the other players once they start moving. I tried to create an event called "animate player" in my server file like this: socket.on('playerMovement', function (movementData) { players[].x = movementData.x players[].y = movementData.y players[].playerFrame = movementData.playerFrame socket.broadcast.emit('playerMoved', players[]); socket.emit('animatePlayer', players[], this.anims) }); Then in my phaser scene file I have my animations defined in the create function: this.anims.create({ key: "up", frames: this.anims.generateFrameNumbers("player", {start: 12, end: 15}), frameRate: this.frameRate, repeat: -1, // Infinite loop }); this.anims.create({ key: "left", frames: this.anims.generateFrameNumbers("player", {start: 4, end: 7}), frameRate: this.frameRate, repeat: -1, // Infinite loop }); this.anims.create({ key: "right", frames: this.anims.generateFrameNumbers("player", {start: 8, end: 11}), repeat: -1, frameRate: this.frameRate, // Infinite loop }); Finally in the update function in the same phaser scene file I handle the "animate player" event that is back in the server file: this.socket.on('animatePlayer', function (playerInfo) {"left") }); The console returns "Uncaught TypeError: Cannot read property 'anims' of undefined". I have my playerObj defined in add new player, which is also a function that is called from the server, when a player joins: addNewPlayer(self, playerInfo) { this.numberOfPlayers++; this.playerObj = this.physics.add.sprite(playerInfo.x, playerInfo.y, "player") } Any help at all would be greatly appreciated.
  12. It is my first time to use phaser 3 for developing game , I have a weird issue when i run the project from brackets it run smoothly without any error but when i try to open the project from the html page direct it dies not open and this errors appears on console , can anyone help me please ??
  13. Babel Tower is an incremental idle clicker game where you manage the building of the Tower of Babel. You can mine stone, process the stone to create bricks, chop trees, build crane, sell resources, even invite tourists to your tower, to make money! The game is on ArmorGames: (rating 65%, 50k plays) The game was made with Phaser 3.19
  14. I am new to coding in Phaser 3 and I was told that the best way of learning was to look up the examples. I currently do not have the speed to run them online, so need to have a local copy. That's why I was wondering how big the examples are.
  15. Hi, i'm new to phaser 3 and would have some clarifying answers on the Calss Pointer here: in particular: I want to create an Pointer instance using the following code: var gun = new Pointer(manager,0); I know that the "manager" argument refers to a InputManager object, but i don't understand how to create/configure it, i tried this: var manager = new InputManager(this, this); but obtain the following error log: ReferenceError: InputManager is not defined Can someone help me on this problem? Thanks!
  16. So, I'm having trouble understanding how to do something when clicking on a specific object. I'm creating game objects with this function: createBurger(){ this.newBurger = new Burger(this,this.input.mousePointer.x+cam.scrollx,this.input.mousePointer.y,'11'); this.newBurger.setScale(1.2); cant_burgers++; ctnr_burgers.push(this.newBurger); this.newBurger.setInteractive(); this.newBurger.setData({sideA: 1, sideB: 1, cooked:0, flip: 0, celda: undefined}); this.input.on("pointermove", this.follow, this); this.input.on("pointerup", this.drop, this); this.input.on("drag", this.drag, this); F_burgerPicked = 1; } When the pointer is up, I want to add data to the specific object that's being clicked, not the last one created. I tried adding another event listener in the update function, to no avail. Is there a better way of doing this?
  17. create() { this.rock = this.physics.add.staticGroup(); this.rock.create(1002, 145); this.rock.setScale(2); } The code above does not set the scale of the rock that I have set as a static group. Is it even possible to scale things in a Static Group?
  18. I've looked at a lot of tutorials on how to do this, but all of them seem to be out of date and do not work anymore with the current version of Phaser 3. Does anyone know how to do this? It would be appreciated if you could also tell me how to do this with bitmap text as well.
  19. I think if you have done these lines of code:'staraudio', 'assets/starAudio.mp3');'jump', 'assets/jump.mp3'); then you can do: this.sound = this.sound.add('jump');; and then after a user does something a little latter this.sound = this.sound.add('staraudio');; the first one works, the second .add gets me StarsGame.js:18 Uncaught TypeError: this.sound.add is not a function i even coded a function to change sounds; changeSound = function (number) { if(number ===1){ this.sound = this.sound.add('jump'); } if(number ===2){ this.sound = this.sound.add('staraudio'); } } and I can call that from various places in my game (once) and then do a; if I call it only once, using either a 1 or 2, then that sound works throughout the game, but if I try and call it a 2nd time to change the sound (or even just passing in the same int as the 1st time, I get StarsGame.js:18 Uncaught TypeError: this.sound.add is not a function It makes me think I need to call some function I can't find, like this.sound = this.sound.clear(); this.sound = this.sound.unload(); or something so that it will again allow me to pass in a sound key. thanks
  20. I have this map created in Tiled, with an object layer for the doors. And this door object has a custom property "link", which should tell where the door goes. In phaser, I created an object layer for this doors and put them in to a new static group (this.physics.add.staticGroup). And if the player hits this door object, a method get called: this.physics.add.overlap( this.player, doors, this.enterDoor , null, this ). And there, in the enterDoor method, I want to read the "link" property, so I can switch the scene based on that value, which tells where to go next. But I am not able to get it there, it not seems to be possible to even add this value to the childs of the group, because already there, these values get lost. I am looking for a solution to this problem. These are the parts of the relevant code: Part 1, colliding with the door works without problems. Only thing there is, I have a missing sprite picture in game, but I do not want to use any sprite for the door. It should be a invisible area and if the player hits, it should go to the next scene. create() { = this.add.tilemap( 'map1' ); var tileset = 'main', 'tiles' ); this.firstLayer = 'layer1', tileset ); this.secondLayer = 'layer2', tileset ); this.thirdLayer = 'layer3', tileset ); this.createPlayer( 400, 400 ); this.secondLayer.setCollisionBetween( 1, 2000 ); this.physics.add.collider( this.player, this.secondLayer); this.objectLayer = 'objectLayer' ); var doors; this.objectLayer.objects.forEach( ( object, index ) => { if (object.type === 'door') { object.key =; object.setXY = { x: object.x + 16, y: object.y + 16 }; doors = this.physics.add.staticGroup( object ); //doors[ index ].set( 'link', ); } }); this.physics.add.overlap( this.player, doors, this.enterDoor , null, this ); } Part 2, this is the enterDoor Method, called if the player hits the door. There I want to read the property and based on that, go to the next scene. enterDoor( player, door ) { console.log( ); //undefined door.disableBody( true, true) ; this.scene.switch( 'Outside', Outside ); // it should be like this: // this.scene.switch(, ); }
  21. I started playing around with Phaser 3 particles and ended up creating an RTS game prototype. The game also supports touchscreen and runs nicely on mobile browsers. If you are looking for and old-school RTS game, give it a try and leave a comment 😀 Direct game link:
  22. Sup my dudes, My latest game Bouncy Woods was released just yesterday on Poki - It was developed with Phaser 3 and MatterJS. Matter was pain in ass to deal with because I really needed "bullet" like bodies for this game and Matter doesn't support it. So sometimes you can notice "tunneling" issue - when balls go through blocks. If you have any feedback or questions regarding the game - please let me know. Gameplay video
  23. Hello! I created a new game Exploding Shapes - be fast and push out different shapes out the view before they explode! Game available at Play Exploding Shapes Enjoy!
  24. This is a copy of the first devlog I published on my blog a few months ago. You can see all the devlogs and sign up for the newsletter to get the next ones directly to your email at Devlog 1 Few days ago I have decided to start an RPG project, as that’s what I’ve always wanted to make. I will be fairly limited with graphic assets and time, but at least the coding part will be fun. I will make do with what I have available. Right now I have depth sorting implemented: I’m using art assets. Tiled for level editor. Haxe as programming language. Phaser 3 as framework. Coffee as fuel. So far I’ve went through map loading (surprisingly simple in Phaser 3), animations based on keyboard input and basic collisions using Phaser’s Arcade. Then I switched to using Differ for collisions, because Phaser’s Arcade physics couldn’t handle custom shapes per tile by default. Given that I expect more requirements from the collisions/physics system, I like having more control over things instead of letting Phaser handle it all for me. After that, it was time to refactor all the code, because it was getting messy. I choosed to use ECS architecture, because I used it before and I find it very nice for these kind of games. Especially considering how big the game might grow, it’s important to keep the code clean. I was deciding between using Elias Ku’s ECX library and Kevin Leung’s ECS. Ultimately it probably doesn’t matter, but I chose Kevin’s. At this point the ECS consists of RenderSyncer, KeyboardInput, Movement, PhysicsDebugDraw, PhysicsSystem systems, and Velocity, ActorState, DifferShape, InputControllable, Position, Renderable, StaticCollidable components. This will change a lot as the work continues. Next I made a custom preprocessor for Tiled level files. I’m converting them to custom JSON that contains only the data I need, in format the game expects. This also allows for making rudimentary checks against typos and missing data. It also means I’m no longer using Phaser’s tilemap loader, and instead had to write a bit of code to populate the tilemaps myself. While this is some extra work, it allows for special handling. Last thing I did was implement depth sorting. Phaser can’t render different tiles at different depth, or allow you to insert something (like a moving character) in between tiles. If you look at the GIF on top, you see the character can move behind and in front of the tree log and the sign board. If they were part of a Phaser’s tilemap layer, it wouldn’t work. Instead, I mark the layer in Tiled as requiring depth sorting, and the game then creates individual depth sorted sprites. This way I didn’t have to change the level editing workflow and won’t need to manually handle future similar cases. Next I plan to work on some UI, changing location (loading different maps, like insides of a building), NPCs and interaction, and combat system. Subscribe to newsletter.
  25. I just wanted to share this tool to help with designing/styling web font text for Phaser 3. You can adjust various TextStyle properties and see the result rendered in real-time in a Phaser Scene. When it looks good you can just copy the code as needed. Iterating on text styles can be quite slow when you need to reload after each change or go back and forth between the docs and your code. This should help speed that up! There's a built-in color picker, Google Font search, light vs dark background toggle, and more. 🤗