
Phaser 3.0: HTML5 game framework - johnhattan
https://github.com/photonstorm/phaser
======
aroman
I've spent the past 6 months building a game[1] using Phaser and TypeScript.
On the whole, it's been a great experience.

Actually, I was surprised to see this posted here now, since Phaser 3.0 is not
yet out. It's mostly feature-complete, but they're still working on docs and
preparing for the release (in the few days to a week). I've really enjoyed
following the v3 devlog[2]. Richard Davey's dedication to the project and his
and the other contributors herculean efforts towards v3.0 have been inspiring
to watch. Truly a labor of love.

Some tips for others based on my experience with Phaser:

\- USE TYPESCRIPT! One of the worst parts of Phaser is its documentation. In
fact, the docs on the main website have been outdated by about 4 major
releases, and the new docs are ugly and hard to use. TypeScript + VSCode
massively improves this experience, by auto-completing functions and adding
inline JSDoc info.

\- Webpack is great, but hard to use with Phaser 2 OOTB. This may be a moot
point since V3 is almost here, but if anyone wants to see how it can be done,
my whole game is open source[3].

\- Phaser.Group is a weird concept, but very powerful. Not only useful for
object pooling, but also for creating custom GUIs using surfaces with
coordinates relative to the group size/position. Makes nested dynamic UIs very
easy.

\- Phaser's scaling system[4] is awesome. Use it. Don't try to reinvent the
wheel yourself!

Richard and crew, if you're reading this, THANK YOU! You've built an
incredible project. Thank you for sharing it with the world.

