Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


Home > Art >

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 , ,

blog comments powered by Disqus

Month List

Popular Comments

Further adventures in Appcelerator: Getting it to run in an existing emulator
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


21. March 2012

 

 

As my journey with Appcelerator continues, I’ve run into another annoyance, and the fix wasn’t immediately obvious.  Titanium Studio ships with an Android 2.2 image pre-configured, although I am trying to develop for Ice Cream Sandwich ( Android 4 ).  The problem is, every time I launch my application, it would ignore the running emulator ( launched using AVD Manager ) and launch it’s own. This is really irritating, as the Android emulator takes forever to load.  ( About a minute for 2.2, and well over 5-10 minutes for ICS, on an i7 machine with 12GB of RAM! ) to say nothing of the fact their emulator image is for a phone, not a tablet.

 

 

It seemed no matter what I did, it would still load a new instance of the emulator, regardless to if I had one running already.  The answer isn’t as intuitive as you would think.  My first thought was it would be under Debug Configurations, which can be accessed by right clicking tiapp.xml in your project, choosing Debug As –> Debug Configurations…  which brings up the screen below:

 

 

image

 

 

 

Ah, this looks promising, change Android API level to Android 4.0, click Apply then debug.   Still loads the pre-configured 2.2 emulator. Sad smile  Ok, so that wasn’t it.

 

 

In the end, it comes down to how you build your project.  In Project or Package Explorer, double click tiapp.xml to bring the property editor up.  Search for the “Deployment Targets” section, then click the configure link, like this:

 

 

image

 

 

In the dialog that pops up, there is a selection for “Default Android SDK:”.  This is the value you need to change:

 

image

 

 

Now I click debug and behold!  Ice Cream Sandwich goodness!

 

image

 

 

 

Well… that was intuitive.  Not really something you can blame Appcelerator for, nor Titanium Studio ( although again Eclipse/Google Android tools make things far too complicated! ) in the end.  That said, if I could debug on a physical device, I wouldn’t have to deal with the terrible Android emulator in the first place!

 

 

Anyways, finally after a few days of messing about with configuration and install issues, finally, time for some coding!

General

blog comments powered by Disqus

Month List

Popular Comments