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
    • 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,149 results

  1. Visual Novel Engine RenJS

    Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in, you can also get the code from, download it, play it locally and grab the files to make your own visual novels. There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!
  2. 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.
  3. 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
  4. 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!
  5. 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"); } }
  6. 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?
  7. 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>
  8. 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.
  9. Getting a 2D array for Easystar?

    Hi all, I have been trying to follow this tutorial here: However, it mentions about a 2D array and right away I'm lost. I have a game in Phaser Isometric but I don't use a 2D array at all. I just have a tile and a loop to add to a tile group. spawnTiles: function () { var tile; for (var xx = 0; xx < 400; xx += 38) { for (var yy = 0; yy < 400; yy += 38) { // Create a tile using the new game.add.isoSprite factory method at the specified position. // The last parameter is the group you want to add it to (just like game.add.sprite) tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tileGroup); tile.anchor.set(0.5, 0); } } } How do I get a 2D array for Easystar to use?
  10. 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::
  11. 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.
  12. 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
  13. 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
  14. 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):
  15. Hey! This is my first thread, I'm new here, so hello everyone! I started last week with phaser, and I am trying to test some features like extend the world, adding other sprites to background, adding a camera, all of this in the "game" that you make in this tutorial. So now, I want to learn how friction works in platforms or ground. game.physics.startSystem(Phaser.Physics.ARCADE); platforms =; platforms.enableBody = true; var ground = platforms.create(0, - 64, 'ground'); ground.scale.setTo(4, 2); ground.body.immovable = true; ground.body.friction.x = 0; I want to set my ground like ice and that the player can slide, but it didn't work and I don't know why. If there is no other code that involves "ground", maybe the problem is with the player sprite? :S The version of phaser i am using is 2.9.4 btw.
  16. 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,
  17. 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.
  18. 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!
  19. 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.
  20. bouncing ball maximum height

    Let's say I have 3 balls in a game: large, medium, small. I want each of these balls to bounce to a maximum height (defined by me) but without bouncing at the top. Simply to arc naturally to the maximum height, then start falling again. Is there a straightforward way to accomplish this?
  21. Move world position on canvas

    Hi I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet. I have set the size of the canvas using the following code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render }); I have added a sprite that sits at the bottom of the screen full width (as expected) using the following: shapeMenu = game.add.sprite(0, 500, 'shapeMenu'); Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas). I have done this, but the world is sitting in the top left corner:, 0, 400, 400); Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)? Thanks!
  22. Hi I'm new to phaser and have been trying to use some of the examples as a starting point. I'm planning on using the "Pick Up Object" example, but restrict the area that the tetris shapes are placed in - so that they land on a solid platform. I would then add 3 x buttons to add more of the shapes onto the screen. Example here: Would the best way to achieve this be to build the solid platform using a kinematic sprite as documented here: If not, what is the best way define the area that the shapes are placed in - so they do not fall behind or in front of the platform and buttons? Thanks! Tom
  23. Help to make sprite follow curved path

    i need the penguin sprite to follow the blue curved path , I have used a sin cos generator for the platform the code is attached below.
  24. Phaser + VueJS

    Excuse me! I have a problem with the game develop. I have 5 states: state1~state5, and every state has preload, create and update 3 function. How should I put them in mounted and methods? In original code: var GameObj = {}; GameObj.Index = function (game) { }; GameObj.Index.prototype = { create: function(){}, update: function(){}, player: function(){} }; And I try to write in VueJS: import 'pixi'; import 'p2'; import Phaser from 'phaser'; export default { name: 'game', props: { height: Number, width: Number, }, mounted() { let self = this; const gameHeight = document.querySelector('#gameBox').offsetHeight; const gameWidth = document.querySelector('#gameBox').offsetWidth; if ( === null) { = new Phaser.Game({ width: gameWidth, height: gameHeight, renderer: Phaser.AUTO, parent: this.$el, }); } this.addSate(); }, methods: { addSate() {'GamePreloader', function() { this.prototype = { preload(Phaser) { ... }, create(phaser) { ....'GameIndex'); }, }; });'GameIndex', function() { this.prototype = { create(phaser) { .... }, memberLogin(phaser) { .... }, }; });'GamePreloader'); }, }, data() { return { game: null }; }, }; I don't know if my structure has a fault? Because there is nothing in the canvas to display.
  25. Hi, To simulate a laser blaster heating and cooling I used setInterval for the cooling and setTimeout to delay the cooling if the weapon overheat (firelimit reached). While the weapon is cooling, if it fires again the cooling is aborted (clearInterval, only if the weapon has not overheated). Although it is working correctly while in game, the cooling or the delay is not paused when the game window loose focus, that's because of setTimeout and setInterval. Here is a demo Blaster heating and cooling, some heating and cooling feedbacks are logged in the browser console and a heating meter in the top right camera corner. The colldown function using setInterval. The overheat handler using setTimeout. The cooldown aborter using clearInterval. The github repo. How should I use Phaser.Timer and Phaser.TimerEvent to implement the same behaviour and then get the cooling timer and cooling delay paused when the game window looses focus.