Jump to content

Most Liked Content

#29053 Phaser 2.0.0 Released!

Posted by rich on 14 March 2014 - 07:47 AM

After a LOT of hard work I finally pushed Phaser 2.0.0 out today! It literally only just snuck into the March 13th release date :) But I'm super happy with this build. The headlines:


1) Pixi 1.5 under the hood = much faster in nearly all cases

2) Multi-physics engine support: Arcade, p2.js full Body and Ninja.

3) Better Group handling - more sensible parenting, less code, better child support, faster.

4) Better Text handling - Bitmap Fonts with spaces in the name! Text shadows, text events, web fonts, etc.

5) More consistent input events across more game objects than before.

6) Literally hundreds of bug fixes. I cleared out github entirely :)

7) Much better tilemap collision than ever before - tile delta options, tile padding on bodies, faster getTiles, faster rendering

8) Tilemaps supported across Arcade, p2 and Ninja!

9) Lots of bizarre physics bugs nuked.

10) Retro Fonts :)

11) Tilemap ray casting :)

12) Load Lime/Corona polygon files direct into p2 bodies.


and loads I forget because I've not slept for 26 hours :)


In short ...




It's all on the repo: https://github.com/photonstorm/phaser


Site to be updated when I'm back in the land of the living.


Thanks to everyone who helped test and reported bugs :)

  • Mike, abiyasa, nem0ff and 17 others like this

#26655 Kiwi.js vs Phaser

Posted by rich on 27 February 2014 - 04:24 PM

The important thing to look at with those posts is the date on them, to appreciate what happened and when. But this is a perfectly fair question, so here goes a little history lesson :)


When I left my previous company and started Photon Storm full time, my first project was to help build Kiwi.js for a company in New Zealand called Instinct Entertainment. It was just myself and one other part-time developer (the massively talented Ross Kettle). We had nothing to work from, no template as such, so we were literally creating it on the fly - and what's more, the html5 landscape was constantly shifting beneath us as well (back then even iOS hadn't accelerated canvas fully yet).


After a few months we made the jump from plain JavaScript to TypeScript. This actually helped the project significantly at the time, as we had structure and clarity that was a bit lacking before. But I also needed to start doing client games as well (to pay the bills basically, as fun as frameworks are, they don't make you much money :)) so my time was now split between Kiwi and client games. And I used Kiwi for most of those early games, which helped it grow and develop. But still I was essentially coding on my own most the time, and after a while that gets really tiring. Ross was doing loads as well, but like me he had his own projects too, so we'd get strange boughts of him not being able to do anything for a few weeks, and then doing loads, and the same from my end, and it all kind of gets mixed and muddled up (it's not a great way to run a project in hindsight). Even so I coded for months: days, nights, nights into mornings, literally thousands of lines of code.


Kiwi was still closed-source at this point and was a quite monstrously sized project. Too much so really. At the time I really wanted it to support DOM as well as Canvas, and spent a good while refactoring to support this. In hindsight it probably didn't need it, but back then DOM was still significantly faster than Canvas in most browsers (you could argue, for certain games, it still is) but of course adding this dependency didn't help with the scale of the project. So I'm literally burning the candle at both ends, trying to manage a hugely growing small business and trying to keep Kiwi moving forwards with effectively zero project management.


Remember no-one else was allowed to see what we were doing, we couldn't release it onto github (due to funding applications going on at the time) and it was all just getting too much. There weren't enough hours in the day to manage it all and I basically burnt out.


To try and rekindle my love for it I literally spent a weekend while the family was away hacking together a crude conversion of Flixel. I literally copied it wholesale, having to rebuild classes that existed in AS3 and porting the others. A couple of days later I was done - it was small, clean and just worked, because it only tried to do a few things so it did them pretty well. It was called Kiwi Lite (a name that I feel is a strong indication of my mindset at the time) and I wanted to release it on github. I was told I couldn't use the name as Kiwi had to remain closed at that time. So I asked Adam (creator of flixel) if I could call it Flixel5, but he said he'd rather I didn't as it would confuse things with the Flash build. So I spent an hour brainstorming some names with my good friend Ilija and we settled on Phaser. He drew a cool little space dude sprite and logo and the first build was pushed to github on April 12th 2013.


I had always intended it to be a 'younger brother' to the much more sophisticated and feature-complete Kiwi.js, and for a good while that is how it remained. But an interesting thing happened: other people started using it. It started to take on a life of its own, and a small but constant trickle of devs started submitting pull requests and bug fixes. And then people actually started making games with it. And this does a curious thing when you've been working effectively in isolation for so long: it motivates you, like nothing else possibly can.


And although I carried on working on both for a while, I slowly drifted away to Phaser because I was getting real tangible feedback and support, and it was infectious. The team at Instinct hired other devs to work on Kiwi and they've done an excellent job of cleaning it up, adding in WebGL support and making it a really attractive framework, and they released the first beta late last year (and didn't even tell me :P). It's still TypeScript to the core, something I moved away from with Phaser - a move that's well documented on the forum if you want to read about my troubles with it!, but it's well worth looking at and using, especially if you like TypeScript or come from AS3.


And while they were finishing Kiwi, Phaser evolved. When I swapped to plain JavaScript that was the same time I swapped to using Pixi.js under the hood, mostly because Mat is such a great guy :) but also because it was tiny and clean and it made sense to me. Version 1.0 was released just under six months ago, and for some reason it's hit a real chord with developers.


Just so we're clear there is (or was) no 'breach of contract' here. There was a simple agreement in place, and I literally poured my heart and soul in Kiwi development for months, way more time than agreed (or ever invoiced for!) because I believed in what I was building. I'm not involved in development of it any more though, because it's no longer my "baby". A lot of work has been done on it, lots of internals changed (for the better) and the new devs own it now. It's their creation and they don't need me sticking my oar in.

