Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
6. September 2016

 

There is an entire area of 3D modelling known as architectural visualization, or ArchViz for short, that have long been used by architects to help design buildings and help customers visualize the end result.  Many major CAD packages have archviz functionality built in, but Blender is not one of them, or at least wasn’t.  With the upcoming Blender 2.78 release, there is a plugin called Archimesh that brings much of this capability to Blender.  So… why should you care as a game developer?  As you will see shortly, this can also be used to help rapidly prototype 3D game levels as well.  So without further ado, let’s jump right in.

 

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

 

Getting Started

 

As of writing, the Archimesh plugin isn’t available in the normal Blender distribution.  If by the time you are reading this you are using Blender 2.78 or later you should be good to go.  If not, you will need to download the most recent test release available here.

 

Next you need to enable the plugin.  With Blender loaded select File->User Preferences or hit Ctrl Alt U.

Select the Add-Ons tab

image

 

In the search field type arc

image

 

Click the checkbox beside Add Mesh: Archimesh.

image

 

If you dont want to do this every time be sure to Save User Settings before closing the preferences window:

image

 

We are now ready to make use of Archimesh.  Feel free to close the settings window.

 

Designing A Room

 

Now that we have the plugin enabled, let’s get started.  First let’s get started by drawing some walls.  This is done easily enough using the grease pencil.  In the 3d view (I’m using top view), draw the room outline.  ( D + LMB + Draw ), like so:

image

 

Now in the Tools ( T hotkey ) menu, locate the Archimesh tab:

image

Scroll to the bottom of the tab and locate the Room from Draw button.

image

 

You’ve also got the option to have it generate a Ceiling, Floor and to close the room in ( close any gap in your drawing with a wall ) or not.  I selected Floor then clicked the button.  Here is the result:

image

 

Now in the properties (N) panel you can make tweaks to your generated room.

image

 

Here you can set the thickness of generated walls and you can also add or remove the floor and ceiling after the fact.   Here i’ve set the wall thickness to 0.120.  This is required so we can add doors and windows later.

image

 

You can modify each individual wall, including curving it, raising it to a peak, changing the length, etc.

image

 

And the results of these various settings:

wall

 

Creating your room is that simple.  Now we can refine our room.

 

Adding Detail

So rapidly creating walls and floors is certainly nice, but a little dull no?  Well don’t worry, that’s not the extent of Archimesh’s functionality.  If you take a look in the tools panel you will notice several other options.

image

 

Let’s go ahead and add a door.  Place the cursor where you want the door to be created.  This pivot point is relative to the bottom of the door, so place it low near the floor and along a wall, like so:

image

 

Now you can either add the door using the button in the Tool menu, or via the Shift + A hotkey, then Mesh->Archimesh->Door:

image

 

Tada, a door.

image

 

You will notice there are several options and styles to choose from in the Properties panel:

image

 

These settings appear to only be available on creation however, so be sure you have the door configured in a way you like before moving or modifying it.  Windows can be created using the exact same process.

image

 

Once you are done however there is one last step to perform.  You basically have to “Cut” the window and door from the room.  Don’t worry, it’s easy.  In the Tools panel, with the Room selected, select the Auto Holes button.

image

 

Now the appropriate holes will be cut into the wall.  You will also notice that the mesh hierarchy has changed as well:

image

 

And essentially that’s the process in a nutshell.  There are other very cool features in here, such as Stair creation:

StairGif

 

There is also the option to show detailed measurements, automatically create roofs, built in props like lamps and book shelves and more.

At the end of the way, it’s just creating mesh objects for you too, so you can quickly jump in adding details using traditional techniques like extruding.   There are some missing features.  Ways to link multiple rooms together easily, the ability to create interior walls automatically, but these are easily worked around. 

 

The Video

Art Design


29. June 2016

 

Welcome to a new tutorial series here on GameFromScratch.com where we will be looking at core concepts of game programming.  This includes data structures, design patterns and algorithms commonly used in game development.  We start the series off with Finite State Machines.

 

There is an HD video version of this tutorial available here and embedded below.

 

What is a Finite State Machine?

 

A Finite State Machine (or FSM for short) is one of those concepts that sounds much scarier than it actually is.  In the simplest form it’s a datatype that can have only one value (state) from a finite selection of values(states).  The easiest way is to understand the finite state machine is to look at a real world example.

 

trafficLight

 

Yep, a traffic light is a perfect example of a FSM, or at least, the logic controlling it is.  Consider the three possible states this particular traffic light can be in.  At any given point (assuming I suppose the power is working...) the light will be one of three states, red, yellow or green.  It can never been more than one of those states at a time, it’s always red or yellow or green.  These are the two keep concepts of a finite state machine.  There are a finite number of states ( 3 in this case ) and only one is true or active at a time.

 

It’s a very simple concept, but extremely useful in game development.

 

What are FSMs Used For?

 

In game development, one of the most common uses for finite state machines is artificial intelligence.  Consider the example of PacMan’s ghosts.  A state machine can be used to control how they behave.  A ghost may have one of several different operating modes for example waiting to be released, hunting, hunted and dead.  The state machine is what is used to drive the ghost’s actions and to switch between states.  You will find AI examples absolutely loaded with state machines, often with some fuzzy logic controlling the transition between states to give a layer of unpredictability to your characters.

AI isn’t the only place of course, think of all the different things in a game that are related, there are multiple different states they can be in, but only one can be active at a time.  Game states are a very common example, where you break your game up into a series of states, for example Loading, Main Menu, Playing, High Score, Exiting.  Many game engines ( one such example is Phaser ) split your game up into a series of states.  The ultimate controller of these states is a finite state machine.  A sequential UI ( think of a sequence of dialogs controlled by next/back buttons ) can also be implemented using FSMs.  They are also commonly used to control elements in a games world.  Consider a game with a weather system, be it day or night cycles or season cycles like Spring, Summer, etc...  these would most likely be controlled via FSMs.

 

