Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

14. January 2016

 

Welcome to another episode in the “Closer Look at” game engine series.  The closer look series is a combination of getting started tutorial and review to help you determine if a game engine is the right fit for you.  Today we are looking at the QICI Engine and HTML5 game engine built over top of the Phaser framework which itself uses the Pixi graphics renderer. Normally when I work with a game engine, I have to spend several weeks with it before I can put together one of these guides.  With QICI, it took substantially less time, only a couple days, to come to terms with the engine.  This isn’t a slight on QICI in the slightest.  First, I am a big fan of the Phaser engine it is built on, so this gave me an immediate familiarity.  Second, it is just an extremely good, well designed, capable and well documented game engine.  Hmmm, bit of a spoiler there I suppose, but I really like the QICI engine.  Read on to find out why.

 

As always, there is an HD video version of this guide available here.

 

A Tour of the QICI Engine

The engine is available for download here.  It is bundled as a zip archive while available on Github (the code is not directly on Github however, but is included within the archive).  Simply extract the archive contents then run start-win.bat or start-mac.command depending on platform.  The engine is built around NodeJS  and Node must be installed before using the QICI engine.  The code is released under the MIT license, making QICI both free as in beer and free as in freedom.  There are future hooks for paid plugins, but currently all plugins are available for free as well.

Once you run QICI, it loads a browser window and a fairly humble project management screen:

image

Here you load existing or create new projects.  Creating a project is simply a matter of selecting an empty directory and clicking Create.

Once you’ve loaded or created a project, you will be brought to the primary editing window:

image

 

The editor is pretty typical of modern component based game engines.  You’ve got an editing surface for composing screen elements, a hierarchy view containing your current scenes contents, a project view for managing the assets in your project and finally an inspector view that updates dynamically based upon the current selection.  For a web based editor, the UI is silky smooth and doesn’t feel clunky.  For example, right click context menu support is prevalent and intuitive:

image

The editor supports common features like drag and drop, tool tips, resizes well in the browser and frankly doesn’t feel like a web app most of the time.  I encountered the occasional glitch where the cursor got stuck in the wrong mode, but they were uncommon and easily avoided.  Frankly, if you weren’t in a web browser, you would have no idea this was a web application.

You can also change the layout to work in Portrait mode, like so:

image

 

The UI can be switch between English and Chinese via the Language menu.  You can also configure the editing window to mirror common iOS device dimensions:

image

Oddly, no Android love.  Not really a big deal, as this just sets the dimensions and a Free Aspect option exists.

 

Creating Scenes

Your game project is composed of one or more scenes.  We can add, reload and save scenes via the project menu.

image

The following settings are configurable on the project by project basis:

image

Once saved, a Scene appears under states in your assets view:

image

 

Scenes are composed of the following elements:

image

 

To create a new game object, simply select it from the list and position it on screen.  Here for example is a sprite:

image

 

There are widgets for placement, free or axis confined, scaling and free scaling, but oddly enough, not rotation.  To perform rotation, you need to use the Inspector window:

image

As you can see, the Inspector has editors for the various components that go into our game object.  In this case, a Sprite contains a Transform and Sprite component.  You can add additional components via the Add Component button:

image

Somewhat confusingly, you can also add components in another manner, as we will see shortly when we attach a script.  You can add additional functionality via Plugin, like so:

image

 

Let’s add an Arcade Physics controller to our game, and make our sprite a physics object.  Select Plugins->Plugin Manager, then in Inspector enable Arcade Physics.  Next click Save and Reload:

image

Now if we click Add Components in the Inspector with our sprite selected, we get:

image

 

Select Plugins->Arcade->RigidBody.  You will see in Inspector, we now have an additional component to configure.

image

 

Set the Gravity Y value to 10, and hit the play icon and you should see:

GIF

 

As you can see, you can preview the running of the scene directly in the editor.

As you may have noticed from the game objects available, QICI has robust UI support.  You can easily use hierarchies of components to form complex UIs, like so:

image

 

An impressive number of layout properties are exposed to the inspector:

image

Assets can be imported into the engine using drag and drop, or by simply copying them into the folder in the underlying file system and click reimport in the UI.

 

Coding in QICI Engine

What might not be immediately obvious is how you actually code in QICI and of all the features, this one is probably the least intuitive.  You code by attaching behaviors to your game entities.

Start by right clicking the Scripts folder in the assets view and select New JavaScript File:

image

 

Name your script and you will see that a stub script has been created for you, you can preview the code in the Inspector:

image

 

At this point you are probably best off firing up your favourite JavaScript editor and opening the generated script.  You can jump to the script directly right clicking the script and select Open in Local File Explorer:

image

 

You can however edit using the built in editor if you prefer:

image

All scripts are qc.Behaviors.  You will notice that this class implements a number of callback methods for various points in the games lifecycle such as awake, onDown, render, onDestroy, etc.  By implementing these methods, we add functionality to our script.  Consider this simple script, that causes a button to change it’s text to “Clicked” when clicked:

