Welcome to Issue 87 of Phaser World

Hello, everyone! We're back with another issue packed full of games, tutorials,news and another massive Phaser 3 Dev Log. I'm a bit wary that email clients

like Gmail truncate our beautiful publication off far too soon, so I'll keep this shortand let you get straight into the content :)

So, until the next issue, keep on coding. Drop me a line if you've got any newsyou'd like featured (you can just reply to this email) or grab me on the PhaserSlack or Discord channels.

The Latest Games

Twisted City >>> Game of the Week Help the Mayor expand the city and get him out of all kinds of situations in thissuperb puzzle game.

Quicket >>> Staff Pick It's cricket with an addictive drag-and-match puzzle. Hit singles, blast fours andsmash sixes while avoiding wickets.

Frosty and Friends In a frozen world you have to tap for your life and to bring your lost babies home.

Adventure of Ryan Hunter An action platformer game. Leap and blast your way around the levels, collectingbonuses as you go.

Tap Racer An interesting rogue-lite racing game. Switch lanes for the fastest route and avoidthe obstacles.

What's New?

Phaser Facebook Group Join a new Phaser specific developers group on Facebook.

Phaser Timer Basics Tutorial A great beginners guide to using Timers in Phaser games.

Yeah Bunny Prototype Tutorial Re-creating a fun iOS platformer in Phaser CE.

Student Success An interview with Max Rose, author of the Phaser created mobile game Frostyand Friends.

Creating Games with Phaser Part 6 In Part 6 of this new video based tutorial course learn about adding ArtificialIntelligence to your games.

Welcome and a massive thank you to the new Phaser Patreon who joined us thisweek: Ben Gilbanks.

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 reasonwe'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 tofree monthly coding support via Slack or Skype.

Dev Log #87Someone asked me on Slack if I thought Phaser 3 was ready to be used to makea game with yet. This is a valid question as obviously significant areas of the APIare still yet to be done (Mouse Input and Sound for example). But I took it asmore of a challenge than a query and started working on a proper game with it.

It was an enlightening experience. Beyond sound, nearly everything I wanted todo in the game, I could. And what's more, it was genuinely a pleasure to do it.Small switches from things like long method signatures to config objects madethe code easier to write and understand. Parallel States allowed me to craft a UIoverlay, keeping my code much cleaner. And the performance was excellent.

It also highlighted a number of areas that needed either finishing or improving. Inthe schedule, these had been pencilled in for a couple of weeks time but I movedthem forwards and spent last week on them. To that end, I'm afraid there isn't awhole lot of eye candy this issue but there are plenty of updates.

Tick Tock

Phaser 2 had a Clock that was controlled by the core game loop and these'disposable' clocks called Timers that you could create via it. Within those Timersyou could create TimerEvents. They basically consisted of a duration and acallback. They are useful things to have but were a bit heavy-weight and prone to

a few timing issues if you did things like constantly pause the game or lose focus.So I rebuilt them from scratch.

v3 now has a Clock class but it belongs exclusively to a State and every Statehas one. You can add events to this clock using a simple syntax:

After 2000 ms (2 seconds) the callback will be invoked and internally the event isrecycled for later use.

If you are more familiar with the TweenMax / GSAP syntax then you can use thattoo. The following code does the exact same as the above:

Timed Events can be set to repeat a specific number of times, or loop forever(until you ultimately kill the event). You can also get the progress of an event,either of the current iteration if the event is set to repeat, or of the overallprogress. You can see that in the example below - the yellow clock arrow is thecurrent progress and the red one the overall progress. As usual, click the screenshots to open the example:

You don't have to even use a callback if you don't want to. You can simplymonitor the progress of an event and base your own in-game actions on that.Here we can see a whole bunch of timers running, all with different (random)durations:

Timers can be paused and resumed directly via code and also automatically ifthe State is sent to sleep and woken up again. One final feature they have is theability to scale time. Each Timer itself has a timeScale property which can betweaked to change the time scaling for that one specific timer, or you cantimeScale the whole Clock - this has the effect of scaling every timer currentlyrunning. In the following example you can see 3 timers running in parallel, all ofthem set for 5 seconds, only the first has a timeScale value of 0.5, so takes twiceas long to complete, and the 3rd one has a value of 2, so completes in half thetime:

