Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
12. January 2016

 

This tutorial covers the basics of creating game levels in Blender.  There are a set of companion videos on YouTube that cover the same topics.  We will be looking first at creating a skybox to define the boundaries and skyline of our game.  Next we create the terrain of the game using a displacement map and a height map texture.  Finally we show how to paint the terrain using multiple textures.  I assume you have prior experience using Blender.  If you do not, this text based or this video based Blender tutorial series will teach you everything you need to know to follow along here.

 

Creating a Skybox

A skybox is pretty much exactly what it sounds like, a box flipped inside out with a 360 degree sky texture applied to it.  That said, it is quite common to remove one side of the box (the floor) as it is generally never seen.   There are two approaches to the texture map used to texture the inside of the skybox.  First we can use a single texture in the shape of a lower case T.  Or we can use a separate texture for each face of the box.  The advantages of the first approach are a) it’s easier b) it uses less texture memory.  The advantage of the second approach is much higher quality textures.  We will take the first approach in this example, but if there is enough demand I can do a tutorial covering the second method.

 

So first we need a skybox texture or textures.  Generally theses are a sequence of seamless textures representing the front, back, left, right, top and optionally bottom textures in the scene.  For this example I am actually using a cool procedural galaxy skybox generator available here.  Play with the random seed until you get a value you like.  To have it generate a t-shaped texture, make sure that Unified Texture is selected:

image

 

The end result I am working with looks like this:

skybox

 

Ok, now that we have our skybox texture, let’s fire up Blender.  The default scene is surprisingly EXACTLY what we want.  All we need is a simple cube, like so:

image

 

With the cube selected, switch into Edit mode and in the tools (T) panel select Shading/UVs then Flip Direction.

image

This reverses the normals of each face in our cube, effectively turning it inside out.

 

Now we need to mark edges to unwrap the UVs.  Switch to Edge select mode and select the following edges:

image

 

Then, still under Shading/UVs, click the Mark Seam button.

image

 

Next select the entire object (A) then click Unwrap.  In the UV/Image Editor, it should look like:

image

 

Perfect, now we just need to import our texture.  In the Material tab of the Properties panel, we first want to enable Shadeless:

image

 

Shadeless prevents the lighting of the scene from interacting with the material, which for a skybox is exactly what we want, otherwise it would be far too dark and unevenly lit.

Now switch over to the textures tab, add an image texture, load our generated skybox texture, then make sure mapping is set to UV, like so:

image

 

In the UV Image editor, with all of the faces of our cube still selected, make our texture active, then using a combination of rotation and scaling, align the UVs to the texture map:

image

 

That’s it, your skybox is now complete.  Of course you probably want to scale it up to a huge size so it envelops your entire scene.

image

 

If you have any unsightly seams, your UV maps is probably off the texture ever so slightly.

 

The Video Version


 

On To Part Two – Terrain

Art Design


30. November 2015

 

 

 

This entry in the Closer Look series is a bit different than normal.  First, Blade Engine is very much a work in progress, so expect bugs and flaws and minimal documentation.  Second, it’s actually built over top of an existing game engine, LibGDX.  Finally, it’s a game engine focused on one very specific genre – adventure games.  Given the popularity of hidden object games on mobile these days, there are no doubt a number of people looking for an appropriate engine.  So without further adieu, I present the Bladecoder Adventure Engine, an open source cross platform LibGDX based game engine and editor for creating adventure games.

image

As always there is an HD video version available here.

 

Meet Bladecoder Adventure Engine

 

Blade engine consists of two parts, the underlying game engine and the editor that is layered on top of it.  It is designed in such a way that you can work entirely in the editor and never once right a line of source code.  You assemble your game from a collection of Chapters, Scenes and Actors and added events and actions in the form of verbs.  If you want to modify the fundamental structure of the game itself, you are going to have to jump into the underlying source code.  Fortunately that is an option, as Bladecode Engine is hosted on Github and the source is available under the incredibly liberal Apache 2 license.

 

Blade Engine Features at a Glance:

  • Multi platform support: Android, IOS, Desktop (Windows, OSX, Linux) and HTML
  • Several animation techniques: sprite/atlas animation, Spine (cutout) animation and 3d model animation
  • 3d character support
  • Multiresolution to deal with different densities and screen sizes
  • Multilanguage support
  • Open source and free (as in beer and freedom)
  • Code free game creation possible

 

The heart of Bladecoder is ultimately the editor, so let’s focus there after we cover getting started.

 

Getting Started

 

To get started with Bladecoder you need to have Java and git installed and properly configured.  Bladecoder uses the JavaFX ui library so you will have to use JDK 8 or newer or be prepared to have to configure JavaFX manually in the build process.  You will also require an internet connection for the build process to succeed the first time. To start, from a terminal or command line, change to the folder you want to install Bladecoder and enter:

git clone https://github.com/bladecoder/bladecoder-adventure-engine.git

cd bladecoder-adventure-engine

gradlew build

gradlew run

 

