Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
22. June 2016

 

Welcome to a new tutorial series covering the Defold engine, recently released for free use by King.  You can learn more about the Defold Engine in this video which contains a quick hands on.  It’s a powerful, cross platform Lua powered game engine for 2D game development.  This tutorial series will ultimately walk through all aspects of using the Defold game engine, in both text and video formats.  All of the assets used in creating these tutorials is available on the Patreon dropbox, although I will make source and asset files available as they are needed in text tutorials.  This first tutorial simply walks through getting the Defold engine installed and creating our first project.

 

You can watch the video version of this tutorial here or embedded down below.

 

Getting And Installing Defold Engine

 

Getting started with the Defold engine is very easy, however you will need to log in to Defold.com using a Google account.  First head on over to Defold.com and click the Get Defold button.

image

 

At this point you will have to log in using a Google account.  Once authenticated, you will be redirected to the Defold dashboard.  There are a number of download links available on this page.  Simply pick your appropriate platform:

image

 

This will download an archive file, extract the contents somewhere.

image

 

Defold is run by double clicking the Defold executable.  Before doing so however, let’s create a new project.

 

Creating a New Project in Defold

 

Creating a new Defold project is currently done using the Defold dashboard.  On the left hand sidebar of the dashboard, locate the Add Project button and click it.

image

 

You will now be brought to a very simple configuration form:

image

 

Name your project and click Save.  In my case I am creating a blank project, however Defold have made some sample projects available as a starting point.  If you would rather start there check “Yes, show me your tutorials”.  You will be presented with a list of options:

image

 

Your project is now available.  Let’s load the Editor.  In the folder you extracted Defold, double click the Defold executable.

 

Loading Your Project

 

Now with the editor open, select File->Open Project.

image

 

A list of available projects should now be available.

image

 

Select your newly created project and click Next.  Behind the scenes Defold is creating a git repository for your game.  Since this is the first “checkout”, you need to create a new branch.  Click New Branch then call it V1 or whatever name makes sense to you.

image

 

Defold will now download your project.  Here is the project structure of an empty new project:

image

 

Double click game.project to edit many game specific configuration setting:

image

 

Although our “game” doesn’t actually do anything, you can run it by hitting Ctrl+B or via the Project Menu:

image

 

Certainly not the most exciting game, but it’s a start!

image

 

Managing Your Projects

 

Back in the Defold dashboard, you can edit and delete your projects as well as add additional users.  Your project(s) should now appear on the left hand side of the dashboard, like so:

image

 

Click the gears icon above your project will bring you to the configuration section:

image

 

Clicking Team enables you to add users to your project:

image

 

Of course, they will have to authenticate using Google as well.

 

Finally by clicking Settings you have the ability to change the name and description of your project, as well as delete it entirely:

image

 

Code Hosted on Defold’s Server??? DEALBREAKER!

 

Don’t like the idea of your git repository behind hosted on Defold’s servers?  Well that’s an understandable concern and using the above process, this is exactly what happens.  When you create a project, it’s created as a Git repository on Defold’s servers and when you open it, you are downloading (or more accurately, checking out) to your local server).  It’s understandable that this isn’t for everyone.  Fortunately there is an alternative.

I am not going into details here, but if you want to bypass Defold’s servers complete, follow this guide here.

 

The Video

 

Programming


5. May 2016

 

Introduction

Welcome to the first part of a multipart tutorial series on creating games using the Haxe programming language with the Heaps graphics engine.  Heaps is under development by Nicolas Cannasse, the guy that created the Haxe language in the first place.  In his own words:

Heaps is a cross platform graphics engine designed for high performance games. It's designed to leverage modern GPUs that are commonly available on both desktop and mobile devices. The framework currently supports HTML5 WebGL, Flash Stage3D, native Mobile (iOS and Android) and Desktop with OpenGL. 

Heaps is a very cool library, but not an incredibly well documented one.  So that’s where this tutorial series comes in.  We are going to look at creating 2D then 3D graphics using the Heaps engine.  For this series I will be doing both text and video versions of each tutorial.  The video version of this tutorial is available here.

 

Setting Up Your Haxe Development Environment

This tutorial is going to assume you are using Windows, if you are on another operating system, the steps are going to vary slightly.

First head to Haxe.org/download and download the appropriate Haxe installer for the most reason version.

image 

In my case I am going with the Windows Installer.  Run the executable and say yes to any security messages you receive.  You want to install everything like so:

image

 

Install where ever you like:

image

 

Verify your install worked correctly.  Fire up a command prompt and type haxelib version:

image

 

That was easy, eh?  Next you will probably want an IDE or Editor.  Personally I am using Haxe Develop, a special port of Flash Develop.  This is a Windows only IDE though.  Another option is Visual Studio Code with the Haxe language extensions.

 