I've really held back from promoting Phaser, I think in part because I felt guilty and somewhat humbled that people even liked it and used it! And I wanted to give Kiwi time to release and establish itself. You can count the number of posts about it on my blog on one hand for example, and even though it has been ready for months the web site is still just a single pager. But that didn't stop it growing in popularity. I'm genuinely amazed at how well it's going. I'm not really doing anything other than trying to constantly improve it and help people use it, but I guess those are 2 quite fundamental things :)
Phaser 2.0 is finally the version I'm truly, genuinely 100% happy with. I've spent weeks fixing bugs, making it simpler under the hood, using Pixi.js more intelligently and improving it as much as I can. It's taken a long time and a lot of work to get to this point and as corny as it sounds, absolutely none of this would have  happened if it hadn't been for the community around it. The more people that use it, the more I want to make it better. And for those that submit pull requests and help fix bugs, you're the best :) When 2.0 ships in March I'm no longer going to hold back from promoting it, so you'll see it appearing in a lot more places and things will step-up a gear around the site and tutorials.
tl:dr - I spent a long time working on Kiwi, but am no longer part of that team. It's a great framework and well worth using. Phaser was a weekend creation born from a pit of frustration/depression that went mental and grew into what you see today, utterly unplanned, but utterly wonderful because of it.

  • Mike, nem0ff, Jorasso and 17 others like this

#50056 Phaser Isometric plugin

Posted by lewster32 on 06 August 2014 - 11:11 PM

I've spent the last week or so putting together a fairly comprehensive plug-in for Phaser in the form of an isometric (axonometric and dimetric to be precise) renderer for Phaser. Not wanting to stop there, I decided to go the whole hog and port over Phaser.Physics.Arcade to the new renderer by adding in an extra dimension.


You can get the plug-in here: http://rotates.org/phaser/iso/ - the page also contains a working example so feel free to view the source to get a feel for how it works. I'll be creating several more examples in the coming days and weeks, as well as improving the plug-in, fixing bugs and so on.




As of yet, I am undecided as to whether to embark on trying to create an isometric equivalent to TileMap (with Tiled importer) but if there's enough interest I may see what I can do.


Enjoy, and I'm looking forward to seeing what you do with it! :)

  • Noid, Hsaka, Pedro Alpera and 16 others like this

#27823 Explaining Phaser 2s multiple physics systems

Posted by rich on 06 March 2014 - 03:52 PM

So a few of you are rightly confused after my recent commits :) Let me explain what's going on with the physics systems inside Phaser ...


As you may know, I've been really happy with p2.js for all of Phasers proper full-body physics requirements. It's excellent and I'm really pleased with how well it integrated. However on mobile it doesn't take long before the frame rate starts to dive. This is no fault of p2, it's having to do a lot of heavy lifting math and mobiles just struggle. Even with just 50 bodies in the scene you can see it start to suffer. So I wanted to offer an option to devs.


In Phaser 2 no Sprites have physics bodies as standard, they all need to be physics enabled (much in the same way you enable them for input). This helps keep things fast. Where-as in 1.x Phaser is spending a LOAD of time processing a physics Body it may never even use.


Arcade Physics, back from the dead


So I decided to go back and resurrect Arcade Physics. Not the broken SAT one in 1.1.4, but the one previous to that. I merged lots of the fixes I had made in 1.1.4 (things like process callbacks actually working properly) with the previously working separation code from 1.1.3. This means that existing 'old' games won't have to be ported over to p2 to run, they can just use Arcade Physics like before - the only difference being they'll need to enable the Sprite bodies. All those annoying/broken things about 1.1.4, like the way gravity and velocity are messed-up, are all fixed.


Because physics is 'off' by default I created a Physics Manager via which you do things like 'enable p2' or 'add a physics body to this sprite'. While I was doing this it occurred to me that you could actually have p2 and arcade physics running together in the same game. p2 could be controlling whatever bodies you give it, and arcade the same. After a few basic tests this was working just fine.


Here is how you activate a physics system:


The important thing to remember is that a single Sprite can only belong to ONE physics system. So you can enable a Sprite for p2 or arcade - but never more than one. It cannot exist in multiple simulations at once.


Here is how you enable a Sprite for say Ninja physics. You can do it directly on the system like so (here creating a new Circle shape):

game.physics.ninja.enableCircle(sprite, radius);

Or you can use the physics manager interface (this will create an AABB shape for the sprite, the default):

game.physics.enable(sprite, Phaser.Physics.NINJA);

In 'enable' calls you can pass in either a single object or a whole array of them.



p2 and Arcade running together


Why on earth might you want to have both running? Well for a lot of games I would say there is what you could call 'simple' and 'advanced' requirements. For example you could have a nice complex polygon terrain all handled by p2, with a car body with  motors/constraints/springs driving happily across it.


But what if you wanted that car to be able to fire up to shoot some aliens overhead? Assuming you can fit those aliens into clean AABB shapes then it's now entirely possible to have the car itself controlled by p2, driving over a p2 managed landscape, but when you shoot it launches a stream of bullets managed entirely by Arcade Physics, and collision with the aliens who are all running under Arcade Physics too. In short you're leaving p2 to deal with just a handful of complex bodies and motion and not bogging it down with ultra simple requirements.


I'm not suggesting that all games will need this, but at least you have the option now.


Great, but what the hell is Ninja Physics?


As I was working through all the above I realised that even with p2 and arcade available, that still doesn't cover all bases that a game may need. What if you wanted to use Box2D? Or Chipmunk? It dawned on me that I should stop referring to the physics systems inside Phaser as just 'arcade' and 'advanced', but actually call them by name. Then I could provide a (mostly) standardised physics Body object, a single Manager to handle them, and then you could use whatever physics system your game actually needs. The Physics World object needs to implement a standard set of methods, but otherwise can work quite independently.


While renaming these classes I remembered that I had spent weeks about a year ago working through the physics system that Metanet Software used in their awesome N+ Flash ninja games and porting it to JavaScript. I had shelved it as it was only suitable for certain types of games and didn't play well with Arcade Physics settings (at the time I was trying to merge some of their collision responses with Arcade Physics). But I dug out the old source files and had a look, and sure enough it was pretty much complete. So to test out my theory of Phaser supporting a variety of physics systems I created Ninja Physics from it, and integrated it.


It's a really nice little physics system, supporting AABB and Circle vs. Tile collision, with lots of defs for sloping, convex and concave tile types. But that's all it does, it's not trying to be anything more really. As you'll see from my Labs demo it works well, and is really quite fast on mobile too.