Implementing a Finite State Machine

 

The example we are going to use here is to implement a traffic light via FSM.  At it’s core the data is going to be stored in an enum, a natural fit for state machines, but stack based or array based options are also viable.  This example is not only going to switch the traffic lights periodically, it’s also going to implement callbacks so the world at large can interact with the light.  This example is implemented using C#, but should be easily adapted to most modern programming languages.

 

using System;

namespace GameFromScratchDemo
{

    public class TrafficLight{
        // This enum represents the three possible values our state machine can 
        be
        public enum States { Green, Yellow, Red };    
        // This is the amount of time for the timer to wait before changing 
        between states
        private const int LIGHT_DURATION = 5000;

        // An actual instance of our enum.
        private States _state;

        // The timer object that is going to be used to switch between states 
        private System.Threading.Timer _timer;

        // This function is called by the timer when it's time for a light to 
        change
        public void lightChanged(){
            System.Console.WriteLine("Light Changed");
            
            //  For each state, move to the next appropriate state.  I.e, red 
            becomes green, etc. 
            switch(_state){
                case States.Green:
                _state = States.Yellow;
                break;

                case States.Yellow:
                _state = States.Red;
                break;

                case States.Red:
                _state = States.Green;
                break;
            }

            // Reset our timer, so this will all happen again and again
            _timer.Change(LIGHT_DURATION,System.Threading.Timeout.Infinite);

            // Call our event.  This is used to communicate with the outside 
            world that our state change occured
            onStateChange(_state);
        }

        // In our constructor we simply set out default state (green) and 
        create/start our timer
        public TrafficLight() {
            _state = States.Green;
            System.Console.WriteLine("Light Created with initial Green state");

            _timer = new System.Threading.Timer( _ => lightChanged(), null, 
            LIGHT_DURATION,
                System.Threading.Timeout.Infinite);
        }

        // these two work together to provide the callback functionality
        // Implementing callback is going to differ greatly from langauge to 
        language
        public delegate void StateChangedResult(States newState);
        public event StateChangedResult onStateChange;
    }

    // Our actual program.  Simply create a traffic light instance
    // Register a callback that will simply print the current state returned 
    when the light state changes
    // And finally wait for the user to hit enter before ending the program
    public class Program
    {
        public static void Main(string[] args)
        {
            TrafficLight light = new TrafficLight();
            light.onStateChange += (TrafficLight.States state) => { Console.
            WriteLine(state); };
            Console.ReadLine();
        }
       
    }
}

The example is pretty well documented in the code above.  Essentially we are creating a class TrafficLight that can internally have one of three states Green, Yellow or Red.  It also implements a timer that switches between those states.  To make the code actually useful, it also implements a callback system so code external to the TrafficLight can interact with it as a black box.  The callback will be passed the current state value every time the light changes.

 

This is obviously a simple example of a state machine but the same basic premise remains regardless to complexity.  It is a very useful data structure for organizing code, especially the flow of logic.  Coupled with callbacks, it is also a great way of keeping systems decoupled as much as possible.

 

The Video

Programming Design


15. March 2016

 

Nevigo have updated and changed the pricing for articy:draft, including a new subscription pricing option.  articy:draft can be thought of as a project management and design solution specifically for game development, a sort of mashup between MS Project and Viseo, but geared towards game development.ad

Details on the new subscription model called FLEX pricing:

Finally the time has come: We roll out the FLEX license subscription model for all versions of articy:draft. This new license eliminates the initial costs of using articy:draft and gives you maximum flexibility to scale your team up and down. It is an additional licensing option, the purchase option is still available as well.

  • Use articy:draft for a low monthly rate
  • Subscriptions may be cancelled monthly
  • Purchased and rented licenses can be mixed
  • All updates and upgrades included

Additionally they have made changes to the existing licensing model:

We did some spring cleaning to our pricing model to make it easier and more transparent. The different server tiers and upgrade costs are gone, and the core products all come at the same price. Effectively, this leads to a price drop in many cases, especially when scaling up your previously “indie”-sized studio.

  • One price for articy:draft, the API and articy:access
  • Floating licenses available
  • Unified shop experience for single and multi user
  • Simplified costs when adding more licenses

They also added some hosting services and training options.  Full details are available here.

GameDev News Design


8. March 2016

 

A new version of the popular open source Tiled Map Editor was released today, Tiled 0.15.2.  Unless you happen to be Portuguese or Turkish (who received new translations in this update), there isn’t really a ton new in this release:

 

This small patch release ships with added Turkish translation and an updated Brazilian Portuguese translation! There are also some fixes, though they are more on the cosmetic side.

  • Added Turkish translation (by Nuri Uzunoğlu)
  • Fixed hiding of object labels when deleting an object layer
  • Fixed updating of object label colors when changing object types
  • TMX: Added image size attributes to image layer images
  • Updated Brazilian Portuguese translation (by Laete Meireles)

The Tiled itch.io page3 has been updated with the new download links.

In the meantime, many features have been added on the development branch during January and February. And since editing of external tilesets1 is becoming a huge change, I plan to make a Tiled 0.16 release available in the coming weeks, so stay tuned!

 

If you are interested in learning more about Tiled, we have done an in-depth tutorial series here on GameFromScratch, that should get you up and running with ease.

GameDev News Design


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


GFS On YouTube

See More Tutorials on DevGa.me!

Month List