Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
19. February 2013

I have been working on a long running, but slow in development, series of posts on authoring a level creation tool using HTML5.  It covers how to actually create an application using the popular MVC design pattern, implemented using the YUI3 libraries, as well as the EaselJS graphic library.


If you are interested in HTML5 application development, or in a ( simple for now ) level editor, hopefully this series is of interest to you.  



Table of contents link.



Current Contents:


Expect this to be updated over time as I continue.


13. February 2013


They say a picture says a thousand words…




I am bringing no laptop nor frankly sobriety, so things will be pretty quite here for a couple days.  It’s only a short vacation though, I’ll be back early next week. I will have my phone and a spotty wifi internet connection, so I may reply to some emails… I just can’t promise any of those replies will make any sense!




See you all next week!

Totally Off Topic

8. February 2013


Since Nehe, which is horrifically out of date, there simply haven’t been that many good OpenGL tutorial series.  I mentioned a couple months ago about a series of OpenGL examples, there’s this free e-book and not a ton more.


Fortunately there is another author doing a series of OpenGL tutorials in the works.


The tutorial is across 5 parts as of now:

Modern OpenGL 01 – Getting Started in Xcode, Visual C++, and Linux


Modern OpenGL 02 – Textures


Modern OpenGL 03 – Matrices, Depth Buffering, Animation


Modern OpenGL 04 – Cameras, Vectors &Input


Modern OpenGL 05 – Model Assets &Instances


They are an easy read, go into a fair bit of detail and are a good learning source.  There are a few caveats though. 


First the tutorials depend on a few external libraries, GLEW, GLFW and GLM.  This is one thing I really liked about the examples I linked earlier, they didn’t depend on any third party libraries, but I can understand why the author did was he did.


Second, a lot of the OpenGL functionality is abstracted away into a custom library tdogl.  Again, I can understand why he did this, but it does make learning a bit trickier ( while making the code easier to understand and much cleaner… trade offs ).  As you are going through the tutorials, be sure to check out the source code as you go.  Fortunately there is a github repository with the code for each episode readily available.


So, if you are looking to learn OpenGL, you have another excellent source.  Just be prepared to do a bit of digging through the provided source to fully understand what it going on.


8. February 2013



In this section, we are going to look at the fundamental aspects of modelling in 3D.  If you have done any work in 3D, a lot of this will be old hat for you and you can safely skip ahead to the bottom for the Blender specific details.


3D Fundamentals

At the very core, 3D models are ultimately built up of 3 basic building blocks:


The Vertex


Vertex, or vertices ( plural ) are the very basic building blocks.  In a nutshell, a vertex is a position in 3D space.


The Edge

Polygon Edge


An edge is simply the connection between two vertices.


The Face

Polygon face

The Face ( or Polygon ) is the solid hull you get when you have 3 or more vertices connected by edges and forming a closed surface.  Most rendering stacks, like OpenGL or DirectX are optimized to work with triangles.  When modelling however, it is often easier and preferable to work with quads.  Given that any quad can be turned into a triangle by splitting it corner to corner, it is incredibly easy to tesselate from a quad to a tri, so when you can, work with quads.  It is possible to have more than 4 sided faces, we will cover this later in the form of BMesh, but behind the scenes they are simply performing the task for you.  The problem with having shapes with more than 4 sides is you can no longer guarantee that they are flat, which can lead to some bizarre rendering artefacts.



There is one last concept that is important to understand...


The Normal

Polygon Normal

See the green lines?

Those are each faces "normals".  Basically the normal is the direction a face, um… faces.  Most of the time you won't have to deal with normals all that often, but if your face is "missing", there is a good chance it's normal has flipped.

Take the above cube image, right now all the normals face outwards from the cube.  Here is the same cube rotating, with it's normals flipped:

Polygon Normals animated

Sometimes this is actually the behaviour you want, such as if you are modelling the interior of a space, like inside a room, or creating a skybox around the world.


Modelling in Blender


Configuring the 3D view

When working in 3D, you have a number of options for how you want your mesh displayed, you can work on a wireframe, solid or textured image.  At the bottom of the 3D view screen, locate the sphere icon to bring up the Viewport Shading menu:



Which mode you ultimately select is up to you.  I generally flip back and forth between all of them.


There is one other setting to be aware of, and this will determine how your scene will be displayed within Blender.  If you want to match your game results as closely as possible, you probably want to set it to GLSL, which is OpenGL rendering.  This is done from the properties window.

If the properties window isn't currently being displayed, press N to display it.  Scroll down to the section labeled Display, open the Material Mode drop down and select GLSL.  If things aren't displaying correctly for you, play around with the settings in this panel.  Oh, and notice the Toggle Quad View button?  If you like the 4 panel mode in 3D Studios Max, click this button to emulate it.  I personally do not like the results, it's better to simply configure display windows as you need them.





