Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
20. July 2015

 

In this “A Closer Look at”, we will be taking an in-depth look at the Stencyl game engine.  The Closer Look At series is a cross between a preview, review and getting started guide and should help you determine if a game engine is right for you.  Stencyl is a cross platform 2D game engine with tools that run on Windows, Mac and Linux and capable of targeting all of those, plus Flash, Android and iOS.  Stencyl is free to use for the Flash target with additional platforms coming with a fee.  Stencyl provides a high level Lego block type programming experience but coders need not fear, you can drop into code easily if you want.  Amazingly enough, you may find you do not actually want to!

 

There is an HD video version of this guide available here.

 image

 

The Editor

 

Stencyl is a relatively self contained providing almost all of the tooling you need in a single editor.  When you first launch Stencyl this is your initial view of the editor:

image

 

It comes with a sample game included and one nice feature of Stencyl is the ability to seamlessly download additional assets from their website including additional examples and editor extensions.  Once you’ve actually created a project you’ve got even better integration with their online store ( misnomer, as everything currently is free ).

 

The Dashboard is the home page of your game.  The game itself is broken up into Scenes and scenes are composed of Actors, Backgrounds, Fonts, Sounds and Tilesets.  Created resources are available across all scenes. 

 

image

 

Scene/Level Editor

Loading  a Scene brings up the scene editor

image

 

The editor has several modes available across the top (Scene, Behaviors, Events, Physics, Atlases and Properties).  The Scene editor (shown above) enables you to paint scenes using tiles for a tileset, or to place your various actors within the world.  The editor supports multiple layers of tiles with various blending modes available.  The tile placement experience is very smooth with functionality you would expect like snapping, flood filling (painting an entire region with a single tile) and grids. There is also support for defining regions, placing physics joints, adding rows and columns of tiles all at once and more.  The ability to paint with multiple textures is also present:

s1

 

The Tilesets themselves are created as a Tileset resource at the dashboard:

image

image

image

 

You can then edit each tile in the tileset:

image

Three things can be set for each tile, a custom piece of metadata that can be access by code (perhaps a text description of the tile), the collision shape for the bounds of the triangle, using either a default shape or defining your own, and finally the frames of animation for animated tiles.  Should you require more precise collisions than the default shapes, you can define your own Collision Bounds:

image

 

The Create A Polygon tool is a bit clunky but gets the job done:

image

 

Back to the Scene editor, you will notice the next two tabs after Scene are Behaviors and Events:

image

These are basically the way you “program” your Stencyl game and we will revisit both shortly.  Just remember them for now.  Physics enables you to configure some global level physics properties for you scene:

image

 

Atlases are akin to spritesheets in other game engines.  It enables you to bundle like minded resources into a single file to improve performance.  This is more of an implementation detail, so we wont cover it in depth.

image

 

Finally Properties enables you to set some critical details of the scene that you otherwise set during creation.

image

 

Basically Scene is your game level and Stencyl provides a complete and comprehensive level editor with most of the required tools for placement, physics, etc.  You will notice at this point that Stencyl is highly configured for creation of 2D tile based games and if your game doesn’t fit this description, Stencyl becomes less and less useful.

 

Actors

 

Next let’s take a look at the Actors interface.  An Actor is basically any game entity that isn’t a tile.  So your main character, your main menu, a high score widget and enemy sprites may all be actors.  As you will see, the interface for actors is remarkably similar to Scenes:

image

 

An actor can contain multiple animations, each of which is composed of frames of animation.  You can define as many animations as you desire and each animation you can control the order of frames and the duration that each one lasts.  Animation frames use the same interface as loading a tileset.

 

You may notice across the top there are several editor options for Actors available as well.

image

 

Appearance is the editor you see in the above screenshot were you specify the animations of your Actor.  Behaviors and Events are the programming interface and once again, we will cover those shortly.  Collision enables you to define the collision properties of your Actor:

image

One unfortunately missing feature is the ability to define a collision shape per frame of your animation.  This means if the collision volume changes massively as your Actor is animated you will either need to split it into separate animation groups or settle for less than accurate collisions.  Hopefully this functionality is added in the future.

 

