Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
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


30. December 2015

 

GarageGames have just released Torque2D version 3.2.  Torque2D is 2D game engine built over the Torque 3D engine, which is now open source and MIT licensed.

From the release:

While you were singing carols door to door and sipping eggnog by the fireplace, the T2D Steering Committee was hard at work wrapping up one last present! Presenting Torque2D 3.2! This latest incarnation of everybody's favorite 2D engine sports several shiny new features! But before we get into that, let's take a moment of silence to remember the many bugs that lost their lives to make this release possible.


Now then, our first new feature is the FadeTo function. This works like MoveTo except that it changes the blend color over time instead of the position. If you ever wanted to fade a bad guy out when it died or fade a slightly transparent object in, then this function was written for you! It could be used to make your hero flash red when his life is low or slowly change the color of the sky as the sunsets. FadeTo comes with all the support functions of MoveTo including a cancel function and callback when it's finished.


We also added GrowTo which changes the size of an object over time. With GrowTo you can change the x and y at different rates and create all kinds of neat effects. But, there's a catch! Collision shapes don't grow with the sprite. So if your object has collision shapes attached you'll want to use it sparingly. Slight changes can do a lot. Like FadeTo, GrowTo is supported by functions to test and cancel. When an object reaches its target size it will fire a callback.
We also have support now for one way collisions. This is most commonly seen in platformer games when a character jumps up through the platform and magically lands on top of it, but in theory there's many other uses for it. This only works for edge and chain collision shapes.
And finally, last but not least, we have revived ogg! That's right! The open source, compact audio format is back by popular demand. You can start using ogg files again on Windows and Mac OSX.

GameDev News Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List