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
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 3,292 results

  1. I am currently using the Phaser project template located on Github. I tried to search online for a way to minify my game files, yet I've ran into pages that talk about using 'GruntJS'. I am currently not familiar with the javascript task runner. Can anyone give me links to tutorials on how to minify phaser games? Or can anyone post a detailed description on how to do so? I would appreciate it greatly.
  2. Hi, I just want to mention my Flappy Bird inspired game Tubeyflaps ( I've made it using Phaser. It's far away from a master piece and mainly a proof of concept and proof of my grunt based phaserBoilerplate ( The whole game is MIT licensed and OpenSource. You can find it here: Cheers! Casarock
  3. Hi, I just changed from 1.1.2 to 1.1.4 and i can't detect to collision side of my sprite. define("Play", ['Game', 'Holoboy'], function(Game, Holoboy) { var Play = function (){ = Game; this.holoboy;; this.layer; }; Play.prototype = { preload: function(){, 0, 'preloaderBackground'); }, create: function(){ this.holoboy = new Holoboy(0,0); ='map');'tiles');, 12); this.layer ='Calque de Tile 1'); }, update: function(){ this.holoboy.move();, this.layer); console.log(this.holoboy.sprite.body.touching); } } return Play; });My console.log(this.holoboy.sprite.body.touching); always alert me Object {none: true, up: false, down: false, left: false, right: falseā€¦} My holoboy object : My controllable object : The collision works well by the way. My character can jump on the tiles and he is stopped by them. What's wrong with my code? Thank you
  4. Hey guys.I wanted to make a fuctionality through which If i select a sprite its gets replaced by a highlighted version of that sprite(the ones with selected in their name) and the other objects become rplaced by their unhighlighted version however with the current code whats happening is when testing the program it seems to be making an stran instance of the unhighlighted versions. function create () { mothership = game.add.sprite(90,100,"mothership"); mothership.inputEnabled=true;,this);;//the bots group bot1=bots.create(400,100,'bot1'); bot1.inputEnabled=true;,this); bot2=bots.create(700,100,'bot2'); bot2.inputEnabled=true;,this); } function listener(sprite, pointer) { if(sprite==mothership) { sprite.kill(); MothershipSelect(); Bot1(); Bot2(); } if(sprite==mothershipSelected) { sprite.kill(); Mothership(); } if(sprite==bot1) { sprite.kill(); Bot1Select(); Mothership(); Bot2(); } if(sprite==bot1Selected) { sprite.kill(); Bot1(); } if(sprite==bot2) { sprite.kill(); Bot2Select(); Mothership(); Bot1(); } if(sprite==bot2Selected) { sprite.kill(); Bot2(); } } function MothershipSelect() { mothership.kill(); mothershipSelected = game.add.sprite(80,100,"mothershipSelected"); mothershipSelected.inputEnabled=true;,this); } function Mothership() { mothershipSelected.kill(); mothership = game.add.sprite(90,100,"mothership"); mothership.inputEnabled=true;,this) } function Bot1() { bot1Selected.kill() bot1=bots.create(400,100,'bot1'); bot1.inputEnabled=true;,this); } function Bot1Select() { bot1.kill(); bot1Selected=bots.create(400,100,'bot1Selected'); bot1Selected.inputEnabled=true;,this); } function Bot2() { bot2Selected.kill(); bot2=bots.create(700,100,'bot2'); bot2.inputEnabled=true;,this); } function Bot2Select() { bot2.kill(); bot2Selected=bots.create(700,100,'bot2Selected'); bot2Selected.inputEnabled=true;,this); }
  5. redwoodfavorite

    Trouble animating a texture atlas

    Hello, I'm having some trouble animating a sprite atlas. I apologize if this is something I'm doing wrong in TexturePacker but I can't seem to get it to animate right in Phaser. I loaded the atlas using game.load.atlasJSONHash() and it IS flipping through all the frames. The problem, however, is that the textures seem to re-center on the sprite based on the width of the particular frame. The running animation for my sprite worked perfectly because the width and height of each frame stayed the same, but when my sprite extends his sword out from his body and expands his size, his texture is re-centered. This causes his whole body to appear to shift over slightly. It almost seems as if I need to adjust the anchor point for the sprite at each frame. I hope that explanation makes sense. Here are some pictures of my spritesheets. It is worth noting that the slash animation works as intended if I don't perform the trimming and I leave all the frames the same size. TRIMMED: NOT TRIMMED: Any help would be greatly appreciated. Really enjoying Phaser thus far!
  6. Videlais

    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.
  7. Guys I have the following code to make a star sprite and 2 firstaidbox(added through group) sprites.what i want is that when i click the star the firstaid boxes should dim(alpha=0.5) and vice versa.however the mouse event doesnt seem to work when I click the firstaid boxes. function create () { starimage = game.add.sprite(100,100,"star"); starimage.inputEnabled=true;,this);//the firstaid boxes for(var i=2;i<4;i++) { var myvar=bots.create(i*100,100,'firstaid'); myvar.inputEnabled=true;,this); } } function listener(sprite, pointer) { if(sprite==starimage) { sprite.alpha = 0.5; bots.alpha=1; } if(sprite==bots) { alert("clicked"); sprite.alpha = 0.5; starimage.alpha=1; } }
  8. I know the number of FlappyBird clones flooding the internet is getting a bit ridiculous, but I couldn't resist making one myself! I made the game with Phaser and was pleasantly surprised at how intuitive it feels - all round a great framework. As it was a learning excercise for myself, I've liberally documented the source so hopefully other phaser beginners can benefit from it. Play it here Hope you enjoy! p.s. my hiscore is 14, can you beat it?
  9. StefanWeck

    Dynamic Tilemap

    Hey everyone! Recently i have created an Random Dungeon Generator ( ), and i'm porting it to a plugin for Phaser. The only problem i encounter is loading my custom map in the game! I've tryed preloading an "empty" ( just dummy data, 0's etc ) json file, setting that as my tilemap and change it. I've tryed creating an empty tilemap and fill it with my data. Even tried to generate my output the same as the example json tilemap files, but that's a big pile of work. Is there any solution for doing this? Is there an example where someone creates an empty tilemap object and fills it with data? The examples on the Phaser website only load pre-defined maps as .json files. Thanks in advance! Stefan
  10. Hi all, Please find the following link which I have done using construct2 game engine and it took me almost a week to do this. Considering my programming skill of a designer(who also codes sometimes) it would take more time in Phaser. Can you help me out with a code snippet which simulates the action shown in the link The algorithm I have used is ... I am storing the trails as the player is touching the screen and storing the X,Y, direction (relation between previous consecutive trails) in an array which I am looping through and then changing the Y position of the main Sprite when the X of the next trail is less than the main sprite. ..if the current direction is LEFT to RIGHT.similarly changing the Y position of the main sprite if the X of next trail is greater than the main sprite ..if the current direction is RIGHT to LEFT sorry if the explanation for the algo is crude thanks
  11. Hey guys,Ive been working on making a level editor in unity and then storing the resultant transform information like scale,position and rotation in a.json file to be read by phaser.while the position and rotation work perfectly well by changing the pivot of the sprites in unity.the scale doesnt seem to work ie the scaling in unity doesnt show the same result in phaser.if anyone has suggestion on how to calibrate it please let me know.
  12. aihimel

    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.
  13. I would like it so that when a certain event happens, the player completely stops moving (for a few seconds or so), the user does not have the ability to move at all, and I am then able to proceed to call a function (which calls a function to end the game). How would I implement this? Here is a snippet of code located in my Update function: (Please note: I am using the Phaser basic template, so when calling functions and methods, we must use 'this'. if (, certainItem)) { var hit ='hit');; certainItem.kill(); player.body.velocity.x = 0; // Tried to stop, but I am still able to move him'hit'); // Changes to the frame I wanted but then quick //-ly changes back // this.gameOver(); }Thank you in advance.
  14. rumdumdum

    Swipe to Jump

    Hello. I am looking to add a swipe action, so that I can make the player jump. For navigation I have split the screen in two parts, if player clicks and holds on one right side the character will move right and vice versa. if (game.input.pointer1.isDown){ if (Math.floor(game.input.x/(game.width/2)) === LEFT) { // Move to the left player.body.velocity.x = 150;'right'); } if (Math.floor(game.input.x/(game.width/2)) === RIGHT) { // Move to the right player.body.velocity.x = -150;'left'); } }How can I record swiping up? Cheers Richard
  15. Dream Of Sleeping

    Is it possible to crop left side of image?

    Hello. I know altering the width of the crop of a sprite takes away from the right side of the image. I really need to crop the left side. I've tried altering the crop x properties but just get a kind of black shadow added on the end. I can't make sense of what is going on. Here is an example. I've cropped the left side of the robot arm, but now you can see the black line going onto the pipe. I need to get rid of that.
  16. My first game with the phaser framework. It's a browser game where you control a bird & a little guy to help them escape. You can switch between the bird and Finn and need to catch the feathers to stay alive. This is just the first version of the game and we are probably going to expand the game with more powerups and enemy's in the near future... Here is the link to the game if you want to try it out Let me know what you think about it.
  17. miguelfeliciano

    Best Practice for Graphics

    I'm still new to Phaser and have a concern of best practice for loading up images with my main concern being performance. I understand how to load up images and sprites (for characters and such), but I'm building a game much like Scrabble and I created a spritesheet containing all of the images I would need. I was able to load up the board for the game, but now I want to load up the rest of the images in that spritesheet. The only option I can think of is to cut up the spritesheet in PS and have individual images to load up separately; I don't think a tilemap would work in my situation. I was hoping to have one spritesheet (png) to load and just tell Phaser where all of the images are in that spritesheet. I would think this would be something of a best practice instead of loading each image individually. I'm also experimenting with the Tiled app and generating the tilemap data and then loading whatever individual images I need to load; each image would need to be draggable. What other options are available to me?Is there a plug-in that can extend the functionality of the game.load.image function?What's the best practice in this kind of game scenario? Thanks in advance
  18. Hello everybody, I have an issue with a Sprite vs Sprite collision (Phaser 1.1.4 - Master branch). I don't know why but my player only collides with the bottom of the rock. You can see the problem here : The 2 scripts involved are player.js and rock.js (you can see the code with your developer tools too). The rock is immovable and I call the "game.physics.collide()" in the update function of Rock (in rock.js). As you can see on the image below, my player has a specific bounding box (done with the sprite.body.setRectangle() function). I tried but I can't figure it out. Please, help me Thank you.
  19. Arlefreak

    [WIP] Phaser Snippets

    I started working on a Sublime Text Package for phaser Phaser Snippets, the objective is to learn more about phaser on the progress, that's why I'm not automating the process and taking long to finish it. The thing is I have some questions for the comunity beacause there are a lot of method's I havn't really used so I don't know the best way to call them for example for the Animation Manager wich I normally use inside a sprite the snippet output is: .add('name',frames,frameRate,'loop',useNumericIndex);But for Utils class is : Phaser.Utils.pad('str',len, pad, dir);So if someone has some feedback feel free to tell me and I will update the package with the best way of the output, also the repo is on Github So if you wan't to make the process faster do a pull request .
  20. Rui Abrantes

    newbie - problems with Ejecta

    Hello everyone, I'm newbie with Phaser and I am trying to run it with Ejecta, but it fails on the iPhone: Error: Phaser.Game - cannot create Canvas or WebGL context, aborting. at line 13428 in phaser.js This is the basic code: ejecta.include('phaser.js'); var w = window.innerWidth; var h = window.innerHeight; var game = new Phaser.Game(w, h, Phaser.AUTO, 'canvas', { preload: preload, create: create, update: update }); function preload() { game.load.image('box', 'assets/box.png'); } function create() { game.add.sprite(200, 200, 'box'); } function update() { } I'm much appreciated if someone show me a simple demo. Sorry for my english. Thank you
  21. Hello, i recently started trying to work with this engine and got TypeScript and VS2013 running on my laptop. I have followed the first TypeScript tutorial multiple times and it will not display the image.
  22. polkapunk

    Background Color With Canvas?

    I'm having trouble getting the background color to work in canvas mode. The background displays correctly as white if I do this: var game = new Phaser.Game(640, 480, Phaser.AUTO, '', {create: create});function create() { game.stage.backgroundColor = 0xffffff;}But if I change Phaser.AUTO to Phaser.CANVAS, the background color is the default black. I'm using the latest version of Phaser (1.1.4). It's happening to me in both Firefox and Chrome. Does anyone know if this is a bug? Or am I doing something wrong? Any help would be appreciated. Thanks!
  23. I'm trying to make a little game using physics, where the user pushes balls around. The balls are defined as Sprite extensions, like this: function Player(game, type) {, game,,, 'player') this.anchor.setTo(0.5, 0.5) this.type = type this.body.collideWorldBounds = true this.body.allowRotation = true this.body.bounce.setTo(0.6, 0.6) this.body.setCircle(50) this.body.angularDrag = 50 this.body.drag = 5 game.add.existing(this) } And the interaction is based on doing: this.players.getAt(0).body.velocity.x -= 10with every one of the directions, depending on the key pressed. It works, I can push elements around. But I'm facing an issue, I don't know it it's a bug or it's just expected to work like this and I'm missing something. The problem is that the elements overlap in some situations. For example, if I keep pressing the key, forcing the sprite against another one, it may finally "break" the collision boundary and overlap. Is there a solution for this? Is it a known issue? Thank you
  24. JLevstein

    [Help] Phaser Groups and Classes

    Hi there! I'm having an issue with trying to figure out best practices with creating multiple sprites on a screen. I've been using this blog post as a reference for how to structure my game into classes: and so far it's been great. I like how neat it leaves my code. However, I've been trying to create multiple instances of a class and whenever a new instance appears, the previous one loses all of its properties and just drops into the ether. Any advice on how to move forward? I've tried creating a group, but I'm not sure how to pass the class into it. For reference, here is my game so far:
  25. Robert O'Rourke

    iOS spritesheet scaling problem

    Hello, I've been making a few proof of concept games to move some old games from flash to html5. I've got a simple Simon memory game using a deck of cards set up here. I've set up a spritesheet for the deck of cards so I can just choose a frame to change the card. The cards are arranged in a row and then in columns depending on how many you show and are scaled to fit into as much of the screen as possible. It works on desktop and android but on iOS devices the frames from the sprite sheet are messed up or just don't show. When they do show it looks like there are exactly 4 of the sprites so I'm guessing it's related to the device pixel ratio. Is there something I can do with Phaser.StageScaleMode to compensate? Thanks!