Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
16. August 2013

 

Now we are going to continue adding details.  Frankly the only reason for Part 2 and Part 3 being separate is space, the process continues and remains nearly identical.  This is also the part that requires the most artistic ability, having an eye for where to add detail and where not to.  In the end, we will mostly be using the same basic tools, extrudes and edge loops.

 

Adding the Air Intake

Let’s start off by adding the air intake.  We want to start here because we have a single face to work with, which wont be true in a few minutes.  Ideally you want to sketch in the major details before you start adding a bunch of geometry.

Select the polygon at the front and to the over from the cockpit.

This guy:

image

 

Press I to inset the face, then move the mouse until its set in about 15%, left click when done, like so:

image

 

EDIT: Oops, I totally forgot to extrude the intake at this stage… see “Fixing my Oops” later on to see the step.  You could have done it before adding the wing and it would be marginally easier. In the end, the results are exactly the same.  If you are wondering… why didn’t he?  It was mostly because I forgot to do it at the time, and it would change all of the geometry in the screen shots so I’ve just gone with an edit instead.

 

Adding the Wings

 

Now we want to add the front and rear wings ( well, rear stabilizer to be more correct ) to the plane.  This is accomplished with a series of loop cuts.

We want to apply two cuts down the side for the top and bottom of our wings.  Here they are in the side view in X-Ray (Z) mode.

image

 

Or slightly easier to see selected at an angle:

image

 

Now add a vertical edge loop at the front and back of both the forward and rear wings, like so:

image

 

Now before we create our wing, we want to flatten/straighten the polygons that make up our wing.  This part may seem a bit unintuitive, but it is handy.  First you need to select the faces you want to align:

image

 

Now switch from Global to Normal mode.  This makes the X,Y,Z values become relative to the selected face, not global values.

image

 

Now we want to Scale to 0 along the X axis.  ( Press S then Z then 0 ) then left click to apply.  It should before perfectly flat, but a bit off.

image

 

NOW SWITCH BACK TO Global! And rotate about the Z axis ( R then Z ) until its back in line with the rest of the mesh.  Then Translate along the X ( G then X then move mouse ) axis until the faces are budging slightly out from the side, like so:

image

 

 

With the faces still selected, press extrude and pull the wing out to roughly match the reference image:

image

 

Now using a combination of transforms, scales and rotations, move the wing to match the reference image.  I also thinned the wing slightly by bringing the bottom edges of the wing up toward the top edges.  In the end it should look like:

 

image

 

image

 

Now we repeat the same process for the rear wing.  Fortunately it’s a single polygon right now, so we don't need to flatten it, simply extrude it and move to match the reference image.

 

image

 

 

Fixing my oops…

 

At this point I noticed I forgot a step back when I created the intake.  Keep in mind, this would better be done at the stage when the air intake was a single face ( before we did a number of loop cuts ).  We can however fix it now.  The end result is identical.

Grab the face/faces that make up the inside of the air intake we modelled earlier:

image

The only real difference is, now  there are three faces, while if you performed this before the edge loops where added for the wings, there would have been only one face to work with.

Extrude these faces ( E ) and pull it back within the mesh. 

image

 

Move and scale as required to keep it somewhat centered within the rest of the tail geometry.  In the end, the intake should look like:

image

 

Ok… mistake corrected, now lets create the tail section.

 

Creating the tail.

First create a pair of loop cuts along the tail, like so:

image

 

Now selected the following faces:

image

 

And in the side view, extrude along the Z axis, like so:

image

 

Now in edge mode, move the top most edges to look like this:

image

 

Creating the tail wing

Finally, lets create the tail wing.

 

First select this face:

image

 

 

Extrude it inward along the X axis ( E then X ) like so:

image

 

Since we are modelling about the origin, I switch to Vertex mode and select each vertex of the face, and in the Properties(N) window, set the X value to 0.  As you can see, the wing joins up perfectly with the mirrored image:

image

 

At this point our jet is starting to look much more jet like

image

 

Most of the shape is there now, just need to shape the cockpit and engine, then its mostly a matter of cleaning up.