var ButtonHandler = qc.defineBehaviour('qc.engine.ButtonHandler', qc.Behaviour, function() {
    // need this behaviour be scheduled in editor
    //this.runInEditor = true;
}, {
    // fields need to be serialized
});

ButtonHandler.prototype.onClick = function() {
  
    this.gameObject.find("Text").text = "Clicked";
};

 

Now attach this script to the component by dragging and dropping, like so:

GIF2

And you will see a new component has been added to our Button:

image

 

Values can easily be exposed to the editor, like so:

var ButtonHandler = qc.defineBehaviour('qc.engine.ButtonHandler', qc.Behaviour, function() {
    this.meaning = 42;
}, {
meaning : qc.Serializer.INT
});

ButtonHandler.prototype.onClick = function() {
  
    this.gameObject.find("Text").text = "Clicked";
};

Resulting in:

image

 

Behind the scenes however, Phaser is always there.  You can actually access Phaser directly using gameObject.phaser, like so:

ButtonHandler.prototype.onClick = function() {
  
    this.gameObject.find("Text").text = "Clicked";
    alert(this.gameObject.phaser.game.width);
};

 

Therefore, if you are familiar with Phaser, you should be immediately comfortable with QICI.  For more help with Phaser, I have already created a fairly comprehensive tutorial series.

 

Documentation and Community

This is a very new project, just shipping the end of last year.  There isn’t much of a community per say, but there is a fledgling question forum.  Hopefully in time a proper community forms.

 

In terms of documentation however, QICI Engine is good, shockingly good in fact.  There is a complete guide available here walking you through the fundamentals and primary components of QICI.  With the exception of a good scripting guide and a document on program flow, I found everything I was looking for in sufficient detail to accomplish what I needed.  There is also a very good searchable reference guide available here.  Between the two, and with prior Phaser experience (which is also remarkably well documented), I had no trouble whatsoever getting up to speed.  Additionally there is a pretty good collection of examples available here on Github

Frankly, for a young open source project, this is hands down the best documentation I have ever seen.  Kudo QICI team.

 

Summary

This is a game engine that takes one of my favourite HTML5 game engines (Phaser) and adds an incredibly polished layer of tooling on top of it.  Additionally a straight forward component system is added, while not getting in the way of the underling libraries.  If you are looking for a 2D HTML5 library, especially if you are already familiar or working with Phaser, this is a project you absolutely have to check out.  It is robust, straight forward, well documented and well designed.  Aside from the lack of community, there really isn’t much more you could ask of this great new engine!

I enjoyed my time with QICI and will be exploring it more in the future.  Let me know if this engine interests you and if you would like to see some tutorials from GameFromScratch.

 

The Video

Programming , ,

11. January 2016

 

Out of the box Unreal Engine 4 has support for C++ and Blueprints.  This leaves a bit of a gap for people that want more of a scripting experience but don’t want to work in a visual language like Blueprints.  Of course we have full source code access and Unreal Engine has solid plugin support so it was only natural for a few third party languages to pop up.  What follows is the list of external programming language options for developing in Unreal Engine.

 

JavaScript

Probably the best supported language alternative, there are two major implementations of JavaScript for UE4:

 

Unreal.JS

Released by NCSoft, the folks behind the popular Guild Wars RPG series, this plugin adds JavaScript support via the V8 engine.  Impressive in it’s scope, it includes CommonJS module support, .d.ts files for Intellisense support, a Jade like templating engine, live reload as well as access to the entire Unreal SDK.

 

Flathead

Another implementation of JavaScript via the V8 engine.  Older, small in scope and less supported, so probably best to go with Unreal.JS.

 

C#/.NET

This one is a bit tricky.  There was an early leader in an implementation by Xamarin, until licensing differences killed that project.  The only other alternative is currently Windows only.

 

Mono for Unreal Engine

Sadly no longer under development because of licensing issues, this version is outdated, requiring Unreal Engine 4.4 and a Xamarin license to deploy.

 

Klawr

Currently the best bet for C# development using the Unreal Engine but sadly confined to Windows only.  In the authors own words “This project is still highly experimental, and not very useful (though it's getting there)”.  It’s open source and hosted on Github if you wanted to contribute.

 

Haxe

There is one project looking to add Haxe language support to Unreal Engine.  Fortunately it’s pretty far along.

 

Unreal.hx

Fully supporting subclassing UActor and Blueprints, the Haxe code compiles directly to C++ code leaving minimal overhead.  This implemetnation gives access to the entire Unreal Engine API.

 

Other

 

Rust

Slightly different than the other languages on the list, this project implements a simple plugin enables you to link a 3rd party Rust library to C++ in Unreal Engine.

 

SkookumScript

