Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
24. January 2017

 

Are you perhaps… artistically challenged?  This tutorial will give you passable 8-bit or 16-bit style pixel art results with a minimum of artistic ability.  Of course it assumes you know a bit about Blender, but dont worry if you don’t.  We have a pair of ground up tutorial series that will0001-0060 teach you everything you need to know to follow along, this Blender text tutorial series and this Blender video tutorial series.  Alright, let’s jump right in.  We are going to use a combination of vertex painting, cycles renderer and freestyle in Blender to create an image like the one to the right.  Not the most impressive thing you’ve ever seen I’m sure… but it was exceptionally easy.

 

 

Without further ado, let’s jump in.  For this example I am not going to model the sprite, if you are interested in seeing that process, watch the full video.  Instead we start with a simple model like the following:

image

 

Now let’s look at first colouring it, then cartoon rendering it and finally how to render it in pixel art style.

 

Vertex Painting The Object

First we start off by painting our surface.  The nice thing about Vertex Painting is it draws the colour information directly on the model, so you dont need to worry about UV maps or textures at all.  We just published a video on Vertex Painting in Blender if you want more details.  In the end we are going to use the Cycles renderer, but for now it’s easier to get started painting using the built in default Blender renderer.  This will enable us to easily see the painted vertices in the Blender viewport.  In the default material make sure that Vertex Color Paint is enabled:

image

 

Now it’s time to start filling out our different colors.  In Edit mode, simply select the faces you want to be a specific colour, like I have done here for the cockpit area:

image

 

Now switch over to Vertex Paint Mode:

image

 

Now select “Face Selection Masking For Painting”

image

 

This limits your painting to the faces currently selected in edit mode.  In the Tools menu ( T ), select the color you want to paint with.

image

 

Now hit SHIFT + K to fill the selection with the current colour, like so:

image

 

Now repeat this process for the rest of the ship.

 

Toon Shading In Cycles

Now that you’ve got your ship coloured, it’s time to switch over to the cycles renderer.  If using a default layout, simply select Cycles Render in the dropdown:

image

 

With the change to Cycles Render, we should now have a new option in the Materials dialog

image

 

Click Use Nodes.  Then select Toon BSDF.

image

 

Out of the box Vertex Colors aren't going to work in Cycles, we need to make a simple shader graph to get things to work.  Don’t worry… it’s super easy.  When you do a vertex paint, the data is stored in the mesh data, like so:

image

 

That “Col” data is about to become very useful.  Switch to Node Editor

image

 

Now what we want to do is add an Attribute input and wire it into the Color field of our Toon shader, like so:

image

 

Notice the name “Col”.  This is the link back to our vertex color data.  This causes the Toon shader to use the painted vertex colors as it’s color source.  If you do a render now, it should look something like…

image

 

Better, but still quite fugly…

 

Using Freestyle

Now to get a bit of a more hand-drawn effect, we want to enable freestyle in the Blender renderer:

image

 

Notice I increased the Line Thickness a fair bit from the default… this is a personal choice.  It’s possible you don’t like the default lines it chose to highlight, but don't worry, you can control that if you prefer.  Simply go to Edit Mode, select the edge you want Freestyle to render, select Ctrl+E then Mark Freestyle Edge:

image

 

Now in the Render Layers property panel, locate the Free Style Line Set, then enable Edge Mark.

image

 

Now when we render, it should look like:

image

 

Ok, that looks a bit better!  Now how about that Pixel art look?

 

Compositor Time

The compositor is a process that runs AFTER the image is rendered and can be used to create all kinds of special effects.  In this case we are going to pixelate the result.  In the Renderer dialog, make sure under Post Processing, that Compositing is enabled.

image

 

Now, back in Node Editor, switch to Compositor mode:

image

 

Now we want to edit our graph like so:

image

 

Essentially we take our input Render Layers, scale down the resulting image to 1/5th its size, apply the Pixelate filter, then scale it back to it’s regular size and finally send it to the Composite output.  Now let’s render and see what we’ve got:

image

 

TADA!  Pixel art in just 20 easy steps.  Granted, at that size it doesn’t look great, but at actual game scale:

image

 

It looks pretty solid… for a purple, yellow and emerald model that is!  You can download the Blend used in this example here.

 

The Video

