Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

9. March 2016

 

So I’ve decided that it’s time to do another series about Haxe development here on GameFromScratch.  I did a short five part tutorial series on using Haxe and NME a few years back before it was rebranded OpenFL, but haven’t really touched it much since.  Before jumping in to a Haxe game engine, I had to decide which game engine to jump into!  Part of my decision is going to be informed by a poll I’m currently running on Twitter.  Of course, it’s useful to take a current look at the Haxe game engine landscape.  I did a post entitled Choosing A Haxe/NME Game Engine three years ago, but simply put, a lot changes in 3 years!  So what follows is a quick roundup of the most popular Haxe based game engines and a quick blurb about each.  If I miss one, please be sure to let me know in comments below, on Twitter or via email!

Oh... and this is not a review in any sense of the word.  I have very little working experience with the majority of engines I am about to cover and have no informed opinion to share as a result!  They are also in no particular order unless you can consider “completely random” as a type of order!

 

Haxe Game Engines

 

 

Flash Engine Ports

 

HaxeFlixel

http://haxeflixel.com/

HaxeFlixel is an interesting story... it started life as a Haxe port of the popular Flash 2D game engine, Flixel.  Then, well, Flixel basically died and HaxeFlixel lived on.  In fact HaxeFlixel 4.0 was just released, while Flixel hasn’t been updated in years.  It is a complete 2D game engine for Haxe.

 

HaxePunk

http://haxepunk.com/

Wow, I could almost copy and paste the HaxeFlixel entry for HaxePunk.  It also started life as a Flash library port, and since lives on while it’s inspiration is no longer updated.  That said,FlashPunk is much less active than HaxeFlixel.

 

Haxeling(Starling Port)

https://github.com/Haxeling/haxe-starling

This one is more of a WIP than the prior two, and is a port of the popular Starling Flash library to the Haxe language.  There are limits right now such as the lack of an HTML5 target and a few missing features.  Starling is perhaps best known for being the framework Angry Birds was initially created in.

 

Away3D

https://github.com/away3d/away3d-core-openfl

A port of the Away3D 3D flash framework to the Haxe language.  One of the few 3D libraries that has model loading support out of the box (oddly...).  Obviously from the name, this is a 3D focused library.

 

Popular Haxe Frameworks

 

Kha

http://kha.tech/ || https://github.com/KTXSoftware/Kha

Kha is a low level framework whose design favors speed over other priorities.  It supports 2D and 3D but again is quite low level (so no model api for example).  Kha runs at the level similar to SFML, SDL or JGWL, with game engines built over top of it.  Such engines include:

KhaPunk || Cycles || Komponent2D || Kha2D

These engines work at a higher level of abstraction (further from the metal), making use of Kha to provide multimedia functionality.

 

NME

https://github.com/haxenme/nme

NME is the library that lead to OpenFL.  It is similar to Kha in that it provides low level cross platform implementation of the technical “stuff” that makes up a game, then more high level game engines are built on top of it.  Haxe became OpenFL, but it seems there was a community that want to see NME continue as it was, so NME seems to have some life as well.

 

OpenFL

http://www.openfl.org/

Starting life as an implementation of Flash API in a cross platform manner using the Haxe programming language.  Basically it allows Flash developers to seemlessly transition to Haxe development.  A number of engines are layered on top of OpenFL.  As mentioned above, OpenFL was originally NME, although they have no evolved in different directions.  OpenFL was used to make several commercial games such as Papers Please. HaxePunk, HaxeFlixel and Stencyl all are (or were) layered over top of OpenFL.

 

awe6

https://github.com/hypersurge/awe6

awe6 is awesome, but oddly never really seems to have taken off.  I’m glad to see that it’s still under development even if there isn’t much of a community around it.  awe6 is build around the idea of inversion of control (and dependency injection) and I really can’t do it justice in a single paragraph.  The lack of a community though makes this very much not an engine for people that aren’t able to solve problems on their own.  I did a closer look at awe6 years ago, and it should remain equally valid.

 

snowkit

http://snowkit.org/

