Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
1. March 2016

 

Starling is a flash based game engine, perhaps most famous for Angry Birds.  For some time the primary maintainer has been quietly pounding away on the next version.  Today (actually a couple days ago, this news item slipped through my net, sorry about that) Starling 2.0 is available and it’s a pretty extensive update.  Behind the scenes there were a number of fundamental changes, such as the addition of a mesh class as well as the addition of render cache.

The render cache has a pretty profound effect on CPU load, as illustrated by this graphic demonstrating Starling 1.7(upper) vs 2.0(lower) CPU usage:

 

The filter API was also rewritten, to make use of the new render cache and improve functionality.  Finally there were several convenience changes:

  • The TextField class is now accompanied by the new TextFormat. The setup is quite similar to classic Flash — but without the pain of constantly having to re-assign the format for changes to show up. In Starling, when you change the TextField's format, it's going to be updated right away!
  • The TextField class also includes a new wordWrap property.
  • The Image class contains two new properties: scale9Grid and tileGrid. For Feathers-users, this will sound familiar: they replace Scale3Image, Scale9Image and TiledImage.
  • All Display Objects can now be scaled uniformly with a single property: scale.
  • My personal favorite: the new pixelSnapping property, which is enabled per default, makes sure that all objects are rendered as sharp and crisp as possible. No more casting to int to avoid blurriness!
  • You can now attach "frame actions" to MovieClips, i.e. code to execute at certain frames.
  • The Pool provides simple object-pooling for standard classes like Point, Rectangle andMatrix.
  • The juggler now supports uint handles for IAnimatable removal, which prevents nasty pooling bugs.

Full details of the release are available here.

GameDev News


16. February 2016

 

Flixel was/is a popular game engine written for the Flash programming language.  It unfortunately hasn’t been updated in many years.  However HaxeFlixel is a port of Flixel to imagethe Haxe cross platform programming language which is very much in fact under active development.  In fact, HaxeFlixel 4.0 was just released today!  This is also the biggest released they have ever done, so HaxeFlixel is still very much alive.

 

From the release:

We are proud to announce the release of HaxeFlixel 4.0.0! This is without a doubt the biggest release yet, with nearly 2000 new commits on the core repository alone since the last release.

The highlights of this release are:

  • an improved API structure
  • a refactored rendering system
  • a much improved gamepad API
  • improved HTML5 support
  • improved OpenFL Next compatibility
  • an improved debugger console (now using hscript) with auto-completion
  • over 20 new demos
  • ...and much more

For a more in-depth breakdown of the changes, have a look at our changelog. If you are mostly interested in the breaking changes to upgrade a project using HaxeFlixel 3.3.x, please refer to theupgrade guide.

We would like to thank all contributors who helped with this release in any way, as well as our Patreon supporters. Check out the Financial Summary 06/15 - 02/16 blog post on Patreon if you're wondering what we do with your donations.

Going forward, there are two things we want to foucs on:

  • A stable API - Breaking changes should be the exception and only happen in major releases. This also means following semantic versioning more closely.
  • More frequent releases - 4.0.0 took longer than it should have. We aim to have smaller releases in the future, but release more frequently.

The HaxeFlixel team

 

I know I’ve said this a few times, but I really do intend to do more Haxe content in the near-ish future.

GameDev News


9. February 2016

 

In the first tutorial we looked at installing Superpowers, running the server and creating our first project.  In the next tutorial we got to know the editor, the relationship of Actors and Components and finally created a camera for our game.  In this tutorial we are going to draw a sprite on screen, then a sprite sheet which will enable animation.  So without further ado, let’s jump in.

 

There is one more important part of the relationships in Superpowers to understand.  As we’ve seen already, our Scene is composed of Actors, which in turn are made up of Components.  Components however can have Assets.  Assets on the other hand are NOT part of the Scene.  They actually exist at the same level as the Scene and can be used in multiple scenes.  Assets are declared on the left hand side of the interface.

 

Adding a Sprite to Your Game

On the left hand side of the screen click the page with a plus sign icon (the same we used to create the scene):

image