Which one do I use?!


I've no idea, it depends on your game :) The choice is yours. If you need full-body physics, then p2 obviously. Arcade Physics has proven successful in lots of games so far, so you could carry on using that too. Or maybe if you like what you see re: Ninja's tiles, you could test that out. The important thing is that it's up to you now, and although it requires more careful planning with your game, you can even combine them too.


Phaser doesn't have all of these physics systems running together wasting CPU, they all start off as 'null' objects and do nothing until explicitly activated. I'm also tweaking the grunt scripts so that the build folder will provide versions of phaser with none, one or all physics systems embedded into the code, so they're not going to waste space either. The plan is to carry on adding support for popular physics systems in, most importantly Box2D and Chipmunk. Again these will be separate libs you can bundle in with phaser, with just a single variable stub in the physics manager. As long as the Body and World objects adhere to a few simple requirements, it will 'just work'.


Anyway, hopefully this clears things up a bit! :)

  • Mike, brejep, clark and 13 others like this

#1647 Learning to write (good) JavaScript - resources for beginners

Posted by Chris on 16 April 2013 - 09:57 PM

Hey guys,

since we have a few beginners here on board, trying to make their first steps in the world of HTML5 games, I thought it might be good to point you to a few resources about how to learn to write good javascript code.


JavaScript is a language where you have to be a bit careful about your syntax and code style if you want to write maintainable and readable code in the long run.


The advice I give to most newcomers is: DONT dive right into developing a complex game! First learn how to handle the language properly.

Spending a week or two with reading through a good JavaScript book and a couple of tutorials will give you enough knowledge that will increase your development speed a thousand times and helps you avoid common pitfalls for beginners.


I would suggest every beginner to first decide for a good IDE that supports code completion and syntax checking. If they even support jshintyou can't wish for much more!

A few IDEs are: Netbeans, WebStorm, Microsoft Visual Studio, heck even Dreamweaver. Just pick one you like.



Okay, lets throw a bit content at your brains! First out, a few books I can personally recomment reading:



JavaScript - The Good Parts by Douglas Crockford

O'Reilly, ISBN: 0596517742

Good for beginners


JavaScript Patterns by Stoyan Stefanov

O'Reilly, ISBN: 978-0-596-80675-0

Very good for beginners


JavaScript - The Definitive Guide by David Flanagan

O'Reilly, ISBN: 0596805527


JavaScript Cookbook by Shelley Powers

O'Reilly, ISBN: 978-0-596-80613-2


JavaScript Web Applications by Alex MacCaw

O'Reilly, ISBN: 978-1-449-30351-8

For advanced users


High Performance JavaScript by Nicholas C. Zakas

O'Reilly, ISBN: 978-0-596-80279-0

For users with basic to advanced knowledge


You may find some of this books in digital PDF format, if you google for it.


A list of more books in digital format: http://jsbooks.revolunet.com/

I also recommend a look at the digital books from Addy Osmani.




We don't stop there. When you read even only the top two books of this list, you are armed with a set of JavaScript knowledge to develop 99%

of the games you want to.


Lets continue with a list of online resources, for the more digitally aligned people out there :)



Basic introduction into Javascript

For beginners and advanced users. Explains what JavaScript is and how it works.




JavaScript learning portal by Mozilla

Take this as your starting point for learning JS online. Mozilla gathers many notable sources and links of good tutorials and documentation on this page. This is one of the best sources for beginners, as well as for advanced users to learn something new.



Google Code University: Videos for fundamental JavaScript understandment

If you are looking for a quick introduction, watch this videos. The two JS videos are both about 17 minutes long and will give you a good basic understandment if you are a beginner.

There are also videos about CSS and HTML on this page.



Learning advanced JavaScript by John Resig

This information collection by John Resig covers basic mechanics of JavaScript but they are meant to be used as supportive content to his upcoming JS book, so lack descriptions and comments.

We recommend to use this only if you already have a fundamental understandment of JS.



Mozilla JavaScript Guide

This advanced JS guide shows you how to work with JavaScript in the browser, what pitfalls and differences you have to watch out for in the different JS versions and good tips and best practices about debugging your JS code.



Best practices guide by the Opera guys

This very long article covers many many good tips about what you should avoid when coding with JS. Many beginners mistakes are covered and explained why they should be avoided.



Usage cases for JavaScript by the Opera guys

This article covers the topic what you can achieve with using JS on your websites in the first place. You have many resources for learning JavaScript now - so this one covers what it enables you to do.



JavaScript Garden

A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.



Code Academy

An interactive way to learn coding, with live examples, you solve directly in the browser.





Thats my 50 cent to help the beginners starting with JavaScript.

If you want to add something here I forgot to cover, just post me suggestions. :)




  • benny!, Mike, EmployeeNumber8 and 12 others like this

#63295 Phaser 2.2.0 "Bethal" is Released (+ 2.2.1 Update)

Posted by rich on 03 December 2014 - 12:51 PM

After hundreds of hours of hard work, 13 Release Candidates and changes pretty much across the whole board - Phaser 2.2 is out!


2.2.1 Update


There were a couple of small but really important bugs that slipped in at the last minute, one involving alpha not working in Pixi.js in WebGL mode, and the other a Tween Manager update. These have been rolled into a 2.2.1 release which is now live. Everything else remains the same as with 2.2.0, no API changes took place, so it's a safe direct update.


What's new in 2.2.0?


One of the nicest and most surprising things about a truly open-source project like Phaser is that you never know who might jump on for the ride. I've been extremely lucky with the support I've received over the years - fellow developers both fixing bugs and reporting issues, all helping to make Phaser  stronger as a result.


But sometimes a single individual can come along and make a substantial difference all on their own. A quick glance at the Change Log for this release will show many different contributors, but one stood out more than any other: Paul Stickney. Thanks to his contributions alone Phaser is now sporting a powerful new Scale Manager, nicely updated API docs and many other fixes and features across the board. The Scale Manager, a core part of any HTML5 game has had its own book published about it: A Guide to the Phaser Scale Manager which is available now.


