Welcome to Issue 99 of Phaser World

Goodness, October already?! and issue 99 too - I've got a couple of fun thingsplanned for issue 100, so make sure you're around next week :) This week,

however, we've got some neat new games, a smart gothic pixel art pack and awhole game making website designed for kids. Things get all curvy in the DevLog too.

So, until the next issue, keep on coding. Drop me a line if you've got any newsyou'd like featured. You can reply to this email or grab me on the Phaser Slack orDiscord channels.

The Latest Games

Game of the Week My Game Builder Learn to build games in your browser. Make and play games together whilelearning real skills.

Staff Pick Fashion Boutique Window Create the window display for your own fashion boutique - selecting the outfitsand designs.

Wild Cowboy Take control of a cowboy doing his best to solve the 60 levels of this Westernthemed Sokoban game.

Fruit Spritzer A fun, fast paced match 3 style game, score high, move fast, don't hesitate!

Ball & Roll Avoid the spikes and collect the coins in this fast-paced avoid-em-up.

What's New?

Phaser CE v2.8.8 Released The community edition of Phaser CE includes fixes for TypeScript defs and

particle emitter input signals.

Gothicvania Town Pack A set of beautiful pixel art buildings and animated characters from a typicallyGothic town.

NavMesh Generation Plugin A plugin to automatically generate a nav mesh from a Phaser Tilemap.

Mass Attack Phaser 3 Version An old Phaser game is converted to Phaser 3 and the two versions compared.

1+2=3 Game Tutorial Updated Emanuele rewrites an original prototype tutorial game in CE 2.8.5.

Welcome and a massive thank you to the new Phaser Patreons who joined usthis week: Anders Pitman. Also, thank you for the anonymous donation.

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.

All of our own plugins and books are now 50% off or more For example, thePhaser Mega Bundle pack is now just $50, Interphase is now just $15 andParticle Storm is now just $20. Please visit the shop page for details. Note that this excludes our affiliate products.

Dev Log #99Another week, another beta. This time Phaser 3 Beta 5. Beta 5 brings the Pathand Curve functions to the party, which are the main ones we'll discuss thisissue. First, a quick run-down:

Number Count Tweens

Tweens are great for, well... tweening values. The problem is that they need atarget to work on. For example, if you want to tween the position of a sprite thenthe sprite is the target and the tween manipulations the position properties. This isall good and well, but how many times have you wished you could just tween asingle local value and have found you need to first encapsulate it into an objectjust so you can do that?

Say hello to Number Counter Tweens. These are a slight variation on the Tweenalready built into Phaser 3 that are special in several ways. First of all they don'trequire a target. Instead, they allow you to easily tween between two numericvalues, floats or integers. The default values are 0 to 1 and can be changed toanything. Here's an example:

You then specify a duration and can optionally add all of the usual things a tweensupports, such as yoyo, repeat, delay, etc. You can retrieve the value usingtween.getValue() and still have access to things like the progress and duration ofthe tween. It's a really quick way to create a numeric counter without making anyother local objects first and will automatically clean itself up when it completes.

Extended Scenes and ES6 classes

Two small changes were made to the Scene Manager this week. The first is thatyou can now use native ES6 classes to define your Scenes and it doesn't require

any special hacks or changes. Here's an example:

The second change was that if you use the anonymous object method of defininga Scene, which, for brevities sake, is the way most of our Phaser 3 Examplesare written, it's now possible to extend that object with additional properties andfunctions as the image below shows:

It's a bit tricky to make out from the screenshot, as the code is quite tiny, so theimage is linked to the Phaser 3 Examples editor where it should be a lot moreclear. In short, though, you can define a new block in your scene config called`extend` and any properties added there will then be available under the scope ofyour Scene, meaning you can access them via 'this' and not have to go into themvia the global scope.

While this won't be of much benefit to larger projects it's definitely helpful if you'rethrowing together a small prototype or just want to test something out quickly.This, combined with ES6 class support, completes all that we wished to do withScenes for launch.

Let's get Curvy

I'm very pleased to say that Phaser 3 Beta 5 has all of the new Curve, Path and

Path Follower classes within it. There are currently 4 types of curve available:Line, Ellipse (which can also be used to create circular paths), Spline and CubicBezier. A curve is essentially a connection between two or more points in spacethat can be defined by a continuous function. They have lots of used, but first,let's explore the 4 types available. In each example below, you can click to runthe demo and then drag the curve points around to see what happens. First up, aLine Curve:

Drag the handles

A Line Curve is a straight line between two points. This may seem no different tothe Line geometry class already in Phaser 3 but it's an important constructionpiece when putting together Paths, as you'll see shortly.

Drag the controls and sliders