Click here for the Next Part


Art


15. August 2013

 

In this part of the tutorial we are going to start modelling the outline of our jet model.  It all starts with a box and involves only a handful of operations.  You may have noticed up until now, all of the various top view reference images I’ve created have only been half of the jet sprite.  This is because we the jet sprite is symmetrically identical, in that the left and right side of the image are identical.  As a lazy guy, if I can do half the work, I do half the work! 

 

Setting up for mirrored modelling.

 

First thing we want to do is create a cube (Add->Mesh->Cube) at the origin.  It’s important to be exactly at the origin to start.  You can position it numerically in the Properties panel:

image

Make sure X, Y and Z coordinates are all at zero.

Now go into Edit mode, and in the top view, insert an edge loop directly at the center.  ( Ctrl + R, then accept(Enter) the initial position, it will already be centered. )  If done right, it will look like this:

image

 

 

In vertex mode, make sure you have nothing selected ( A ), then select the vertices on the side that has no reference image.  One important concept to be aware of is how selection works.  By default, if you select multiple vertices, it will only select the visible ones.  In this case, when in the top view, the front vertices obscure the back vertices.  Here we want to select all vertices, not just the visible ones.  When you aren’t in X-Ray mode ( Z ), you can change the way selection works using this button:

image

 

 

Now select the right most vertices and delete ( X ) and select Vertices from the menu:

image

 

You should now be left with:

image

 

Now we want to apply a mirror modifier.  First we want to make sure that the pivot is also at the origin.  You can also do this in the 3D View Properties ( N ) panel.  Please not, this isn’t specifically required, I have however found the process goes much smoother if you model about the origin.

image

 

Switch out of Edit mode to Object mode and make sure your Cube is selected.

Now in the (other… yeah, it’s confusing ) Properties Window ( this guy image), select Modifiers.

Now drop down the Add Modifier combo and select Mirror:

image

 

Now in the settings for the Mirror, enable Clipping, which will keep edits from crossing the mirror line.  In other words, you wont be able to move a vertices across the mirrored axis, creating screwy geometry.

image

 

If everything went correctly, you should see:

image

 

Now that the Mirror modifier is applied, now if you make changes to the geometry, it is mirrored, like so:

image

 

Woot!  Half the work from this point on!

 

Basics of Box Modelling

 

Now we are going to start roughing in the shape of our jet, using basically two tools, extrude and insert edge loops.

 



There are a couple things to keep in mind when modelling.

1- keep it simple stupid (KISS).  In this case though, that means something different.  It’s very easy to add detail later, but can be incredibly tricky to take it away.

2- prefer quads.  It’s a lot like rule one.  You can easily turn a quad into a triangle by cutting it in half, but the opposite isn’t true.  It’s easy to sub-divide a quad surface and the results are more reliable.  Since BMesh was added to Blender, you’ve got the option of creating > 4 sided polygons and it can be a huge time saver, but it can also result in some strange artefacts when you render or smooth your mesh.  Keep in mind in the end whether you render or export to a game engine, they all get turned into triangles in the end.  So the thing you model with ngons still needs to be able to be turned into triangles.

3- edge loops.  It’s all about edge loops.  Edge loops enable you to make huge changes to large amounts of geometry in one fell swoop.  The also cleanly define the contours of your mesh, pay attention to them!  If you haven’t got a clue what an edge loop is, read this.  If you have a choice between keeping it simple, or keeping your edge loop clean, keep your edge loops clean, especially if you aren’t doing low polygon work.

 



Ok, let’s get started.

First lets move our newly mirrored box forward toward where the cockpit starts to slop down and move the outer back vertices in toward the center to for the general outline of the cockpit area back to the engine.  Like this:

image

 

 

Now we are going to rough in the front of the plane.  Select the front most face, then extrude slightly along the Y axis ( E then Y ).  Do this three times, like this:

 

image

 

 

Now move the individual vertices to roughly match the background in the top and side view, somewhat like this:

image

 