Finally we need to install the Heaps library.  It’s not registered with Haxelib yet, so we currently have to install it from Github.  Run the command:

 

haxelib git heaps https://github.com/ncannasse/heaps.git

image

 

And done.

 

Creating a Hello World application

Now let’s create our first application to make sure everything is up and running correctly.  A simple hello world app.

Assuming you are using HaxeDevelop, go ahead and create a new project via Project->New Project

image

 

I created a JavaScript project like:

image

 

Inside our project folder, we need to create a folder for our resources.  I simply created a directory called res.  Simply right click your project in the Project panel and select Add->New Folder...

image

 

Next we need a TTF file, I personally used this font.  Simply download that zip and copy the ttf file into the newly created res directory.  You can open an Explorer window to that directory by right clicking it and selecting Explore.  I personally renamed it to not be all caps, it should work either way though.  If you are using HaxeDevelop, your project should look something like this:

image

 

We have two final bits of configuration.  First we need to text HaxeDevelop that we use the Heaps library, and that the resource folder is named Res.  Right click your project and select Properties

image

 

Next select the Compiler Options tab.  First add an entry to Compiler options with the value –D resourcePath=”res”.  Then add a value to Libraries of heaps.  That’s it, click Apply then Ok.

image

 

Finally some code!  First we need a WebGL canvas for our application to run in.  Simply open up index.html located in the Bin folder and add a canvas.  Your code should look something like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>JSTest</title>
	<meta name="description" content="" />
</head>
<body>
	<canvas id="webgl" style="width:100%;height:100%"></canvas>
	<script src="JSTest.js"></script>
</body>
</html>

 

Now we need to edit our main Haxe code.  By default it will be called Main.hx and it’s the entry point (and entirety) of our program.  Enter the following code:

import h2d.Text;
import hxd.Res;
import hxd.res.Font;
import js.Lib;

class Main extends hxd.App {
        var text : Text;

		// Called on creation
        override function init() {
			// Initialize all loaders for embeded resources
			Res.initEmbed();
			// Create an instance of wireframe.tff located in our res folder, then create a font2d of 128pt size
			var font = Res.wireframe.build(128);
			// Create a new text object using the newly created font, parented to the 2d scene
            text = new Text(font, s2d);
			// Assign the text
			text.text = "Hello World";
			// Make it read, using hex code ( RR GG BB, each two hex characters represent an RGB value from 0 - 255 )
			text.textColor = 0xFF0000;
        }

		// Called each frame
        override function update(dt:Float) {
			// simply scale our text object up until it's 3x normal size, repeat forever
			var scaleAmount = 0.01;
			if (text.scaleX < 3.0) text.setScale(text.scaleX + scaleAmount);
			else text.setScale(1);
			
        }

        static function main() {
            new Main();
        }
    }

Now go ahead and run your code by either hitting F5 or click this button image

You should see:

GIF

 

Congratulations, your first Haxe programming using the Heaps library.  Next up, we will jump into 2D graphics with Heaps.

 

Video

Programming


4. May 2016

 

Mixamo is a great animation resource, that enables you to quickly (and currently freely) add animations to your 3D models.  However, if you want to incorporate the results into your Blender workflow, it can be a bit non-intuitive.  The Mixamo documentation recommend using Collada, which simply does not work well.  There instructions also skip completely the process of actually using the resulting animations...  a rather key component.  The following workflow is perhaps the easiest with the best results.

 

First off, when exporting your animations from Mixamo, use the following settings:

image

 

This will result in a zip file containing your model, as well as several animations, like so:

image

 

If you haven’t already, load Blender.  Next go to File->Import->FBX.  The next part is critical, in the Import FBX settings select Manual Orientation and Apply Transform

image

 

Your model and it’s armature should now load fine, with full proper textures showing up.  I suggest you rename your armature something meaningful, as each animation is going to come in with the same name (Armature, Armature.001, etc.).

 

Next do the import again, with the exact same settings, this time bring in one of your animations.  If you only need to wire up a single animation, you are nearly done.  Just bring up the DopeSheet, switch to Action Editor

image

 

You can now toggle between any animation available in the Blend file:

image

Keep in mind, I renamed my main character Timeline, then the walk animation armature was renamed Walk, etc...

 

If however you need to use multiple animations, or want to create a single timeline with all of the animations on it, you are now going to have to break out the NLA Editor.  It is simply a matter of Add Action Strip to your main character, for each animation in the timeline, like so:

image

 

And, the end result:

GIF

 

I glossed over part of the process, but never fear... I also did a video!

Art


29. March 2016

 