One of his other major contributions was in updating Signals, the event system used inside Phaser. Before Phaser was creating thousands of Signals in a busy game, most of which sat idle. Now they've gone on a diet in terms of memory consumption and hide behind a proxy causing them to not even be created unless needed. This has cut down on the amount of objects being generated every frame dramatically.


As you may have noticed we've bumped the release version to 2.2 from 2.1. This is because there are some API breaking changes and some core fundamentals have been updated as well. The biggest change here is the move to a proper fixed-step internal game loop. The logic and rendering are now fully decoupled, with both Arcade Physics and Tweens having been updated to use this new system. This is by no means a panacea for overloading low-powered mobile devices. However it will help prevent issues arising from devices running Phaser games at different speeds just because it has a slower processor.


Also given a large update is the Tween Manager. This is now hooked in to the new timestep code, smoothing out tweens when the frame rate drops. New features have been added, including the ability to pause and resume a whole timeline of tweens and tween chaining has vastly improved.


The Change Log is indeed extensive. I would say that if you are *already* working on a Phaser game, and a good way through development, then you should carry on with whatever version you used before. But for all new projects definitely take the leap into 2.2 and I hope you enjoy splashing around in its new features :)


Thank you to everyone who beta tested 2.2 with us in one of its many Release Candidate incarnations. Your feedback helped fix issues that would have been otherwise troublesome to find and it's a process we'll carry on with for future builds.


2014 has been an amazing year for Phaser and I'd like to take this opportunity to thank everyone who has been involved, one way or another. Your support has been fantastic and we've built great things. Here's to 2015.





  • saibotlive, True Valhalla, totallybueno and 10 others like this

#23179 Phaser 1.1.4 Released!

Posted by rich on 05 February 2014 - 07:17 PM

I'm really pleased to announce that the long-awaited 1.1.4 is finally out. There is a full write-up about it on my blog here:




Thank you to everyone who contributed feedback and testing during development. This is a significant upgrade, so be careful before blindly upgrading from 1.1.3 if your game is well established under that codebase.


If you find issues (and I'm sure you will!) please check the Examples first to see if there is a new way of handling things, then post about it on the forum (don't clog up this thread, it will be impossible for us to keep track, create a new one). Or use github issues too.


Thanks everyone :)


  • Mike, Hsaka, Bodman and 10 others like this

#46338 Phaser 2.0.6 - Jornhill - Released

Posted by rich on 10 July 2014 - 08:18 PM

Update: Friday 11th July


We found a couple more issues in Pixi 1.6 - one that stopped RenderTextures working at all (which in turn broke some Phaser features) and the IE9 Float32 issue. These were fixed today and rolled into Phaser. I also reverted to the previous implementation of the Image object, which fixed a strange bug with Buttons not changing frames properly. You'll find the latest build files in the dev branch on github, it will be a 2.0.7 release next week after a few more issues have been looked at.






We're very pleased to bring you the latest version of Phaser. We were hanging back waiting for the 1.6 release of Pixi (hit the link for lots of nice demos!) and sure enough it landed today, so we're pleased to incorporate that into this release. Pixi 1.6 itself brings in a number of powerful new features, not least of which are the awesome updates to the Graphics class - now allowing for significantly more complex shapes and masks and a host of new methods such as drawPath, arcTo and quadratic curves.


There are also masses of updates across Phaser as well. The Change Log will give you the full details, but there are substantial new updates, features and bug fixes across most of the library. Also a big shout out to the guys at Ludei for helping get to the bottom of some strange CocoonJS issues and submit their code into Phaser.


Just as we were preparing for release the 0.6 version of p2.js landed as well. As much as we'd have loved to include it this time we just didn't want to hold back any longer. So we've updated our roadmap and will push out 2.1 very soon, which will focus specifically on integration of the new version of p2.js. We're moving to 2.1 as it has a number of API breaking changes inside.


You may have noticed that we also now have a Gittip account set-up. Everything we raise from this will go towards helping Phaser development, one way or another. To those of who you have already contributed, thank you!


We're also working extremely hard on the new web site. We're really happy with the new features we've been adding recently and are pushing to get it done as soon as possible. There's also a brand new documentation generator nearly done - see our Roadmap for more details.


Edit: There's also now a blog post to go with this release :) with more details + a couple of new games.

  • Mike, nem0ff, Pedro Alpera and 9 others like this

#21461 phaser.js State transition plugin

Posted by xnamex on 24 January 2014 - 12:20 PM

Hi everybody,


Pretty new to Phaser.js but kind of old to AS3 :)


I just started to port a as3 game into html5 with phaser, but my client wanted transitions between states - just like my game had in flash. Therefore I created a plugin just for this.


You can find it here: https://github.com/c...tate-transition


Let me know, what you guys think, or what can be improved.



  • haden, plicatibu, shawnbless and 9 others like this

#9878 The Decline Of Common Sponsors

Posted by rich on 22 September 2013 - 03:27 PM

I've got nothing personal with him, all I'm saying is that if the average html5 quality is far from the average Flash one. There is a lot of potential to up the quality of HTML5 games, whereas the prices are already declining as I hear.


There's two sides to this - yes we can up the quality, but only to a certain point. We just can't do on mobile browser what Flash can do on desktop. The performance simply isn't there, so comments like "the quality will just keep getting higher" are only true to a point. I think production values will improve massively, but the platform is what it is, and having years of experience under your belt won't give you a magical extra 50% CPU power or something.


I've not seen any decline in prices either. They have always been pretty low!


For me the area where HTML5 is most interesting has always been commercial / client work. The demand for this is quite frankly insane at the moment and it is not letting up. I get far more enquiries for new projects than I could ever cope with. If you're a good developer (with time available to spare) then seriously drop me a line, I could easily put several thousand $ of work your way every month. What is interesting is that this isn't going to change either. Flash is dying out commercially. Clients who a few years ago wouldn't question using it now need HTML5 games built, and the experience just isn't out there to meet the demand. This doesn't suite an 'indie' lifestyle though, and it's a very different sort of work to making the types of games you enjoy yourself. But it pays extremely well if you're good at it.

  • PixelPicoSean, True Valhalla, haden and 8 others like this

#47381 Phaser 2.0.7 - Amadicia - Released

Posted by rich on 18 July 2014 - 11:54 AM



