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

 

Welcome to the final part of our three part series on level creation using Blender.  In the first part of the tutorial we created a skybox for our world.  In the second we used a height map to create some terrain.  Today we are going to look at applying multiple textures to that terrain.

 

We are going to pick up where we left off, we have a large plane distorted to create our landscape.  If you haven’t already, apply the Displace modifier to make it permanent.  You should have already UV Unwrapped the plane object before we applied the displace modifier, giving us a nice even UV grid to work with.

 

Next we are going to need some textures to paint with.  Seamless textures work best as they can be tiled without creating a noticeable seam.  For this example however, I just downloaded a couple textures from TextureLib, a grass, rock and water texture.  Use whatever textures you wish to use.  Now that you have your textures, we need to import them into Blender.  I find the easiest way is to just add them as textures to the plane object and name them appropriately, like so:

image

No need to setup mapping coordinates or anything else, as we arent going to be using these textures directly, they just needed to be made available for Blender.

 

Now with your Plane selected, make sure there is a Material, and if there isn’t, create a new one.

image

 

Now switch over to the texture tab and add a new texture of type Image or Movie, then click the New button:

image

 

Call in GroundTexture or something similar:

image

 

You may find 1024x1024 is too low res for a large terrain, so you might want to try 2048x2048.  Now it’s time to start painting our texture.  Configure your Blender windows so you have a 3D view on one side and the UV/Image Editor on the other, and switch the 3D view to Texture Paint mode, like so:

image

 

Now in the UV editor, make sure that your GroundTexture is active:

image

 

In the 3D view, in the Tools (T) sidebar, we now set the texture we want to paint with.  Locate the texture area, click the thumbnail icon and select one of your textures, like so:

GIF

 

Now we can paint directly on the 3D model.  You have a ton of control over your brush, but the two most important settings are these:

image

 

These set the size of your brush and the strength of your paint tool.  Now simply paint the terrain as you desire:

GIF2

 

You will notice that the texture updated automatically the the UV/Image Editor:

image

 

If you prefer, you can edit in the UV editor window instead, simply turn Edit mode on:

image

 

The brush settings from the 3D View Tools window will be applied to the UV editor in Paint mode.  Now simply change textures and repeat the process until your texture is complete.  When you are done, you may want to export your texture for use in an external engine.  In the UV/Image Editor, select Image->Save As Image:

image

 

End result:

image

 

Not the greatest looking level, but that’s due to lack of effort, not the tool.  Not bad for 20 minutes work.  Obviously there are other tasks you’d want to perform.  You probably want a normal or displacement map on the terrain to give it small surface level imperfections, and obviously you’d want to add static meshes for trees, shrubs etc... but that is simply a matter of doing more of the same.

 

The Video

Art Design


12. January 2016

 

In Part One of our level creation in Blender tutorial series, we created a skybox to define the boundaries of our game level.  In this tutorial we are going to create the terrain for our level.  You will probably be surprised by just how much we can accomplish with almost zero effort.

 

Creating a Height Map

First we need a height map.  A height map is a remarkably simple concept that has been around for ages.  Essentially you are defining the height of a grid of terrain using a simple gray scale image.  You can create this image a couple of different ways.  First you can simply fire up any image editor, even MS Paint, and draw the texture.  The blacker the pixels, the lower the corresponding terrain, while a white pixel is as high as possible.  In addition to painting by hand there are several applications free and commercial that are capable of exporting a height map for you.  Examples include Terragen, Bryce and Geovox although there are many more.

 

For this example I’m simply going to use Paint.Net, but any image editing program would work fine.  Create a new image, while not a requirement, power of 2 ( 512x512, 1024x512, etc ) textures generally perform best.  Next set the base colour to 128/128/128 RBG, like so:

image 

Use the bucket fill tool to fill the entire image with this color.  This will be the neutral value, the resulting terrain will neither be elevated nor depressed.

 

You can then vary the grayscale by either raising/lowering all RGB values ( aka 43,43,43 or 250,250,250 ) or by sliding the V slider under HSV.  Remember, darker the colour, lower the terrain, lighter the colour, higher the terrain. 

 

In the end, I painted this rather simplistic height map.

heightmap

 

This will result in a high border around a pit of utter and complete dispair... muhahahaha.

 

Displacement in Blender

 

Now that we have a height map, it’s time to put it to use.  The good news is, this process is remarkably simple.  First we need something to apply the height map.  A height map needs an underlying mesh to apply to and if there aren’t sufficient vertices to be displaced by the height map, your results aren’t going to be very good.  This means we need a large flat surface with a decent amount of detail...  We need a plane.

I’m building on our scene from Part 1.  Set the 3d cursor to the origin, then create a new Plane via Add->Mesh->Plane.

image

 

Your scene should now look something like this:

image

 

Now we simply want to scale the Plane to the appropriate size, which is going to be entirely dependent on your skybox dimensions.  I personally scaled by a factor of 10.  After scaling it, we need to add details.  To do so, in edit mode, simply apply a subdivision (W->Subdivide)

image

 

Each time you perform this, you will double the mesh density.  I preformed it about a half a dozen times, resulting in a mesh with 32K triangles, which seems about appropriate.

image

While you are here you might as well UV unwrap your plane (U->U).  Also switch to Smooth shading:

image

Or your terrain is going to look VERY edgy and not at all organic.

 

Ok, now that we have our plane to deform, we need to load in our height map.  It doesn’t really matter where you add the texture, but I will go ahead and attach it to our plane.  Switch over to the textures tab, add a new image texture and load our heightmap.  It might make sense to rename it heightmap so it doesn’t get confusing, but you don’t have to:

image

 

Don’t bother setting UV coordinates, we aren’t going to be displaying this texture.

 

Now, in Object mode, with your Plane selected add a Displace modifier:

image

 

Now select your image in the texture field, change Texture Coordinates to UV, then select the UVMap.  If you don’t have the option, you didn’t UV Unwrap earlier!

image

 

Our height map will now be applied to our terrain:

image

 

Now we can use the Strength value of the Displace modifier to determine the strength of the height map on the displacement:

HeightMapInBlender

 

The Video

 

Back To Part One  ||  On To Part Three

Art Design


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List