Now we are starting to get a bit more jet-like.  OK, not really, but it aint just a cube now!

 

Now lets add a pair of loop cuts (Ctrl + R, left click then slide and enter when done) , like so:

image

And

image

 

Now switch from Vertices to Face (Ctrl + 3) editing mode and extrude ( E then Z ) along the Z axis our two of the top polygons to make our cockpit.  Like so:

image

 

Now we rough in the intake area/side tail.  Select these two polygons:

image

 

Extrude ever so slightly along the X axis:

image

 

Now select the front most edge of our newly extruded faces and rotate it along the X ( R then X ) axis to roughly parallel the front intake, like so:

(Of course, you could have simply edited the vertices too…)

image

 

Now move the vertices of our newly created and freshly rotated face to mostly match the reference image:

image

 

Next extrude those faces one more time, like this:

image

 

At this point, slide the vertices around in the top view to more accurately match the reference image, then select the back most face in our newest created geometry:

image

 

And extrude it back like so:

image

 

And move edges/vertices around to match the background a bit closer, and we have:

image

 

We certainly aren’t there yet, but it looks a bit more jet like at least!



Click here for the Next Part


Art


8. August 2013

 

In the previous post, we looked at creating a simple design concept for our game jet sprite.  Now we are going to start modelling our jet using Blender.

 

Of course, I cannot teach Blender in a single post.  Fortunately I have already covered modelling in Blender in a prior tutorial series.

 

Programmer Art: Blender for Programmers

 

If you already have experience with Blender, EXCELLENT!  Jump right in.  If however you haven’t much/any experience with Blender, I will assume you have gone through all of the above tutorials.  So instead of saying "Press X to delete the faces” I will simple say “delete the face”.  Dont worry, just keep the Quick Reference open in another tab and you should be OK.  If a concept is new or not covered in the above tutorials, I will go into a bit more detail.

 

In the design area, we created a top and side profile of our image, now if trimmed them down to two separate images, side and top.

 

Side.png

Side

 

Top.png

top

 

We are going to use these as modelling aids in Blender.

 

Setting up a background image in Blender.

 

Load up Blender, delete the default cube, then switch to Top view in 3D View.  Make sure you are in Orthographic view mode ( 5 on the number pad ).

Bring up the properties window ( N ) then locate Background Images and enable it:

image

 

Then click Add Image.  The dialog will expand with more options.

Click the Axis pulldown and select Z Axis Top, like so:

image

 

Click the Open button and find your top reference image.

image

 

Your Blender should now look something like this:

image

 

In the Properties window, near the bottom of the Background Image panel, you should see a manipulator for X and Y. 

image

 

Move the image along the X axis so it’s aligned with the Y axis in your top view, like so:

image

 

Now repeat the same process for side image.  It is exactly the same process.  Click Add Image, and another image will be available in the panel.  This time select axis as X Left and obviously use the side reference image instead.  If you have done it successfully, your Left view (Ctrl + 3 on numpad ) should look like this:

 

image

 

Now we want to make sure the two views are somewhat the same size in both the left and top views.  The way I do this is to simply create a cube the length of the reference image in the side view ( Add cube, S)cale + Y ), like so:

image

 

Then switch into Top View:

image

 

Hmmmm… this isn’t right… our top reference image is far too big ( or I suppose, the side image is far too small… ).

 

It’s a simple enough fix.  In the properties window, where we adjusted the X position earlier, there is also a setting for size.

image

 

Adjust the size and position of the background image until it matches the dimensions of your cube.  Be sure to use the proper dimensions, as there will be a set of controls for each the top and side background images.  IF you need to see through the CUBE texture while adjusting, hit the Z key to enable XRay mode.  When you are done, your top view should look like:

image

 

Perfect.  We now have two perfectly calibrated background images to work with.  Now delete the rectangle, we no longer need it.

 

OK, that section got a bit picture heavy, so I will end this part here so page load times don’t become insane.


Click here for the Next Part


Art


7. August 2013

 