We're pleased to announce the release of Phaser 2.0.7. This release comes just a week after 2.0.6 but includes some important fixes. Internally we've updated to Pixi 1.6.1 as lots of the fixes come directly from that upgrade, which in turns restores functionality of things like RenderTextures and Retro Fonts. It also fixes strange issues with Buttons and Images.


There's also a vastly improved SpriteBatch included, which has seen batching speed increases of up to 400% in some cases, which is extremely fun to play with (note: batching is a WebGL feature). Plus we've continued to roll in pull requests from the community and fix issues as quickly as we can. You'll notice a number of input related updates in this release, tidying up the handling of Priority IDs and optimising when pixel perfect checks are run. So if you now use a combination of IDs and pixel perfect checks you can easily speed-up the input loop dramatically.


Again thanks to everyone who helped work on this release. The community for reporting issues and pull requests, the team at Goodboy for responding to major Pixi issues quickly and the team here for rolling out another important upgrade.


Hopefully we can now focus on the 2.1 release and enjoying some of this warm weather outside :)

  • Pedro Alpera, tackle, turnA and 8 others like this

#25079 Common Phaser + CocoonJS issues

Posted by Videlais on 19 February 2014 - 02:16 AM

Last update of this information was 13 August 2014.


Note: As of this writing, CocoonJS (2.0.*) comes in a total of three modes.


[System] WebView creates an instance of the default browser for a platform, loads its own API, and then hands off the code execution. In most cases, it is the same as running the code in a mobile platform's default browser.


WebView+ is often the same as WebView, but adds in Chromium-based libraries.


For Canvas+ mode (previously accelerated, "Canvas 2D/WEBGL") it strips out things like XML and most DOM and CSS support to make running the canvas as fast as possible. Because of this, most common things like getElementById and createElement in JavaScript have reduced functionality. It is designed purely for Canvas-based projects. (For the 2.0 branch, see the changelog from 1.4.7.)


Since there is limited DOM support, make sure to use an empty string for the parent element during the creation of a game object when using the accelerated/Canvas+ mode. (This is to make sure the created canvas element is appended to the document.body object, and not some other element the getElementById function cannot find.)

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, '', {preload: preload, create: create, update: update});

Issues with Phaser <= 2.0.7 and CocoonJS <= 2.0.2 (Canvas+)




Use of multiple images may introduce disappearing or flickering results.




Single-line text printing works. However, using the newline character will not produce the correct results.

  • Setting anchor.y values do not work correctly.
  • Shadows do not work.




CocoonJS does not have native support for XML. Its XHR does not return responseXML and it does not have a window.DOMParser object.




Generally, you can use window.innerWidth and window.innerHeight to compute the size of the screen in CocoonJS. However, if you know there might be a device pixel ratio issue, the following code works for that.

var width = window.innerWidth * window.devicePixelRatio;
var height = window.innerHeight * window.devicePixelRatio;

Depending on your needs, Phaser's built-in scaling manager will often be enough.


However, the following code suggested by Starnut should be helpful for accounting for odd screen sizes as well.

var w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio,
width = (h > w) ? h : w,
height = (h > w) ? w : h;

// Hack to avoid iPad Retina and large Android devices. Tell it to scale up.
if (window.innerWidth >= 1024 && window.devicePixelRatio >= 2)
width = Math.round(width / 2);
height = Math.round(height / 2);
// reduce screen size by one 3rd on devices like Nexus 5
if (window.devicePixelRatio === 3)
width = Math.round(width / 3) * 2;
height = Math.round(height / 3) * 2;

var game = new Phaser.Game(width, height, Phaser.CANVAS, '');



Because of the lack of XML support, one solution for BitmapFonts is to convert the XML into JSON and use an alternative loader. This post covers the code needed and what to use to convert the XML into JSON.




Most often, audio problems are related to the device itself, not CocoonJS or Phaser. If you are running on an Android device, make sure you have OGG or WAV (16-bit ONLY) files. Apple devices support MP4, OGG, MP3, WAV (16-bit ONLY), or MPEG. (Remember too that MP3 decoding, depending on the device, can often be slow.)


On some platforms, a user-activated event (like touch) is needed to enable sound. This specifically affects iOS devices, but is not uncommon on other platforms too. Using something like a "Tap to Continue" button or an initial menu works well to signal to the player to tap to enable both the game and sounds.




Filters don't work currently. (As reported here.)




There is currently a problem where image-based buttons can sometimes disappear. It is under investigation.



It is HIGHLY recommended to update to newer versions of Phaser ( >=2.0.7) and CocoonJS ( >=2.0.2). Issues between older versions of both libraries are no longer being actively tracked.

  • haden, sfcal99, Michel (Starnut) and 8 others like this

#24039 Phaser 1.1.5 Released and where we're going next

Posted by rich on 12 February 2014 - 03:54 PM

Hi all,


I've just pushed Phaser 1.1.5 to the master branch on github. This fixes a range of bugs, including a few physics ones, missing documentation and fixed TypeScript defs.


It also includes a "Call to arms" to help test Phaser 1.2, which I'd urge you to help with if you can.


Please note that I will still accept pull requests against the dev branch for a potential 1.1.6 release, but that I won't be fixing any of the outstanding current physics issues because progress with 1.2 has been so fast, and basically so awesome that I don't want to waste any time patching ArcadePhysics as it has been removed entirely from 1.2.


Believe me I carefully considered this. As I see it there are two options: Get 1.2 out FAST and forget 1.1.4 ever existed, or struggle to work on both and slow down the development of each of them. While I could potentially do a roll-back to 1.1.3 and include the tilemap features of 1.1.4, that is still quite a chunk of work to undertake. I was considering it though right up until this week, but to be honest 1.2 is more than just replacing physics, it's a deep change across most of it.


I probably should have left 1.1.4 in dev only, but there were so many fixes in there (well outside of physics, not that you can call that 'fixed') that it seemed a shame to just not release it at all. Trust me, I didn't want it to be quite as broken as it is in some cases. Lots of 1.1.4 works better than previously, but given the biggest overhaul was the tilemaps it's ironic that it's those sort of games that have the issues the most (because of the physics changes).


