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 devin.ozel@mybrainsolutions.com) with your portfolio (or just game links) and your hourly or per-project-base rate/quote. Looking forward to hearing from you all!

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

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.

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!

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.

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.

I've created a starter template for my HTML5 games that I build with Phaser, and shared it on GitHub if anyone would be interested in using it. Here's the GitHub repo: github.com/EnclaveGames/Enclave-Phaser-Template Online demo: enclavegames.github.io/Enclave-Phaser-Template/ My short blog post: dev.end3r.com/2015/12/enclave-phaser-template-is-open-sourced/ I'm writing a tutorial to explain everything, but you can check the source code already and let me know what you think about it, or suggest any upgrades.