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 Platform
    • 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 182 results

  1. 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
  2. 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.
  3. 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?
  4. 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
  5. 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.
  6. 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 ??
  7. 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
  8. 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
  9. 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.
  10. 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!
  11. 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?
  12. 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?
  13. 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.
  14. 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
  15. 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(, ); }
  16. 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:
  17. 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
  18. 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!
  19. 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.
  20. 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. 🤗
  21. Hi everyone, A new game developed using phaser3 and published in my website Game Link : The Baby boss is thrilled about his photo shoot for upcoming candidacy. He wants to make a show by wearing some cool outfits. Beach baby or skater baby ? Casual baby or a pro style office baby ? Hip-hop baby or a mini superhero ? Boss is overwhelmed with choice. Help the baby boss choose and try different dress up and make over outfits to enjoy delivering a stunning appearance.
  22. Rubek

    Can't load images

    I can’t load images for my phaser game? This is the problem I am trying to solve but I don’t know whatt now what mistake I have done. This is my index.html code, <!DOCTYPE html> <html> <head> <script type="text/javascript" src="phaser.min.js"></script> </head> <body> <script type="text/javascript" src="game.js"></script> </body> </html> And this is game.js code, function preload() { this.load.image('plant', 'plant.png'); } function create() { this.add.image(50,50, ‘plant’); } function update() { } const config = { type: Phaser.AUTO, height: 600, width: 600, background: 0x123456, scene: { preload: preload, create: create, update: update, } } const game = new Phaser.Game(config); The google console says, "Access to XMLHttpRequest at ‘file:///C:/wamp64/www/rungame/plant.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." Also, there are other two messages by the console, Screenshot_21364×166 10.7 KB What wrong did I do? Please help
  23. Hi, I was using matter physics and tried to check collisions from a lot of objects and then I got some issues. The problem: I have a lot of objects (called them "luz" in the code) and I want to release them on air and making them fall. Then when they touch the floor I want to trigger something: - if it is a even object: I want to reduce its Alpha to 30%. - if is an odd object: I reduce their scale by half. Currently I'm handling this situation in my real project by checking update() { if (luz[i].y > floor.Y) { /* do something */ } /*...*/ } but I'm looking for a better and more flexible and robust solution. So here is my code: class GameScene extends Phaser.Scene { constructor () { super('GameScene'); } preload() { this.load.image('luz', 'luz.png'); } create() { // create elements on air for (var i=1; i<=7; i++) { var luz = this.matter.add.image(i*100 + 10, 50, 'luz') luz.body.label = i%2 == 0 ? "even luz" : "odd luz" } // add the floor this.matter.add.rectangle(400, 550, 800, 50, {isStatic: true}).label = "floor" // check collisions'collisionstart', function (event, object1, object2) { // this only prints the first object console.log(object1.label + " collides with " + object2.label) switch (object1.label) { case "odd luz": object1.gameObject.alpha = 0.3; break; case "even luz": object1.gameObject.setScale(0.5); break; } }) } } Live example here: Video showing the problem: My questions are: - Am I handling collisions correctly? is this the proper way? - Should I implement my own collision checking system? - Is checking by label a bad design/practice? Thank you for your time and help!
  24. Quite a newbie on phaser, developing a new product and I saw this regarding phaser 2: Does this still happens on Phaser 3? Or is it possible to render an SVG correctly now? I'm having the following problem: Say I have this svg: and when I render to my game, thats the result I got: (I'm not scaling it) 1- Whats wrong with that? And how can I fix it? 2- Also, is there a way to scale the svg without deforming it? I'm using setScale(x) and the image gets real ugly
  25. (Phaser3)We are creating an application which renders the same scene with DIFFERENT location of same assets everytime a button is clicked. We want to slow down the rate at which the state of scene changes. We do not have a physics attribute in our config We did try referring to phaser3 examples and use fps, timeScale, timedEvent but we were not able to achieve what we wanted. The scene: The scene is pretty similar to ‘chess game’. Scene has a 9*8 grid. Scene has an image asset at one of the grid(be position 1,1) Once user presses ‘next’ the grid is created and displayed again with the asset image on a different location Essentially the image asset moves to 2,1 from 1,1 The movement is not a move function within the scene rather a whole different grid is rendered with the image on 2,1 The rendering of grid, every time ‘next’ button is clicked is very fast. I would like the rendering to slow down so the rendering looks like a smooth movement. An example is shown below. (Image clipped from state1: state2: https:/