Right now though I can't state enough how fast 1.2 has moved. The new version of Pixi has made life considerably better for me, p2.js is bloody wonderful and I'm using 1.2 exclusively for client work now. If anything I think it's fair to say that the issues I know about with 1.1.4 are a dramatic form of motivation to ship 1.2 faster!


I fully expect to have 1.2 released this month. It's a serious "tidy up" release. So many things removed, made neater, made smaller and basically all a bit more smarter. The new Pixi is doing wonders under the hood, and having a proper real physics system in there is making all the difference for our client projects, so I'm sure you'll enjoy it too!

  • haden, Hsaka, tackle and 8 others like this

#39083 Phaser 2.0.5 - Tanchico - Released

Posted by rich on 20 May 2014 - 09:46 AM

Hi everyone,


Here is the next point release of Phaser: 2.0.5. Again a nice bundle of updates, bug fixes and new features. We've also updated the roadmap and organise and prioritise some features. There will be one final point release (2.0.6) and then we'll switch over to 2.1 and start implementing some of the bigger updates and removing a few deprecated ones.


The online docs and examples have all been updated to 2.0.5.


There are some big changes inbound for Pixi.js and p2.js, which I'm looking forward to integrating with Phaser when they both release their next versions. Things like awesome new Graphics capabilities and mask handling, and the return of some long-lost friends like Rope and Strip.


As always grab the latest release from github: https://github.com/photonstorm/phaser


Here is the change log:

Version 2.0.5 - "Tanchico" - 20th May 2014

### Updates