The Physics tab enables you to set the Physics properties of your actor:

image

 

Note the various sub settings you can set:

image

 

This is perhaps the most accessible and least confusing physics integration I have ever seen in a 2D game engine.  Physics properties are often cryptic and simply figuring out what a particular setting does is an exercise in frustration, especially for new game developers.  So bravo for making a complicated subject dead simple.

 

Finally there is the properties section:

image

 

Which contains the button for launching the Collision Group interface:

image

 

Collision groups are handy for determining how various groups interface with each other.  For example, a Bullet may collide with Actors, but not other bullets.  One nice feature with Stencyl is the link to help on each topic:

image

 

If the purpose of an editor isn’t obvious to you, you can click the How do ____ work button and be brought to a well written help web page.  This should keep newer developers from getting overly lost and encourages exploration.

 

Programming in Stencyl

 

As I mentioned earlier in both the Scene and Actor sections, programming is done via Behaviors and Events in Stencyl.  Behaviors can be added to both scenes and actors and each is a distinct thing.  The same is true for events.  If you are coming from another game engine or programming language, Behaviors are analogous to methods or functions and can be re-used ( a scene behavior can be used on several scenes, while an actor behavior can be used across multiple actors ).  There is also a variable type named an Attribute, which can be though of the same way you would consider a property.  If that made no sense think of it this way… a Behavior makes a scene or actor do stuff, while an Event tells a scene or actor that stuff happened while an attribute stores information about stuff.

 

Programming itself can be accomplished either by using predefined behaviors or by defining your own using a building block type programming interface.  Let’s take a look. 

 

We can create a simple actor like this one:

image

 

We can easily add an instance to our Scene using the Add to Scene button, or by going to the Actors panel in the Scene editor:

image

 

Now let’s add some logic to our Actor.  In the Dashboard, select your Actor and choose edit.  Now select Behaviors and you will be greeted with:

 

image

 

Clicking it allows you to select a pre-created Behavior or one you have already defined for your game:

image

 

There are several pre-defined behaviors and more you can download from StencylForge.  Let’s add a simple behavior to our Actor.  We simply want to move left and right automatically.  Select Motion->Back and Forth Horizontally

image

 

You can then set configurable attributes of that behavior:

image

 

Now run your game by hitting Test Game and your actor will move left and right 100 pixels:

s2

 

So you can add functionality to an Actor as simply as adding a behavior to it and an instance of that actor in your Scene.  Obviously in this case our animation isn’t ideal as it only makes sense when traveling to the left.

 

Let’s now flip the character if he’s going right.  This means our first programming experience.  We can do this either in the scene or in the character itself, in this case we do it in the Scene.  Edit the Scene, select Events then add a new Event.

image

 

First click Add Event, then Basics->When Updating.  These are the three lifecycle stages.  This will create a brick named always that we can then drop other bricks in to program the behavior of our game.  Create the following structure:

image

 

This brick will be called every frame.  We check to see if the user is going left (negative) or right(positive), in the case of positive, we scale –100% in width, which is the same as flipping.  Now running the code we see:

s3

 

You can also bundle together functionality it re-usable components using virtually the same manner with Behaviors

image

 

Now one of the coolest features of Stencyl, all this visual programming you’ve been doing… it’s ultimately just a code generator using the Haxe programming language.  Click Preview Code and you can see the code generated behind the scenes:

image

You can even edit the code using an external editor like Flash Develop or IntelliJ, the process of which I describe here.  This turns Stencyl into a rapid development Haxe/OpenFL code generator and you can define the remaining game logic using a traditional programming interface if you prefer.  You can also extend the Stencyl editor itself (using Java), as well as create new blocks completely, using Haxe.    It’s a good thing this functionality exists too, as it helps make up for one of Stencyl’s biggest flaws… there is no debugger.  You can do Print style output to the log which can be viewed in the Log Viewer, but there is very little debugging functionality (breakpoints, watches, etc ) built in.  You can however debug your code in an external IDE if you are comfortable working in the Haxe language.

 

Documentation and Community

 