This is one of the new kids on the block and a very cool looking collection of tools.  Snowkit is composed of flow – a build tool, snow – a low level media library, luxe – a game engine built on snow, mint – a UI library, linc – hxcpp bindings to several popular game libraries (SDL, OpenAL, etc) and hxsw a string/shader library.  The collection all together is snowkit and provides, with haxe, a complete framework for creating games.  It’s a cool concept, but it’s also much more complicated due to all the moving pieces.

edit—To clarify, snowkit is an umbrella term for all of the above mentioned technologies combined as well as the community around it.  The actual game engine is luxe, not snowkit.

 

lime

https://github.com/openfl/lime

Lime isn’t a game engine, it’s a cross platform media layer.  Basically OpenFL and other libraries/engines are built on top of lime.  It provides logic for windows, input, audio, rendering, networking, etc... in a cross platform manner.  Obviously it’s pretty low level.  Heck OpenFL is pretty low level and its over top of lime after all.

 

BabylonHx

http://babylonhx.gamestudiohx.com/

BabylonHx is a Haxe port of BabylonJS which I looked at in depth here.  I like BabylonJS, it’s a great Javascript game engine with a clean easy to understand design.  BabylonHx is an incomplete port of babylonjs...  how incomplete I do not know.

 

Cycles

http://cyclesgame.org/

This one I know very little about, but I am going to change that, because the concept sounds really cool.  Basically it integrates into Blender and uses Haxe (and under that Kha) as the programming language.  Basically you create your game world in Blender and code the logic in Haxe.  It’s similar I suppose to Blend4Web or BDX.  The choice of Cycles is probably a poor one though, as Cycles is the name of the modern renderer for Blender.  I am intrigued though... enough that I am going to download it now, so that’s the end of this list... ;)  EDIT- Doh... coming soon.  Boo

 

The Ones I Missed

And the following are my wall of shame, the engines I missed and various members in the community pointed out to me (thanks for that btw). 

 

Heaps

https://github.com/ncannasse/heaps

Heaps is a game engine by Nicolas Cannasse, who can basically be considered the father of the Haxe language, as well as CastleDB and other important Haxe projects.  Heaps was used to make Evoland 2.  It is a 2D and 3D game engine capable of targeting WebGL, Flash 3D, Mobile and Desktops using OpenGL.

 

Flambe

http://getflambe.com/

A 2D cross platform Haxe based game engine including tools for importing Flash animations, creating particle systems and glyphs.  Can target iOS, Android, Flash, HTML5 and desktop targets using Adobe’s AIR.  Open source and MIT licensed.

Did I miss any (that aren’t unsupported or extremely unstable)?  Which of these engines are you most interested in?

Programming

24. February 2016

 

I love C#, probably my favourite general purpose programming language at the end of the day.  In the early days however, C# was heavily tied to Microsoft’s ecosystem.  Then a little company named Ximian created a Mono, an open source implementation of C#.  At first the relationship between Microsoft and Ximian (and Microsoft and Open source in general… ) was not… great.

 

Since then, a ton has happened…  Microsoft became more open source friendly.  Ximian was acquired by Novell, then eventually spun off as an independent known as Xamarin and Mono has gone on to become the technology powering basically every single C# powered non-Microsoft title, including being the runtime behind the popular Unity game engine.  For years I’ve assumed Microsoft would buy Xamarin, especially as their relationships became cosier and cosier.  Heck I last mentioned an MSFT buyout when Xamarin bought RoboVM.  It just made so much sense to happen…

 

And it finally did!  From Scott Gu’s blog announcement:

As the role of mobile devices in people's lives expands even further, mobile app developers have become a driving force for software innovation. At Microsoft, we are working to enable even greater developer innovation by providing the best experiences to all developers, on any device, with powerful tools, an open platform and a global cloud.

As part of this commitment I am pleased to announce today that Microsoft has signed an agreement to acquire Xamarin, a leading platform provider for mobile app development.

In conjunction with Visual Studio, Xamarin provides a rich mobile development offering that enables developers to build mobile apps using C# and deliver fully native mobile app experiences to all major devices – including iOS, Android, and Windows. Xamarin’s approach enables developers to take advantage of the productivity and power of .NET to build mobile apps, and to use C# to write to the full set of native APIs and mobile capabilities provided by each device platform. This enables developers to easily share common app code across their iOS, Android and Windows apps while still delivering fully native experiences for each of the platforms. Xamarin’s unique solution has fueled amazing growth for more than four years.

