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,361 results

  1. KevinnFtw

    Sprite.tint semi transparent color?

    Edit: Nevermind, was being stupid... because it already multiplies the color I should just use more transparent color codes.
  2. rjungemann

    Trouble with putTile

    Good evening all, I am trying to use putTile to generate a tilemap. Unfortunately, whenever, I try and create a tile somewhere other than at x = 1, y = 1, the tile does not appear. I'm using Phaser 2.0.5 and the Ninja tileset, though for this example I've not yet added physics. Note that although I try and create a tile at 1, 1 and one at 1, 2, only one tile appears. I've tried tweaking with the parameters a few different ways to no avail. Thanks in advance! <!DOCTYPE html><html> <head> <title>Tile Example</title> <script src="/javascripts/lib/phaser.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game-container', { preload: preload, create: create, update: update }); function preload(game) { var me = this;'collision', '/assets/tilemaps/tiles/ninja-tiles32.png'); } function create() { var me = this; =;'collision', 'collision', 32, 32, 0, 0); me.collisionLayer ='collision', 16, 16, 32, 32); me.collisionLayer.visible = true;, 1, 1, 'collision');, 1, 2, 'collision'); me.collisionLayer.resizeWorld(); } function update() { var me = this; } </script> </head> <body> </body></html>
  3. Edricus

    Memory Issues

    Hello everyone. So I am building a pretty basic game and thus far everything has gone fine. However now I am just doing some performance enhancement on the game. I noticed something very weird. Upon loading the game memory spikes up to almost 20 MB then GC kicks in and drops to around 9.0 or so MB. This is all while just idling at the menu. Here is a screenshot of the memory log in Chrome. Also I have pasted the code that runs from my Boot, Preload and Menu states. Hopefully someone can point out something blatantly obvious that I have missed. :S 'use strict';function Boot() {}Boot.prototype = { create: function() { // Set max number of touch inputs = 1; // Start the next state'preload'); }};module.exports = Boot;'use strict';function Preload() { this.ready = false;}Preload.prototype = { preload: function() { // This event is dispatched when the final file in the load queue has either loaded or failed this.load.onLoadComplete.addOnce(this.onLoadComplete, this); // Load all assets for the game // Title Screen Assets this.load.image('background', 'assets/background_title.png'); this.load.image('playBtn', 'assets/play_btn.png'); // Game Screen assets this.load.image('mouthBackground', 'assets/mouth_background.png'); this.load.image('mouthwash', 'assets/mouthwash.png'); this.load.image('toothpaste', 'assets/toothpaste.png'); this.load.spritesheet('tooth', 'assets/tooth.png', 80, 95); this.load.spritesheet('bactoSurfer', 'assets/bactoSurfer.png', 34, 24); this.load.spritesheet('sharkBacteria', 'assets/sharkBacteria.png', 36, 45); this.load.spritesheet('octoBacteria', 'assets/octoBacteria.png', 36, 45); // Game Over Assets this.load.image('scoreboard', 'assets/scoreboard.png'); this.load.image('gameover', 'assets/gameover.png'); this.load.image('startButton', 'assets/start-button.png'); this.load.image('exitButton', 'assets/exit-button.png'); }, update: function() { if(this.ready === true) {'menu'); } }, onLoadComplete: function() { this.ready = true; }};module.exports = Preload;'use strict';function Menu() {}Menu.prototype = { create: function() { // Add the background sprite this.background =, 0, 'background'); // Play Button this.startButton = * 0.5, 350, 'playBtn', this.startClick, this); this.startButton.anchor.setTo(0.5, 0.5); }, startClick: function() {'play'); }};module.exports = Menu;
  4. After reset to player and ball position the overlap function not working, I am very new to phaser, Could someone please help me out. Here is the reset and overlap code: function reset(){player1.frame = 6;player2.reset(400-80,;game.physics.startSystem(Phaser.Physics.ARCADE);player2.body.velocity.x = 0; ball.reset(400-30,400);ball.scale.setTo(0.4,0.4);game.physics.arcade.enable(player2);game.physics.arcade.enable(ball); } function update(){player2.body.velocity.x = 0;game.physics.arcade.overlap(player2, ball, collectBall, null, this);}
  5. I've been experimenting with Phaser a bit the past few days. I've encountered a problem with sprites not overlapping with tilemaps. Two captures follow with slightly different settings in play. 1) 2) The robot near the center is a sprite, shooting other sprites. It has moved hard up into the corner of a couple walls defined by a tilemap, such that when the bullets appear they are already inside colliding tilemap tiles. I would expect the bullets to overlap and be killed by my handler. Note that they do collide otherwise, so there's no basic problem here of improper collision flags or such. The green boxes are the body debug draw, showing that they're in the right places. This is using arcade physics, Phaser 2.0.5. I can't find any "reasonable" setting of TILE_BIAS, tilePadding on the bullets, velocities, etc., that prevents this problem in all cases. At first I thought the bullets were simply moving too fast, hence their velocity is much slowed down in the second capture. In both cases though they're clearly squarely in the middle of the colliding tiles for several cycles, but still no overlap. Note in the first example that the angles work out such that the left shot is probably starting right on the edge of a tile and is properly detected after it first enters the tile (hence the slight flickering). Currently I have TILE_BIAS set to 40 and the following creation code on the bullets: this.pBullets.createMultiple(40, "player-shot"); this.pBullets.setAll('anchor.x', 0.9); this.pBullets.setAll('anchor.y', 0.5); this.pBullets.setAll('pivot.x', -30); this.pBullets.setAll('body.width', 4); this.pBullets.setAll('body.height', 4); this.pBullets.setAll('body.tilePadding.x', 16); this.pBullets.setAll('body.tilePadding.y', 16);The tilemap is created as such: ="map", 32, 32);"tiles");, 10);, 38);, 67); this.ground =;The collision is called as such: this.physics.arcade.overlap(this.pBullets, this.ground, this.bulletHitWall, null, this);And the overlap callback is: bulletHitWall: function(bullet, wall) { bullet.kill(); },Any thoughts? Thanks
  6. shmikucis

    MightyEditor goes open-source

    Several months after we started working on HTML5 game editor, we have decided to open-source it – giving the community a tool that will help you in the game development process. We are thrilled to see the development of other open-source tools and frameworks, and we are hoping that letting people join us in the process of creating this awesome tool will give an additional boost to the future of MightyEditor. Our team is fully dedicated to continuing our work on improving the editor, adding additional features and fixing the bugs. MightyEditor started out as a simple tool for our own games, but seeing an increased interest from the community, we decided to improve it and develop it as a universal editor that can also be efficiently used by other developers. This strategy leads to money questions. Currently we are funding the editor from whatever we can spare while developing our own games so it takes a chunk of our resources, but in the future we are planing to launch a web service where you will be able to buy advanced plugins, hosting and other goodies for reasonable amount of money. We will be happy to see other developers creating their own free and paid plugins. Check out online version of the editor or fork it on github. Some updates that are coming in near future: Tileset support Texture atlas Simple physics support + ninja physics tilemap Tweens
  7. I am having a problem getting Phaser to use Buttons and implement their click features when I include my CSS style sheet. I am guessing that it has to do with containers and positioning but would like some help as I have been stuck on this for several hours. The code for my php index page is below: <html> <head> <title>Border Test</title> <script type="text/javascript" src="globals.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="phaser.min.js"></script> <?php if(!isset($_SESSION['player'])) { echo "<script type='text/javascript' src='prompt.js'></script>\n"; } ?> </head> <body> <div id="border"> <canvas id="surround" width="1350" height="600"></canvas> </div> <script type="text/javascript" src="borderHandle.js"></script> <div id="game"> </div> </body> </html> The code for the globals is: var WIDTH = 1200;var HEIGHT = 530; The code for the CSS is: #border { position: absolute; top: 0; left: 0; z-index: 1000;} #game { position: absolute; top: 30; left: 75; z-index: 0;} and finally the code for BorderHandle is: var canvas = document.getElementById('surround'), context = canvas.getContext('2d'); draw_back(); function draw_back() { back_image = new Image(); back_image.src = 'imgs/border.png'; back_image.onload = function(){ context.drawImage(back_image, 0, 0); } } The code works perfectly fine for the button clicks when i remove the style sheet, but when I include the style sheet, the buttons appear and the actionOnClick function does nothing and the image will not change. Any advice or help would be greatly appreciated and thank you all in advance!
  8. howdoiinstallphaser

    How do I install Phaser?

    I went to, clicked the download and get started button and leaded me to the source code. I clicked on "Download ZIP", extracted it and opened the folder in Windows Explorer. I searched for "exe" and there is no .exe file. so how do I install Phaser?
  9. mrdotb

    [Phaser] Warped beta

    Hello everyone this is warped my third game, a platformer. Warp (my hero) appear after 10 sec i have no preloader for the moment so just wait If you have any suggestion or other thing you want to suggest about the game feel free .
  10. (also on Hacker News: Hey guys, I posted about this a few weeks ago but the games weren't quite ready yet so it didn't get much attention. This time I made a video ! Please have a look at to test the games and know more about the project! I hope you like the games, and I would really appreciate any feedback concerning the framework itself, any sort of informal evaluation really. So, the story: As part of a school project I've been working on a adapting an AR markers library called Chilitags into a very simple, very easy to use, more abstract JavaScript framework called Paprika. In short, what it does is allow you to use AR markers as input for your web application (with property binding and condition triggers for position, rotation, specific orientation, visibility, card flipping, tilting, stacking.) I created 3 games/demos with Phaser which are far from perfect, but serve as experiments to test paper interaction. I hope you enjoy these and I'd love to hear what you think of them! Asteroids: this game you control the orientation and color mode of a spaceship using a card. Plays like Asteroids, with color mode mechanics inspired by Ikaruga.It uses one 2-sided card and tests rotation tracking + flipping detection.Traffic Management: this game you control which lane gets a green light at 4 crossroads, the objective being to let all cars through in the shortest time possible without letting (too many of) them crash.It uses four 1-sided cards and tests orientation.there's also a simpler, 1 crossroad version of it here Maze: this game you control a ball inside a baze by tilting a piece of paper as you would the ball maze. the objective is to get to the goal without hitting the walls in the shortest time possible.It uses a 1 sided card and tests tilting and tilt orientation.
  11. Hello! I've been playing around with the source code of the phaser example game called Tanks ( However I have not figured a way to make the tanks target and shoot at the other tanks, so I would appreciate help. There is a line of code for the EnemyTank function to target the player: bullet.rotation =, this.player, 500); This makes the bullet fired by an EnemyTank function prototype go to towards the player's tank. I've been trying to figure out a way to modify the target (this.player) in the above line of code so that it would automatically fire at the closest other enemytank function, but I don't seem to get anywhere with it. The idea behind is to eventually make EnemyTank function prototypes (enemy tanks) fire bullets at nearby AllyTank prototypes (tanks allied with player).
  12. I have the problem with the buttons even in CANVAS mode. Here is my game var game = new Phaser.Game(width,height, Phaser.CANVAS, 'game'); And the buttons for (var i = 0; i < 6; i++) { if(i%2==0) { this.button = this.add.button((25+90*i), (600), 'buttons', this.actionOnClick, this, 0); // this.button.anchor.setTo(-0.8, 0); } else { this.button = this.add.button((25+90*(i-1)), (785), 'buttons', this.actionOnClick, this, 0); } this.ans_text = this.add.bitmapText(60, -55, 'kuku', this.ans_style, 65); // bmpText = this.add.bitmapText this.button.addChild(this.ans_text); this.all_buttons.add(this.button); } And the Listener // what happens when i click the button actionOnClick: function (button) { var log; if(button.value==this.char_bubble.char_trans) { // right; button.frame=1;} Nothing happens. I tried to switch of OpenGL on Cocoonjs launcher I use Cocoonjs 2.0.1 and phaser 2.0.4 Any suggestions?
  13. Edricus

    General Performance Tips

    Hello everyone! I just started using Phaser about 1 month ago. I am just about done building a fairly simple game. I was wondering if people could give me some general performance tips for Phaser and perhaps JavaScript itself. Also I am in the process of learning how to use the Profiler in Chrome and have been using the Timeline as well to track memory management. If also possible could someone shed some light on what my memory should be at for a fairly simple game? I am also using CocoonJS to port onto Android and iOS and I am aware that each respective OS will cap at a certain memory threshold. If anyone has any further questions, I will gladly answer them. Also, thanks in advance to everyone that posts! Your help is greatly appreciated!
  14. Loopeex

    [PHASER] Space Crusade

    Hi there ! I'm currently working on my first Phaser game, a classical Shoot 'em up, and I think it's advanced enough to have some people feedback. It's designed for mobile, so you can move your spaceship with touch/mousemove controls. It fires automatically, and you'll have to kill group of enemies to gain some bonuses and avoid enemies lasers. You can play it here : I left the FPS in the bottom right corner to check on different smartphones (I have a steady 60 on my iPhone5). Any feedback would be greatly appreciated !
  15. davyboy

    Phaser and Asset Revving

    Our company has developed, and is continuing to modify, a container console for wrapping around html5 games for mobile and desktop distribution, and one of the concerns we face, is to minimise the amount of time and traffic it takes for an end user to download the latest version of games, especially when it comes to bug-fixing of games. We are already working with a number of development houses to write exclusive content before we start opening this out to the wider audience (i.e. we're ironing out the bugs before we let others break it :-) ). As part of this, we are looking at asset-revving. We find that between incremental fixes of games, the majority of the spritesheets, background images, and audio doesn't change, just the game logic in the JS files themselves. Some of these games can stretch to 10s of megabytes in size (especially when delivering for high definition devices like Retina's or Desktop machines), and having a user download all of these assets again, for a bug fix is not in their best interest, or ours as a distributor. Where filenames are being explicitly declared in javascript files, this is a relatively trivial task to conduct a replacement in the code prior to deployment onto webservers, but in the case of game engines like Phaser, this code is currently squirrelled away deep in the guts. Where this becomes even more of a problem for us, is when the javascript does device detection, and dynamically generates the assets path based upon the device support (i.e. ogg vs m4a, or high definition images instead of low definition images). At this point, it becomes incumbent upon the developer to consciously to have to handle asset revving, by applying a mapping of their desired file name and path, to the actual file, if indeed that file has been revved (or if the revving has been conducted). I would like to get to the point where the game developers do not have to concern themselves directly with this, except for some preparation at the start of their game, to pass in any externally defined rev map to the game engine, and have the game engine itself conduct mapping of the content under the hood. For example:'default-background-music', 'audio/music/Default.mp3'); myGame.load.atlasJSONArray('texts', 'img/' + resolution +'/dialogues/texts.png', 'img/' + resolution + '/dialogues/texts.json'); myGame.load.atlasJSONArray('hint', 'img/' + resolution +'/animations/hints/tile-hint.png', 'img/' + resolution +'/animations/hints/tile-hint.json'); The first asset here is easy enough to rev out as it is explicitly defined, but the second and third assets are dynamically chosen by the variable resolution, and the files contained within each will have very different revved filenames, because their content will be different (for example texts.png for a hd resolution will be bigger and therefore have a different MD5 to texts.png for an sd resolution). I could resolve this with a call to a rev mapping function, but this would be for every single line in the code where assets are'default-background-music', getRevMapping('audio/music/Default.mp3')); myGame.load.atlasJSONArray('texts', getRevMapping('img/' + resolution +'/dialogues/texts.png'), getRevMapping('img/' + resolution + '/dialogues/texts.json')); myGame.load.atlasJSONArray('hint', getRevMapping('img/' + resolution +'/animations/hints/tile-hint.png'), 'img/' + resolution +'/animations/hints/tile-hint.json'); But this requires a lot more to be concerned with by the game developer, and is prone to error (note how in the third example I have accidentally not added the getRevMapping to the json file). Further, as a developer, I would have to write a rev mapping function, repeatedly for each game I develop. What would be better is if the game developer could continue to request the names of the files they are expecting, and have a small initial configuration prior to loading assets for each distributor as is required. We have looked at this, and one method of approaching this is inside our library we expose to the developer, we can dynamically alter the low level Phaser.Loader.load function, so that we can re-map the files on the fly: phaserRevMapReplace:function(game){ var loader = game.load; var originalLoadFile = loader.loadFile; loader.loadFile = function() { var file = loader._fileList[loader._fileIndex]; if (file) { file.url = map(file.url); }; }},map:function(url){ if (ourLibrary.revMap) { return ourLibrary.revMap; } else { return url; }}... phaserRevMapReplace(myGame);'default-background-music', 'audio/music/Default.mp3'); myGame.load.atlasJSONArray('texts', 'img/' + resolution +'/dialogues/texts.png', 'img/' + resolution + '/dialogues/texts.json'); myGame.load.atlasJSONArray('hint', 'img/' + resolution +'/animations/hints/tile-hint.png', 'img/' + resolution +'/animations/hints/tile-hint.json'); But the problem this makes, is that we end up tying our library code to a very specific set of versions of phaser, and any changes to phaser's loading mechanism will likely break our code. Instead, I am going to fork Phaser, and suggest to merge changes back in to Phaser if approved, whereby the game developer will only need to pass any rev mapping object (a map object like revmap['audio/music/Default.mp3']='revved/audio/music/Default.abc123ef.mp3';) to the Phaser.Loader, and this will be used by the load method internally if defined, or silently work if not.
  16. Hi there! To celebrate the World Cup, me and my friends will create internal game jams/challenge to create as many complete/polished football-themed HTML5 games as possible throughout the month. Although we say as many as possible, we predict it will be no more than 2 games a week to a total of 8 games by the end of World Cup Just before the World Cup starting, we finished one games called 'Goal Champion'! Updates will also be posted in this post. Check it out on our Total Football Games site. Hope you enjoy playing them! Site: Finished Games: ================================================ CLOSING Our project is finally finished now, just one week after the closing of World Cup It's really intense experience though. We might have meet obstacle in the middle, but after finishing all the games, we learned a lot. We have better understanding of Phaser, our game development workflow, and our time management/priority issue. Hopefully we can do fun project like this again in the future
  17. Hi guys and girls. I recently made a simple multiplayer online game with Phaser (my first game with this framework) and I got somewhat excited about this framework. In other words, I would like to try to make my next game to mobile environment and be a little bit more serious about it. (not doing a gamejam this time. ) However, I am bit unsure about the best practices. Hence, I tried to search this forum but I couldn't find what I am looking for: How to make a mobile game with phaser which works with mobile handhelds. To clarify, I wan't to make a mobile game which feels as native mobile game but are made with phaser. (Bonus points are given if I can still release the same code to desktop/browser env.) Therefore, I am asking if here is the people which is done it before and could guide me to the right direction. Is making mobile game with phaser same as making it to browser environment but then packaging it up somehow as a mobile application? I have heard about phonegap and a like, but I made this topic because I want to hear opinions from the people which actually knows how to do it Thanks for all the tips, cheers!
  18. cmoney0927

    Stopping Timer in Phaser

    Basically I'm making a basic racing game where I have the timer start at the beginning of the game, but I can't get it to stop when the racecar collides with the finish line. Any help would be appreciated.
  19. nduhu

    drag and drop sprite

    i confuse thinking about it, i want to able drag sprite and if i drop to the another sprite will call the function? can you help me? var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.image('ilkke', 'assets/sprites/atari800xl.png'); game.load.image('lala', 'assets/sprites/atari800xl.png'); } var sprite; var sprite2; function create() { game.stage.backgroundColor = '#2d2d2d'; game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 100; sprite = game.add.sprite(100, 96, 'ilkke'); sprite2 = game.add.sprite(700, 96, 'lala'); game.physics.arcade.enable(sprite); sprite.body.collideWorldBounds = true; sprite.body.velocity.x = 200; sprite.body.bounce.set(0.9); // Also enable sprite for drag sprite.inputEnabled = true; sprite.input.enableDrag();, this);, this); game.add.text(32, 32, 'Drag and release the sprite', { font: '16px Arial', fill: '#ffffff' }); } function startDrag() { // You can't have a sprite being moved by physics AND input, so we disable the physics while being dragged sprite.body.moves = false; } function stopDrag() { // And re-enable it upon release sprite.body.moves = true; }
  20. chinstorff

    Antivirus software blocking Phaser

    I have gotten complaints from attempted players of my games that their antivirus software (Avast!) is blocking the phaser-build game. Is anybody else having similar problems? What can I do about it? edit: bitdefender blocks it too
  21. Zef

    Phaser Update Speed

    Hi there, I am currently using phaser for a simulation of life evolving a neural network inside little creatures. This relies on generation after generation of these creatures being evolved with a genetic algorithm. I am currently relying on the arcade physics system to handle collisions and overlaps etc, and the little creatures survive by eating food, and hunting each other. Or at least that is what they should learn to do. Currently each round last 45 seconds, this in itself isn't a problem, but I have been trying to find a way to step the Phaser engine at the fastest speed possible so that I can complete a number of simulations in the shortest possible time. It can take 1000s of generations before the creatures evolve to show intelligent behaviour. I am struggling to achieve this at present. I have tried using game.enableStep() and then in the update function calling game.step() more than once but this doesn't appear to work. Does anyone know how I can do this? Thanks for you help. ps. I have made a little site showcasing the neural network I plan to add more examples and will put the code up on Github soon. Its the sort of thing that will be really handy for creating AI for games.
  22. mrdotb

    goomba move

    Hi everyone, I want to move my enemy like this For the moment i use: function create_enemy() { APP.enemy =; tabEnemy = []; tabEnemy[0] = APP.enemy.create(2477, 1938, 'enemy'); tabEnemy[1] = APP.enemy.create(2813, 1842, 'enemy'); tabEnemy[2] = APP.enemy.create(3019, 1746, 'enemy'); tabEnemy[3] = APP.enemy.create(3551, 1650, 'enemy'); for (var i = 0; i < tabEnemy.length; i++) { game.physics.enable(tabEnemy[i]); }};function update_enemy() { game.physics.arcade.collide(APP.layer, APP.enemy); //enemy1 if (bow(tabEnemy[0].position.x) == bow(2477)) { tabEnemy[0].body.velocity.x = -100; }; if (bow(tabEnemy[0].position.x) == bow(1968)) { tabEnemy[0].body.velocity.x = 100; }; //enemy2 if (bow(tabEnemy[1].position.x) == bow(2813)) { tabEnemy[1].body.velocity.x = -100; }; if (bow(tabEnemy[1].position.x) == bow(2694)) { tabEnemy[1].body.velocity.x = 100; }; //enemy3 if(bow(tabEnemy[2].position.x) == bow(3200)) { tabEnemy[2].body.velocity.x = -100; }; if(bow(tabEnemy[2].position.x) == bow(3019)) { tabEnemy[2].body.velocity.x = 100; }; //enemy4 if(bow(tabEnemy[3].position.x) == bow(3551)) { tabEnemy[3].body.velocity.x = 100; }; if(bow(tabEnemy[3].position.x) == bow(3773)) { tabEnemy[3].body.velocity.x = -100; };};function bow(value){ var calcul = Math.ceil(value / 10) *10; return calcul;}Do you have a better way to do it ? Thank you.
  23. Hi guys, Today I'm trying to get my game running in CocoonJS, the game does work perfectly in a normal desktop and mobile browsers, but I'm getting some errors in CocoonJS. The error says: Javascript Exception (Tag: 'load'): Error: Phaser.Loader. Invalid XML given at e.Loader.xmlLoadComplete(js/min/phaser.min.js:12:9823) at XMLHttpRequest.i.xmlURL._xhr.onload (js/min/phaser.min.js:12:7414) It's my first time using CocoonJS so I have no idea where the error is coming from, but it is coming from Phaser.js itself. Any ideas?