Search the Community

My question is how can we separate portrait and landscape mode by designing differently in my mobile view? For example Portrait mode ui and landscape ui is I want it to be different from each other. Thanks

Hello guys, I lost my other html5gamedevs account @Nicholls but I want to share with you guys my new contribution to Phaser 3, a web component to integrate Phaser with any other Framework (Angular, React, Vue.js, etc): https://github.com/proyecto26/ion-phaser This is very useful because you don't need to manipulate the DOM directly using ids and you can use Phaser like any other component. From the GitHub repo you can find some examples, also check from Codepen too: https://codepen.io/jdnichollsc/full/oRrwKM Regards, Nicholls

I need an area where like half the screen will only do 50% the normal physics calculations! This will be useful for items inside water areas

Hey Guys, I am doing mostly game assets, but I am tinkering around on my own game for a long time now. I am still uncertain about the graphics style and would like to have some feedback on this one (image). All thoughts are appreciated. - I am using phaserJS. It's a kind of exploration, Metroidvania stylish. But at the very early stage of implementation still. note: this screen is not entirely tilebased and was edited. ~ sam

UPDATE: 24. Feb 2018 Patch 1.2.0 is live! Please click here to scroll down directly to the update comment. ORIGINAL: 30. Jan 2018 Play Link: Chase the Shadow A casual, lighthearted 1vs1 Arena Game. Play online in your browser against a friend or anyone waiting in the lobby! Play Link: Chase the Shadow Welcome to this unique little multiplayer game! Built with Phaser CE. You control a wizard with the purpose of defeating the enemy wizard (another player). You are both hiding in the shadows and can use powerful spells! Game Features: Play online 1vs1 against a friend or any person waiting in the lobby. Control a wizard & defeat the enemy wizard. You have 3 spells at your disposal: Fireball, Lightning & Blizzard. Gameplay: You can see the enemy's shadow. Predict his movement and hit him with your spells! Select the right spell for the situation. Move into the right position to aim your spells. Trick your enemy with unpredictable movements. Win by defeating the enemy before he kills you! Controls: Click your wizard to move. Click on the spell scrolls to activate a spell. Plan your next move during your enemy's turn & pay attention to his shadow! I know it can be hard to quickly jump into this game if there is nobody online to play - or no friend available to try it out. I still hope some of you can get to play a match and let me know what you think! Side Note: Why did I build this game? (Not sure if this paragraph is interesting for anyone) I've been doing a lot of client work lately and so much work had to be done on Node.JS. Yet, I always wanted to create a browser multiplayer game running on an Apache server with PHP! Thus, the motivation for "Chase the Shadow" was born. I definitely don't regret doing this in PHP but it does require a lot of thought and planning - something I could have done much better. Either way, the game is done now and I'm happy I did it! Will I do another game in PHP? Probably not for a while. I wanna stay away from multiplayer games in general for now. Credits: The game was developed solely by me. All assets in this game were either done by me or from the CCO assets linked below. These sources are also credited inside the game: UI background Author: Jetrel, https://opengameart.org/users/jetrel Download Link: https://opengameart.org/content/castle-platformer Map Tiles: Author: ansimuz, https://twitter.com/ansimuz Download Link: https://opengameart.org/content/rpg-town-pixel-art-assets Buttons: Author: Kenney, https://opengameart.org/users/kenney Download Link: https://opengameart.org/content/ui-pack Spreading the Word! If you would like to support this game, posting the link below on any of your Social Media accounts would be much much much appreciated! (If you would like to tweet it, you can mention me with @thejamespierce on Twitter.) http://browsergameshub.com/chase-the-shadow-released/ Play Link: Chase the Shadow

Hi everyone, I'm Devin, a fellow PhaserJS dev. I am currently working at MyBrainSolutions, and we are currently looking to re-do our ~30 games in PhaserJS (some are already in Phaser, but we do need to re-do them as well). We're a small SaaS startup in healthtech, founded by neuroscientists and brain researchers. We're building a platform for users to take brain assessments and exercises that truly change brain habits. We're small and scrappy, and we have 30+ enterprise customers and growing. We're looking for contract game developers to help us recreate these games. Responsibilities: Work closely with product and in-house engineers on requirements and specs Develop both mobile and web optimized versions of each game Have input on game design, mechanics, levels, etc. Qualifications/Requirements: 2+ years experience developing games in Phaser Graphic Design skills a plus React / React Native experience a big plus Please reply (or preferably send me an email at [email protected]) with your portfolio (or just game links) and your hourly or per-project-base rate/quote. Looking forward to hearing from you all!