Xamarin has more than 15,000 customers in 120 countries, including more than one hundred Fortune 500 companies - and more than 1.3 million unique developers have taken advantage of their offering. Top enterprises such as Alaska Airlines, Coca-Cola Bottling, Thermo Fisher, Honeywell and JetBlue use Xamarin, as do gaming companies like SuperGiant Games and Gummy Drop. Through Xamarin Test Cloud, all types of mobile developers—C#, Objective-C, Java and hybrid app builders —can also test and improve the quality of apps using thousands of cloud-hosted phones and devices. Xamarin was recently named one of the top startups that help run the Internet.

Microsoft has had a longstanding partnership with Xamarin, and have jointly built Xamarin integration into Visual Studio, Microsoft Azure, Office 365 and our Enterprise Mobility Suite to provide developers with an end-to-end workflow for native, secure apps across platforms. We have also worked closely together to offer the training, tools, services and workflows developers need to succeed.

With today’s acquisition announcement we will be taking this work much further to make our world class developer tools and services even better with deeper integration and enable seamless mobile app dev experiences. The combination of Xamarin, Visual Studio, Visual Studio Team Services, and Azure delivers a complete mobile app dev solution that provides everything a developer needs to develop, test, deliver and instrument mobile apps for every device. We are really excited to see what you build with it.

We are looking forward to providing more information about our plans in the near future – starting at the Microsoft //Build conference coming up in a few weeks, followed by Xamarin Evolve in late April. Be sure to watch my Build keynote and get a front row seat at Evolve to learn more!

 

This announcement is huge.  Expect Xamarin technology to quickly become free and fully integrated in Visual Studio.  Expect Unity to eventually get a version of C# that isn’t from the stone age.  Put simply, expect the usage to C#, especially in the mobile space, to absolutely explode!

 

I’ve been waiting a decade for this news!  I look forward to seeing exactly how all of this plays out.

GameDev News, Programming , ,

13. February 2016

 

Welcome back to the ongoing Superpowers game engine tutorial series.  In the first part we got Superpowers installed and created our first project, in the second tutorial we look at Actors and Components, the “stuff that makes up your game world”.  Then we did a tutorial on Sprites and Animations give our “stuff” a little bit more visible panache.  In this tutorial we are going to add a Behavior to our component, which is the way you give your “stuff” a bit of logic.  Basically this is how you program your Superpowers game.

 

Just like adding a sprite was a two step process, first we added the image to the scene as an asset, then we created a new component on our actor, scripts work the same way.  Let’s start by creating a new script.  In the left hand window, click the + icon and select Script:

image

This will create a new script and automatically open it in Superpower’s integrated code editor.  Oh, by the way, Superpowers has an integrated code editor!  And it’s actually pretty good, with auto completion, code formatting and more.

image

Now double click your Scene or switch to the Scene tab in the editor and select your Sprite.  In my case I have an animated sprite with a single animation called “Walk” defined, but the Animation set to (None).  See the previous tutorial for more details on this process.  Now let’s add another component to our action, a Behavior.  Following the same process as adding the Sprite Renderer, simply click New Component and select Behavior:

image

There is only one setting in Behavior, the name of the class to add.  Drop down the Class dropdown and choose ScriptBehavior.

image

 

Now we can actually do a bit of coding for this Actor.  I will present the code upfront, and we will go through it after.  Coding in Superpowers by default is using the TypeScript programming language, which is an open source language created by Microsoft to solve some of JavaScripts, shall we say... rough spots.  I’m actually rather a fan of TypeScript myself.  Anyways... here is the code I created:

class ScriptBehavior extends Sup.Behavior {
  awake() {
   
  }

  update() {
    
    if(Sup.Input.isKeyDown("UP")){
      this.actor.move(0,0.1,0);
      if(this.actor.spriteRenderer.getAnimation() !== "Walk"){
        this.actor.spriteRenderer.setAnimation("Walk");
        Sup.log("Set animation to walk");
      }
    }
    if(Sup.Input.isKeyDown("DOWN")){
      this.actor.move(0,-0.1,0);
      if(this.actor.spriteRenderer.getAnimation() !== "Walk"){
        this.actor.spriteRenderer.setAnimation("Walk");
        Sup.log("Set animation to walk");
      }
      
    }
  }
}
Sup.registerBehavior(ScriptBehavior);

 