* TypeScript definitions fixes and updates (thanks @luispedrofonseca @clark-stevenson @Anahkiasen @adamholdenyall @luispedrofonseca @WillHuxtable)
* Input.getPointerFromIdentifier docs update to reflect where the identifier comes from. Pointer properties now set to give it fixed defaults (thanks @JirkaDellOro, #793)
* Pointer.pointerId added which is set by the DOM event (if present in the browser). Note that browsers can and do recycle pointer IDs.
* Pointer.type and Pointer.exists properties added.
* QuadTree.retrieve can now accept either a Sprite with a physics body or a Phaser.Rectangle as its parameter.
* PluginManager.add now accepts additional parameters and if given a function it will pass them all to the Plugin constructor.
* Tilemap.getTile has a new nonNull parameter. If true it won't return `null` for empty tiles, but will return the actual Tile in that location.
* Math.interpolateAngles and Math.nearestAngleBetween have been removed for the time being. They threw run-time errors previously.
* PIXI.InteractionManager is no longer over-written if the object already exists (thanks @georgiee, #818)
* Key.justPressed and justReleased incorrectly set the delay value to 2500ms. Now defaults to 50ms (thanks @draklaw, fix #797)
* Stage.backgroundColor can now accept short-code hex values: `#222`, `#334`, etc.
* Pointer.withinGame is now accurate based on game scale and updated as the Pointer moves.
* Stage.bounds is now updated if the game canvas offset changes position. Note that it contains the un-scaled game dimensions.

### New Features

* New `force` parameter added to Group.set, setAll, setAllChildren, setProperty which controls if a property is created even if it doesn't exist.
* Group.hasProperty will check a child for the given property and return true if it exists, otherwise false.
* Phaser.Tween.from allows you to set tween properties that will end up where the current object is (thanks @codevinsky, #792)
* Input.getPointerFromId will return a pointer with a matching pointerId value, if any. pointerId is a value set by the browser in the DOM event.
* ArcadePhysics.getObjectsUnderPointer will return all children from a Group that overlap with the given Pointer.
* InputManager.minPriorityID lets you set the minimum priority level an object needs to be to be checked by a Pointer. Useful for UI layer stacking.
* New consts: Phaser.Tilemap.NORTH, SOUTH, EAST and WEST to use with plugins and generally just handy to have.
* BitmapData.processPixelRGB added undefined check (thanks @muclemente, fix #808)
* Phaser.Utils.transposeArray will transpose the given array and return it.
* Phaser.Utils.rotateArray will rotate the given array by 90 or 180 degrees in either direction and return it.
* BitmapData.rect provides a quick way to draw a Rectangle to a BitmapData.
* Button.onOverMouseOnly is a boolean that causes onOver events to fire only if the pointer was a mouse (i.e. stops onOver sounds triggering on touch)
* Tilemap.setCollision has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
* Tilemap.setCollisionBetween has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
* Tilemap.setCollisionByExclusion has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
* Tilemap.setCollisionByIndex has a new boolean parameter 'recalculate' which lets you control recalculation of collision faces (thanks @max-m, #819)
* Graphics.drawTriangles will draw an array of vertices to the Graphics object (thanks @codevinsky, #795)
* Polygon.area will calculate the area of the Polygon (thanks @codevinsky, #795)
* The Tiled JSON parser will now include Tiled polygons, ellipse and rectangle geometry objects in the resulting map data (thanks @tigermonkey, #791)
* Input.addMoveCallback allows you to bind as many callbacks as you like to the DOM move events (Input.setMoveCallback is now flagged as deprecated)
* Input.deleteMoveCallback will remove a previously set movement event callback.
* Mouse will now check if it's over the game canvas or not and set Pointer.withinGame accordingly.
* Mouse.mouseOutCallback callback added for when the mouse is no longer over the game canvas.
* Mouse.stopOnGameOut boolean controls if Pointer.stop will be called if the mouse leaves the game canvas (defaults to false)
* Tilemap.searchTileIndex allows you to search for the first tile matching the given index, with optional skip and reverse parameters.
* Tilemap.layer is a getter/setter to the current layer object (which can be changed with Tilemap.setLayer)
* Cache.checkKey added - allows you to pass in a Cache type and a key and return a boolean.
* Cache.checkCanvasKey(key) - Check if a Canvas key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkTextureKey(key) - Check if a Texture key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkSoundKey(key) - Check if a Sound key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkTextKey(key) - Check if a Text key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkPhysicsKey(key) - Check if a Physics key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkTilemapKey(key) - Check if a Tilemap key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkBinaryKey(key) - Check if a Binary key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkBitmapDataKey(key) - Check if a BitmapData key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkBitmapFontKey(key) - Check if a BitmapFont key exists in the cache (thanks to @delta11 for the proposal)
* Cache.checkJSONKey(key) - Check if a JSON key exists in the cache (thanks to @delta11 for the proposal)
* New movement data added for a Pointer Locked mouse (Pointer.movementX/Y) (thanks @woutercommandeur, #831)
* ScaleManager.bounds is a Rectangle object that holds the exact size of the game canvas, taking DOM offset and game scale into account.

### Plugins

The Plugins have now all moved to [their own repository](https://github.com/photonstorm/phaser-plugins)

### Bug Fixes

* Line.pointOnLine corrected algorithm (thanks @woutercommandeur, fix #784)
* Line segment collision fails under certain cicumstances (thanks @woutercommandeur, fix #760)
* The P2 DistanceConstraint method signature has changed. Updated Phaser so maxForce is now passed as object (fix #788)
* Moved the this._reversed flag outside of the property loop in Tween (as per tween.js issue 115)
* Emitter.makeParticles updated to use Array.isArray() check on the key/frame values, so non-string objects can be passed in (thanks @AnderbergE, fix #786)
* Tilemap.createFromObjects will now force the creation of the property again even if it doesn't exist (regression fix from 2.0.4)
* Phaser.Line.intersectsPoints fixed by properly checking the boundaries (thanks @woutercommandeur, fix #790)
* Group.set and setAll were changed in 2.0.4 to not create the property unless it existed. This broke backwards compatibility, so has been fixed.
* Sound.play now returns the Sound object (thanks @AnderbergE, fix #802)
* Device Silk UA test updated to avoid Safari conflict (thanks @jflowers45, fix #810)
* Sound.stop on Samsung S4 would randomly throw a DOM error. Wrapped the audio stop in a try/catch (thanks FSDaniel)
* RandomDataGenerator.integerInRange would return a non-integer value if you passed in a float.
* Timer class updated so that code-resumed pauses don't mess up the internal _pausedTotal value (thanks @joelrobichaud, fix #814)
* Timer class when paused by code after a game-level pause wouldn't set the codepaused flag (thanks @joelrobichaud, fix #814)
* Stage.backgroundColor now properly accepts hex #RRGGBB and color values 0xRRGGBB again (fix #785)
* Color.getRGB would return incorrect color components if a color value without alpha was given, now works with both 0xRRGGBB and 0xAARRGGBB.
* Color.getWebRGB now works regardless if you give an 0xRRGGBB or 0xAARRGGBB color value.
* If an object was drag enabled with bringToTop, the onDragStop event wouldn't fire until the mouse was next moved (thanks @alpera, fix #813)
* RetroFont.text would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
* RenderTexture.resize would throw WebGL errors due to an issue with Pixi.RenderTexture. Fixed in Phaser and submitted code to Pixi.
* Group.hasProperty fixed to not use hasOwnProperty, but a series of `in` checks (thanks @mgiuffrida for the idea, #829)
* Tilemap.removeTile sets tiles to null but should set to index of -1 (thanks @draklaw, fix #835)

  • Pedro Alpera, clark, Arlefreak and 7 others like this

#33662 Phaser 2.0.3 Released

Posted by rich on 11 April 2014 - 01:11 PM

Hi all,


I'm pleased to announce that we've just released Phaser 2.0.3 onto Github




In this release we have upgraded both pixi.js to v1.5.2 and p2.js to v0.5.0. This improves features and stability across the whole framework, and as always you'll find the complete list of improvements in the change log.




We've taken some time to enhance the Particle Emitter adding a few substantial features such as the ability for Particles to now change scale or alpha over time using any of the easing functions, or apply a blend mode. These small additions now allow you to create visually more impressive effects than before, and while we still have a complete overhaul of the particle system on our roadmap it's a welcome boost in the meantime.


Along with the p2.js update we have also refined the Phaser P2 classes, making tweaks that help overall performance, such as splitting the world bounds into separate bodies. The World now has a default contact material, which allows for easier setting of responses when objects collide with no materials set. All in all it's a powerful update.


What's interesting is that loads of the new features and bug fixes in this release have come direct from the community. Of course we've been busy and working hard on Phaser as well, but the volume of contributors now is fantastic. We've have always listed their names next to the issues they helped resolve, but now we're doing so with their github usernames directly so they appear on the revisions change log.


As promised with the 2.0.0 release we have done all of this without changing existing API calls in the core Phaser classes. New features are introduced either via the creation of new optional parameters or by creating new methods. Where a feature has been deprecated we have flagged it as such in the docs, but left it in so as to not break existing code.


Some of you may not be aware, but the phaser.min.js file in the build folder contains all 3 physics systems bundled in. We've refined our build process so that it's easy for you to create custom builds now via grunt, but if you know you only need Arcade Physics (and not P2 or Ninja) then you can use phaser-arcade-physics.min.js which is found in the build/custom folder. This will save you 180KB from the minified file size, so please use it if you can.


Have fun everyone :)


  • Hsaka, gaelbeltran, turnA and 7 others like this

#12456 Phaser 1.1 is released :)

Posted by rich on 25 October 2013 - 06:00 PM



We're really pleased to announce that Phaser version 1.1 was just released and pushed to the master branch of our github repo. We've worked extremely hard on this release to make Phaser the most stable and powerful 2D HTML5 game framework we can.


Here are some of the headline new features:


API Docs are live!


We know these were a long time coming, but we've finally documented nearly every part of the framework with jsdoc3 and published the resulting docs as well. So you can at least now look at the docs first before having to dig through the source code to figure things out. We've still got more work to do in this area, but it's a great start.


150+ Examples!


We've got a brand new Example Test Suite, with a great design, two display modes (full stack or side-by-side) and over 150 different examples for you to work through. We've tried to cover all of the core features of Phaser, there are even little mini games included (some in more complete states than others) and lots of demos.


What's more, we're looking for new Examples to add to our collection and we've got prizes for the best submission each month :)


Enhanced Arcade Physics


The Arcade Physics system that ships with Phaser has been almost completely rewritten. It's now considerably more robust than before, the Sprite update loop has been heavily optimised and refined, and collision is now a lot more stable. Gone are the 'jitters' and potential wall-sticking of the previous release!

Infinite Worlds
The way in which the game world operates has changed significantly. The World is now an infinite plain extending in all directions as far as you need, with 0,0 being the centre of the world. The Camera now roams within this endless world, which you can resize dynamically. This gives you some powerful new features - for example you can now rotate the world around its axis, for truly different sorts of games. You can extend it vertically for a scrolling shoot-em-up or in all directions for an 8-way scroller. It's a whole lot more powerful and we made a new example game Tanks to show it off.
Bug Fixes galore!
We've tightened up, updated and fixed literally hundreds of bugs across all parts of the framework. Virtually every reported issue on github has been resolved and cleared down, as well as numerous things we found ourselves and had reported on the forum.
Thank you to everyone who helped out with this release. To Alvin for his tireless work sorting out the Examples and helping me every week, to all the great people in the forum who keep showing me amazing stuff they're making, and to those reporting issues, helping with fixes.
Please grab version 1.1 from the github repo and as always we look forward to your feedback!

  • benny!, Noid, Hsaka and 7 others like this

#37066 I know what the hearts mean

Posted by Noid on 06 May 2014 - 06:46 AM

(Either I'm the first to notice this or everyone thinks it's so obvious they didn't bother to write a forum post about it :P )


When I run my game, I see two red hearts and a gray one next to "Phaser vX.X.X ...". I thought it was just decoration but I noticed in screenshots from other people that sometimes there are three red hearts. So I inspected the piece of code responsible for the output of that line which, with 'pretty print' enabled, reads: 

var a = b.VERSION, c = "Canvas", d = "HTML Audio", e = 1;
if (this.renderType === b.WEBGL ? (c = "WebGL", e++) : this.renderType == b.HEADLESS && (c = "Headless"), this.device.webAudio && (d = "WebAudio", e++), this.device.chrome) {
                for (var f = ["%c %c %c Phaser v" + a + " - " + c + " - " + d + "  %c %c  http://phaser.io  %c %c ♥%c♥%c♥ ", "background: #0cf300", "background: #00bc17", "color: #ffffff; background: #00711f;", "background: #00bc17", "background: #0cf300", "background: #00bc17"], g = 0; 3 > g; g++)
                    f.push(e > g ? "color: #ff2424; background: #fff" : "color: #959595; background: #fff");
                console.log.apply(console, f)

Notice there is an 'e' variable that starts at 1 and is incremented  when c = WebGL and d = "WebAudio". There is also a loop using a 'g' variable and at the end an f.push line that compares e to g and according to which is greater sets color to #ff2424(red) or #959595(gray).


So the meaning of the hearts are: 

♥: Basic functionality

♥♥: Either WebGl or WebAudio enabled

♥♥♥: WebGl and WebAudio enabled


That's really cool!


  • Mike, charlie_says, Pedro Alpera and 6 others like this

#34968 New interactive showcase of game mechanics, algorithms, and effects

Posted by John on 21 April 2014 - 02:58 PM

I've just launched a brand new collection of concrete examples for various game mechanics, algorithms, and effects. The examples include platformer movement, lighting, ballistics, gravity, and more. They are all implemented in JavaScript using the Phaser game engine, but the concepts and methods are general and can be adapted to any engine. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced implementation. Every example is interactive and responds to keyboard or mouse input (or touch).
My goal was to provide a helpful resource for other game developers, particularly those who are just getting started. Each example focuses on one concept and includes the source code for the implementation. They are written for clarity so that it is easier to understand the underlying concepts and apply them to your own work in your own engine. The example source code is MIT licensed and the included assets are Creative Commons licensed.
This is a work in progress. Contact me if you have questions, corrections, or suggestions. Please spread the word and thank you for visiting!

Attached Thumbnails

  • welcome.png
  • screen1.png
  • screen2.png

  • Noid, austin, tackle and 6 others like this

#25939 Phaser 1.1.6 Released ("Shienar") - the last of the 1.x family

Posted by rich on 24 February 2014 - 02:02 AM

Hi all,


As we start finishing-up the Phaser 2.0 release we noticed that there were still a number of great additions made in the dev branch or via feedback that we didn't want to ignore. So tonight I pushed the 1.1.6 release which contains some small but essential physics and tilemap fixes, lots of documentation updates and other bug fixes across the core which you can see on github: https://github.com/photonstorm/phaser


This signifies the final release in the 1.x family. A version which has done us extremely proud since the 1.0 release back on September 13th 2013. It may seem like quite a jump from a 1.0 to 2.0 in just six months, but that's how fast the library has evolved, mostly in part to the awesome feedback and support we see on these forums. We will focus on solidifying the API and freezing it as much as possible when 2.0 ships this March, as we're now seeing Phaser being used widely in the industry and starting to be picked up in education too, where a fixed API is a requirement. Before we were able to shift the API around at will, moving and changing things as we saw fit - but we now have a much wider responsibility and one we're taking very seriously from 2.0 onwards.


It's a shame that 1.x will end with some known physics issues still outstanding, and I do apologise for that. But it was a case of splitting resource in half and slowing down progression of both 2.0 and 1.x, or accepting that we needed to move to a proper full-body physics system, and fast. If anything the issues we know exist in 1.1.4+ helped motivate us like nothing on earth to get 2.0 shipped as soon as possible, and we're extremely happy with progress and performance so far.


At this point in time we're aiming for a March 13th release date. After which we'll take stock and focus purely on tutorials and sample games for a while.


To everyone who has used Phaser, in whatever incarnation, thank you.

  • Hsaka, tackle, aberrantmind and 6 others like this

#25414 Tutorial: How to make a Flappy Bird in HTML5 with Phaser

Posted by lessmilk on 20 February 2014 - 04:36 PM



I just wrote a Phaser tutorial on how to make a simple Flappy Bird clone in 65 lines of Javascript.


You can read the tutorial here: blog.lessmilk.com

Edit: And here's the part 2 of the tutorial.


FB 2.png


If you are new to Phaser, this can be a good way to discover how Phaser works.

And if you already know well Phaser, I'd love to hear your feedback!


Thanks :-)

  • Lonan, Arlefreak, plicatibu and 6 others like this