One of the impressive features of Stencyl is it’s documentation.  Almost none of it is local however, so if you do not have an internet connection you are in trouble.  The Stencylpedia is your starting point for help.

image

 

There is also a class reference for Haxe programmers, as well as guides for programming extensions and more.  The quality of the documentation is quite solid, especially the more entry level materials. 

 

In addition to the Stencylpedia there is StencylForge, a built-in (free) store for downloading behaviors, actors, scenes, sounds and even complete games.

image 

 

There are a few existing books on Stencyl including Stencyl Essentials and Learning Stencyl 3.1.

 

There is also an active community forum available here.

 

 

The Flaws

image

Of course no tool is perfect and there are a few negatives to Stencyl.  The first and biggest limitation is it is limited mostly to 2D games with a tileset approach to level design.  If you aren’t creating this style of game Stencyl is probably not the right tool for you.  Perhaps the most glaring flaw with Stencyl is a memory leak that seems to be present.  I often received a message “You have reached 90% of memory usage, please restart”, sometimes quite almost right after loading Stencyl, other times after several hours had passed (it can be fixed though).  There have been a few other times where I wasn’t getting the behavior I expected and had to restart to fix things.  Saving changes is also quite slow and seems to be an all or nothing prospect.  Finally the debugging support is extremely weak.

 

The Verdict

I came into Stencyl expecting one thing and discovered something much different.  I had fairly low expectations, a simple click and build type experience that while accessible and easy to use, it would ultimately prove to be quite limited.  I was wrong.  Stencyl is certainly accessible, and provides a simple drag and drop visual style of programming experience.  What I was shocked at was the flexibility, wealth of tools included and advanced coding options.  Stencyl is not for everyone; if your game isn’t 2D tile/scene based for example.  However if you are just starting out or even if you are an experienced developer creating a relatively simple game, Stencyl might be the perfect tool for you.

 

In fact, Stencyl maybe just maybe became my primary recommendation for new developers looking to get started in game development.  It’s an approachable well documented game engine that has a long runway to explore as your skills improve.

 

The Video

Programming


18. July 2015

 

So I just ran into a recent problem with Blender that ended up having a very very simple answer.

 

Normally I do my animations in place with no movements along a certain axis.  However an animation I downloaded from Mixamo wasn’t in place and I had to get around it.  In fact, the animation looked like this:

Blender

 

My first thought was to simply delete all of the transform keys along Y axis.  It didn’t work, so then my thought was I could reset each key to the same position, but this quickly became a complete pain in the arse.  In the end, as I said, the answer was incredibly simple… track the translation of the model using the camera, leaving:

Blender2

 

And…

Blender3

 

To do this, simply select and position the camera, then add a Copy Location constraint:

image

 

Pick the axis you are moving along, set the target to the Armature and pick a bone to aim at.  Done.

Art


14. July 2015

 

Since picking up the Humble Bundle a few days back, I’ve been playing around with Stencyl ( expect more later ) a little bit.  While Stencyl provides a drag and drop programming interface, it ultimately enables you to generate Haxe code ( more seamlessly than you probably expect ).  My preferred Haxe editing environment is the IntelliJ IDE.  This tutorial looks at configuring one to work with the other.

 

First go download and install the community version of IntelliJ IDEA if you haven’t already.

Next run IntelliJ, we need to configure the Haxe plugin.  With IntelliJ loaded, select Configure->Plugins:

image

Click Browse Repositories

image

 

Type Haxe into the search field, select Haxe plugin and click Install plugin

image

 

Click yes when prompted, the plugin will be downloaded, then click Close/OK and let IntelliJ IDEA restart.

 

Now load Stencyl if you haven’t already.  Click File->Preferences or Alt+Enter:

image

 

Click the Editors tab, drop down the combo under Code Editor and select Choose Application… and navigate to the idea.exe:

image

 

Next Apply Changes.

 

Next we need some code to edit.  One easy way is to create a new Behavior.   From the Dashboard, select Actor Behaviors, Create New

image

 

Fill in the resulting dialog like so (Select Code Mode and name it), then click Create:

image

 

You new behavior will be created and opened in the built in code editor.  Now click Open In External Editor:

image

 