An Ellipse Curve is the same as an Ellipse except you can control the start andend points, the angle of the ellipse and if the curve moves in a clockwise or anti-clockwise direction. If you play around with the example above, especially the'start' and 'end' sliders, you'll see how powerful this can become. Setting thewidth and height to be the same values will create a circle.

The example above is a Cubic Bezier curve. It has a start and end point, like aLine Curve and two control points which influence the function used to plot it. Ifyou drag either the endpoints or control points you'll see how the curve adapts totheir placement. Bezier curves are fascinating. I found a great animated gif onwikipedia explaining how they work so I recreated it as a v3 demo:

See how the bezier curve is drawn

The final type is the Catmull-Rom Spline. This is a series of n points where theline is guaranteed to pass through each of them:

A Spline Curve

Here is an interactive spline drawing example where you can click to add a pointor drag any of the existing points to manipulate the curve in real-time.

Curves all use the same API. You can easily create them from either Vec2s oran array of number values. They can be exported to JSON and you caninterrogate them easily, getting points across them - such as spaced points (i.e. apoint every 32 pixels), or ranged points, or tangent vectors:

Curves are handy little things to have in your toolkit. And we'll add more typessoon such as Quadratic Bezier and Hermite curves. Where things start to getreally interesting though is when you combine them together into Paths.

Paths

A Path is the collection of two or more Curves. The Path class has the ability foryou to add any curves you've created to it. The path flows along the chain ofcurves and you can either connect those curves together, so they form onecontinuous path, or you can have gaps in them. Here's an example of a Pathmade up of all 4 types of curve:

A complex path

The path above was created using this code:

When a new curve is added to a path it carries on from the place where theprevious curve ended. You can also use the method 'moveTo' to position thecurve point. If your curve already exists you can just add it to the path (i.e. youdon't have to create them directly like in the example above).

With a completed path you can do all kinds of neat things. For example, youcould easily use it as a means to bring a game logo onto the screen in aninteresting way. You could use it to define alien attack waves for a shoot-em-up.You can use it for special effects between levels, for motion paths for sprites tofollow, paths for enemy AI behaviors, and so much more. Paths are also easy to

create dynamically. Here's a bunch of balls falling down a zigzag path:

Path Followers

One thing that curves and paths are really good for is guiding Sprites. To helpfacilitate this I created a new PathFollower Game Object. These are essentiallySprites with some extra muscle to handle following and orientating themselves toa path. You don't have to use a follower, any object can follow a path, but theyserve as a helpful addition to the API. Followers are created via the Game ObjectFactory like usual:

In the simple example above a follower is told to follow a Spline curve. The value4000 is the duration it will take to traverse the full spline. However, you have a lotmore control than just that. The API uses the same configuration object as aregular tween, allowing you to set properties such as delay, hold, repeat, yoyo,

ease and all the related callbacks (onStart, onComplete, etc):

This gives you a lot of control over the effect, allowing for some really neat things.Here's the full version of the example above in action:

Path Followers also have more control over how they should rotate to face thepath, if at all. A follower can just follow the path with no rotation (the default). Or itcan rotate based on the angle (including an optional offset), or it can adjust theangle so that it never 'flips over', keeping itself properly upright as it tracks thecurves. Here's a small example showing the path rotation in action:

There's an awful lot you can do with paths. I honestly think they're a reallyexciting addition to the API. Followers make things a lot quicker for you, but asexplained they're entirely optional. You can easily construct anything to follow apath, or use the path for other means - they don't always have to be graphical (acurve could control the volume of sound playback), or provide the inputs for an AIroutine.

Or, creating fuzzy alien caterpillars :)

That's it for this Dev Log. Feel free to look at all the examples (there are 47 ofthem currently). Next issue is our 100th, so there will be a slightly different DevLog than usual, although one I hope you'll find just as interesting.

Felipe is now away for the rest of October on an extended vacation, so I'll behandling all v3 development myself - this shouldn't slow things down much aswe're done with all the rendering elements. But keep reading the logs for progressupdates, keep an eye on the repo and keep sending me feedback and PRs. I'vehad quite a few really useful PRs recently that have nearly all been merged intothe codebase, so it's definitely possible to get involved if you want to!

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 or post to the Phaser 3 Forum - we'd love to hear from you!

Virtua Fighter / バーチャファイター (Arcade - Sega - 1993) early 3D models +concept art with fascinating polygon counts.

Draggable is a lightweight, responsive, modern drag and drop JavaScript library –with an amazing landing page :)

Read about What's new in Safari 11.

Phaser ReleasesPhaser CE 2.8.8 released September 25th 2017. Phaser 3 Beta 5 released October 2nd 2017.

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