They may not be very exciting, but they're bloody useful!

Endless Tilemap

Last issue we demonstrated Dynamic Tilemaps and I said that one of the thingsthey could be used for was an 'endless' world, where new map data is streamedin at runtime.

I wanted to prove that this was possible and not just an idle boast, so I created asmall example to show it in action:

The concept is pretty simple: A map is created that is 51 x 37 tiles in size. With16x16 tiles, as in this example, that gives us a map width of 816 pixels. Ourgame is 800 pixels wide. We then scroll the camera horizontally each frame andonce it has moved 16 pixels we update the tilemap data so that all of the tiles shiftacross by 1 and a brand new set of tiles are created on the right-hand edge.Finally, the camera scroll is reset to zero. The end result is that as the mapscrolls brand new data is generated dynamically on the right-hand edge and isscrolled into the screen, giving us a random endless map.

If you needed a hand-crafted map then you could of course feed in actual mapdata from a larger array instead. You could also make the map 52 tiles in width,enough to have tiles on both the left and right, so that the player could scroll inboth directions. It all depends on what sort of game you're making but I justwanted to prove that technically v3 can handle it. The implementation details aredown to you though :)

Super Scroller

Using the exact same concept as the Endless Tilemap scroller above I createdan example showing how to display a really long scrolling message. Bitmap Textwas given a feature a while ago allowing you to scroll the contents of it, but it onlyimpacts the text currently being displayed. If you scroll the text, then shift all thecharacters along one and replace that on the end, you can scroll for as long as

you like:

Here's a simple example displaying the opening of William Gibson's classic bookNeuromancer. You wouldn't want a BitmapText displaying such a massiveamount of characters, as most of them would be off the edge of the screen - soinstead we just cycle through the text string, actually only rendering 8 charactersat once. As it doesn't use the camera to scroll but a native feature of BitmapTextyou can easily pass whatever content you like via this method.

Working on States

As well as getting the Clock class in and running I also spent a good chunk of lastweek on the State Manager. I am going to demonstrate this in more depth nextissue because the demo I created is waiting for a fix to the Camera system fromFelipe before I can release it! But I can talk a little about the new features thathave been added.

First of all, Felipe added the ability for a Camera to have a background color andopacity level. This is really useful as it renders behind anything in the display listand can be any color you need. Using this I added the option for Cameras to bedefined via the State Config object. You can set the width, height, position andcolor of a camera in there and it will create them all automatically for you. Click

the following shot to see a typical config object (when it loads use the bluebuttons at the top to run the example):

States also now have a set of new modes they can be in. They can be fullyactive, which means both their update and render methods are called. They canbe paused, which means they still render but their update isn't processed(effectively pausing anything that was based on it, like timers or physics). Theycan be 'asleep' which means they neither update nor render, but have notshutdown and can be woken at any point, where they will just carry on as ifnothing has happened. And finally they can be fully shut down, so they don'trender or update and their systems and display lists have been cleared too.

With these new options it allows you to craft all manner of set-ups and I can't waitto demonstrate some of these in the coming weeks.

As always, thank you for your support. If you are a patron then I really doappreciate it. We're not doing any client work at all at the moment, so everypenny we make is going right back in to Phaser 3 work and allowing us to workflat-out on it. The more I use v3 to make real games, the more I realise we'vebuilt something really quite special. And that's exciting as hell :)

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 3Google Group. The group is for anyone who wishes to discuss what the Phaser 3API will contain.

Pixel Art Wonderland is a huge art pack you can use in your own games(commercial or free). Over 1500 sprites, props, level scenery and animations, sowell worth a look at!

A fascinating blog post on JavaScript Optimization Patterns by one of the GoogleV8 Engineers.

A new retro gaming console with built-in optical disc support - a very nice ideaindeed! (and probably easier to buy than a SNES Mini)

Further Reading ...GameDev.js Weekly Newsletter HTML5 Game Development Phaser Games + Facebook Group Lostcast

Phaser ReleasesThe current version of Phaser CE is 2.8.1 released on June 20th 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.

©2017 Photon Storm Ltd | Unit 4 Old Fleece Chambers, Lydney, GL15 5RA, UK

Web Version Preferences Forward Unsubscribe