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.
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.
>> would be an issue for my other team members[...] I'm use to its workflow but onboarding game devs hate it. I have to hear everyday lets move to[...] I personally like coffee-script but I swallowed the medicine on this one[...] I think of code completion and seeing errors right away as crutches[...] make it much easier for juniors and lower the bar
That's an awful lot of "I am very smart" for one comment. You shouldn't need to repeatedly insult your fellow team members to express your thoughts on such matters.
Preferring vim over an IDE isn't enough to convict, but when someone starts associating the use of an IDE with "juniors", the verdict is guilty. Your choice of tools should be about getting the job done efficiently - using vim isn't a skill that demonstrates seniority or superiority.
>> I really wanted to contribute[...] put great effort to join but Richard was useless in responding[...] I asked month over month[...] I would have contributed significantly[...]
Classic "nice guy". You might have taken the hint after the first few weeks - or months - that he wasn't interested. I'm sure that, upon reading your comment, he would be relieved to know he didn't invest his time onboarding someone who would have sucked the life out of the project.
Source: You sound like me 10 years ago. Right down to the perspective on vim.
`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.
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.
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.
Fwiw with a couple of plugins[1], I have very nice code completion in vim with ruby/rails along with useful "go to definition". Perhaps not as challenging as punching cards - but it's not like vim is some kind of bare bones editor...
FYI, I just tried your game on windows 10 and the "enter" key is not working to start the game. So I can't get past the start menu. No errors or warnings in the console.
For Ludum Dare 34, my friends and I used Phaser and Typescript to make a Jam-game[0][1].
(meaning: team-based, has more days available, not part of the main "competition", which is about the solo achievement of making a 48 hour game)
It was my first introduction to either, and none of us had used Phaser before. My experience matches yours: combining the two made for a great dev experience, and the docs are confusing at times.
Luckily my friends Thomas ten Cate (aka Frozen Fractal) and Marten Veldthuis (aka... Marten Veldthuis) are excellent developers, who have struggled with way worse documentation, so we managed anyway. Docs aside, Phaser-the-framework seemed very well constructed.
Tangent: a few competitions later Thomas made Leonardo's Paint Machine[2], which is so amazing, especially for a 48 hour game, that I'll link it despite being made in a different framework (he uses Ludum Dares to try new out new frameworks and such).
If we’re doing tips, here’s another: don’t use bazillion timers to control your actors lifetime! Timers array gets resorted at every addition and that can really add noticeable lag on slow devices. If you need to, rewrite the add timer method to use an insertio sort instead of adding last then sorting the whole array
(I was using timer instead of collision for bullets since I had the hit/miss outcome coming from a percentage base rile as opposed as game phisycs and expired bullets just at the right time to make them appear misses - maybe not the greatest idea mind you but eh got it working and was cool enough)
imho the reason why Phaser docs are so bad is an excuse to sell... Books about Phaser. Maybe I'm wrong, but why they exists if community repeated many times that docs should be improved?
Hanlon's Razor. It seems to me that if there's limited resources, then if they've decided that they're not using "documentation as marketing" (which for free frameworks doesn't seem to be the best strategy to be honest), then directing time to developing paid for learning materials over and above using that time for free docs is a valid strategy.
I can't imagine any project deliberately having crappy docs in order to sell resources, as you'd get almost no buy in to begin with.
everyone is entitled to an opinion, even if that opinion is quite clearly wrong. Phaser is a tiny team of very dedicated individuals and they have successfully produced one of the best JS/TS game frameworks. If you want better documentation, why not produce some? Want to help the team grow so they can afford to employ someone to write docs? Buy the books, pledge to the Patreon. Basically: help in some way. That's much more productive than suggesting they did all this work simply to sell some books.
An opinion can't be wrong, a statement maybe, but a statement "this is what I believe: <opinion>" is in any case not up to debate. Because An opinion has to be supported by arguments and those can be wrong. But of course, you are entitled to your opinion.
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.
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.
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.
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.
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!
My son did a game dev camp last summer at DigiPen where they were using a custom IDE that exposes Phaser with Blockly. The quality and variety of games produced by a bunch of ~9 to 12-year-olds in 2 weeks was impressive.
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.
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]
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.
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.
"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?
I built a (very simple) game in Phaser a couple of years ago and used cocoon (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.
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)
I had many issues with iOS since their web view component didn’t enjoy full webgl accelleration. This made opening my game slow in chrome and slow when wrapped in a cordova app without using crosswalk, eventually just reduced graphic demands precalculating composed sprites, placing caps on concurrent bullets, reducing the game area etc.
In the end was running well enough from the browser too making wrapping moot.
It’s published at http://increstellar.com and the code is not obfuscated but beware: it’s very amateurish
I'm not part of the Phaser development team, but I imagine the 3rd party tool they're referencing is Cordova. If you're using the CLI generator for Cordova, you'd put your finished project in the `www` folder and plug in your test device to see how it runs. This creates a webview app that runs on Android and iOS devices.
I'm not an Android or Swift dev, but I imagine you can just stick it in a native webview, which is what I believe Cordova does.
As for performance I can't imagine it's super-performant, but I do know the lead dev does his best to aim for 60fps rendering even under heavy duress.
It could also be using something like Ejecta[1], which wraps a javascript engine with a simple native reimplementation of the canvas API. Ejecta is great because its lightweight - you don't pull in all of Webkit like cordova. (And thus you don't have to deal with any of its opaque, ever-changing quirks.)
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.
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.
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.
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.
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.
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/
[2] http://phaser.io/phaser3
[3] https://github.com/TooManyCaptains/TooManyCaptains/tree/mast...
[4] https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager....