Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
4. June 2014


Today it was announced that PlayCanvas Game Engine has been open sourced.  PlayCanvas is a WebGL HTML5 game engine that runs across supported browsers, or on mobile devices using a solution such as CocoonJS.  Given yesterdays announcement that Safari for Mac and iOS 8 are both going to support WebGL, it is becoming much more viable.


Playcanvas logo

In their words, PlayCanvas engine is:



In case you haven’t come across the PlayCanvas Engine before, it’s a JavaScript library engineered specifically for building video games. It implements all of the major components that you need to write high quality games:

  • Graphics: model loading, per-pixel lighting, shadow mapping, post effects
  • Physics: rigid body simulation, ray casting, joints, trigger volumes, vehicles
  • Animation: keyframing, skeletal blending, skinning
  • Audio engine: 2D and 3D audio sources
  • Input devices: mouse, keyboard, touch and gamepad support
  • Entity-component system: high level game object management


It sounds very similar in scope to the Turbulenz engine I looked at last year.  One major difference is PlayCanvas includes a complete visual editor that runs in the browser:




The code is now available on GitHub.

You can read the documentation here as well as the API reference here.


Keep in mind though, even though PlayCanvas is now open source, it is not completely free ( although a free tier exists ).  You can check out the pricing tiers here.

3. June 2014


With Apple’s recent release of the Swift programming language I have decided I have to check it out.  One of the biggest reasons I’ve stayed away from Apple’s various SDKs is my dislike of Objective-C.  Swift on the other hand is quite a nice little language at least from my experiences so far.


Keep in mind a couple thing while reading this.  I am new to Swift ( everyone is, it’s a day old! ) and am new to Apple’s various SDKs and Frameworks.  Therefore I give no promises that anything in this tutorial series is actually the proper way of doing things.  Frankly it works on my computer and that’s about the extent of a warranty I can give! :)  I have heard great things about SpriteKit, the 2D game library Apple released with iOS 7, so I am working with it.


Let’s jump right in with some code.  The following is a Mac OS app, but should work equally well on iOS devices.  Keep in mind, to run Swift code you need to have Xcode 6, which is currently in beta.  Obviously you need to have a Mac to follow around.  There are “cloud based” virtual Mac services you can use as well, but my experiences weren’t great.


To get started I used one of the provided templates then replaced most of the code.  There used to be a SpriteKit template, but now it has been rolled into “Game”.

In Xcode select File -> New -> Project

Then select OS X -> Application and choose Game, then click Next:



In the next dialog, name your application, be sure to select Swift as the programming language and SpriteKit as the Game Technology, click Next.




In the next dialog you select where you want to create the project and whether or not you want to create a git archive.  In this case I am not, but if you are working with a team or want version controlling, allow it to create a git repository.


When done, click Create and your project will be created.  When I run the generated project, I actually get:




Well, that’s not good!  Truth is though, I want to start simpler than the included project, so we are going to replace all the code anyways.  The starter template seems a bit odd to me, extending behaviour that should have probably been built in in the first place.  Let’s get rid of the complexity and strip it down to basics.


When you look at the project hierarchy Xcode has created, you will see a number of generated files.  Swift code files end with the extension .swift ( well, that makes sense… ).  It’s these that we are going to replace.  The generated project should look something like:




For each file listed below, edit your source to match:




import Cocoa

import SpriteKit


class AppDelegate: NSObject, NSApplicationDelegate {


    @IBOutlet var window: NSWindow

    @IBOutlet var skView: SKView