This isn’t an area I spend a ton of time on, as I haven’t got much talent for drawing.  That said, if I just fire up Blender and start modelling I tend to be a lot slower then if I nail down the basics of my concept, at least the proportions and overall shape, before even beginning to model.

 

In this case my concept was pretty simple… I want to make a jet that is a throwback to classic planes of old like the twin tailed Lockheed P38 Lightning or the DeHavilland Vampire, except with wing mounted engines like the Me-262.  However, I want it to appear near-future modern, like a contemporary of the F22 Raptor or F35 Lightning II.

 

For non plane buffs, I basically want:

 

This (P38):

p38

 

Or This (Vampire):

Vamp

 

With engines like these (Me-262):

me262

 

But more modern/futuristic, like this ( F22 ):

f22

 

 

Got it?  So basically I want a retro style twin tailed jet that looks futuristic.

 

So, time for some doodling!  I have a tendency to start with something really quick, break it down into individual pieces and go from there.  This way I get mostly the correct perspective, but I can work on smaller details instead of big picture… I can also quickly decide what works and what doesn’t.

 

For this, I worked entirely on my iPad Mini using a 5 dollar stylus and the application iDraw, which is a vector based graphic suite for iOS and MacOS.  Obviously any sketching app would work, as would paper if you have access to a scanner or digital camera.

 

Here is my first brain dump of the concept, side and top view:

1

 

I'm relatively happy with the top view, but hate the under-wing engine and am not a fan at all of the side profile.  I am thinking wingmounted engines don't work too well with the look I am shooting for here.

 

Instead I am going to switch to a single jet engine, like the Vampire pictured above.  Let’s clean up the tail section a bit and move to a single centrally mounted engine, again top and side view:

2

 

OK, I'm pretty happy with that look over all, now I’m going to look at the top and wing layout.  I start with:

3

 

Not really a fan.  Doesn’t make a ton of sense for the wing to extend out in front of the air intake.  Instead I decide to extend the air intake forward quite a bit, like so:

4

 

I like the overall shape better, it’s starting to look more modern, but I am still not a fan of the cockpit, nor have I nailed down the side profile yet.

 

On to the side profile.  I start with a quick sketch of the side, now using the forward wing, air intake and single engine. 

5

 

I did a quick sketch in black and it’s too fat and not very modern.  Drew over it in red more to my liking.

 

Now it’s a matter of figuring out the cockpit I am still not happy with, as well as the front view.

6

 

Started with a 3/4 view of the cockpit area, a rough front sketch, then a slightly cleaner one.  Over all, I’m pretty happy with the front profile.

 

So, I’ve got my basic design down, now the most important part, as a modelling aid and so I get the proportions generally right, I trace over the side and top view of my design using the line tool and end up with this:

7

 

The basic outline for the side and top profile of our jet.  I am certainly going to win no awards for artistic talent, but it should be sufficient for my needs and over all, I’m fairly pleased with the design concept.

 

You will see how we use it in the next part when we fire up Blender.

Art Design


7. August 2013

 

I am about to create a game sprite for my own use and I figured I would document the process.  I am going to make an animated jet sprite and ultimately output a multi-frame single sprite sheet ready for use in a game.

 

Through the process I (may) cover:

  • Concept design ( as far as I do it anyway… )
  • Modeling it in Blender ( probably over multiple parts )
  • Texture painting in Blender
  • Texture finishing in GIMP or another image manipulation program
  • Animation ( maybe, might be overkill ) in Blender
  • Rendering in Blender
  • Making a sprite sheet, probably using TexturePacker
  • Using the sprite sheet in code (maybe ), probably using Haxe/OpenFL/Some Haxe Library, but subject to change.

 

Basically if I need to do it, I will document the process.

 

Keep in mind… I am a programmer who dabbles in art, and it shows!  We are just one step up from programmer art here, but the process is pretty much the same, you just need to add a bit more talent and patience. I am certainly not recommending anyone follow my work process, but it may give you some ideas.  Worst case scenario, it may just give you a good laugh!

 

Hope you enjoy.

News Art


GFS On YouTube

See More Tutorials on DevGa.me!

Month List