Welcome to the second Blender how to ( here is the first ), a series of quick step by step tutorials showing you how to accomplish a specific task using Blender.  Today we will look at a way of quickly modeling a high rise building.  It assumes you know the basics of using Blender.  If you don’t, no worries, I have tutorials for that!

 

First, start with the default cube, like so:

image

 

Now enter edit mode(TAB) and  loop cut (CTRL + R) it about the center, like so:

image

 

Select all the faces of the top half and separate them (P->Selection)

image

 

In object mode move the newly separated top portion up along the Z axis (G + Z + mouse)

image

 

Select the bottom box, make a copy (SHIFT + D), then move it up along the Z axis.

image

 

Select the middle piece, switch to edit mode, select the bottom face and delete it (x –> faces), like so:

image

 

This face is going to represent the various floors of your building.  Keep the top and bottom edges the same size as the top/bottom box and start carving it up to match your floor.  I generally start by doing a pair of loop cuts along the entire length, like so:

image

This can be accomplished by doing a loop cut (Ctrl + R), then before clicking to commit, scroll button once to perform multiple evenly spaced cuts at once.  Next I move them up and down the mesh simultaneously by simply scaling along the Z axis (S, Z, mouse move)

Now lets do several more loop cuts for windows using the same process (Ctrl + R, Mouse wheel multiple times):

image

 

Next select every other edge created (alt + shift click to select multiple) like so:

image

 

We now want to edge slide the selected edges (G,G)

image

Now select the inner faces like so:

image

Then hit E to extrude them

image

Repeat the similar process on all 4 sides to define your building.  Obviously you would arrange as you saw fit.

 

Now that we have our floor defined, it’s time to make a lot of them.  Switch to object mode then go to the modifiers tab and select Array:

image

 

Now we need to make sure we set the axis to array along ( set Z to 1 in the relative offset area ) and the number of times to duplicate under the count section.

image

When satisfied, click the Apply button.  Finally move your top and bottom pieces so they cap the building on each end, like so:

image

 

Select all 3 shapes and merge them together (Ctrl + J) like so:

image

Now we just need to weld our objects together.  Box select (B) the overlap area between the bottom and middle boxes in edit mode, like so:

image

Now select Remove Doubles in the Tool menu(T), then manipulate the Merge distance

image

Until you see

image 

Repeat for the top portion.

 

TADA, a building in Blender.  An ugly building mind you, but a building none the less.

image

Art


22. March 2016

 

This page is in support for the video tutorial on using Sprites/Images in Love as part of the GameDev For Complete Beginners tutorial series.  It contains the code and images used in the tutorial.  There is also a copy of the tutorial embedded below.

 

Images

The graphics are from this pack of images, made transparent using this process.

ALC-17AttackChoppers

 

Simply right click and save to your project directory.

 

Source Code

Drawing an Image

local imageFile

function love.load()
    imageFile = love.graphics.newImage("ALC-17.PNG")
end

function love.draw()
    love.graphics.draw(imageFile)
end

 

Using a Spritesheet

local imageFile
local frames = {}

local activeFrame
local currentFrame = 1
function love.load()
    imageFile = love.graphics.newImage("AttackChoppers.PNG")
    frames[1] = love.graphics.newQuad(0,0,128,64,imageFile:getDimensions())
    frames[2] = love.graphics.newQuad(128,0,128,64,imageFile:getDimensions())
    frames[3] = love.graphics.newQuad(0,64,128,64,imageFile:getDimensions())
    frames[4] = love.graphics.newQuad(128,64,128,64,imageFile:getDimensions())
    activeFrame = frames[currentFrame]
    print(select(4,activeFrame:getViewport())/2)
end

function love.draw()
    --love.graphics.draw(imageFile,activeFrame)
--[[    love.graphics.draw(imageFile,activeFrame,
        love.graphics.getWidth()/2 - (select(3,activeFrame:getViewport())/2) * 2,
        love.graphics.getHeight()/2 - (select(4,activeFrame:getViewport())/2) * 2,

            0,
            2,
            2)
]]--
    -- draw image 4x size centered
    love.graphics.draw(imageFile,activeFrame,
        love.graphics.getWidth()/2 - ({activeFrame:getViewport()})[3]/2 * 4,
        love.graphics.getHeight()/2 - ({activeFrame:getViewport()})[4]/2 * 4,
        0,
        4,
        4)
end

local elapsedTime = 0
function love.update(dt)
    elapsedTime = elapsedTime + dt

    if(elapsedTime > 1) then
        if(currentFrame < 4) then
            currentFrame = currentFrame + 1
        else
        currentFrame = 1
        end
        activeFrame = frames[currentFrame]
        elapsedTime = 0
        end
end

 

 

The Video

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List