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. 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.
  2. 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; } }
  3. 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?
  4. 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
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. 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.
  14. [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 .
  15. 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
  16. 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.
  17. 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!
  18. 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
  19. [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:
  20. 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!
  21. Tilemaps using csv files

    We have a game using Flixel that we are now trying to port to Phaser. The game uses tilemaps made in Dame exported to simple csv files, like this: 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,2,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,1,1,1,1,1,1,1,1,0,0,0,00,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0My question is now, are there any examples to show how to make tilemaps like this work in Phaser? In theory this might be possible but I have seen no examples of it working, only examples using Tiles and json.
  22. EDIT: For those still interested in this issue I have revived it with updated code and such here. Heya, this is my first post so I apologize if this has already been covered in another relevant topic. Essentially I am setting up a HUD prototype. I pass the game object to the HUD initially then prototype all of the relevant functions afterword. I am trying to get a timer setup to essentially display a 1 minute countdown. Each time I try to run the game though I get the error... Uncaught TypeError: Cannot call method 'loop' of undefined Here is the code I am using... ~~~ HUD = function(game) { = game;this.score = 0;this.text = null;//this.timer = null;}; var countDown = 60; HUD.prototype = {create: function() {this.text =, 16, 'Score: 0\nTimer: 01:00', { fontSize: '32px', fill: '#000' });, updateText,;}, update: function() { }}; function updateText() {countDown--; if (countDown < 10) {this.text.content = 'Score: 0\nTimer: 00:0' + countDown;} else {this.text.content = 'Score: 0\nTimer: 00:' + countDown;} if (countDown == 0) {endGame();}} function endGame() {game.state.start('GameOver');}~~~Any thoughts?
  23. How sprite zoomed in in Phaser ?

    I have an idea of 2d-arcade multiplayer game, i tried many frameworks and now i think Phaser is tehe most friendly and easy to learn. But i haven't found way to zoom in sprite in phaser. It's really important in my game becouse it used 16-bit stiled sprites. Is any way how i can do it?
  24. Hey, I am looking to have a bunch of sprites move around and then have a function linking to a button which when pressed halves the x speed of all sprites in the group and then when pressed again returns the speeds to the original value. It needs to work for all objects in the group which may be travelling in different x speeds and in different directions. I have tried to implement something but some platforms are using tweens to move backwards and forwards and I can't see a way to do this with tweens? Would it be better to try and just use the velocity of each object in the group without using tweens at all? Thanks for any help
  25. Change text colour dynamically

    Hi all, Is this possible? e.g. // Create textvar t =, 10, "Hello World", { font: "16pt Arial", fill: "#FFFFFF", align: "center" });// Ideally not this because it uses internal values, and actually doesn't update the text displayed. t._style['fill'] = "#FF0000";// Perhaps something like this...!t.updateCSS({ font: "16pt Arial", fill: "#FF0000", align: "center" });Thanks!