In the resulting dialog, select Sprite:

image

The sprite options will now be available in the inspection window on the right hand side of the screen.  In that window, select Upload and navigate to the image file you are going to use for your game.  We sure to use a web friendly format such as JPG or PNG.  Then set the grid size to the same dimensions as the Texture Size, like so:

image

 

You could also modify the pivot point of the sprite by changing the origin position.  The default of 50% will put the pivot point in the middle of the sprite, so this is the point the sprite will be drawn and transformed relative to.  You can also configure the opacity, how the sprite is rendered, etc.  The Grid Size parameter is used when you have multiple sprites in a single texture, which we will use later.

 

Adding a Sprite Component

Now that we have a sprite asset available in our game, let’s add one to our scene.  First on the left hand side, or using one of the tabs across the top of the editor, select your Scene.  Next create a new Actor, just like we covered in the previous tutorial, name it sprite or something similar.  Finally click the New Component button and select Sprite Renderer, then click Create:

image

Now there should be a SpriteRender component available.  From the Asset window on the left side of your screen, drag the sprite you added to the Sprite field of the Sprite Renderer in the Inspector, like so:

GIF

 

Tada, we’ve added a Sprite to our game world and it should now show up in the View in the center of your screen:

image

The sprite can be positioned using the transform widget, or directly in the Transform component on the right.

 

Running Your Game

Now that we’ve got a camera and something on screen, let’s take a moment to actually run our game.  There is a small amount of configuration we need to do.  On the left hand side of the screen, locate the “Settings” link, click away!:

image

 

In the resulting form, select your scene as the starting scene(via drag and drop):

image

 

We have one final task to perform.  Our Camera and our Sprite are both at the same Z location, meaning that at least initially, nothing will be in the view of the camera.  You have one of two options, you can either position all of your sprites at a –z location, or you can move your camera to z=1.  The later is the easier option, so I will go that route.  Select your camera actor, it’s transform component and set the Z value to 1:

image

 

Now we press either Play or Debug in the top left menu.  The debug option will load Chrome with the developer tools enabled, making it possible to detect errors in your code.  The Play option will run it in the Superpowers player.  Either way, we should see:

image

Congratulations on your first successful game!

 

Using a Spritesheet

Now let’s take a look at how we can used multiple sprites in a single texture, often known as a spritesheet.  I’m using this simple 3x1 sprite sheet:

sheet

 

Add it as an asset like we did earlier.  This time however, after we upload the image, we want to configure the grid size using this button:

image

 

When prompted enter the number of rows (1) and columns (3) in your image, or simply enter the width and height of each frame of animation in the text boxes.  Now lets create a new animation named walked.  Simply click the New button under animation, name it walk.  Then in the settings we set (I believe, the UI does not make it obvious), the first frame of the animation, the length and the number of frames to step by.  I also set the animation speed to 3 frames/sec meaning our 3 frames on animation will play once per second.

image

 

And the end result:

GIF

Ignore the twitch, that’s just me capturing the animated gif at the wrong end point.

 

Next Part

Programming


4. January 2016

 

PlayCanvas, a popular 3D HTML5 game engine have added support for Spine the 2D bone based animation software from Esoteric Software.

 

You can get the plugin from Github, details from the announcement:

This is the first version of PlayCanvas plugin for the Spine Animation tool.

Image

Spine allows you to create bone-driven 2D animations so it does away with the need for huge sprite atlases and tedious animation processes.

Using the PlayCanvas Spine plugin you can drag and drop your Spine Animations into the Editor and get them straight into your game.

Read more on the plugin's Github page

GameDev News


1. January 2016

 

A reader wrote in to share this bundle currently running on BundleStars, and I am glad they did.  Somewhat similar to a humble indie bundle from a few months back but containing a great deal more art assets.  I’ve actually used the tilesets from the earlier humble bundle several times here on GFS, so I will be picking up the $16 tier.

 

The ultimate Game Makers bundle:

image

 

For between $3 and $15 you can end up with a heck of a large volume of assets to make games with.

GameDev News Art


See More Tutorials on DevGa.me!

Month List