Art


13. October 2016

 

In the recent release of Blender 2.78 Blender received a new feature that’s quite cool, B-Bones or Bendy Bones.  This post is going to take a look at how you can use this new bone option.  So what exactly is a b-bone?  Simply put, it’s a new bone type in Blender that allows itself to be subdivided and bend as a smooth spline instead of as a single entity.  This enables you to use fewer bones to control curved meshes such as a tail or eyebrow.  Don’t worry, it will all make sense in a second.

 

Let’s first take a look at a regular bone and a b-bone side by side:

GIF

 

The bendy bone on the right still only uses two bones in the armature, but the b-bone has additional detail enabling a smoother bend and tighter controls.  Now let’s look at how you use Bendy bones in the first place.  At this point I am going to assume you already know how to use bones in Blender.  If you don’t be sure to check out either this tutorial on animation in Blender.

 

To use Bendy Bones, create an armature like normal.  Then head over to the armature tab:

image

 

Now under display make sure B-Bones is selected:

image

 

Now you can control each individual bone in the Bones section:

image

 

Segments determines how many sub-divisions occur within the bone:

GIF2

 

The remaining controls enable you fine tune control over the spline controlling the sub bones.

 

Using Curve, Roll, Scale and Easing, we’ve got fine tune control over the way the individual bendy bones perform.

Gif4

 

Bendy Bones are a (pun intended) flexible way of adding detail to bending bones without having to create several more bones.  There is a catch however!  Outside of Blender most game engines are going to have no idea what a Bendy bone is.  For example, you can see (by the pinching) that the Bendy Bone is ignored completely once imported into Unity.

gif3

 

It would be awesome if they added the ability to export B-Bones that automatically split into multiple bones.  The only alternative is to get B-Bones support added to the various game engines, a much less likely result.

 

If you want more information on the math behind Bendy Bones, be sure to check out this very technical post.

 

Video Version

 

Art


3. October 2016

 

It’s been quite a wait, but Blender 2.78 is finally here and it brings us all kinds of great new features.  There are new add-ons, render for VR functionality, viewport performance improvements, freehand curves on surfaces, new B-Bones and a great deal more in this release.splash_2x

 

From the release announcement:

The Blender Foundation and online developer community are proud to present Blender 2.78, released September 30th 2016! This release aims to be a very stable one, so that developers can focus better on Blender 2.8 work. Here are some of the highlights:

  • Spherical Stereo images rendering support for VR
  • Grease Pencil is now a full 2D drawing & animation tool!
  • Viewport Rendering improvements
  • New Freehand curves drawing over surfaces!
  • Bendy Bones, powerful new options for B-Bones
  • Alembic support: import/export basic operators
  • Cloth Physics: new Dynamic Base Mesh and Simulation Speed option
  • New Add-ons, individual preferences, Python APIs changes, and a lot of new & updated add-ons!
  • Many more features, improvements and the usual huge bug-fixes list

 

 

You can read more about this release here, there is a ton more to this release than the list above.  I took a look at using one of the new plug-ins, Archimesh, for level design last month.  You can check that out here or embedded below.

GameDev News


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


25. July 2016

 

BDX can best be though of as a mashup between Blender and LibGDX, a game engine built on top of the LibGDX framework, directly integrated inside the Blender application.  This enables you to create levels directly in Blender and take advantage of Blender features such as physics, but code your game using Java and LibGDX.  I took a look at a very early version of the engine available here and it’s come a long way since.

 

Version 0.25 is primarily a bug fix release, but brings some new features to the table.  From the /r/gamedev announcement:

 

  • Render-to-texture is now supported.
  • GameObjects can now be invisible on select cameras, simply by adding a reference to the GameObject to the camera's "ignoreObjects" list. This, when combined with render-to-texture support, allows for some nice shader effects.
  • Texture loading and texture switching on Materials is now supported.
  • A new Mesh class has been added, allowing you to easily alter vertex information for GameObjects' meshes.
  • Fog / mist is now fully supported.
  • Support for a Viewport has been added to allow you to tweak how your game scales onscreen.
  • Many bug-fixes, and other tiny added features.

For more detail, see the commit log over on GitHub.

 

It’s a cool engine, one I highly recommend you check out if Blender is core to your workflow.

GameDev News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List