Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
17. February 2016

 

Phaser, the cross platform HTML5 based game library I covered in this tutorial series, just released version 2.4.5. 

image

From the release:

Phaser 2.4.5 is our first release in 2016 and represents several months of fixes and optimizations. As a point release it's a safe update from a previous 2.4 build, but as always please test first before upgrading, and be sure to skim through the extensive change log. There are some great new features including Dolby Digital sound support, loads of updates to Pixi and a new Webpack bundle.

  • 14 new features including Dolby Digital audio support and advanced Text wrapping
  • 30 updates including replacing PolyK with EarCut, Tilemap updates and lots of TypeScript and JSDoc updates.
  • 31 bug fixes including OS X Chrome right-click issues, Sprite mouse over, Tween event order, Loader queue fixes and more.
  • 10 updates to our build of Pixi including CanvasPool tweaks, fixing generateTexture bounds calculations and Filter Texture and GL Viewport fixes.

Due to on-going development of Lazer (previously known as Phaser 3) Phaser is soon to enter the LTS (long-term support) stage of its life. This is when we impose a feature freeze, locking the API down and responding only to bugs. This is a necessary step to allow us to focus on Lazer while still ensuring Phaser is given the support it deserves. Thousands of developers use Phaser and we've no intention of ignoring that. However with the release of 2.4.5 we will now be moderating issues opened on GitHub to this effect.

You can read more here.

GameDev News


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

 

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


5. February 2016

 

While this one is certainly skirting the border of game development news as almost no games were developed for Firefox OS, but the death of an OS generally merits at least a few lines of text. Started in 2011, the first Firefox OS device shipped in 2013, FF OS was designed as a Linux kernel that booted to the Firefox browser.  Very similar in scope to Chrome OS, it received even less success than Chrome OS, which itself is on life support these days. Even the idea of a mobile OS built around a web stack wasn’t new, as Palm, then HP attempted it with WebOS, another mobile HTML5 powered operating system that has joined the operating system graveyard.

I don’t know about you but to me this one seems to be a non starter at this point.  It’s actually a bit of a shame too as iOS is getting worse with every release and frankly I trust Apple or Google about as far as I can throw a transport truck, so a viable free and open option in the OS space would certainly be a good addition.

From the announcement on Mozilla:

Dear Mozillians,

The purpose of this email is to share a follow up to what was announced by Ari Jaaksi, Mozilla’s SVP of Connected Devices, in early December49 -- an intent to pivot from “Firefox OS” to “Connected Devices” and to a focus on exploring new product innovations in the IoT space. We’re sharing this on behalf of Ari and the Connected Devices leadership group.

In particular, there are a few decisions that we want to share along with what will happen next. We’ll elaborate more below, but let us start by being very clear and direct about 4 decisions that have been made:

  1. We will end development on Firefox OS for smartphones after the version 2.6 release.
  2. As of March 29, 2016, Marketplace will no longer accept submissions for Android, Desktop and Tablet, we will remove all apps that don’t support Firefox OS. Firefox OS apps will continue to be accepted into 2017 (we have yet to finalize a date for when we won’t continue accepting these apps).
  3. The Connected Devices team has been testing out a new product innovation process with staff, 3 products have passed the first “gate” and many more are in the pipeline. Having multiple different product innovations in development will be the approach moving forward, and we’re hoping to open up the formal process to non-staff participation in the first half of the year.
  4. The foxfooding program will continue and will focus on these new product innovations (rather than improving the smartphone experience). We expect the Sony Z3C foxfooding devices to be useful in this, but we expect it to take until the end of March to figure out the specific design of this program.

Obviously, these decisions are substantial. The main reason they are being made is to ensure we are focusing our energies and resources on bringing the power of the web to IoT. And let’s remember why we’re doing this: we're entering this exciting, fragmented space to ensure users have choice through interoperable, open solutions, and for us to act as their advocates for data privacy and security.

RIP Firefox OS.

GameDev News


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List