Ok, now that we have the screen rendering set up, lets actually start modelling.

If you have a cube on screen already from the default scene, great.  Otherwise we need to create one.

From the Menu, select Add->Mesh->Cube




A cube will then be created at the location of the cursor/pivot.  It is actually incredibly common to start modelling with a simple cube, it's called "box modelling" and we will look at in depth shortly.


Now that we have a 3D object to work with, there is a very important concept we need to address, object mode vs editing mode.


Object Mode vs Editing Mode

When working in Blender, you can be in a number of different modes, which completely changes the tools available and the way things perform.  There are a number of different modes you can be in, but two are of importance to us right now, Object Mode and Edit Mode.

You can toggle between modes using the menu at the bottom of the 3D view:


You can also perform the same action by hitting the TAB key.  Each time you hit the tab key, it toggles between modes. This is one of those things you will do A LOT, so it really helps to memorize that hotkey.


So, what then are the different modes?  Well, Object mode is when you are dealing with a mesh or other scene objects ( lights, cameras, etc ) as a single entity.  If you move something in Object mode for example, it moves the entire object.  Edit mode on the other hand, works with the components of the mesh, those being the vertices, edges and faces.  When you are actually changing the mesh, you will be working in EDIT Mode.  As you may notice, when switching between modes, the tools and menu options available change massively.


Welcome to Edit Mode

During the modelling phase, you will spend a LOT of time here, so get used to it.

As I mentioned earlier, models are built of three basic building blocks, the vertex, edge and face.  In edit mode, you have to choose which of those three levels you want to work at.

This once again can be accomplished using the menu at the bottom of the view menu.  When in Edit Mode, you will see a series of buttons for switching between Vertex, Edge and Face editing mode.  These buttons will only be available in Edit Mode.  One option will always be selected, in this case Face mode.


These different modes once again change the tools available.  More importantly, they change the way selections work… in Face mode for example, right clicking within the object will select the clicked Face.  This effects all the various different selection tools too, such as the Border Select, Circle select, etc.  It's fairly common to switch between different modes regularly.

Fortunately there is yet another hotkey available, but this one requires a bit of dexterity to pull off.

First off, pressing CTRL + TAB brings up the mode selection pop-up window, like so:




That said, for those with long enough fingers, there is yet another combinations of shortcuts to make things even faster

CTRL + TAB + 1       Select Vertex Mode

CTRL + TAB + 2       Select Edge Mode

CTRL + TAB + 3       Select Face Mode


Trust me, you will switch between modes A LOT.  It is certainly worth your while to learn these hotkeys.  I will admit, a 3 key hotkey is more than a bit annoying.  One of the very first things I tend to do is define my own hotkey for each of these settings.  There are perils in setting your own hotkeys ( you can clobber existing commands, plus documentation will no longer apply ).  If you are interested in reconfiguring Blender, you can read more about it here.  I leave that decision to you; in many ways it makes sense to learn the Blender way first, then customize things to fit your needs later on.


Axis and Allies… no wait, just Axis!


There is one more important concept to cover before we carry on, the Axis, they play a very important role in 3D applications.

Let's take a look at an empty Blender 3D scene:



Not shown in that example are the Z axis ( normally in blue ), which runs straight up and down.

Blender orientation is known as Z-up.  In that up and down in the scene are along the Z axis.  This corresponds with the camera, where looking down the Z-axis for example is the same as the "Top" camera, while looking up the Z-axis is the same as the "Bottom" camera.  It is important to remember that different game engines use different orientation systems, as do different 3D programs.  Some are Y-up, in which the Y axis denotes up and down.  Fortunately switching between the two is a simple rotation away. You can read a bit more about the subject here if you are interested.  It really only becomes important when you are moving between programs or exporting to a game engine.

Axis are important to understand because you commonly want to constrain your movements in a single direction only.  We will cover this shortly.


Moving, Scaling and Rotating Things

There are 3 basic actions you will commonly want to perform on objects, or their vertices/faces/edges and those are moving( or translating), scaling and rotating.  Let's take a quick look at each.  All of the operations we are about to describe work in either Object or Edit mode.






 Moving or translating is simple the act of well, moving something.  In Blender though, it has a remarkably weird name/hotkey.

G , G as in Grab.  Press G then move the mouse around to position your object.  Then press the left button to finishing moving. Otherwise, press the right mouse button to cancel the move.

Remember earlier when I said you could constrain along a single Axis?  Well, doing so is quite easy.  After you press G to perform a move, press the axis you want to move along.

Move Along X Axis only: G then X then move mouse, then Left Mouse Button when done.

Move Along Y Axis only: G then Y then move mouse, then Left Mouse Button when done.

Move Along Z Axis only: G then Z then move mouse, then Left Mouse Button when done.