[1] [http://www.toomanycaptains.com/](http://www.toomanycaptains.com/)

[2] [http://phaser.io/phaser3](http://phaser.io/phaser3)

[3]
[https://github.com/TooManyCaptains/TooManyCaptains/tree/mast...](https://github.com/TooManyCaptains/TooManyCaptains/tree/master/game)

[4] [https://photonstorm.github.io/phaser-
ce/Phaser.ScaleManager....](https://photonstorm.github.io/phaser-
ce/Phaser.ScaleManager.html)

~~~
andrew_wc_brown
My open source game is Electron+PhaserCE+Typescript+Webpack.

I tried to avoid webpack since I knew compile time would be an issue for my
other team members and it turned it out it was. As a web-dev I'm use to its
workflow but onboarding game devs hate it. I have to hear everyday lets move
to Godot, Unity, Unreal Engine because waiting 4 seconds for compiling is a
headache.

Switching to Typescript is great for larger teams because it makes properties
explicit. I personally like coffee-script and find it more productive if I'm
the only dev but I swallowed the medicine on this one and it was worth it.

VSScode is powerful with Typescript but its not as productive as VIM. I think
of code completion and seeing errors right away as crutches that atrophies a
developers own skills to find code and errors but they can make it much easier
for juniors and lower the bar, pair this with wallabyjs and you have a
controlled environment that catches everything for you.

I found no resources on testing Phaser but figured out my own way of mocking
Phaser objects, and came up with my own way to write acceptance-like tests for
my game without electron.

I really wanted to contribute to Phaser3 and had put great effort to join but
Richard was useless in responding. He said he was porting their tickets from
Trello to Github and then I could contribute which never happened, I asked
month over month. I really wanted to use Phaser 3 to future proof my game and
I would have contributed significantly. I could have forked PhaserCE but its a
mess which makes sense for the rewrite but working blindly on Phaser 3 would
be futile. I am quite bitter about bitter about this because I 20 hours a week
for 6 months I could have contribute and now I don't

I think I will likely just write my own lightweight game framework to map only
what I need and gut Phaser. Even looking at Phaser 3 codebase with their big
rewrite from scratch its still clunky and I think this is because they don't
build games at a large scale with a team to have a good feeling to fine tune
an engine.

[https://github.com/omenking/swap-n-pop](https://github.com/omenking/swap-n-
pop)

~~~
Fifer82
`I think of code completion and seeing errors right away as crutches that
atrophies a developers own skills`

Really? You would rub sticks together for fire rather than use modern tools
such as a lighter? I can't see how this reflects being a better programmer.
While you are rubbing sticks, I am probably wondering how X can be improved
and implementing that.

~~~
ztoben
Ugh, this point of view is so annoying. Just because you prefer an IDE to
something like VIM/Emacs doesn't mean your skills are less in any way. Such an
elitist way of thinking.

~~~
terminalcommand
Debuggers, autocompletion, even syntax highlighting help a great deal. I like
to think that they let you program on a higher level.

I usually program in Emacs, but fire up an IDE when I need to debug or want
some assistance in navigating the codebase or learning some new library.

I find that the code I write in Emacs is much more succint and cleaner. I
think the more layers you remove, the more you can focus. I bet that if I
wrote my programs with pen and paper, my programs would be much more
beautiful.

But if you need to manage complexity, it is far more feasible to use an IDE.

Choose the right tools for the job. Use editors/pen and paper/whiteboards/IDEs
to meet your requirements.

Advocating the use of text editors over IDEs is IMHO the typical example of
the "Real programmers use Fortran" syndrome.

------
james-skemp
Having been watching this, it's still rough around the edges, but I have no
doubt that Phaser 3 will get to feature complete and beyond at a nice pace.

What's holding me back from starting to really experiment with it is lack of
TypeScript definitions. Phaser 2 was what got me started using TypeScript, and
as a C# guy I'm still holding out hope that I can get my work using TypeScript
for some project or other.

If you've been wanting to play with TypeScript, I highly recommend taking a
look at creating a simple game with TypeScript.

There's a lot of templates out there, and I've done some popular tutorials in
TypeScript instead of the JavaScript they were written in.

[https://github.com/JamesSkemp/PhaserTutorials](https://github.com/JamesSkemp/PhaserTutorials)

------
madethemcry
There is also a huge community around Phaser (as well as Pixi, the huge 3D
gaming framework Babylon.js and many more) hosted by Richard who is developing
Phaser.

[http://www.html5gamedevs.com](http://www.html5gamedevs.com)

It's a wonderful place to stroll stroll around even if you don't have a
concrete question in mind.

~~~
vanderZwan
Ooh, thanks for that! I knew of all of these frameworks yet had missed this.

I bet it's a great place to learn tricks for squeezing better performance out
of the web too (even if limited to specific niche tasks).

------
freehunter
A year or so ago I did a lot with Phaser. I learned I'm not cut out for indie
game dev and since moved on, but man is Phaser easy to learn and easy to get
more advanced in. Even though I don't use it anymore, I am a big fan of their
work.

Congratulations on shipping 3.0. I hope it inspires a lot of great talent to
discover themselves.

~~~
dgritsko
Yeah, I've done some hobbyist stuff with it and it was a joy to work with.
Felt like I spent most of my time actually making my games rather than
learning arcane trivia about a framework, which made for a very pleasant
experience.

~~~
SaturateDK
Yeah, we used it for a Game Jam lasting 48 hours, and still got something
done. Most of us never tried doing games, so that's a big thing, just being
able to jump in like that!

------
jjjensen90
Aw man, looks like they moved away from naming releases after places in The
Wheel of Time by Robert Jordan. I remember finding that when I stumbled across
Phaser a couple years ago and being delighted. I made a toy "game" with some
FSM actors and was impressed even in the much older version.

One thing I would recommend for someone trying it out, especially coming from
C/C++ game development like I did, is to use Typescript and the tooling that
comes with it.

------
keithnz
At one stage this was built on pixi for 2d rendering (
[http://www.pixijs.com/](http://www.pixijs.com/) ) but I think 3.0 it took out
pixi?

Anyone know what the rendering is like now?

~~~
madethemcry
It's finally custom build, Richard payed a guy called Felipe to work full-time
for quite some time to help developing it. See the devlog [1] for more
details. I loved reading it over the months. There is also a wrap-up post by
Richard to summarize all of this [2]

[1] [http://phaser.io/phaser3/devlog](http://phaser.io/phaser3/devlog)

[2] [http://phaser.io/news/2016/12/phaser-in-2016-and-
beyond](http://phaser.io/news/2016/12/phaser-in-2016-and-beyond)

------
Fifer82
Great job guys on this long journey.

I used to make Web Games, but then I realized the race to the bottom and
bailed all together. I found after 10 years as a GameDeveloper (where every
project is practically unique) has made being a React developer almost like
using a baby's soft toy.

My job is beneath me, I sleep like a baby, and I get paid 4 times more than
being a game developer for a job that demands 1% of the effort on a daily
basis.

I don't miss my times with gaming at all and I would never go back.

Each to their own!

~~~
brazzledazzle
What would you say your most transferable skills from gaming to web
development were?

------
birracerveza
I love Phaser! I've been in love with this framework ever since it came out
because it's based on Flixel, which was per se an amazing framework built on
AS3 by the same guy. Only Love2D comes close to it. I had completely forgot
about it until now, and now that they added Typescript support I might just
pick it up again for a spin. Is the renderer still bolted in? Last time I
tried it I wanted to use it as backend for a multiplayer game, but couldn't
because Pixi.js was a necessity.

------
mephitix
"Games can be compiled to iOS, Android and native apps via 3rd party tools"

Gonna need some explanation here... does it spit out native code? Where are
the tools? And since it's HTML5 why can't I just run the thing in a native web
view? Are there perf issues?

~~~
BattyMilk
I built a (very simple) game in Phaser a couple of years ago and used cocoon
([https://cocoon.io/](https://cocoon.io/)) to package it up into an Android
and iOS app. Basically it packages the HTML/JS/CSS app into a native webview.

Phaser is a great framework. I managed to conceive, write the game from
scratch and have it in the app store within a day.

It's no longer on the iOS store as I didn't continue to pay my dev licence,
but happy to share the play store link if anyone is interested.

~~~
slazaro
Can we see the game? :)

~~~
BattyMilk
Of course! Though, I just tried to launch it on my phone for the first time in
a year or so and it just crashes at the title screen YMMV (OnePlus3 running
8.0.0)

[https://play.google.com/store/apps/details?id=com.fraserhart...](https://play.google.com/store/apps/details?id=com.fraserhart.spacecaver)

~~~
slazaro
It crashed for me too. It's a shame, I was curious to see what was achievable
in a day of work!

------
Ycros
I'd expect the "What's New" section to tell me at a high level what's actually
new in this release.

~~~
james-skemp
It's a complete rewrite, so effectively everything. Although not as feature
complete as version 2 yet.

------
cyberferret
My son and I built a small game together a couple of years back with Phaser 2.
It was a really pleasant experience. I don't do game dev any more, but will
probably take a look at Phaser 3 in the next few months and probably build
another tiny game out of it just for fun. Glad to see such an excellent
project still kicking along.

------
uptown
Hadn't heard of Phaser but I'll definitely give it a look. Are there any
frameworks that are specifically geared towards turn-based games with a
"gameboard" similar to Scrabble / Words With Friends? I've been working on a
game that follows this model, but have rolled-my-own implementation till now.

~~~
chickenfries
Saw this previously on hn
[https://github.com/google/boardgame.io/blob/master/README.md](https://github.com/google/boardgame.io/blob/master/README.md)

------
Donzo
I’ve been using ImpactJS since around 2012 or so to make HTML5 / JS browser
games.

I really like it, but development on the project has been stagnant, and I’m
considering a move.

Can anyone whose used both speak to what Phaser does better/worse than
ImpactJS?

~~~
james-skemp
I haven't used both, but when I was investigating frameworks the lack of work
on ImpactJS, and very active work on Phaser, is why I chose the latter.

------
myth_drannon
Hopefully Thomas Palef will update his "Discover Phaser" book for Phaser 3.

------
disease
Anyone know the story regarding TypeScript definitions and this project? I'm
surprised to see that they don't seem to be available yet considering this
project used to be written in TypeScript.

~~~
james-skemp
As someone waiting for TS to really dig into it ...

One of the recent posts mentioned that TS defs would be part of launch, but
it's been quiet on that front now.

There's a closed issue in GitHub where someone is creating defs themself.

If I remember correctly TS community support was why he didn't stick with it.
Community voted and straight JS but with TS defs were going to be the target.

------
ggregoire
What are the main differences with Pixi? I'm new to game dev, I picked Pixi 1
week ago because it's the one generally recommended on HN.

Both frameworks have 17,500 stars on github.

~~~
tlarkworthy
Pixi is rendering. Phaser is full game engine (physics, sound etc.).

Phaser uses an old customized version of pixi for the visuals.

~~~
Kiro
They got rid of Pixi completely in v3.

~~~
test1235
What did they replace it with?

------
baldfat
I LOVE Phaser though I have moved on to Godot wanting to see if it is a better
fit for me. Congrats to the team for making a great toolkit.

------
drumttocs8
How does this compare to standards such as Unity?

~~~
konsnos
They are for a different job and can't really be compared. Phaser is a solely
Canvas or WebGL browser games framework and does a really good job at that. If
you just want to make browser games pick Phaser.

If on the other hand you want the option to build for desktop or mobile and
other platforms try Unity. Why not pick Unity from the start? It supports
building in WebGL but you can't really delve in that automatically generated
javascript code to fix something in there and even if you tried to do it you
would have to do it every time you build your game. You just have to trust
that Unity will keep up to date its framework and its build system will
optimise it as best as it can.

Also with Unity you trust your art and music to its packaging system. You can
change some of the import options, but in the end you depend on its
optimisations.

------
dgritsko
How does this compare to the "Community Edition" of the Phaser framework?

~~~
nycdotnet
Community Edition is the latest 2.x after the main dev started focusing on v3.