Dino Zoo Tycoon Technology stack: phaserjs, cocoon.io (cordova) Game handle native mobile and Google Play Store fetures like inapp purchases, fb sharing, ads system. Game is free. Google Play link: https://play.google.com/store/apps/details?id=dino.zoo.tycoon Description: Manage your dinosaurs zoo and becoome the greatest entertainment zoo owner, dino zoo tycoon. Take care of your dinosaurs, develop your zoo inflastructure, riseup your zoo popularity, manage your emploers, manage your zoo finance depends on year season. Features: - 16 dinos to buy - 6 types of buildings to develop - 4 types of marketing actions - 6 types of emploers to hire - management of zoo supply - management of zoo finance depends of year seazon - management of proper dinosaurs placement in your zoo Screenshots:

Hi everyone, I am trying to add collision to sprites that are randomly spawned in the map of the game. // New object of class Player the sprite name is 'ship' player = new Player("keyboardMouse", game.world.centerX, game.world.centerY, 200, 200, "12341", game.add.sprite(game.world.randomX, game.world.randomY, 'ship'), //Sprite handler object Weapons.sniperWeapon.weapon, // Weapon handler object ThrustEmitters.ourEmitter.emitter // Thrust emmiter handler object ); // loop to randomly place the sprites for (var i = 0; i < 200; i++){ var asteroid_brown = game.add.sprite(game.world.randomX, game.world.randomY, 'asteroid'); var rock = game.add.sprite(game.world.randomX, game.world.randomY, 'rock'); } In theory, I would want to make something like the resources in moomoo.io (trees, rocks, gold etc.) You should be able to add collision so that when the player cannot just travel through them and also when shot at you would get 1 of the specific resource. Also if this can be done in a better way, how would you do it? Thanks! reee.mov