There is an example repository, including the work in progress game The Goddess Robbery available in the repository https://github.com/bladecoder/bladecoder-adventure-tests.  You should probably clone this repository too, as this is perhaps the single biggest documentation source available right now.

 

The Editor

 

Assuming the compilation process went without issue above, you should now see the Adventure Editor, where the bulk of your work will occur.

image

 

Your game is composed of a collection of Chapters, which in turn contain Scenes.  Scenes in turn are a collection of Actors and organized in layers:

image

 

Game Props enables you to set global properties of your game:

image

 

Resolution enables you to quickly create scaling modes for supporting multiple device resolutions ( think Retina ):

image

 

While Assets enables you to import multiple defined assets include audio and music files, texture atlases, 3D models, images and more.

image

 

You organize your scene using the editor available in the center of the window:

image

You can place actors on different layers, define walk paths, etc.  Click the Test button to preview that scene in action.

 

The actual logic of your game is defined on the right hand side of the editor. 

Here you can set properties of your actors:

image

 

Create and edit dialogs:

image

 

Define sounds and animations:

image

 

Clicking the edit icon will bring up the appropriate editor:

image

 

While selecting an animation will preview it in the scene:

GIF

 

Finally Verbs are the heart of your application:

image

 

You can think of verbs an analogous to event handlers, and they can be applied at the world, scene or actor level.  There are also default verbs that will be fired if unhandled.  Think the generic “I don’t know how to use that” messages from adventure games from the past.

 

Let’s look at an example from the Scene, handling the Init verb which is fired when the scene is ready.

image

 

This verb causes the sequence of actions shown at the bottom part of the above image to be fired when the scene init verb is called.  This causes the player to move, a dialog sequence, the player is scripted to drop an item, a state value is changed, etc.  You can create new elements by clicking the + icon:

image

 

And filling out the resulting form.  Each element has a different form associated with it.  Here for example is the result of the Say element:

image

 

Once complete simply click the play or package button:

image

 

Play launches the standard loader:

image

 

This screen can obviously be customized to each individual game.  While package brings up a form enabling you to build your game for a variety of platforms:

image

 

And that essentially is it.

 

Help and Community

This is certainly a weak point of the Bladecoder engine, it’s the result of a single coder, there is minimal help available and if you don’t know how to debug Java code, you will probably end up in trouble, at least at this point in it’s lifecycle.  There is currently no community or forum available for this engine but perhaps that will change in the future.  I spoke with the developer a few times however and he was very responsive and quick with fixes and answers.  He is also on twitter at @bladerafa if you want status updates on the project.

For now documentation consists of a minimal wiki although for the most part the best source of documentation is going to be from following the examples.

 

Summary

Make no mistakes, this is very much an under development engine so expect things to blow up spectacularly at any time.  When it does, you are probably going to be on your own figuring out why as there is no community to fall back on.  All that said this is a surprisingly robust tool that makes the process of creating an adventure game exceedingly simple.  Once the engine matures a little bit it will be an excellent tool for even a non-programmer interested in making adventure games.  For now though if you are competent in Java and interested in making an adventure game, this engine takes care of a hell of a lot of work for you and provides full source code for when it doesn’t.  Plus at the end of the day, the price is certainly good too!

 

The Video

Design Art Programming


20. November 2015

 

Recently I just finished a tutorial covering creating isometric maps using the Tiled map editor.  One commonly occurring question was “where can I get tiled-friendly isometric tile sets?” for free.  The answer unfortunately is there aren’t a ton of options.  There are a few good isometric tile sets out there (I may coverisometrictitle this in a different post), but not a ton of choices.  So instead I’ve decided to look at the process of making isometric tiles in Blender and thankfully it’s not that difficult.  The process follows.  There is also an HD video version of this tutorial available here.

 


First load up blender.  We are going to start by just making a 64x64 pixel tile of the default Blender cube.  For this exercise we are going to have our object centered about the origin.  Precision is of critical importance to this entire process, so we are going to be working numerically in the properties panel(N key).

 

image10

 

Now let’s delete all of the faces except the base:

GIF

 

The majority of the work is actually in setting up the camera.  With the camera selected we need to position it.  Since our object is at the origin, we need to offset away from it.  As the isometric style is from above and at an angle we offset 60 degrees on the X axis and 45 degrees around the Z axis.  If you are using a more skewed perspective ( not 2:1 ratio ), you will choose a different  rotation.  We also move the camera back along the Y axis and up the Z, we will be moving the location slightly later.

image

 

Next we set the dimensions of our camera in the Camera tab, we are going to start of with 64x32 at 100%, like so:

image

 

Now in the Properties editor, select the camera icon and we need to set the camera to Orthographic.  We then adjust our Orthographic scale until the camera extents capture the cube.

image

 

In 3D view switch to camera view (0) then adjust the Orthographic Scale and Z axis of the camera until your image is framed, like so:

image

 

Now change the camera dimensions from 64x32 to 64x64 and adjust the z value of the camera until the base tile is aligned to the bottom of the camera frame, like so:

image

 

Now render it out to texture.  We already set up the render dimensions, now we simply need to set the renderer to render transparency:

image

 

