Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

11. February 2016

 

I have to say, I just came across this custom branch of Blender and it’s astonishingly good.  In addition to a number of improvements to viewport lighting, this Blender branch actually brings PBR (Physically Based Rendering) to the Blender viewport.  To really appreciate what has been accomplished here, you really need to check out the video.

Blender PBR viewport Branch v0.2 from Clément FOUCAULT on Vimeo.

You can also see a direct before and after shot below!

This is truly some impressive work. It is available on the Author's website. By the way, he is looking for work in the GameDev field... someone hire this guy!

GameDev News, Art

1. February 2016

 

PBR, Physically-Based Rendering, is the new hotness in the CG world, especially with the increasing popular of Substance Painter.  The end result of that process is a number of textures specifically for channels such as Roughness, Metallic, etc.  Taking the results from Substance to Blender however hasn’t always been the easiest.  Now there exists a plugin for easily consuming PBR textures in Blender using the Cycles renderer.

From the product page:

Easy PBR right inside Cycles!

With the rise of PBR in the AAA game industry and Allegorithmic’s wildly popular Substance toolset, it’s about time someone created a simple solution for implementing PBR textures inside of Blender. Finally, no more fiddling for hours with material nodes trying to vaguely make something that looks good. Now there’s one solution that gets it right every time and in every lighting condition! Liberate yourself as an artist to focus on your art!

Plug and Done!

Based on a PBR Metal/Rough workflow, all you have to do is import your textures, plug them in, and you’re ready to go! This node group supports maps for:

  • Base Colour (Albedo, Diffuse…)
  • Ambient Occlusion
  • Roughness
  • Metallic
  • Normal
  • Emission


It adds a new shader node to Blender that makes it easy to wire up the appropriate maps:

Substance_PBR.blend

While not free, it does cost less than 5$.

Art, GameDev News

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

Month List

Popular Comments

PlayStation Mobile Development Cookbook is now on Safari Books Online
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


2. April 2013

 

As of this morning, my book is now available on Safari Books Online.

 

image

 

I find this personally very exciting, as I am an avid Safari subscriber, as you may have noticed from the Safari links in all my prior book related posts! Smile

 

If you’ve never heard of Safari, it’s an online library subscription.  You pay a monthly fee and get access to over 10,000 books, all indexed and searchable.  There are also iOS and Android applications for reading books, including the ability to take up to 3 books offline at a time.

 

The PlayStation Mobile Development Cookbook was also added to Chapters/Indigo as a Kobo e-book as well as Barnes and Noble in print form.

 

While I was on Safari, looking at the new additions, I noticed another book I’ve had my eye on was released.  Developing Mobile Games with Moai ( Amazon Link ), which is the first book dedicated to Moai related development.  I have done a Moai tutorial series here on GameFromScratch.com, if you want a closer look at Moai.  It’s a very cool technology in desperate need of more documentation, so a book is certainly welcome.  I am going to have to take a closer look at this book when time permits.

General ,

blog comments powered by Disqus

Month List

Popular Comments