Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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

3. February 2016

 

In the previous tutorial we installed the Superpowers game engine and created our first game.  In this tutorial we are going to get comfortable with the editor and create our first scene.  First let’s start with the editor, which we should have loaded at the conclusion of the last part.  In the top left corner, there is a control for managing assets.  Click the + page icon and select scene:

image

 

Then in the resulting dialog:

image

 

Now you should see your newly created scene in the list on the left hand side of the application:

image

 

By default (or by double left clicking the scene if not), your newly created scene should appear in the editor view in the middle of the screen:

image

 

Given that it’s currently empty, you just get a black screen.  For this example we are going to work in 2D, so switch to 2D mode:

image

 

Now that we have a scene created and loaded, we have new options on the right hand side of the screen.  Think of it this way...  the left hand side of the screen holds the assets that go together to make your game.  The right hand side holds the contents of each particular scene.  Switching between scenes will change the contents available on the right, but the assets on the left are available across your entire game.  Here is the right hand window for scene graph management:

image

 

Superpowers follows the common practice of being a component based game engine.  That means that the elements of your world are composed of various components and there is some kind of object that holds these components.  In Superpowers the component container is called an actor, and every object draw in the scene is ultimately an Actor.  Let’s add one to the scene now, click the Star with a + icon, pictured above.  You will then get a popup asking you to name your actor:

image

This Actor is going to be the camera, so name it accordingly.  Call it either Camera or Stephen, whichever makes more sense to you.  Personally, I went with camera.  Once created, you can see that all actors by default have a Transform component automatically attached.

image

You can also now see and position our actor in the scene view:

image

However, for now it’s just a manipulator widget, as there is no visible component attached to this actor.  You can use this widget for changing the position of the object within the scene, with each coloured arrow corresponding to a particular axis of movement, or by using the gray box in the center to move freely.  We will come back to this widget later, for now we need to make our camera a camera.

 

To create a camera, we simply add a Camera component to our newly created actor.   Down below the controls for controlling the actor’s position there is a button New Component:

image

Click it.

Now select Camera as the Component type:

image

You should now see a new editor for our newly added component:

image

Since we doing a 2D game, set the Mode to Orthographic, which means that images will remain the same size regardless to their depth within the scene. 

We now have a camera, and a scene.  Stay tuned for the next part where we will finally draw something on that screen!

 

Next Part

Programming ,

1. February 2016

 

Ever answered the question “If you could have any super power, what would it be?”  Myself, I’d go with whatever Superman has, as he seems to have the power to do whatever the heck he needs to have the power to do at any given time, so long as people don’t shove rocks from a dead planet at him...  However, if you answered “I want to have the power of collaborative game development!”  1) you need to think bigger 2) you are in luck!

 

Superpowers is a recently open sourced collaborative game engine for making 2D and 3D games, using TypeScript initially with Lua a WIP.  It’s built around HTML5 web technologies but isn’t really a browser game engine.  It’s available for Windows, Linux and Mac OS and it’s completely free, although I’m pretty certain the devs would appreciate some financial support should you find yourself digging it.

 

This on the other hand, as in this document you are reading right now, is the first part of a multi part tutorial series teaching you how to use Superpowers.  We are going to break this tutorial series across several posts, each covering a particular theme.  By the end though, you should be pretty well equipped to make your own game using the Superpowers engine.  So without further ado, let’s begin.

 

Gaining Superpowers

 

Getting the Superpowers Engine

First things first, we need to download and install the Superpowers engine.  There are two ways to go about doing this, from source on Github or the easy way.  We will take the easy way, because hey, it’s easy.  Simply click here and download the most recent Superpowers release.  You have the option of kicking in a bit of cash to help the developers at this point, but you don’t have to.  The key thing is, grab the version that is right for

image

 

I personally chose the Windows 64-bit version, mostly because I’m running 64bit Windows... 

Now that you’ve got the file downloaded, simply extract it to whatever directory you want to run Superpowers from.  In my case I chose d:\dev so Superpowers is installed in D:\Dev\superpowers-0.19.0-win-x64. 

And done.  Not exactly the most difficult install process you are going to encounter, eh?

 

Using Your Powers Wisely

Now locate the file superpowers (+ .exe on Windows) and double click it.

image

This is the Superpowers welcome screen, it may not be immediately obvious but click on the image of the kids to launch the engine proper.

Now we are brought to the Superpowers server window.

image

Creating a Server

Next create a server.  Simply click the ‘Add server’ button.  Don’t worry, we only need to do this part once.

image

You will then be prompted to name your server, do so.  By the way Superpowers team, you’ve got a bug in your button label here...  Once you’ve named your server, click ‘Add Server’

image

It will then prompt you for an IP address, and defaults out to 127.0.0.1:4237, which is a loopback or friendly way of saying “this machine”.  If you don’t have any reason to change this, don’t.  If you are running on a server and are going to be working externally with other developers you will use whatever your servers external IP address is instead. Click ‘Add server’ again.

image

 

TADA, you’ve got your own Superpower server:

image

 

Now double click your server to launch the Superpowers project manager.  We will be asked to create a user account:

image

 

After you click Log in:

image

 

Creating a New Project

Now we create a new project... bet you can’t guess how.  Ok, here’s how, click New project.

image

 

Next name your project, optionally describe your project and pick wether to use a template or not.  When complete click Create:

image

And finally, TADA, the Superpower editor:

image

 

Alright, that’s it for this tutorial.  We now have Superpowers installed, running and created our first project.  Click Next Part below to continue on to the, um, next part.

 

Next Part

Programming , ,

Month List

Popular Comments