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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 2,852 results

  1. Issues making my first snake game

    Hi, I have been working on my first full game and decided to try a snake clone. I haven't followed any kind of tutorial and have just been trying to get to grips with the framework. I am however having a few issues and have been stuck for a couple of hours to try and fix a couple of annoying bugs. The first main issue I have with my game is that collisions don't seem to be firing correctly. I have tried to set one up when the head of the snake collides with any of the tail elements which just restarts the game state for testing purposes. This seems to however try to trigger another function which should only happen when a player collides with food. I am guessing I need to setup my collision handlers differently in order to fix this. The other bug is that when a bit of food has been eaten a new sprite it created but just before it does it gets added randomly to somewhere on the screen then disappears but I can't work out why that would be. I setup a git repo of my project so far on github and it can be found here: If someone could offer some advice as to what I can do to fix this I would be very grateful. Thanks
  2. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template ( Templates/Webpack) and an example from the website ( The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body();; // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  3. WildCowboy

    Hello, game devs I created my first game WildCowboy with Phaser.js. This game is interpretation classic Sokoban. Game include 60 classic levels. I will be glad to hear your opinion and comments links: Web: Android: Google Play Regards.
  4. Facebook Messenger Inspired Basketball game

    Hi, this is my first HTML5 game using Phaser, I found this gem because I have a project to create a basketball game and it is very similar from what I needed. My concern is how can I remove the frame drop. Because every time I play the frame drops ridiculously. Both in Desktop Chrome and Smartphone Chrome. All the assets are in low resolution. I can't find a fix why this happens. I hope someone can help me. Thanks!
  5. Flappy Rock, My first game in phaser:)

    Play the game
  6. Web font not shown correctly

    I added text into a sprite as child. My text could not show font correctly. Anybody could help me? My code is as follows: = { font: "30px Arial", fill: "#000", boundsAlignH: "center", boundsAlignV: "top" }; ... this.textContent = this.add.text( -30, -60, "test content",; ... However, what I got on test webpage was not Arial font, but as shown in attached image. Why is that?
  7. I want to check how much of my second sprite is overlapped with first sprite in callback function,so that i can determine if the overlap is enough for(% of overlapping) for further process.But when i check that with overlapY/overlapX .i am getting 0 always .Please help.
  8. Hi I have a zip file that I tested on cocoon dev launcher and is working fine but not after compiling on the cloud. Any ideas thanks
  9. This is a continuation of Phaser multiplayer game tutorial with Node.js server and This is part 3 and we're implementing some simple game mechanics with authoritative server. Part 3:
  10. Hello to everyone, I'm currently developing a fan-made, retro-style and non-profit game with Phaser based on the TV show Stranger Things. The main idea is to do a Point and Click game like old classics (Monkey Island saga, Indiana Jones and the fate of atlantis, etc...) with retro pixel-art graphics and chiptune music. I'm looking for GFX and Music artists If you are interested to collaborate with this project please contact with me and I'll send you a link to see the work in progress. (Sorry if there are some grammar errors, I'm Spanish).
  11. Can't load images by any means.

    Im attempting to make a game with Phaser and nodeJS. I was doing my character as a graphic (game.add.graphic) but couldn't figure out how to remove the graphic so I figured I'd make a sprite and load it. var Game = { preload: function(){ game.load.image("snakeBody", "../../assets/snakeBody.png"); game.load.image("apple", "../../assets/apple.png"); }, my folder structure is like so: -assets -static -scripts -game.js But it tells me that it can't find both files. I've also tried to add this line app.use(express.static('assets')); and then var Game = { preload: function(){ game.load.image("snakeBody", "localhost:3000/assets/snakeBody.png"); game.load.image("apple", "localhost:3000/assets/apple.png"); }, But same error occurs. EDIT: Solved it, tursn out I had to set the path as just "/snakeBody.png". I still dont understand why, but this worked.
  12. 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!
  13. Common Phaser + CocoonJS issues

    Last update of this information was 13 August 2014. Note: As of this writing, CocoonJS (2.0.*) comes in a total of three modes. [system] WebView creates an instance of the default browser for a platform, loads its own API, and then hands off the code execution. In most cases, it is the same as running the code in a mobile platform's default browser. WebView+ is often the same as WebView, but adds in Chromium-based libraries. For Canvas+ mode (previously accelerated, "Canvas 2D/WEBGL") it strips out things like XML and most DOM and CSS support to make running the canvas as fast as possible. Because of this, most common things like getElementById and createElement in JavaScript have reduced functionality. It is designed purely for Canvas-based projects. (For the 2.0 branch, see the changelog from 1.4.7.) Since there is limited DOM support, make sure to use an empty string for the parent element during the creation of a game object when using the accelerated/Canvas+ mode. (This is to make sure the created canvas element is appended to the document.body object, and not some other element the getElementById function cannot find.) var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, '', {preload: preload, create: create, update: update});Issues with Phaser <= 2.0.7 and CocoonJS <= 2.0.2 (Canvas+) Images Use of multiple images may introduce disappearing or flickering results. Text Single-line text printing works. However, using the newline character will not produce the correct results. Setting anchor.y values do not work correctly.Shadows do not work. XML CocoonJS does not have native support for XML. Its XHR does not return responseXML and it does not have a window.DOMParser object. Scaling Generally, you can use window.innerWidth and window.innerHeight to compute the size of the screen in CocoonJS. However, if you know there might be a device pixel ratio issue, the following code works for that. var width = window.innerWidth * window.devicePixelRatio;var height = window.innerHeight * window.devicePixelRatio;Depending on your needs, Phaser's built-in scaling manager will often be enough. However, the following code suggested by Starnut should be helpful for accounting for odd screen sizes as well. var w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio,width = (h > w) ? h : w,height = (h > w) ? w : h;// Hack to avoid iPad Retina and large Android devices. Tell it to scale up.if (window.innerWidth >= 1024 && window.devicePixelRatio >= 2){width = Math.round(width / 2);height = Math.round(height / 2);}// reduce screen size by one 3rd on devices like Nexus 5if (window.devicePixelRatio === 3){width = Math.round(width / 3) * 2;height = Math.round(height / 3) * 2;}var game = new Phaser.Game(width, height, Phaser.CANVAS, '');BitmapFonts Because of the lack of XML support, one solution for BitmapFonts is to convert the XML into JSON and use an alternative loader. This post covers the code needed and what to use to convert the XML into JSON. Audio Most often, audio problems are related to the device itself, not CocoonJS or Phaser. If you are running on an Android device, make sure you have OGG or WAV (16-bit ONLY) files. Apple devices support MP4, OGG, MP3, WAV (16-bit ONLY), or MPEG. (Remember too that MP3 decoding, depending on the device, can often be slow.) On some platforms, a user-activated event (like touch) is needed to enable sound. This specifically affects iOS devices, but is not uncommon on other platforms too. Using something like a "Tap to Continue" button or an initial menu works well to signal to the player to tap to enable both the game and sounds. Filters Filters don't work currently. (As reported here.) Buttons There is currently a problem where image-based buttons can sometimes disappear. It is under investigation. It is HIGHLY recommended to update to newer versions of Phaser ( >=2.0.7) and CocoonJS ( >=2.0.2). Issues between older versions of both libraries are no longer being actively tracked.
  14. Hello , I'm super new to Typescript , html5 , and I'm looking for some direction, so I started my first "hello world" game and I would like to know how to host it(web host). I have windows hosting through Arvixe... not sure what is required I'm using visual studio 2015 and typescript Thank you in advance Jimmy
  15. How to restart a Game.

    Hello Everyone, I am trying to develop a breakout type game. But can't restart the game. Is there any easy way to do that? Thanks in advance.
  16. [Phaser] Space Blaze

    Hi! This is my second html5 game! It's a arcadey space "exploration" where the player jumps from planet to planet. The goal is to reach the wormholes that lead you to your ultimate destination. All feedback is welcome! Have fun!
  17. Show FPS

    Hi all, Quick question, I'm sure I've seen this in the examples but can't seem to be able to find it. How do you show the current FPS when debugging? Cheers.
  18. Same background image in all states

    Hello, I'm new to the Phaser framework and I'm trying to have a single backgound and logo througout all the states in a phaser game. I add the background image in the very first state but when I start the next state using:"State2"); the background image disappears. Do I have to load the background image in every state? Thanks
  19. Point and click adventure games

    I grew up playing point-and-click adventure games and really love the genre. I was curious if anyone knows of any examples, even small ones, made using Phaser, or others using JavaScript. I have been able to find very little on this, which surprised me quite a bit. There are a few engines available such as JSGAM, but I kind of want to use this as a learning experience about creating more complicated games myself, how to structure them, rather than making an awesome game.
  20. Phaser Scaling Question

    Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. Can you tell me what I should do? Cheers
  21. Hi i'm very new to Phaser but i'm struggling with the onFloor and onCeiling events working together - i'm assuming it's syntax or something stopping this working as i want. Basically i'm playing with the sandbox and using code from the examples to familiarize myself with Phaser - my problem is this (code snippet from update below) the player.body.onFloor event works if i comment out the player.body.onCeiling event and a Game over message appears. As it is if i get the player to the top of the screen I get the You win message - but if i hit the floor then the game over message does not appear and the game seems to freeze and Platforms.destroy() does not execute. or is there a better way to implement "top" and "Bottom" of the screen? var text; var message; function update () { emitter.customSort(scaleSort, this); game.physics.arcade.collide(player, platforms); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -250; } else if (cursors.right.isDown) { player.body.velocity.x = 250; } if (jumpButton.isDown && (player.body.onFloor() || player.body.touching.down)) { player.body.velocity.y = -400; } // mycode if (player.body.onFloor()) { message ="Game Over!"; GameOver(message); } if (player.body.onCeiling()) { message ="You Win!"; GameOver(message); } } function GameOver() { var bar =; bar.beginFill("#FFFFFF", 1); bar.drawRect(0, 250, 800, 100); var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; text = game.add.text(0, 0, message, style); text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2); text.setTextBounds(0, 250, 800, 100); platforms.destroy(); player.destroy(); }
  22. Phaser

    Hey everyone, I have noob questions. I'm creating a platformer game with Phaser, as well as Tiled to create a layered JSON map. So far one of my tile layers is handling all of the inanimate object collisions via, 600, true, this.collisionLayer, false) to which I've passed indices to my entire tileset (only using one). Given that I've done this, does the number of tiles I actually create in that layer via Tiled affect performance? Would it be advisable for me to just use setCollision() or setCollisionBetween and pass only the necessary tiles that I plan on passing to that layer? My tileset is about 1/3 tiles I want to use for collision, and they're not totally organized but I can reasonable get that done if necessary. Also, what's better for performance, bigger tilesets or more, smaller tilesets. What would you consider a sweet spot for this in terms of size and number of tilesets? Note that I've already compressed my images etc and not having any performance issues so far, just taking preventative measures. Thanks for any help in advance.
  23. Game list of phaser games

    Edit by Rich (September 2016): Back in 2013 Mike created a web site (below) that allowed Phaser devs to list the games they'd made. You'll find over 400 games created with some of the earliest versions of Phaser. Lots of the links don't work any more, but some do, and it's a really interesting archive. It's not worth submitting your games to the list any longer, however I'm keeping it, and this thread, because people still post new games to this thread even today. If you do this, it's highly likely I'll see it, and add it to the Phaser web site. Mike's original message follows: ------------------------------------------------------------------------------------------------------------------- What I did started from personal need, but decided to share it and maybe improve it if it went bigger. Well since the engine is still new but there is quite a moving and I check every topic, and game that is made I have a phaser game list:
  24. [Help] Available Screen Space

    I am new to Phaser and mobile. As a learning exercise I am attempting to build a simple demo that renders a Phaser game object in the browser and draws a rectangle around the border of the available visible space. My goal is to make sure I understand how to determine the actual usable space. My game is going to use a board that fills one screen so I do not need (or want) any scrolling. I just want to determine the usable screen space so I can fill it. I have found numerous versions of this question on this forum and others and after trying many of the things discussed I am still not getting the result I am after. Based on reading, I think I should be using window.innerWidth and window.innerHeight to get the dimensions I want. On my desktops (using Chrome and Edge/IE) it works as expected. On my tablets (iPad and Nexus) it works as expected for both portrait and landscape orientations. On my iPhone (6) it works in portrait but when I turn it to landscape (and refresh the screen) the browser's navigation bar covers the bottom. On my Android phone it works in landscape but when I turn it to portrait (and refresh the screen) the browser's nav bar covers the bottom. I have spent a couple days on this so now it's time to ask for help... Is there a property I can use to get the actual usable space in the current browser or will there always need to be tweaking for specific devices? Thanks for any suggestions, DK Edit: So I added a check in the render function to watch for the screen size changing. When a size change is detected it rereads the window.innerHeight and window.innerWidth properties and then resizes the game accordingly. Doing this inside the render function appears to solve the problem. I am going to go with this for now. If anyone has any additional words of wisdom I am still open to suggestions.
  25. Hey everyone so I started my venture into programming months ago and started out with game maker language but didn't think I would ever get a job writing games in GML and so I stopped learning it and started learning HTML CSS and just recently 3 months or so ago got into what I thought would be super scary JavaScript, I dabbled in all the languages I could tbh and they all seemed so daunting. I didn't know what to do so I went back to HTML, CSS and JS. I think I understand JavaScript at a beginner level. My question how ever is.Is trying to study HTML5 game development as a sole hope to get a job doing it viable? I mean I can sit here and learn more on making websites but its not really my interest at all. I love games, playing em coming up with ideas to make em all of it. I would of learned Unity or Unreal but C# and C++ seemed so confusing to me, I like how JavaScript writes it just makes sense to me. But then when I start to make games and I've made some with tutorials with the Phase framework. I just get confused if I try to do it on my own. With Phaser I've done many many tutorials but I still can't seem to set out and just write it on my own. I just want to be able to one day make a game and have some kid stumble upon a kick ass browser game like I did years ago when I saw my neighbor playing Tibia and later RuneScape and thought it was the coolest thing ever. I know that RuneScape was originally written in Java and now C++, and Tibia was always a downloaded game idk what language it was written int but it does have a browser option now and I think thats amazing. Great games accessible anywhere with no download. Sources I've used to make games with Phaser Zenva Academy Interphase From Null to Full Lessmilks 2d Platformer Lessmilks Flappy Bird And I've even learned to just make games on the canvas with these 2 sources (no game engine.) GameKedo Intro to Canvas GameKedo Follow Up to beginner course Basically What I'm asking is if I should continue down this route and try to flesh out my skills and get a job for game development and what other sources or routes can I take to get there?