I am currently making a game that you can check out at http://spalaxys.online and I would like to add little asteroids in a fixed random location in which the player cannot go through. I have looked at the phaser examples as well as watched some videos, but I cannot get it working. What is the best way to go about this? I have linked my files so you can check them out. I would really appreciate any help. This is the code that I am using: (create.js) function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.renderer.clearBeforeRender = false; game.renderer.roundPixels = true; game.add.tileSprite(0, 0, 30000, 30000, 'space'); //game.add.tileSprite(0, 0, 1920, 1920, 'background'); game.world.setBounds(0, 0, 30000, 30000); //Possible weapons Weapons = { sniperWeapon: new Weapon("Sniper weapon", 0, 1000, 0, null, null, false, 5000, 90, game.add.weapon(5, 'long-bullet')), uziWeapon: new Weapon("Uzi", 20, 50, 0, null, null, false, 1500, 90, game.add.weapon(500, 'bullet')), AK47LikeWeapon: new Weapon("AK47-like", 5, 100, 0, null, null, false, 1000, 90, game.add.weapon(100, 'round-bullet')), }; ThrustEmitters = { basicEmitter: new ThrustEmitter(game.add.emitter(game.world.centerX, game.world.centerY, 400), ['fire1', 'fire2', 'fire3'], 0.3), ourEmitter: new ThrustEmitter(game.add.emitter(game.world.centerX, game.world.centerY, 1000), ['fire01', 'fire02', 'fire03'], 0.5), }; // Creating a new object of class Player player = new Player("keyboardMouse", game.world.centerX, game.world.centerY, 200, 200, "12341", game.add.sprite(game.world.randomX, game.world.randomY, 'ship'), //Sprite handler object Weapons.sniperWeapon.weapon, // Weapon handler object ThrustEmitters.ourEmitter.emitter // Thrust emmiter handler object ); game.physics.enable(player.sprite, Phaser.Physics.ARCADE); player.spawn(); game.camera.follow(player.sprite); player.sprite.maxVelocity = player.maxVelocity; // Game input cursors = game.input.keyboard.createCursorKeys(); var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; var text = game.add.text(game.world.centerX - 500, game.world.centerY - 300, "Move with W,S and mouse. \n Switch to touch/click movement with TAB. \nToggle debug with SPACE. \nShoot with LMB. \ \nSwitch weapons with 1, 2, 3.", style); text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 2); //Make resources group //var resources = game.add.group(); //Run the show_resources function located in main.js for (var i = 0; i < 250; i++){ var asteroid_brown = game.add.sprite(game.world.randomX, game.world.randomY, 'asteroid'); var rock = game.add.sprite(game.world.randomX, game.world.randomY, 'rock'); } game.physics.enable(asteroid_brown, Phaser.Physics.ARCADE); game.physics.enable(rock, Phaser.Physics.ARCADE); // We'll set the bounds to be from x0, y100 and be 800px wide by 100px high text.setTextBounds(0, 100, 800, 100); // this.spaceButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); // this.WButton = this.input.keyboard.addKey(Phaser.KeyCode.W); // this.SButton = this.input.keyboard.addKey(Phaser.KeyCode.S); // this.AButton = this.input.keyboard.addKey(Phaser.KeyCode.A); // this.DButton = this.input.keyboard.addKey(Phaser.KeyCode.D); // this.oneButton = this.input.keyboard.addKey(Phaser.KeyCode.ONE); // this.twoButton = this.input.keyboard.addKey(Phaser.KeyCode.TWO); Keys = { space: this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR), w: this.input.keyboard.addKey(Phaser.KeyCode.W), s: this.input.keyboard.addKey(Phaser.KeyCode.S), one: this.input.keyboard.addKey(Phaser.KeyCode.ONE), two: this.input.keyboard.addKey(Phaser.KeyCode.TWO), three: this.input.keyboard.addKey(Phaser.KeyCode.THREE), four: this.input.keyboard.addKey(Phaser.KeyCode.FOUR), five: this.input.keyboard.addKey(Phaser.KeyCode.FIVE), six: this.input.keyboard.addKey(Phaser.KeyCode.SIX), seven: this.input.keyboard.addKey(Phaser.KeyCode.SEVEN), tab: this.input.keyboard.addKey(Phaser.KeyCode.TAB), } // WEAPON CHANGING Keys.one.onDown.add(function(){player.setWeapon(Weapons.sniperWeapon.weapon)}, this); Keys.two.onDown.add(function(){player.setWeapon(Weapons.uziWeapon.weapon)}, this); Keys.three.onDown.add(function(){player.setWeapon(Weapons.AK47LikeWeapon.weapon)}, this); // OTHER KEYS Keys.space.onDown.add(function () { showDebug = true; }, this); Keys.tab.onDown.add(function () { if (player.movementType == "keyboardMouse") { console.log("touchMouse") player.movementType = "touchMouse" } else { console.log("keyboardMouse") player.movementType = "keyboardMouse" } }, this); game.input.keyboard.addKeyCapture([ Phaser.Keyboard.W, Phaser.Keyboard.A, Phaser.Keyboard.S, Phaser.Keyboard.D, Phaser.Keyboard.SPACEBAR, Phaser.Keyboard.ONE, Phaser.Keyboard.TWO, Phaser.Keyboard.THREE, Phaser.Keyboard.FOUR, Phaser.Keyboard.FIVE, Phaser.Keyboard.TAB, ]); } update.js: function update() { player.sprite.rotation = game.physics.arcade.angleToPointer(player.sprite); if (player.movementType == "keyboardMouse") { if (Keys.w.isDown) { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, player.positiveAcceleration, player.sprite.body.acceleration); // this.isEmmiter=true; this.txtW2 = "Is W still down? YES"; if (!this.isThrustEmitter) { player.emitter.start(false, 3000, 5); this.isThrustEmitter = true; } } else if (Keys.s.isDown) { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, (-1) * player.negativeAcceleration, player.sprite.body.acceleration); this.txtS2 = "S still down? YES" this.isThrustEmitter = false; } else { player.sprite.body.acceleration.set(0); this.txtW2 = "Is W still down? NO"; this.txtS2 = "S still down? YES" this.isThrustEmitter = false; } } // if (this.WButton.downDuration(250)) // { // this.txtW = "W was pressed 250 ms ago? YES"; // } // else // { // this.txtW = "W was pressed 250 ms ago? NO"; // } // if (this.SButton.downDuration(250)) // { // this.txtS = "S was pressed 250 ms ago? YES"; // } // else // { // this.txtS = "S was pressed 250 ms ago? NO"; // } if (game.input.activePointer.isDown) { player.weapon.fire(); if (player.movementType == "touchMouse") { game.physics.arcade.accelerationFromRotation(player.sprite.rotation, player.positiveAcceleration, player.sprite.body.acceleration); if (!this.isThrustEmitter) { player.emitter.start(false, 3000, 5); this.isThrustEmitter = true; } } } else { if (player.movementType == "touchMouse") { this.isThrustEmitter = false; player.sprite.body.acceleration.set(0); } } //THRUST EMITTER if(this.isThrustEmitter) { //player.emitter.on = true; } else { player.emitter.on = false; } // We have to calculate the vector for thrust emitter var px = Math.cos(player.sprite.rotation) * 1000; var py = Math.sin(player.sprite.rotation) * 1000; px *= -1; //So it goes from the 'back' of the ship py *= -1; //So it goes from the 'back' of the ship player.emitter.minParticleSpeed.set(px / 2, py / 2); player.emitter.maxParticleSpeed.set(px, py); player.emitter.emitX = player.sprite.x; player.emitter.emitY = player.sprite.y; // bullets.forEachExists(screenWrap, this); } I would like the player ('ship' sprite) to not go through the asteroids ('asteroid_brown' and 'rock' sprites) but whenever I try to add physics to them or try to change them the game stops working. Thanks in advance, Fede

