Welcome to Issue 84 of Phaser World
Yes, two issues in one week again! But it just wouldn't be a Friday without a Phaser World :) and we've some stunning content too. Check out that Game of the Week, sure it involves bubbles again like last issues game, but it's so pretty and slick! and we've kittens, mmo Tetris and even Jeremy Corbyn in pixel form :)
So, until the next issue, keep on coding. Drop me a line if you've got any news you'd like featured (you can just reply to this email) or grab me on the Phaser Slack or Discord channels.
Games made with Phaser
Game of the Week
Travel through the jungles of a mysterious island to recover the treasures buried there.
Staff Pick
Flip the kitties to turn the grumpy red cats into happy yellow ones in this 60 level puzzle game.
A massively multiplayer Tetris variant with some subtle twists and new features.
Take on the role of Jeremy 'Wise Wizard' Corbyn as you try to turn evil into good!
An overhead mini golf game with some nice touches.
Phaser News & Tutorials
A beautiful free pixel art pack including Phaser platform game code.
The tutorial series continues, this time adding diamonds and real object pooling into the mix.
A beautiful showcase of the new Particle Emitter features in Phaser CE 2.8.
A small open-source library for loading and parsing Aseprite files.
How to get a Phaser Game on Steam
How to prepare build and wrap your EXE file for Steam.
Patreon Updates
Welcome and a massive thank you to the new Phaser Patreon who joined us this week: Marc and Zack Proser. Also, thank you to Francesco Maida for increasing their pledge.
Patreon is a way to contribute towards the Phaser project on a monthly basis. This money is used entirely to fund development costs and is the only reason we're able to invest so much time into our work. You can also donate via PayPal.
Backers get forum badges, discounts on plugins and books, and are entitled to free monthly coding support via Slack or Skype.
Development Log
Welcome to this week's Dev Log! We've been busy, adding in features across large parts of the API. Before I dive in I just wanted to say that Mozilla is meeting to discuss the v3 funding application today. So I'm extremely nervous but at the same time pumped because it's been a great week of dev work (as you'll see below). Internally I should know next week if our funding application was successful or not, but publically it'll be a little longer before I can announce it. Fingers crossed though, believe me!
RetroFonts Return
I added RetroFonts to Phaser 2 mostly because I really like using them in my own games and because they were a nice processing step-down from Bitmap Text, working more like sprite sheets and not needing any kerning data. I wanted them in v3 but they were a really low priority and more importantly I didn't want to clog up the API with yet another Game Object type just for them.
Then it occurred to me - they don't need to be their own type of Game Object at all. In fact, I could just write a simple parser that took a config object and image and converted it into the standard BitmapText that we had already implemented. So I bashed out a 'ParseRetroFont' function and voila, it works perfectly! You can define your font in an easy to read object, throw it into the cache and use it just like any other BitmapText. Have a look at the code in this example to see how it works.
Personally, I think the end result is a lot better than v2 because the BitmapText objects are much more powerful, and it works with both Static and Dynamic versions.
Scroll-line Massacre
While implementing the RetroFont I realised I could very easily add the ability to scroll the contents of a Dynamic BitmapText object. A few hours later and it worked nicely:
In the demo above the BitmapFont itself never actually changes x coordinate, it is the contents of it that are being scrolled via the new scrollX and scrollY properties. There is also the ability to crop the display, which allows you to do some fun stuff, like this:
Woo! That's a whole load of WebGL batched scroller goodness right there. Another feature I added this week was support for the `pixelArt` game configuration setting in both Canvas and WebGL. It's a boolean value and if you enable it then the GL and Canvas texture managers will automatically apply the correct scale-mode or texture filter required for lovely crisp pixel art, without you having to do anything else. It's a feature I wanted in v3 from the very start and this week it arrived :)
However, the biggest addition this week was nothing to do with text, but to do with Tilemaps.
Super Mario Level Scroller
Felipe pushed a whole stack of Tilemap renderer updates into v3 over the past couple of weeks. As I mentioned a few issues ago we've got two implementations: Static and Dynamic. Static is basically just a crazy-fast tile renderer. You feed it an image and an array of data and it gives you a slick and speedy tilemap. The map can be scrolled with the camera and positioned anywhere in the world, as you can see in this example:
Use the left / right cursors to scroll. What you're seeing are 2 completely independent tilemaps rendering. I offset the bottom one a little so you can see the positioning working. The maps are from Super Mario Bros on the NES (Worlds 1 and 3 respectively) and although simple due to the low volume of tiles, serve as good horizontal examples.
But, we can do more, right? I promised the tilemap renderer would be fast, so let's take it full-screen in a nice 30,000 tile example. Again, use the cursor keys to move around:
Sweeeeet, right?! So this is showcasing two things at once here. First, of course, the tilemap renderer. This is a Static tilemap which means you cannot do any per-tile effects (i.e. animating a tile, or setting its alpha, or removing it), for that you need a Dynamic Tilemap. But, if you've got 'standard' tilemap requirements, which I guess covers the majority of games, then this is the system you'd use.
The smooth cursor key scrolling is enabled by a new function available via the Camera Manager. Take a look at the code for it:
You give it a Key object for each direction you wish to be enabled (you can leave them out if you like) and then just set some speed values for acceleration and drag. And that's it! Call 'controls.update' in your update loop and it will take care of the rest. The full code for this example can be seen here, and I hope you agree that's pretty compact and easy to follow!
The Key Control functions for the camera are entirely optional and like the rest of v3 they live in their own single function files in the camera folder. So they're dead easy to replace with your own custom ones, or enhance, or just ignore entirely. This is the philosophy of avoiding 'God classes' in v3 at work and we're trying to stick to it everywhere.
Next week I hope to show you Dynamic Tilemaps. It's where things get really interesting because although it has to use a slower method of rendering, it's a lot more flexible allowing for per-tile effects and manipulation. Even so, Static Tilemaps are superb too and I can't wait to get them hooked to physics so you can start charging around them :)
Phaser 3 Labs
Visit the Phaser 3 Labs to view the new API structure in depth, read the FAQ, previous Developer Logs and contribution guides. You can also join the Phaser 3 Google Group. The group is for anyone who wishes to discuss what the Phaser 3 API will contain.
Geek Links
RPG Scrollbars has a tasty article on recipes for meals from RPG games you can cook for real :)
If you're interested in playing around with Web Assembly in your browser then check out WasmFiddle!
Adam Saltsman wrote this great piece about how they approach collaborative decision making at Finji (publisher of Overland and Night in the Woods).
Phaser Releases
The current version of Phaser CE is 2.8.0 released on May 30th 2017.
Phaser 3.0.0 is in active development in the GitHub v3 folder.
Please help support Phaser development
Have some news you'd like published? Email support@phaser.io or tweet us.
Missed an issue? Check out the Back Issues page.