Superpowers Tutorial Series–Part Two: Actors and Components

 

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


Scroll to Top