A custom scripting language for Unreal Engine (and other game engine) development, SkookumScript is in their own words “SkookumScript is a text-based programming language for creating performance-critical, real-time gameplay. It is now available as a free turn-key plugin for Unreal Engine 4 (UE4)”.  SkookumScript was used to create the game Sleeping Dogs.

 

 

No doubt there are languages I’ve missed, so if you know of one at is in at least a runnable state, please leave a comment below and I will add it.  I am somewhat shocked that I couldn’t find a Lua plugin at this point! 

Programming , ,

4. January 2016

 

I covered this briefly in another tutorial but I’ve noticed enough people searching for it, I decided it deserved a post of it’s own.  The GearVR software has a special developer mode that enables you to run GearVR applications without being inserted in a GearVR headset.  This tutorial shows the process of enabling developer mode.  Obviously you need a late model Galaxy S6/Note phone to follow along.

 

It is also available as an HD video.

 

Enabling Developer Mode

  • Swipe down and select Settings gear icon
  • Tap Applications
  • Tap Application Manager
  • Locate Gear VR Service, tap
  • Tap Manage Storage
  • Tap VR Service Version Several times
  • Swipe Developer Mode on.  Now you can run without the Rift (great way to record video by the way…)

 

If successful it should look like this:

Screenshot_2016-01-04-15-32-54 [347917]

 

Use the Developer Mode toggle to turn devmode on and off.  Be aware that while developer mode is enabled your phone is going to flicker like mad as it alternates between each eye.

 

Video Version

Programming

4. January 2016

 

I was recently working with a tool that exported it’s level data as a directory full of obj files, literally hundreds of them.  You can import them into Blender using File->Import->Obj, unfortunately there is no way to do a select all.  Apparently in Blender 2.4x if you held SHIFT while selecting OBJ import, it would import an entire directory, but this doesn’t appear to work in modern Blender.  You can also SHIFT+Click multiple files to do multiple selection, but this gets tedious when you have hundreds of them.  Unfortunately CTRL + A doesn’t work…

 

Thankfully Blender is extremely scriptable, so let’s turn to Python for a solution.  The following script will import a directory full of OBJ files into the current scene.

import bpy
import os

def fileList(path): 
    for dirpath, dirnames, filenames in os.walk(path):
        for filename in filenames:
            yield os.path.join(dirpath, filename)

for f in fileList("C:\\file\\path\\here\\"):
    if f.lower().endswith(".obj"):
        bpy.ops.import_scene.obj(f)


Be sure to change the path to your directory and if on Mac OS or Linux, to change the path format /to/this/style. Otherwise this script will chug away importing the OBJ files for you. Hopefully at some point Blender gives you the ability to select all while importing and the need for this script goes away completely.

Art, Programming , ,

4. January 2016

 

We recently covered getting started in GearVR development using Samsung’s GearVRf library and the Unity Engine.  Today we are going to finish it off with coverage of getting started using the Unreal Engine.  As with the Unity tutorial, although this is focused on the GearVR, most of the instruction should be equally valid for all Oculus Rift devices.  Of all the game engines, the Unreal was actually the easiest engine to get up and running with the GearVR.

 

There are a few pre-requisites before getting started:

There is a video based version of this tutorial available here and embedded below.

 

Configuring Unreal Engine

In order to be able to run code on your phone we need to add the Oculus Signature file to the application.  With Unreal Engine, this is configured at the engine level which is handy as you only have to configure it once for and it will work with all future projects.  If you haven’t already, sign up for an Oculus developer account, then get your key.  This will generate a file that we need to copy now.

The directory you want is [Unreal Install Dir][Version]\Engine\Build\Android\Java\assets.  In my install it was:

image

 

Creating a Project

You can use just about any settings, but these ones work well.

image

This will mostly just set presets that are mobile friendly.  Click Create Project when ready.

 

Configuring Your Project

If not done already, load your project in Unreal Engine, then select Edit->Plugins:

image

 

Now verify (or turn on) the GearVR and Oculus rift libraries and plugins, like so:

image

 

Now select Edit->Project Settings:

image

 

Locate Android SDK on the left hand side then on the right configure the location of your Android SDK install.

image

 

Now go to Android, set the Android minimum level then click the Configure Now button:

image

 

While in the Android settings, be sure to enable GearVR support!

image

 

Build Your App

 

Now build and package for Android, in the File Menu, select Package Project->Android->Android (ETC2):

image

Pick a location for the generated APK then Ok.

image

For the record, Unreal Engine Android builds are really really really slow.

 

When complete this will generate the APK file to run on your phone, as well as a pair of BAT files to quickly deploy to your device.  The noOBB batch file doesn’t copy data, only the updated executable.  Keep in min,d, you need to have your device either tethered or running wirelessly over adb to deploy.  This means removing it from the GearVR, which is an annoying process.  If you don’t need to fully test VR functionality, it might be faster to work in developer mode. [Link soon]

 

Video

Programming , ,

Month List

Popular Comments