In Shading in the Rendering tab set alpha mode to Transparent.  Now render your tile and TADA:

tile

 

Now let’s extrude our tile to the extents of our camera frame, like so:

image

 

Then render it out:

tile2

 

Now you can test our two isometric tiles out in tiled:

image

 

Now you will notice the tiles look remarkably, um, tiled.  This is due to the shading.  In the materials for your tile, set Shadeless on, then the results look cleaner.

image

 

Creating a Reference Cube

It’s possible you want a framework to model non-cube shaped entities in an isometric style.  Thankfully it’s incredibly easy to create such a thing. 

First take your reference cube, then apply a Wireframe modifier to it:

image

 

This now gives you a nice shape to use for reference, like so:

image

 

Now chances are if you are going to model within the reference you are going to want to make it unselectable and mark it so it doesn’t show up in the renders, like so:

image

 

Now of course you will probably want bigger than 64x64 tiles.  One option is to simply duplicate our cube, then move it by 2 units (as our cube is 2x2 in size) along the X axis, like so:

image

 

We can then render each tile by moving the camera by 2 along the X axis, setting all other tiles to not render, although this could easily be scripted.

 

Chances are we are going to want to make several tiles at once too and this would also be extremely easy.  Simply take your reference tile and apply an array modifier then another array modifier, like so:

image

 

The only difference between the two modifiers is the axis of the relative offset.  This now gives up a 6x6 grid of tiles to work with:

image

 

Only problem is, now we have one big tile instead of 36 separate tiles, but no matter, this is easily resolved!  Make sure both Array modifiers have been applied.

 

Now enter Edit mode and press P –> Separate by loose parts.

Next select them all in Object mode and select Set Origin->Origin to Center of Mass.

 

And TADA, 36 tiles ready for editing!

GIF2

 

Of course if you wanted to edit the tiles as a whole (for example, connected terrain) you would do this before performing the separation. 

 

Next we have to render each tile.  Basically grab a tile, translate it to the origin, hide the other 35 tiles, render it.  Now repeat that process 35 times.  Sounds fun, eh?

Yeah, not to me either, good thing I’m a programmer. Let’s take a look at automating this using Python in Blender’s built in API.   Please keep in mind, I rarely program in Python and have never scripted in Blender, so don’t expect brilliance!

import bpy

objs = []
for obj in bpy.data.objects:
    if obj.name.startswith("Cube"):
        objs.append(obj)

# loop true all the meshes, hide all but active, and copy active to 0,0,0 and render        
for curObj in objs:
    prevLoc = curObj.location.copy()
    curObj.hide_render = False
    
    for otherObj in objs:
        if curObj != otherObj:
            otherObj.hide_render = True
            
    curObj.location = (0,0,0)
    bpy.data.scenes['Scene'].render.filepath = "c:\\temp\\" + curObj.name + ".png"
    bpy.ops.render.render(write_still = True)
    
    curObj.hide_render = True
    curObj.location = prevLoc

 

Now if you run that script it will render all of the tiles to your C:\temp directory.

 

Of course the key to making tiles look good is going to be the texture mapping…  but you’ve got all the tools you need to succeed and quickly at that.

 

The Video

Art Programming Design


19. November 2015

 

Just a quick note to announce a new series I have started, The GameDev Toolbox.

Toolbox

 

The series is intended to bring exposure to a wide variety of tools used in game development.  This includes graphic creation packages, IDEs, audio tools, design tools and more.  Basically if it isn’t a library, framework or game engine and it’s used for game development we will probably take a look at it.

These are not reviews, nor are they tutorials.  They are meant as a quick introduction and overview and nothing more.  For now the series is video only, but I will be creating a text based version in the near future.  There is a playlist for the series available here.

It currently consists of:

 

This video shows the premise of the series:

Art Design General Programming


22. October 2015

 

As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.

 

The video of this tutorial is available here or embedded below.

 

The Code

index.html

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

app.ts

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


class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;
}

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
        });
    }
    preload() {
        this.game.load.tilemap("ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img = this.game.load.image("HF2_A2", "HF2_A2.png");
        this.game.load.image("Decepticon", "decepticonLarge.png");
    }
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    }
    render() {
    }
    create() {
        this.map = this.game.add.tilemap("ItsTheMap", 32, 32, 64, 32);
        this.map.addTilesetImage("HF2_A2","HF2_A2");

        this.map.createLayer("Background").resizeWorld();

        this.player = new Phaser.Sprite(this.game, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;
        this.game.world.addAt(this.player, 1);

        this.game.camera.follow(this.player);

        var something = this.map.objects["GameObjects"][0];
        var start = <ObjectEntity>this.map.objects["GameObjects"][0];
        var end = <ObjectEntity>this.map.objects["GameObjects"][1];


        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y);

        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onUp.add(() => {
            this.player.position.add(-32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onUp.add(() => {
            this.player.position.add(32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onUp.add(() => {
            this.player.position.add(0,-32);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onUp.add(() => {
            this.player.position.add(0, 32);
        });
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

 

 

The Video

 

Art Design Programming


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List