    func applicationDidFinishLaunching(aNotification: NSNotification?) {

            let scene = GameScene(size:self.skView.bounds.size)

            scene.scaleMode = .AspectFill




    func applicationShouldTerminateAfterLastWindowClosed(sender: NSApplication) -> Bool {

        return true;






import SpriteKit


class GameScene: SKScene {

    override func didMoveToView(view: SKView) {

        /* Setup your scene here */


        let sprite = SKSpriteNode(imageNamed: "beach.png")

        sprite.position = CGPoint(x:0,y:0)

        sprite.anchorPoint = CGPoint(x:0.0,y:0.0)

        sprite.size = view.bounds.size






You can completely delete the file GameScene.sks.


Additionally, I dragged an Image file “beach.png” into my project file from Finder.  You can use any image you want, just be sure to update the filename in GameScene.swift accordingly.  When dropping the image file, make sure you select Copy if needed, and that the image is being put in the proper target, like so:





Now when you run the program ( Play icon in top left of your Xcode window ), you should see:



Of course, in your case it should display whatever image you selected.  Let’s take a quick look at what we’ve done here.


In our AppDelegate, we handle the applicationDidFinishLaunching event.  Once our app is launched, we create an instance of our GameScene class, set the fill mode to AspectFill and make our newly created scene active for our SKView.  This small function implementation demonstrates a few Swift concepts, i’ll start from the beginning.

Notice the line:

let scene = GameScene(size:self.skView.bounds.size)


How we pass in the name of the variable parameter (size), as well as a value (self.skView.bounds.size).  When declaring a function in Swift you have to option of making the user name the parameters or not when they call the function.  That is, when you are declaring a function, you can specify an internal and external parameter name and if you provide an external parameter name, the user must provide the name when calling the function.  Consider the function:

    func printSomething(item:String){



For that function, you can simply call it like:



However, if you declared the function using an external parameter name, like so:

    func printSomething(thingToPrint item:String){




You then need to call the function like so:



If you are familiar with Flash, TypeScript or Haxe, the syntax for functions in Swift should look pretty familiar.  It’s basically

func functionName ( externalVarName localVarName:DataType ) -> ReturnType { FunctionBody }


The next line containing new Swift syntax is:

scene.scaleMode = .AspectFill


Scale mode is simply an enum defined like so ( in SKScene )

enum SKSceneScaleMode : Int { case Fill case AspectFill case AspectFit case ResizeFill }


That line is functionally the same as:

scene.scaleMode = SKSceneScaleMode.AspectFill



The final line here that might be a bit confusing is 


Specifically the exclamation mark after skView.  This has the somewhat scary name of “implicitly unwrapped optionals”.  See, all types in Swift must have a value, either at declaration or construction.  The exception to this rule is Optional Types.  If you’ve worked in C# this concept ( and syntax ) should look familiar to you, although in C# they are called nullable types.  An optional type declaration looks like this:

var myVariable:String?


This is declaring a type that can either have a value, or the special value “nil”.  For an optional type you can “implicitly unwrap” it, using the ! postfix operator, like so:



When you do this, you are promising that myVariable currently has a value.  If it doesn’t, you will get a runtime error.


The GameScene class is much more straight forward and uses very few new Swift features.  We are loading a SKSpriteNode from file, once again you see an example of an external parameter name here, “imageNamed”.  We then set the image pivot point to the bottom left corner, just because I like the image pivot point being the bottom left corner!  SetPivot works in texture coordinated, so 0,0 is bottom left, while 1,1 is top right.  We size our image to be the same as the view, then finally add the sprite to the SKScene using addChild().  


And that is our very first simple application created in Swift displays a sprite on screen using SpriteKit.


2. June 2014

EDIT:  For a better understand of Apple’s Metal API and what it means for OpenGL, click here. 

So finally we are getting some developer related announcements out of the Apple Developer Conference.  For game developers, todays announcement is a dozy.  iOS 8 SDK includes 4,000 new API calls but most importantly includes Metal, a new lower level graphics API similar to AMD’s Mantle.  The idea is to get closer to the metal ( thus the name ) and remove the overhead of OpenGL:


Gaming on iOS takes a huge leap forward in iOS 8 with Metal, a new graphics technology that maximizes performance on the A7 chip. With its dramatic 10 times improvement in draw call speed, Metal enables leading game providers for the first time to bring console-class 3D games to mobile devices. For casual games, iOS 8 now features SceneKit, making it easy to create fun 3D games, along with major enhancements to SpriteKit, including field forces, per-pixel physics and inverse kinematics.


10 times performance improvement over OpenGL?  That sounds like marketing BS to me or describes an edge case.  If OpenGL was that bloated it would have died off year ago.  The important take away is it’s A7 only, so newest iPad and iPhones are the only ones that support it.  Unity, Crytek and Unreal are all expected to support it so it should be pretty transparent to most developers.


The other major announcement was Swift:


Swift is a powerful new programming language for iOS and OS X® that makes it easier than ever for developers to create incredible apps. Designed for Cocoa® and Cocoa Touch®, Swift combines the performance and efficiency of compiled languages with the simplicity and interactivity of popular scripting languages. By design, Swift helps developers write safer and more reliable code by eliminating entire categories of common programming errors, and coexists with Objective-C® code, so developers can easily integrate Swift into their existing apps. Xcode® Playgrounds make writing Swift code incredibly interactive by instantly displaying the output of Swift code.


The iOS beta software is available now for registered Apple developers.  XCode 6 is required to support the Swift programming language.  You can learn more about Swift here.  I LOVE new programming languages, so I will certainly be taking a closer look.  Some Apple toted features of swift are:


Swift has many other features to make your code more expressive:

  • Closures unified with function pointers
  • Tuples and multiple return values
  • Generics
  • Fast and concise iteration over a range or collection
  • Structs that support methods, extensions, protocols.


… interesting.  I hate ObjC, so an alternative is certainly appreciated. 

2. June 2014


So far in working with TypeScript I’ve exclusively used Visual Studio and that hasn’t been entirely trouble free.  There are many people out there that wont have access to Visual Studio ( working on Mac or Linux perhaps? ) or simply wont want to.  Thankfully there is a great alternative, WebStorm.  Granted WebStorm isn’t free, although there is a 30 day trial.  It is however a very well spent $50 if you are working in JavaScript ( or TypeScript ).  This post looks at working in TypeScript with Webstorm.


First step of course it download and install WebStorm.  The trial is fully functioning by the way.

During the install, if you havent already, you will be prompted to install Java 6.  Don’t worry, WebStorm takes care of the process for you.

Next you need to install Node.  Node.js is a JavaScript environment that works outside of the browser.  I’ve worked with Node a number of times on this site.  Install Node using the default settings.

Now open up a terminal/command prompt and type npm install –g typescript

The results should look like:



This installed the TypeScript language.  We are now ready to go.


When you open a project with a typescript file a file watcher should kick in automatically.  If not, its easy enough to define one.

Select File->Settings.  ( This menu has a different location on MacOS I believe )

On the left hand side, locate File Watchers:



On the right hand side, if none exist for TypeScript, click plus.  If one exists, make sure its checked.


Then select TypeScript from the list:



Default values should be correct:



If you have any problems at this point, make sure that Node was installed correctly and that you installed TypeScript, these are the most common problems.


Now with a File Watcher created, whenever you save a change to a TS file, it while automoatically compile the JS file.  Like so:



From this point on you will be able to see full syntax highlighting as well as code completion:




Additionally, you can set a breakpoint in WebStorm:



And assuming you’ve enabled the WebStorm plugin, you can debug in Chrome:



Which then allows you to perform the standard debugging tasks in WebStorm:



If you are coming from Visual Studio, there is one major difference to be aware of.  In Visual Studio, adding a file to your project makes it available for code completion.  In WebStorm this isn’t the case.  If you include a library, such as Phaser, you need to add a reference identifier at the top of your ts file, like so:


/// <reference path="phaser.d.ts"/>


Then code completion will work properly.


AppGameKit Studio

See More Tutorials on!

Month List