Hello everyone, I've decided to start with PhaserJs, at the getting started page there is a sentence that reads "If you're coming from Flash / AS3 then we'd recommend giving a TypeScript a go"... And yes I coming pretty much from 12 years of Flash. Someone please could explain my what are the advantage of code in TypeScript and also recommend a IDE? Thanks in advance

Does anyone know how to do collision detection for games with a 3/4 (or angled) perspective. Examples are Teenage Mutant Ninja Turtles on the NES or Streets of Rage on Sega. In those games the player can walk from below up to a wall until their feet contact the wall. So only the bottom of their sprite collides with walls. But their whole sprite collides with bullets and attacks. I've been trying to do this forever in Phaser and I can't figure it out. Has anyone tried this before? Are their any examples of this in phaser?

Looking for feedback for new game available at the moment on 3 platforms: Android itch.io Facebook Done with Phaser, includes sharing integration, FB invites, Firebase integration (not working on Android - please take a look https://forums.cocoon.io/t/compiler-error-cordova-plugin-browsertab/5941/3), LocalStorage, AdMob as ads and in-app purchases included also at the end wrapped with Cocoon.

Hello Team, I wanna ask if there are some way to create a grid, for example, i would like to create a 4x4 grid, and each grid i will insert an image, is this possible on PhaserJS? Thanks

Hi everyone! I uploaded a sample Phaser JS script of roulette with a hope that someone will find it useful. This Phaser JS script demonstartes a solution to show roulette that rotates and stops at a random position. Needle ticks with animation and sound as the roulette spins. The script itself could be rewritten into a really simple code and should be able to be integrate into any game at ease. You could use it for a simple game, a small lottery in your game, board games etc. (The code is totally a mess. Pardon my lousy coding manner.) https://github.com/BeFiveINFO/phaser_roulette_example Thank you for reading!

Hello, I would like to share a game I made last week based on this example code. Made with phaser js and the full source code is available at git hub: https://github.com/BeFiveINFO/fuji-san-roulette Online Demo site can be found at: http://play.befive.info/fuji-san-roulette/ Feedback greatly appreciated! How to Play:

Hi All, This is my first game using PhaserJS ,packed using cordova. Math Mind – is a mathematical game in which you have to solve a lot of interesting numerical problems within the given time duration, test your Math Mind on various numerical operations and, if necessary, to develop this skill.Game Features: - Three Game Modes- Find the Operator - in this math game mode you have to find the correct operator which will make the given number from the other two numbers.;- Find the Number - in this math game mode you have to find the missing number which will make the given number provided a number and an operator.;- Geek Mode - This level is for Geek Math Mind Peoples as it has three types of questions randomly appearing.;This Math Game makes the math fun.Its free to download. IOS version coming soonplease download and rate us it will help me in looking into more game development. Play Store Link : https://play.google.com/store/apps/details?id=com.DP.MathMind

Hello everyone! I recently finished my first Phaser JS game after experimenting html5 / css game on a similar theme. LINK to the game page: http://play.befive.info/bonus-jackpot/ Thank you for your attention! Game Screenshots:

Hi all! Just want to let you know that we have released our new games, Tahoe Po! It's a small arcade games built using PhaserJS, and ported to android using the excellent Cocoon.IO. We create this games to promote our local delicacy from Kediri, Indonesia, especially local Tahoe/Tofu The games feature include Google Play Highscore/Achievement integration, native result sharing, shop/customization system, and many more! Check it out here: http://bit.ly/TahoePo If you have any feedback, do let me know! Thanks!

Hello everybody! I created a little scene with walls. Bottom wall is solid. But left and right are not. Why? Can you please help me? preload: function() { game.load.image('mario', 'images/mario.png'); game.load.image('WallH', 'images/wallH.png'); game.load.image('WallW', 'images/wallW.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "3984db"; game.physics.arcade.gravity.y = 1200; this.cursor = game.input.keyboard.createCursorKeys(); this.mario = game.add.sprite(game.width / 2, game.height / 2, 'mario'); this.mario.anchor.setTo(0.5,0.5); this.mario.scale.setTo(0.15,0.15); this.walls = game.add.group(); this.walls.enableBody = true; this.walls.enableBody = true; this.downWallH = game.add.sprite(0, 540, 'WallH', 0, this.walls); this.leftWallW = game.add.sprite(0,0, 'WallW', 0, this.walls); this.rightWallW = game.add.sprite(822,0, 'WallW', 0, this.walls); game.physics.arcade.enable(this.mario); this.walls.setAll('body.allowGravity', false); this.walls.setAll('body.immovable', true); }, ...

Hi everybody, I got an issue with PhaserJS rope. I need to animate rope with spritesheet. The objective is to make curved / bent spritesheet animation. I tried almost everything but it won't render correctly. All I got is single frame being rendered, although I can see animation frames, and loop count in console log. I need to curve / bend sprite sheet animation,it is not necessarily need to be done by rope, any solution would be great. Will be grateful for any suggestion, thank you in advance.

Hello! I'm having a hell of a time trying figure out how to change Phaser Weapon plugins bullet speed after it's been shot. I also set "weapon.bulletSpeed" negative value, because by default it was going in opposite direction. I attached weapon to a spaceship sprite, but on "weapon.fire()" bullet goes backwards. Weapon definition. addWeapon: function(target) { var weapon; var weapon; weapon = game.add.weapon(100, 'bullet'); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletAngleOffset = 90; weapon.bulletSpeed = 5; weapon.trackSprite(target, (this.ship.height), 0); weapon.trackRotation = true; weapon.fireRate = 200; weapon.bulletRotateToVelocity = false; weapon.onFire.add(function() {this.blastSound.play()},this); return weapon; } this.ship = this.add.sprite(this.world.centerX, this.world.centerY +300, 'ship'); this.ship.anchor.setTo(0.5, 0.5); this.ship.scale.setTo(0.22); this.ship.angle = -90; game.physics.arcade.enable(this.ship); this.ship.body.drag.set(70); this.ship.body.maxVelocity.set(220); this.weapon = this.addWeapon(this.ship); I am trying to set the direction of the bullet to opposite, so I don't have to set bulletSpeed to negative value. change every bullets anchor. change the speed of particular bullet after it's been shot. It would be grate to hear any suggestion. Тhank you in advance.

Usecase: Why would I stop a tween, right after it is created: So in my game you got many objects which running around and need some tweens. In particular: For climbing a ladder. The game.tweens.pauseAll(); is called when the mainmenu opens. this works pretty well, expect some case. I cannot really tell were it relies on. If it is the timing (right after the tween) or only this sort of tween. It seems only to happen on the "climbing tween". This is the code to pause all tween, which is called every time you hit "space": game.physics.arcade.isPaused = true; game.timer.pause(); game.tweens.pauseAll(); And this is a snippet of the code which is executed on collision with the ladder object, were the tweenings start: let location = this.y + this.body.height / 2; let climbDir = 0; //you can ignore this, it's just to set up the right numbers if ( location > ladderY ) { climbDir = (location - ladderY) * -1 -2; } else if ( location <= ladderY ) { climbDir = ladderY + 120 - location - 2; } //an animation plays this.animations.play('climb', 60, true); // >THIS< is the point were the tween is executed let tween2 = game.add.tween( this ).to({ y: this.y + climbDir }, 10 * Math.abs(climbDir), 'Linear' ); tween2.start(); // >NOW< when you hit space an run game.tweens.pauseAll(); <- this won't work-> The lines afterwards are executed tween2.onComplete.add(()=>{ const turn = this.animations.play('turn_back_' + this.getDirection() + '_reverse', 21, false); turn.onComplete.add(()=>{ //all this is executed even if game.tweens.pauseAll(); is called in the above moment let dir = this.getDirection() === 'right' ? 40 : -40; this.animations.play('walk_' + this.getDirection(), 60, true); let tween3 = game.add.tween(this).to({ x : this.x + dir }, 450, 'Linear'); ... even more code //all this is executed too, even if game.tweens.pauseAll(); is called in the above moment The problem is: That not only the tween does not stop, everything afterwards is executed as well. Even other tweens that are inside the "tween2.onComplete.add". I tested it a few times and it is the same behavior ever and ever again. What's stange is: if you hit "space" => pauseAll(); this would work if the tween is nearly complete. But if you hit it right after it begins, the issue I described appears. Any ideas on this? Maybe I am making something wrong.. but I am a bit stuck since it seems that tween2.onComplete is executed due to not stopable tween2 in some timing function. regards

Hello guys, my newest browser game is called "Rabbit Warrior" and is optimized for mobile devices but works on desktop just as well of course: "Enter the world as the courageous Rabbit Warrior, equipped with sword and hammer! Protect the core from the demons and activate all the shrines to complete each level. Pick up hidden weapons that enable unique attacks and unlock increasingly difficult levels and even new skins if you reach 3 stars." Game link: http://browsergameshub.com/RabbitWarrior/ Game features: - Click to move controls - 5 different levels - Reach 1 to 3 stars for each level completion - 4 unlockable skins (if you reach 3 stars in a level) - Created with Phaser.JS Controls: Since it's optimized for mobile, movement is click-to-move and clicking on a weapon button to activate the skill. However, on the desktop you can also use the keyboard buttons 1 to 3 to activate the weapon skills while using the mouse to click-to-move. Game link: http://browsergameshub.com/RabbitWarrior/ I hope you like the game and thank you all for checking it out!

Sorry for the long post, but I have to be sure that you got all the informations: Was testing a lot to be sure that there is no mistake on my side. So I took some time and tried different cases WebGL / Canvas including all that smoothing = false stuff and also different approaches: game.stage.smoothed = false; PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; Phaser.Canvas.setImageRenderingCrisp(game.canvas); game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; game.scale.setUserScale(1,1); game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas) The CSS image-rendering works for Canvas, even for 4k dispalys and stuff. But webGL is really blurry (it gets better with some configuration but not even close to canvas quality). So I tested a bit more. You can reproduce it any time, just by setting up a blank game and animate one spritesheet which is: standing still and waving just one part (a hand or s.t.). Just make a Person who shakes a hand and does not move anything else. In Canvas: the sprite stands perfectly still and shaking the hand in WebGL: the sprite flickers - in fact the graphic itself isn't able to do that since it is pixel perfect aligned. But WebGL mode seems like to render it that way. I attached two files: Notice the flickering of the dwarf graphic in webGL (webGLbug.gif - that one with the purple minions in it)? First gif attached is canvas, second is webGL (with purple minions in it) I do not know if this is only related to 2.7.x or even before. I am familiar with browser support of image-rendering and stuff. But it is already there. I am testing on a Mac OSX 10.11, Win 10, via Chrome: Chromium 51, V8; NwJS 15.03, NwJS 13.0; tested with phaser 2.7.x, but also appearing in older versions, oldest I tested; 2.4.8 So the thing is, you can optimize the webGL output with some code from above (some not working; tested it one after another). But WebGL does not even get close to the sharpness of Canvas. This applies for 1920x1080 resolution, 2100 x 1280, 2560x1440 and 1024x 768 on mac / pc, m3 / i7, blank game, one animated spritesheet - reproducable. It's nothing that you see on first sight, it's more like... - something is wrong, isn't it? - and when you take a closer look, you see this.

Hi, I just open sourced my game "Fuzzle" the game I made with PhaserJs and published on play store, hope the source code may help somebody. github repo