You can also move using just the keyboard.  To do this, simply press G then the Axis letter to move along, then the amount, followed by Enter to commit, or Esc to cancel.

For example, to move 5 units along the Y axis, you would: Press G then Y then 5 followed by Enter.  This is handy when you are going for precision movements or are modelling to scale.


That might seem like a lot to learn, but don't worry, you only need to learn it once and it works basically identical for Scaling and Rotating.


Using The Widget

You may also notice that when you press G to move an object, a widget appears on screen.  You can left click on an axis arrow to begin dragging in that direction:




Simply pick the axis you want to move along and hold down the Left Mouse Button.  Once you have positioned where you want, release the Left Mouse Button, to cancel, click the Right Mouse Button.



Scaling is the act of growing or shrinking an object or parts of it.



To Scale in Blender Simply hold the S key, Left Mouse Button Down, then move the mouse toward the pivot to shrink the object, or away in any direction to increase the size, release the button when complete.  Click Right Mouse Button to cancel.

Like moving, you can constrain the scaling axis by holding X, Y or Z after you hit S.



Rotating is simply the act of turning the object or parts of it.


To rotate an object in Blender simply hold the R key, then click and hold the Left Mouse Button, drag the mouse up or down and release when fully rotated.  Once again Right Mouse Button cancels the rotation.

Right the other two operations, you can constrain rotation along a given axis by holding X,Y or Z after you press R.

Manual Entry


For all of these operations, you can directly enter numeric values if you prefer, or you can lock rotation around a given axis.  If the Properties Window isn't displayed, press N to display it.



Note however, that most of these options are only available when in Object mode.  In Edit mode, you will have different selections.  But if you want very precise positioning, or want to prevent movement along a certain axis, this is where you do it.  Simply click and drag a value left or right to change it, or double click a value to enter a new one.  Clicking the padlock will prevent movement of the given type on the given axis.  For example, clicking the Padlock on the Z value of Location, while prevent your object from being able to move up or down on the screen.



Hotkeys / Actions used in the Tutorial


N Show or Hide property window
G + LMB + Drag Grab/Move/Translate selected item(s)
S + LMB + Drag Scale selected item(s)
R + LMB + Drag Rotate selected item(s)

S or G or R


X or Y or Z

Limit scale,move or rotation to selected axis

S or G or R


X or Y or Z


Number value



Scale, move or rotate selected item(s) along selected axis by entered amount.  Can use a decimal point.


Toggle current mode ( Object, Edit, etc )

CTRL + TAB Toggle between mesh select modes (Vertices, edges, faces )

CTRL + TAB + 1 Vertex editing mode ( must be in Edit mode )

CTRL + TAB + 2 Edge editing mode ( must be in Edit mode )

CTRL + TAB + 3 Face editing mode ( must be in Edit mode )



On to next part

6. February 2013

As we reported back in december, Torque2D was going open source.  Well, the day has finally arrived, Torque2D's source code is up on Github now.

Torque2D Logo



So what is Torque2D?  It is a 2D cross platform game engine, previously under a commercial license.  I will let them describe their baby:



In simple terms, Torque 2D is an extremely powerful, flexible, and fast engine dedicated to 2D game development. The following is a breakdown of the core facts about the engine:

Currently supported platforms:
* Windows
* OS X
* iOS

Support for new platforms is surely on the way. In fact, YOU get to help us decide what we should work on, be it Linux, Android, editors, or just simple bug fixing. 

* Core: C++
* Windows: C++ and Windows API
* OS X: C++, Objective-C, and Cocoa API
* iOS: C++, Objective-C, and Cocoa touch API

Main Features:
* Box2D physics
* Simple and flexible sprite system
* Composite system capable of rendering thousands of images and animations with little performance impact
* Integrated asset system that manages all your asset loading and unloading in an optimized manner
* Flexible module system that makes rapid prototyping a snap and code reusability a simple matter
* TexturePacker Support
* TAML serialization format (like XAML and XML)
* Batched rendering
* Multiple collision shapes
* Built-in unit testing framework, cross platform
* Solid behavior system for packaging reusable game logic that can be applied to multiple sprites in different projects

In addition to the core engine languages, you can script all your game play via TorqueScript. This is a C-like syntax language that is very simple to learn and utilize for your projects. Additionally, persistent files such as particles, levels, GUIs, and more are stored as "TAML" (Torque Application Markup Language). If you have ever edited XML or XAML in the past, you should feel more than comfortable with TAML.

Blazing Speed
Blazing fast performance on Windows, OS X, and iOS. On desktop platforms, you can have thousands of sprites, particles, and physics objects running at once without ever dipping below the 60 fps mark. While more limited, iOS hardware can run the engine at a solid 60 fps, even with hundreds of objects interacting on screen.


Very cool move open sourcing this GarageGames, I hope it works out for you.


You can read the complete announcement here.

See More Tutorials on!

Month List