Search the Community

Showing results for tags 'phaser'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 3,187 results

  1. Firefox Slow FPS

    Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you
  2. I am developing a game where my player has to look to see forward when I am pressing right arrow key. But how can I make it look reverse after pressing left arrow? I can create a sprite of reverse look but how can load that while pressing left and at the same time forward player should be destroyed?
  3. Hi, I'm syed and i'm new for phaser. how to add restitution for one object not for whole world Note: using P2JS physics engine
  4. Hi. I made a game using an other engine and would like to port the game over to Phaser but it is using individual images for all sprite animations. I was wondering if is there any way to create a sprite animation from individual images inside Phaser? I was searching the web and everyone seems to offer to pack all images on to a single texture then use an atlas in phaser. It could be the best way to do it, but I'm really would like to know if it possible to create sprite animation inside Phaser without using any 3rd party tools? To give an explanation, I would like to attempt to import the game levels from the JSON exported directly from the tool I was using, so this way I need to remake the game logic only and don't need to worry about building all the levels and menus again. I could just write the import code once, then import all my levels directly from the JSON and I don't need to start completely from scratch. Even if I would be using an atlas, I need to work on this importer to get the position, scale, animation frame and other details of everything in the level so getting the images too and make sprite animations from them could be faster to get the levels up and running in Phaser. Thank you.
  5. I want to fill the color in specific tile. The method available in phaser is putTile(), But I want to fill any color I want. In canvas there is method called fillrect(). Please suggest me some solution.
  6. It used to work without problems. Now buttons and sprites will only be clicked/touched if I press ~100 pixels bellow them. I didn't change anything and the problem only exists on android. I think not even on all devices. I use cordova and the newest phaser version. I tried updating cordova but the problem persisted. I think it might have something to do with how I scale the game, but I have no idea how or why this really happens now. It would be great if someone knows why it happens and how to fix it. Here is my code for scaling: var width = window.innerWidth; var height = window.innerHeight; var targetW = 150; var scale = width/targetW; var targetH = height/scale; game.scale.setGameSize(targetW, targetH); game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; game.scale.setUserScale(scale, scale); game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp( ; And here is how I create buttons: game.add.button(0,50,'play',function(){;game.state.start('Games');},this);
  7. World map interactions

    Hello! I am very new to game development, using Phaser. I try to create a Risk-like game. In that game, I have a sprite representing the world, with delimited territories. My question is how should I code interactions with the map? Among others: - how to detect in which territory the user click? I suppose I have to create the territories coordinates somewhere. How to do that? - how color such territory depending of the owner? ... Can everyone give me hints, tutorial links or examples? Thanks a lot!
  8. Menu state audio issue

    I have an issue with the audio when first start the game in the menu state. The audio doesn't play. But after I start playing the game from another state and return to the menu state it works fine. When i test in android phone it doesn't work properly, but when I test emulator it seems to work fine. I use phonegap to build the app. Below is the code to my menu state var menuAudio = null; var menuState = { create: function () { this.menuAudio ='cheering'); this.menuAudio.loop = false; this.menuAudio.volume = 1;; var favButton =,780,"favFolder",this.favMovies,this); favButton.anchor.setTo(0.5,0.5); }, favMovies: function(){ if (this.menuAudio != null) { this.menuAudio.destroy(); } game.state.start("difficulty"); } }
  9. Hi. I'm new to Phaser and would like to ask for some help with sorting Z depth of sprites using a custom Z value. I know the same question have been asked a million times on the forum but in most case the replies are link to examples and tutorials that explains only that we need to add our sprites to a group and use the sort() method to get the sprites Z depth sorted. I understand that, but I'm really would like to use a custom Z values to sort my sprites. What I'm trying to do, after added all my sprites to a group, I loop through all the children in the group and set their Z value manually, after run the sort() method on the group and I was hoping it is going to sort the Z depth but it does not. This is my code: create: function(){ for(var i = 0; i <= 50; i++){ group.children[i].z = 100; } for(var i = 51; i <= 100; i++){ group.children[i].z = 120; } }, update: function(){ group.sort(Phaser.Group.SORT_ASCENDING); } According to the documentation, If my understanding is correct, the sort() method should use the Z value of each children by default to sort the rendering order. But it is not the case. What seems to happening instead, it override the Z values of the children with their index value. For example, as you can see in my code I set the z value of children[5] to be 100, but what the sort() method seem to be doing is replace 100 with the index number which is 5. If I check the value of Z it return 5 and not 100. If I don't run group.sort() it solves the problem, if I check the value it returns 100 as I would expect, but it does not seem to sort the rendering order without running the sort() method on the group. In most game engines I have been using, there was a very simple, straight forward way to get this done. Normally, all need to be done is set the Z-Depth value but it seem to be not that simple in Phaser. Am I missing something? According to the documentation I think my code should work but it doesn't. I would appreciate any help. Thank you.
  10. Hi people, i'm new into Phaser and its community. I made a little test map with an Object Layer in it, the idea is to add some traps sectors or teleports where if the player touches it, it will teletransport it to some random place. Hence, it won't add any texture to it, i just want to have that area to collide with my player. Is this possible? without having to attach a texture to it? I used the square polygon to do so on Tiled Maps. Exported it as JSON. So here's my Object JSON: { "draworder":"topdown", "name":"objects", "objects":[ { "height":10, "id":1, "name":"trap1", "rotation":0, "type":"trap", "visible":true, "width":128, "x":445.41, "y":627.62, "gid": 2 }, { "height":10, "id":3, "name":"trap2", "rotation":0, "type":"trap", "visible":true, "width":64, "x":1023.87, "y":627.54, "gid": 2 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }], Then i created a group of traps and try to iterate them one by one to avoid them from falling due to gravity: traps =; traps.enableBody = true; // Get all traps map.createFromObjects('objects', 2, null, 0, true, false, traps); traps.forEach(function(trap) { trap.body.immovable = true; trap.body.allowGravity = false; }); I get the trap individual objects properly, but the problem that i found is, i'm not able to get the width/height i set on Tiled or shows up on my JSON. They are both equals to 1. Why did i lose those width & height values? but others don't such as `x` and `y` coordinates. What do you recommend to do to achieve the same effect? I just want certain areas to be "readable" so i can call functions after collision. It works fine when i set the texture, but also sets the default height x width of the texture applied, and i don't have any way to get the real Tiled values so i can resize my texture properly. Right now if I add a texture it works with this: this.physics.arcade.overlap(player.character, traps, this.resetPlayer, null, this); Even if i try to get the objects by doing: var trap = map.objects['objects'][1] The object returned doesn't contain any width/height. This is what it's returning: gid:2 name:"trap2" properties:undefined type:"" visible:true x:1023.87 y:627.54 I don't know if i explained myself correctly. Hope someone helps me Thanks in advance.
  11. I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library. <!DOCTYPE html> <html> <head> <title>Basic Platformer game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="js/phaser.min.js"></script> <script src="js/phaser.js"></script> </head> <body> <div id="phaser-game"></div> <script type="text/javascript"> (function() { var game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tile2', 'floor2.png'); game.load.image('player','bot2.png'); } var map; var layer; var marker; var player; var currentTile; var cursors; var curser; function create() { game.stage.backgroundColor = '#787878'; game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('floor2','tile2'); currentTile = map.getTile(0, 0); layer = map.createLayer('Tile Layer 1'); player = game.add.sprite(20, 20, 'player'); game.physics.p2.enable(player); player.body.fixedRotation = true; layer.resizeWorld(); marker =; marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 20, 20); cursors = game.input.keyboard.createCursorKeys();, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); game.physics.arcade.enable(player); </script> </body> </html>
  12. I'm building a simulation game using Phaser 3 and I need help from a fellow programmer. The job is not to make a full game, but to develop some specific bits of functionality that I need for my game engine. You must be knowledgeable on Math, Algebra. Contact me on private message for more details if interested.
  13. Hi everyone, Video (mp4 or webm) doesn't play on firefox android -> "NS_ERROR_NOT_AVAILABLE" I use Phaser CE v2.10.0 and CANVAS , I unlock the videos before. does not work on examples either : Thank you in advance !
  14. I had another thread where I went back and forth with @samme about pauseupdate not working. After copying his/her code from CodePen into my file, I discovered that running his/her code from within Brackets also resulted in the pause update not working (not getting pointer data). I then ran the code from my file directly in Chrome and Firefox and it didn't work there either (the code runs, no errors thrown, etc. but the pointerdata isn't updated on pause). What am I missing? How can I get pointerdata on pause?
  15. how to use phaser auto completion in brackets -------------------------------------------- install ternific (extension) [brackets] after that, go to :: for windows::(mac and ubuntu might be quite similar) C:\Users\username\AppData\Roaming\Brackets\extensions\user\ternific\node_modules\tern\plugin and paste phaser.js (auto completion api) (right click and save) create .tern-project at the root dir. of your project file and paste and save { "ecmaVersion": 6, "libs": ["browser"], "loadEagerly": [], "plugins": { "phaser" : {}, "doc_comment": true } } enable ternific:: at right top side of file option menu, click the ternific option file>ternific --> now you can use phaser autocompletion with tern-documentation/tern-def bonus:: install phaser-chain extension ( for phaser api documentation) credits::
  16. Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
  17. Hey, hi. I'm trying to develop a game similar to Mini Militia using I took help from a tanks multiplayer tutorial ( for the backend. However, I wanted to add the game room functionality in the game and hence made some changes accordingly. Also, I added a tilemap and gravity to the sprites, but the problem is, the player starts neglecting the collision between the ledges and the player and starts falling down till it collides with the world bounds in one window when no input is given. But it detects a collision in the active window. i.e. the window where the player was created. I hope I could explain the issue properly. Could someone look into the code and check what is wrong? And sorry if I am not following standard developer norms. I'm kinda new to posting threads on forums. Thanks in advance! server.js tanks.js index.html
  18. Will anyone be willing to teach me how to create Random generation of sprites? I am making a game called Egg Drop which is basically an "apple catch" type game where a basket at the bottom catches infinite spawning eggs from the top until you catch a bee instead of the egg (Bees are the enemies of the game) which causes the game to end. I need to know how to effectively create a random x for the egg spawning and then put this function in a loop but I haven't been able to do it correctly (One time I got it, but then it wouldn't be able to be set for collision, breaking the game) Also if there is any tips for phaser someone should know, feel free to teach me about them. Thank you guys so much for any help given, Nacho
  19. I've been battling this problem for the past 24h and figured it was worth asking for help. I've got a class called Character that extends Phaser.Sprite and is used in a few States (Character Select->Play) for my game. When I instantiate new Characters in the Select class or Play class, they work great as expected. However, when I load the Select state and select a character (which calls the 'Play' state), the Character class errors upon instantiating a new character in the new state with the following message: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at Phaser.AnimationManager.add (phaser-split.js?2ffb:49401) at Character.loadData (character.js?9c96:59) If I call the 'Play' state directly, the character loads properly and doesn't give any errors. So it only seems to be happening when going from one state to another, which is puzzling me. I've tried every route of debugging possible and the only solution I can find seems to be not loading the data dynamically from my server. Currently, the animation data in my Character class gets loaded via which is called in the constructor: window.socket.on(`data:load:${name}`, (data) => { // Listen to data updates for this character this.loadData(data) }) window.socket.emit('data:request', name) // Request new data from the server The loadData function then loops through the data and adds the animation frames: loadData(data) { // Grab data from server for this character from its definition file for(let anim in data.anims) { this.animations.add(anim, data.anims[anim].frames, data.anims[anim].speed) } } The error above occurs on the first animation I want to add. If I look at the this.animations object, it doesn't have a 'sprite' set and most values are null. Any help would be appreciated. I've stripped out most of my code at this point and am now just stuck. I've searched a bunch (here/google/stackoverflow) and the only solutions to people running into similar problems seem to be to make sure you're passing into your sprite, which I'm doing Actual code (Github) Play (state): Character (sprite):
  20. Hey! Did anybody compare Phaser and pixi for performance? We're going to make isometric game. bottom line is about objects you could render per screen. What do you think? What to choose? Phaser 2, PIXI, or maybe Phaser 3? Need the canvas renderer of course, not webgl. Update: I've the same question in the phaser slack channel. It seems that the PIXI would be better for isometric game then Phaser 2.
  21. Hello guys, I haven't posted my tutorial in a while. This is part 5 of multiplayer game tutorial series. We're creating a leaderboard for top scorers!
  22. New to phaser and html5

    Hi everyone, I am newbie to phaser and html5. I was worked in a unity3d and came here. Any suggestions for developing games in phaser for begginer in html5? Advantages of using phaser and drawbacks. Thanks
  23. Hey guys, Has anyone here managed to find or write some unit tests for their Phaser games? I already searched with different keywords for unit tests on phaser games, but the articles / posts I've been able to found, are pretty much outdated or don't provide any tutorials / extra info. The game for which I want to write unit tests is pretty UI heavy, and it would be useful to find at least some tutorials somewhere, or at least some tests written for another game. I've already tried playing with Nightwatch.js, but I hit a roadblock when I need to interact with the objects from the app ( such as clicking a button, and by clicking, I mean I want to know on what button I make a click, not just navigate the cursor to it's coordinates ). Any tips are welcome, or tutorials. Thanks in advance,
  24. UPDATE: 24. Feb 2018 Patch 1.2.0 is live! Please click here to scroll down directly to the update comment. ORIGINAL: 30. Jan 2018 Play Link: Chase the Shadow A casual, lighthearted 1vs1 Arena Game. Play online in your browser against a friend or anyone waiting in the lobby! Play Link: Chase the Shadow Welcome to this unique little multiplayer game! Built with Phaser CE. You control a wizard with the purpose of defeating the enemy wizard (another player). You are both hiding in the shadows and can use powerful spells! Game Features: Play online 1vs1 against a friend or any person waiting in the lobby. Control a wizard & defeat the enemy wizard. You have 3 spells at your disposal: Fireball, Lightning & Blizzard. Gameplay: You can see the enemy's shadow. Predict his movement and hit him with your spells! Select the right spell for the situation. Move into the right position to aim your spells. Trick your enemy with unpredictable movements. Win by defeating the enemy before he kills you! Controls: Click your wizard to move. Click on the spell scrolls to activate a spell. Plan your next move during your enemy's turn & pay attention to his shadow! I know it can be hard to quickly jump into this game if there is nobody online to play - or no friend available to try it out. I still hope some of you can get to play a match and let me know what you think! Side Note: Why did I build this game? (Not sure if this paragraph is interesting for anyone) I've been doing a lot of client work lately and so much work had to be done on Node.JS. Yet, I always wanted to create a browser multiplayer game running on an Apache server with PHP! Thus, the motivation for "Chase the Shadow" was born. I definitely don't regret doing this in PHP but it does require a lot of thought and planning - something I could have done much better. Either way, the game is done now and I'm happy I did it! Will I do another game in PHP? Probably not for a while. I wanna stay away from multiplayer games in general for now. Credits: The game was developed solely by me. All assets in this game were either done by me or from the CCO assets linked below. These sources are also credited inside the game: UI background Author: Jetrel, Download Link: Map Tiles: Author: ansimuz, Download Link: Buttons: Author: Kenney, Download Link: Spreading the Word! If you would like to support this game, posting the link below on any of your Social Media accounts would be much much much appreciated! (If you would like to tweet it, you can mention me with @thejamespierce on Twitter.) Play Link: Chase the Shadow
  25. How does one animate the gain or loss in degree's of an arc drawn around a sprite ( based on how much health the spite has. ) E.g. 50% = 180 degree arc. Gain 25% health, grow the arc to 75 degrees. Loose 50% health, reduce ark down to 25 degrees.