Our class ScriptBehavior (perhaps we should have named it something a bit less lazy, like CodeThatMovesMySpriteOnKeypress ...) inherits from Sup.Behavior.  You will notice all Superpowers code is in the Sup namespace to prevent name collisions.  The Sup.Behavior class can be thought of as a scriptable component.  It has a number of methods that can be called as part of the program’s lifecycle, in this example we implement awake() and update(), although there are a few more available, such as start() and onDestroy().  awake is called when the behavior is attached to an actor and can basicially be thought of like a constructor, where you do one time setup and initialization logic.  update() on the other hand is called every frame, or every iteration of the game loop, and this is where you implement the logic of your behavior.

 

In this particular example we simple check for keyboard presses using the Sup.Input global object, testing if a key with the value “UP” or “DOWN” is pressed.  If it is, we move slightly up or down in the Y axis.  You can notice in this example that a Behavior can access the Actor it is attached to using the actor property.  Additionally you can see you can access components attached to the actor in a similar way, like we did with the Sprite Renderer via .spriteRenderer.  Finally just to illustrate that it can be done, we log the animation change using Sup.log().  Finally the script is registered with a call to Sup.registerBehavior().

Programming , ,

9. February 2016

 

Today Amazon launched the Lumberyard Game Engine a modified and completely open source version of the CryEngine from Crytek.  Free.  So, what’s the catch?  You have to run your server component either on your own server or using Amazon’s web services.  Yeah, that’s it.  A pretty sweat deal all around.  So today I took a quick look at the contents of the engine as you can see below or in the video available at the bottom of this page.  I have only a couple hours experience with the engine, so don’t expect an in-depth review, this is just a quick hands on to give you an idea of what Lumberyard is and what you get.

 

Lumberyard installs as a 10GB zip file.  Simply extract the contents of that archive to folder on your system.  It’s contents look like:

image

Next run LumberyardLauncher.bat and you get this initial configuration window:

image

It unfortunately does not seem to play nice with high DPI displays :(.  Check all the features you require then click the next error.  You will then be informed what software you need to install:

image

Thankfully (for my cellular bill at least!) each component already appears to be locally available.  Next it’s going to ask you for a variety of SDKs.  Most of them are optional, such as Photoshop, Max and Maya plugin SDKs, but some are not such as NVidia and PowerVR SDKs.  Annoyingly, some of these require registering an account to download.  Both SDKs are small downloads, the the PVRTextTool will download 100+MB of files.

image

Finally you will be asked which plugins you wish to configure, and we are finally done the configuration phase.  Now simply click Configure Project to create a new Project:

image

 

This will launch the Lumberyard Project Configurator tool:

image

 

For now I’m simply going to click Launch Editor for the SamplesProject project.  Now we wait...

image

Ugh, another login:

image

Finally!

image

The Getting started guide link doesn’t work right now.  Instead use the URL https://aws.amazon.com/documentation/lumberyard/ to access the documentation.

 

I’m going to go ahead and create a new level.

image

Straight forward so far.

 

And finally the Lumberyard editor:

image

Again, high DPI support isn’t great as you can see from the cropped menu panel across the bottom.  Let’s take a look at a some of the included tools.

 

Terrain Editor

image

 

Asset Browser

image

 

Flow Graph (Visual Scripting)

image

 

Dialog Editor

image

 

Geppetto (Animations)

image

 

Database View

Img1

 

UI Editor

image

 

Obviously this is only a very surface level look at some of the tools that are bundled in the Lumberjack Game Engine.  It certainly has me interested in learning more.  If you are interested in seeing tutorials for this game engine, let me know and I will dive in deeper.  Even if I don’t create a tutorial series, I will certainly review this game engine in the typical “Closer Look” style.

 

There is a quick video hands on available, embedded below or in 1080p here.

Programming , ,

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 , ,

Month List

Popular Comments