Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

25. January 2016


I am currently embarking on a rather massive “from scratch” beginners game programming series over on YouTube.  One thing that can make the process a hell of a lot smoother for a beginner or veteran alike is a good development environment.  As a result I’ve created this page, a summary of the best editors and IDEs for development in Lua using Love specifically.  This list contains both full blown IDEs as well as text editors that can be configured to work better with Lua or Love2D.  Of course the line between text editor and IDE can be extremely blurry at times, so the distinction doesn’t really matter.  Unless otherwise stated, all options on this list are cross platform and have a free version available.


ZeroBrane Studio

If in doubt, select this one.  It’s probably the easiest to configure and perhaps the most Lua and Love focused option out there.  With the least amount of effort you will get the most amount of functionality including code highlighting, autocompletion and most impressively, debugging support.


IntelliJ IDEA with Lua and Love2D plugins

Probably not the ideal choice for beginners, as the IDE itself is rather complicated and you have to configure two different plugins to get things up and running.  That said, this is the IDE I will be using for the tutorial series simply because it has an excellent presentation mode, making it good for video demonstrations.  With the plugins you get full autocompletion, syntax highlighting and can run your app directly from the IDE.  You can’t unfortunately debug.  I have done a video on configuring IntelliJ for Love development available here.


Sublime Text with the Love2D Package

Sublime Text is well named, it’s a great text editor, that through package support can get awfully close to full IDE capabilities.  It was my go to general purpose text editor for years and is still a very solid option.  With the Love2D package you get syntax highlighting, autocompletion and the ability to run your app directly in the editor.


Atom Editor with the Love-IDE collection of packages

Atom is another editor, very similar in scope to Sublime Text with probably even greater extensibility.  The Love-IDE extension brings together a collection of Lua and Love2d plugins to give Atom the ability to run from within the editor, autocompletion and syntax highlighting.  I personally find atom kind of slow though, especially to start up.  As I find myself loading and closing editors constantly, this becomes a more pronounced negative over time, at least to me.


Notepad++ with Autocompletion Plugin

Another free text editor that can be extended to support Lua and Love development.  Using the linked extension it is possible to get autocompletion, however the file is out of date and has only been updated up to Love 0.8.0.  There may be a more modern implementation somewhere.  As it stands, unless you are invested in Notepad++, I have trouble recommending it over the other great options in this list.


Eclipse and the LDT Plugin

The Eclipse IDE can also be extended to support Lua development using the LDT plugin.  I would rather swallow razor blades while juggling live hand grenades than use the Eclipse IDE, but hey... I’m trying not to let my bias show, so I added it to this list.  Some people love working in Eclipse, so this may be an option for you.  Warning though, Eclipse is extremely unfriendly to beginners, requiring a PHD in Obtuse UI design before mastering... oops, bias showing again. 


Decoda Lua IDE

This is the only option on this list I have no prior experience with.  It started life as an editor for Lua scripts for the game Natural Selection, then was released as a commercial Lua IDE, then finally was made free and open source.  Following these instructions it can be made to debug Love code.  Decoda is available on Windows only.


Visual Studio with BabeLua Plugin

Visual Studio is perhaps *the* IDE for Windows based developers and thanks to the somewhat recently released Community Editions, it is now available for free.  With the BabeLua plugin you get the full package, autocompletion, syntax highlighting and best of all, debugging.  For a beginner however, Visual Studio can be a bit daunting, not as bad as Eclipse, but probably comparable to IntelliJ in complexity.  Thanks to SiENcE for the heads up.



There are of course a few hundred other options including the ages old VIM and EMACS editor, or for those that like pain, you can use the text editor including with your OS such as Notepad or TextEdit, but you will certainly be leaving a lot of functionality on the table!  Did I miss a popular option?  If so, let me know!

Programming ,

18. January 2016


I just published this up to Youtube, but figured I would share it here as well.  I have long held that C++ isn’t a great choice as a first programming language.  This video is an attempt to illustrate why, including the same simple task in three different languages, C++, C# and Lua/Love.

Again, I don't think learning C++ is a bad idea, it's a very good idea. It's just starting with C++ that I believe is a mistake. If you are completely new to programming and want to know why I personally recommend against starting with C++, I recommend you watch this. Of course, you can start with C++... it's not going to harm you and it very much can work. I just think you would be more effecient using another language first.


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:


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:



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:


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:



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:


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.


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


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



Scenes are composed of the following elements:



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



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:


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:


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:



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:


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



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



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



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:



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


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:



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



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:



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


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:


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



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:



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";


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.



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.



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



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.



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



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.



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.



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



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.





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.



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


Month List

Popular Comments