This will open in IntelliJ, but you wont have any code completion or intellisense.  Let’s fix that now.  To do this we need to configure the Haxe SDK.  To do so, right click the generated project name and select Open Module Settings or hit F4 with the project selected.

image

 

Click SDKs, then + then Haxe toolkit

image

 

Then navigate to the Stencyl install directory, then plaf/haxe and click OK.

image

 

Finally we want to add the additional libraries so IntelliJ knows about them.  Select ClassPath, then + and add /lib.

image

 

Finally we need to tell IntelliJ that this project is a Haxe project.  Still in settings (F4 to go back if you’ve closed it), go to Project and select Haxe as SDK.

image

 

In the future, this last step should be the only one you have to perform, unless you change your Stencyl install.

 

Now your code in IntelliJ should have full autocomplete:

image

 

Now when you save in IntelliJ, it will automatically sync in Stencyl.

Programming


12. July 2015

 

In today’s “A Closer Look At” guide we will be taking a look at the App Game Kit 2 game engine.  The Closer Look at Series is a combination preview, review and imagegetting started tutorial aimed at giving you a solid overview of what working in a particular game engine is like.  App Game Kit is a cross platform game engine capable of making games for Windows, Mac, iOS, Android and Blackberry devices using Mac or Windows development environments.  App Game Kit regularly costs $99, although if you are reading this near the publish date ( 7/12/15 ) it is currently available in the Humble Gamedev Bundle with several other tools.

 

AppGameKit is a cross platform, mobile friendly 2D/3D game engine, although 3D is a work in progress.  AGK is programmed primarily using AGK Script, which is a BASIC dialect with some C++ style features.  If the word BASIC caused you to recoil in terror from your screen, don’t worry, AGK is also available as a C++ library.  If the word C++ just recoiled from your screen, hey… there’s always AGK Script… :)  Over the course of this article we will take a quick look at both.  AppGameKit 2 was the result of a successful Kickstarter campaign and is a product of The Game Creators who previously developed Dark Basic and 3D Gamemaker.

 

There is also an HD video version of this article available here or embedded below.

 

Hello AGK

Let’s jump right in with a pair of Code samples.  First in AGK Script, then in C++.

 

AGK Script Example

// Project: test 
// Created: 2015-07-10

// Setup the main Window
SetWindowTitle( "My Game Is Awesome!" )
SetWindowSize( 640, 480, 0 )

// set display properties
SetVirtualResolution( 640, 480 )
SetOrientationAllowed( 1, 1, 1, 1 )

// Create a Cube 100x100x100 at the Origin
box = CreateObjectBox(100,100,100)
SetObjectPosition(box,0,0,0)

// Add a light to the scene
CreateLightDirectional(1,-1,-1,-0.5,255,255,255)

// Set the position of the camera and aim it back at the origin
SetCameraPosition(1,0,100,-150)
SetCameraLookAt(1,0,0,0,0)

rotationY# = 0

