Jump to content

Most Liked Content

#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 20 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.

#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

#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 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 14 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

#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 10 others like this

#106651 Please welcome..the Physically based rendering material!

Posted by Deltakosh on 23 November 2015 - 02:55 AM

Everything is here:






Have fun!


  • adam, Dad72, jerome and 10 others like this

#92170 New documentation!

Posted by Temechon on 07 August 2015 - 02:32 PM

Hey guys,


I’m sure you already know it, but the new documentation is now officially deployed on doc.babylonjs.com!

This version is a total rework of the version you used to know, so let me present it a little bit.


Our main concern was (and still is) to create a documentation the community (YOU!) can update and modify at will. This documentation makes no exceptions, with a big new change: it is now based entirely on Github (https://github.com/B...S/Documentation) (and automatically deployed on Azure).

This means you can :

  •           fork the repo and create your own documentation
  •           create pull request to fix bugs
  •           create pull request to contribute
  •           Clone the repo and have a local version of this documentation
  •           Everything you can think of



  •           All tutorials, exporters and extensions are now sorted. We tried to keep the same hierarchy the old documentation had, but FEEL FREE to update it, or create a new one. (Don’t forget it’s your documentation!)
  •           All classes can now be tagged (example : http://doc.babylonjs....1/AbstractMesh has two tags: Node and Mesh).
  •           All classes are sorted by tags, and alphabetically (http://doc.babylonjs.com/classes/2.1).

o   This allows news users to easily find common classes (Camera, Mesh, …)

How to contribute ?

This website is an big empty shell created to DISPLAY markdown files.

Each page is represented by a markdown file. To contribute, just clone the repo, update a markdown file (or create a new one if you want to add things), and do a pull request.

It’s that easy !


What’s next ?

My team and I and still working on this baby, so you can expect some QoL improvements soon.


Stay tuned! 


  • adam, Dad72, jerome and 9 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

#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 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

#80849 EZGUI : The missing GUI Library for Pixi and Phaser

Posted by Ezelia on 30 April 2015 - 09:25 PM

Hello folks,


I'm happy to share with you our Pixi/Phaser GUI Library.


EZGUIis an attempt to make Game UI creation simple, and separate the GUI from the code.


it's Themable, extendable, and easy to use (at least we are trying)


here are tow examples of what you can do with EZGUI

ezgui-app-optimized2.gif  ezgui-game-optimized2.gif



and you can try them live here


Game example : on Pixi  |  on Phaser


App example : on Pixi  | on Phaser


The library is in early developement stage, but it's already usable in many types of games.


Documentation is in preparation, in the meantime you can take a look at the examplesto get started.



So how does EZGUI make GUI creation easier ?


The main idea is to write almost no code for visual aspect, all pure GUI stuff is defined in JSON files.


The library is shiped with two themes (feathers and kenney) with many ready to use GUI components (themes will be enhanced/enriched in future versions)


EZGUI approach is to compose the GUIs from json definitions. it will not provide rich API to create GUI programmatically (it's still possible to create the gui elements programmatically but not recommended) .
instead, you'll have some functions to load themes, compose the UI, bind events, and animate/tween the GUI elements.

Additionally, we think to provide composite GUI components for most common game use cases, those can be : levels screen component, Hight score with stars component, Social share component ...etc (not decided yet but I think you see the idea)


Later we are also thinking to make a visual GUI designer, but this will be a separate project :)



EZGUI web site is available here : http://ezgui.ezelia.com/

And github repository is here : https://github.com/Ezelia/EZGUI



Feel free to give me your feedbacks / suggestions  and report issues if you use it :)





Added an integration example of EZGUI with Phaser breakout game : http://ezgui.ezelia....mples/breakout/

  • benny!, Hsaka, MichaelD 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

#42349 Babylon Projects

Posted by Feldspar on 11 June 2014 - 03:56 PM

Hi guys,


We just released today our new version of Wanaplan : www.wanaplan.com





This is a 3D home planner that was originally built with Three.js, but we decided a while ago to use Babylon instead, and it works fine now, even better :)

We tweaked the engine a little bit to be case-specific, so the renderings are way faster when the number of objects grows (still CPU limited though).


Check it out ! (also available on the french website www.kozikaza.com)

If you see some features you're interested in, and you'd like to implement them in your own project or in babylon.js itself, just give me a heads up.





  • Deltakosh, Dad72, gwenael 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

#92999 WebGL Insights

Posted by Deltakosh on 15 August 2015 - 12:03 AM

Hello team!


I'm proud to announce that WebGL Insights is out. It is a book about advanced features for WebGL


Chapter 9 is about.....babylon.js engine architecture and how things work under the hood :)


You can find it on Amazon for instance: http://www.amazon.co...i/dp/1498716075



  • adam, Temechon, Dad72 and 7 others like this

#106960 Announcing the Playground Search Engine

Posted by Deltakosh on 25 November 2015 - 05:32 PM

Hello gentlemen!!!


Thanks to some colleagues here at Microsoft and to Temechon's team we now have a new toy to play with!!!!



And yes this is what you expect: a search engine INSIDE all playground snippets produced since the origin of the world!!



Have fun!


(please note that we still need to rework the display, but you get the idea)

  • adam, jerome, Wingnut and 7 others like this

#103653 Point light shadow mapping

Posted by BitOfGold on 01 November 2015 - 01:18 AM

Well point light shadows are so much fun, my little test scene:



  • Samuel Girardin, adam, Deltakosh and 7 others like this