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

 

A few weeks back I looked at creating Isographic tiles in Blender.  Today we are going to follow it up with a tutorial on creating Orthographic tiles instead.  Orthographic and isometric simply refer to the camera’s projection mode.  In an orthographic project, the camera is straight on and the image does not become smaller as it gets further away from the camera.  Most traditional top down or side view tiles, such as Metroid or Mario Brothers, are orthographic.

 

Blender gives you a bunch of advantages when creating tiles, especially when it comes to auto-tile support.  You can see auto tiling in action in our Tiled Map Editor tutorial series.  By creating a sequence with the proper border between varying tile types, the auto tile algorithm can figure out the rest.  In this tutorial we will show how to setup Blender so creating these transitions becomes trivial.

 

There is also a video version of this tutorial available here or embedded below.

 

First fire up Blender.  Because we are rendering everything in the end, it’s critical we set the dimensions properly.  In this case I am going to try and keep all of my tiles to 2x2 Blender units.  With the 3d cursor at 0,0,0 add a new plane, the default location is ideal:

image

 

Now switch to edit mode, then UV unwrap it.  This is going to hold our texture.  I am going to use a pair of seamless textures I created for roads, one a straight section, the other an intersection:

road2048v2RoadIntersection2

The important part of these textures is they are (relatively) seamless.  I accomplished this by cloning the edge of the one corner of the intersection, then pasting it over the 3 other edges of the intersection, then the two ends of the straight piece.  It’s not flawless, but it’s close.

 

Now, in object mode, apply the texture to the plane.  We will start with the intersection.  Create a new material if one does not exist, then switch to the texture tab and add the texture to the diffuse channel.  If you don’t know how to do this, check out one of our existing Blender tutorials, they will teach you everything you need to proceed.

 

The end result should now look like this:

image

 

Woot, half way there... well, a quarter...  Now render this and you should see...

image

 

Well, that’s not ideal...  two problems here... first our lighting, second, our transparent region is being rendered.  First lets fix the lighting.  When creating tiles you probably want a flat lighting.  First select the scenes default light and delete it.  Now, with no lights in the scene, we want to turn Ambient Occlusion on.  In the properties, locate the World setting then enable AO, like so:

image

 

Now when we render:

image

 

Much better.  Now we just have to sort the whole transparency thing.  Select your plane, then go to the material tab and enable transparency, then set Alpha to 0, like so:

image

 

Now switch to the texture, check alpha and set the value to 1:

image

 

And...

image

 

Perfect!  We are now at least half way there...  now lets create another tile, this one for the road.  Once again with the cursor at 0,0,0 create another plan, then move it by 2 units ( G, Y, 2 )

image

Now repeat the above process, just using the other texture instead, and our end result should look like:

image

 

Cool!  The only catch you might run into is you may have to rotate the UV 90 degrees to get the road to line up properly with the intersection. 

 

Now is where the magic of working in Blender can kick in... making our background.  Now create yet another plane object, this one 1wide, 2 high.  Most importantly, move it down the z axis a little bit, so the result should look something like this:

image

 

Now texture this new object however you wish... create your sand layer, grass layer, whatever.  Here it is with a quick grass texture applied:

image

 

Now we need to set up our camera.  There are two approaches we can take here... we can out camera to capture our entire image then split the tiles up using a tool like Imagemagick, or we can render each tile manually.  The choice is up to you. 

 

First switch your camera into Orthographic mode, with the camera selected, select the camera tab, then Orthographic:

image

 

The following settings are going to be determined by the number of tiles you have and the resolution of your map.  I will use the above example, and I want to render each plane out to 4 (2x2) tiles so our over all image is 4x2.  I am going to render out to a single image and split the tiles later.  To do this, first I went to the camera settings, and set the resolution like this:

image

 

I positioned the camera like this:

image

 

And set the camera properties accordingly:

image

 

With the Blender view in Ortho mode (5 on numpad), it should look like:

image

 

Now render, and:

untitled

 

Finally I fire up the following Imagemagick command to split the image into tiles.  As my rendered image is 1024x512, I am going to break it into 256x256 tiles:

convert -crop 256x256 tilesheet.png tiles%d.png

And now we should have 8 very game ready tiles:

tiles0tiles1tiles2tiles3tiles4tiles5tiles6tiles7

 

Very cool.

 

Now, thanks to the fact we are in 3d using Blender, we can simply change the background texture and create instead a desert background say...

image

 

Five seconds later, a new autotilable texture transition!

Video Version

Art Design


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


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List