// Gameloop
do
   // Display the current FPS
   Print( ScreenFPS() )
   // Rotate our Object
    SetObjectRotation(box,0,rotationY#,0)
    // Display back buffer
    Sync()
    // Update Rotation
    rotationY# = rotationY# + 1
loop

 

Here is this code example running:

g1

 

C++ Example

// Includes
#include "template.h"

// Namespace
using namespace AGK;

app App;

void app::Begin(void)
{
   agk::SetVirtualResolution (640, 480);
   agk::SetClearColor( 0,0,0 ); 
   agk::SetSyncRate(60,0);
   agk::SetScissor(0,0,0,0);


   // Load a Sprite at index 1
   agk::LoadSprite(1,"logo.png");
   // Scale the sprite to 25% of it's size
   agk::SetSpriteScale(1, 0.25, 0.25);

   
}

void app::Loop(void)
{
   agk::Print(agk::ScreenFPS());

   // On gamepad press, spacebar hit, touch or left click enable 
   physics on our sprite
   // And make that sucker bouncy, gravity does the rest
   if (agk::GetButtonPressed(1) || agk::GetPointerPressed()){
      agk::SetSpritePhysicsOn(1, 2);
      agk::SetSpritePhysicsRestitution(1, 0.8);
   }

   agk::Sync();
}


void app::End (void)
{

}

 

Here is this code sample running:

g2

 

There is a bit more to the C++ example than the code shown here.  AGK is provided as a library for C++ use.  To get started there are also a number of templates that you can copy and start from.  Each template has a bootstrap class containing the required code to start AGK.  For example the Visual Studio project provides a WinMain implementation for you.  Here are the currently available templates for a Windows install (MacOS has XCode projects available for iOS and Mac):

image

 

Of course you can of course create your own application and simple use AGK as a C++ library if you prefer.

 

Tools Included

 

AGK IDE

If you are working with AGK Script, the majority of your development will be done in AGK IDE.  AGK IDE is a Code::Blocks derived IDE with full text editing, syntax highlighting, code completion and debugging support for AGK Script.

image

 

I experienced no lag when using the IDE.  Most of the features you would expect in a modern IDE are available, including code folding, find/replace, intellisense and code hints:

image

 

Refactoring tools are all but non-existent and unfortunately there is no local help.  (We will discuss help files shortly).

 

Debugging is supported:

image

But the implementation is barebones, limited to break points, step over/out and displaying the call stack.  You can inspect variable values, but you have to enter them manually in the Variables area.  There is no ability to inspect, add watch or set conditional breakpoints.  I believe this functionality is relatively new, so hopefully it will be extended with time.

 

If you choose to work with C++, you will not use AGK IDE at all, instead working in your C++ IDE of choice.  As mentioned earlier, several templates are provided.

 

Placement Editor

AGK also ships with the Placement Editor, a fairly simplistic tiled level creator:

image

 

It enables you to place varying sized tiles, perform transforms such as rotation and mirroring, layer up and down and supports grid snapping to grid for precise layouts.  The UI however leaves something to be desired, with the scroll bars only supporting movement via the arrows and panning controlled using an onscreen controller.  Additionally you have to exit the application and copy graphics to the media directory to add new tiles.  Unfortunately it’s also lacking some seriously required functionality such as defining collision volumes or physics properties.  It does however enable quick creation of tiled backgrounds.

AGK Player

One other cool feature of AppGameKit is the AGK Player, available on mobile devices:

ss

 

By pressing Broadcast in the IDE, you can easily see your code running on device without having to bundle/sign/deploy like normal.  It is available for download in the app store, except on iOS where you have to build and deploy it yourself using XCode.  This tool enables rapid on device testing during development and can be a huge time saver.

 

Samples and Demos

AppGameKit ships with an impressive number of AGK Script code samples:

image

Including a few complete games:

image

And some user provided examples:

image

 

Here is the SpaceShooter example in action:

g3

 

Documentation and Help

 

I mentioned earlier that there is no local documentation available, which is unfortunate.  There also doesn’t appear to be a generated class library reference, which is also unfortunate.   That said, the documentation available for AGK is actually rather solid and has been complete from my experiences.  It is available entirely online so you can check it out yourself.

 

The scripting language itself is quite simple and documented here in reference form.  While a more broad language introduction and overview is available here.  As mentioned earlier, there are also dozens of examples included to learn from.  There are a series of guides available covering specific topics such as networking , platform publishing and more.  The closest thing to a class reference is the Commands documentation, you can toggle between C++ and BASIC code examples:

image

 

AGK also has a very active developer forum available.

 

The Library

 

Of course we should talk about what functionality is available in AGK.  Over all it’s quite comprehensive, although the 3D functionality is very actively under development and some functionality is obviously missing or under development ( such as animated 3D model support ).

 

The follow feature list is taken directly from the AGK site.

  • Write once, deploy technology
  • Code in BASIC or native (C++)
  • Device independent
  • Cross Platform IDE
    • Develop on Windows or Mac and deploy to Windows / Mac / iOS / Android / Blackberry 10
    • Broadcast test apps to devices over Wifi
    • Auto Complete
    • Function Lists
    • Code Folding
    • Export to exe/app/apk/ipa
  • 2D Games Engine
    • Tweening
    • Blending modes
    • Spine Support
    • Box 2D Physics
    • Particles
    • Drawing commands
    • Text support - fixed and variable width
  • 3D Engine
    • Primitives
    • Positioning
    • Rotation
    • Shaders
    • Collision
    • Cameras
    • Lights
  • Audio/Visual
    • Video Playback
    • Sound
    • Music
  • Input Agnostic
    • Direct Input Control
    • Touch
    • Keyboard
    • Mouse
    • Accelerometer
    • Joystick/Controllers
  • Sensors
    • Camera Access *
    • GPS *
    • Geo-location *
    • Inclinometer *
    • Light Sensor
  • Mobile
    • Rating an app *
    • In-App Purchasing *
    • Adverts *
    • - Chartboost
    • - Admob
  • Networking
    • Messages
    • Shared Variables
  • Misc
    • File IO
    • Facebook *
    • File IO
    • Extensive help & tutorials
    • Time & Date
    • Enhanced image control
    • QR Codes
    • HTTP
    • Edit Boxes
    • Zip file control
  • Coming Soon...
    • Debugger
    • 3D Engine Enhancements
    • File IO
    • 3D Bullet Physics
    • Extension System

    * Selected platforms only.

 

Conclusion

 

I certainly haven’t spent enough time with AGK to consider this a full review by any means.  The following are my initial impressions when working with AGK.  I am personally not a huge fan of the BASIC language, even as a beginner recommendation, but AGK Script is accessible and the included tooling make AGK an appropriate choice for beginners, especially with the included examples and solid documentation.  I was able to use the library very much by intuition and the ability to code entirely in C++ will appeal to several developers.  The mapping between C++ and BASIC is very natural but this also comes at a cost.  The C++ side of the equation is very “flat” in structure, using no OOP and a disconcerting number of “magic number” type variables.  In a simple project, AGK is a solid and approachable choice.  In more complex projects, without writing an organizational layer over top, I could see quickly developing a mess of unmaintainable code.

 

The tools included with AGK are functional but could both use a bit of polish.  The editing experience in AGK script is fine but the debugger is fairly young and needs some work and the some more refactoring support would be nice.  Integrated and context sensitive help would also be a huge boon.  For the most part though there is enough functionality in the IDE that working in AGK Script wouldn’t feel like a chore.  The level editing tool is nice in that it exists, but the functionality is extremely limited and the UI isn’t the best.  For anything but the most trivial game, I would imagine you would find yourself wanting a more mature tool like Tiled, although a loader is available, so this is certainly an option.  Also, the editor is only available on Windows machines.

 

From a developer perspective, for a 2D game, AGK provides pretty much all of the functionality you would expect and some that is a bit unexpected, like cross platform video playback.  3D is coming along but missing some key functionality.  The code experience is incredible consistent, once you’ve figured out how to do one task, you can generally guess how other tasks are going to be performed.  You can accomplish a great deal in AGK in a very short period of time, but I do question how well the design would scale to larger projects.  As a C++ library, AGK could also be considered as a cross platform competitor to libraries such as SFML or SDL.  AGK does appear to be a good solution for new developers, especially if you like the BASIC programming language or wish to work with an approachable C++ library.  For more experienced developers, AGK is a productive and easy to learn library supporting a respectable number of platforms with the option of high and low level development.  I just don’t know how well this product would scale with project complexity.

 

The Video

Programming


10. July 2015

 

A new Blender tutorial series was just released here on GameFromScratch.com.  It has actually been under development for a couple months, I have just finally put together a table of contents page for it.

 

The series is called Learning Blender, One Hour at a Time and the entire premise is to break learning Blender into one hour chunks and cover as much as possible in each hour.  Currently there are video tutorials for introduction, modelling, texturing and animating.  There will be one last video on rendering released shortly.  Combined, the five hours of instruction should give you all the details you need to get started learning Blender.  Additionally there are a few simple tips and trick videos we have published, they have been gathered together into one place for the first time.

 

Below is just a screenshot of the actual series table of contents.  Click here or the image below to go to the actual tutorial.

image

 

Enjoy!

Art


GFS On YouTube

See More Tutorials on DevGa.me!

Month List