Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
17. September 2013

 

Now that the Blender series is finally complete ( phew, that sucker got long! ) it's onwards and upwards to a new project.  This will be a closer look at LibGDX, which I suppose will be a tutorial series of sorts.  I say of sorts because I really don't know enough about LibGDX to claim any kind of mastery.  In fact, I've barely even used Java in the last decade, so I've been recently polishing up my Java skills.

 

As a direct result, you aren't going to see best practices by any means.  Sometimes though, this is ideal, as I will have gone through exactly what you are about to go through if you are starting out learning LibGDX.  There are a number of tutorials out there on LibGDX right now but I see a common complaint or comment when it comes to LibGDX… "it's too complicated".  This isn't really fair, but I can completely understand where this perception comes from.

 

On the one hand, LibGDX is somewhat complicated simply based on what it does.  Supporting a number of platforms at once is bound to be complicated.  On top of that, it is built over tools that are exceedingly complicated ( I'm look at you Google! ).  Fortunately, the LibGDX team do a wonderful job of taking care of that stuff for you, so don't let that turn you off.  Another problem with LibGDX is, it provides multiple abstractions to work with.  This means you can work as high or low level as you want.  This is great but can make things a bit confusing.  Want a camera?  Great!  LibGDX has one.  Don't want to use it?  Great!  You don't have to!  This kind of stuff though isn't clear on first approach.

 

Another problem, and I am not sure if this is Java or Java programmers, but there is a tendency to engineer everything, some could say over-engineer everything.  Proper delegation of behaviour, good OO design, etc... When it comes to tutorials, especially beginner oriented tutorials, this is a mistake.  A tutorial should be as clear and concise as possible, even if it isn't pretty.  Having users dig across a dozen classes to grok a simple concept certainly isn't conducive to learning.

 

So, that is what I intend to accomplish.  To create a beginner friendly, thorough but comprehensive tutorial series covering LibGDX.  Just be aware up front, some of my code may be ugly and some of my LibGDX usage may be less than ideal.  I am not writing it to be pretty or fast, I am writing it to be clear.  At the end of the trip though, I hope what I create is truly useful and makes LibGDX a more approachable library for game developers out there, as it truly is a great one.

 

Oh, I am also working on a game project too, very possibly using LibGDX.  Hopefully I can share details of that project as it gets further along.

 

If there is anything specific in this series you want to see covered, let me know!


16. September 2013

 

Throughout the tutorial series I intentionally stayed with a low polygon count model.  There are two reasons for this.  First, if you are using it for a real-time game instead of creating a sprite, a lower polygon count is important for performance, especially in a mobile title.  Second, it’s actually fairly simple to add detail to a model, but it’s a heck of a lot harder to take it away!

 

In this post, we are going to quickly look at ways to add detail to a model in Blender.

 

Subdivision Surface Modifier

 

One option is to apply a Subdivision Surface Modifier to your mesh.  This is a well named modifier, as it does exactly what you would think… the mesh subdivides itself, over and over until you have a smoother mesh.  Each time you subdivide it becomes smoother and the mesh becomes denser.

 

To apply a subdivision surface modifier, add it like you did the Mirror modifier:

image

 

Then in the options:

image

 

The two subdivision controls then determine how many times it will be subdivided.  View is how many times the viewport mesh ( the one you work with ) will be subdivided, while Render is the number of iterations performed at render time.  The choice between Catmull-Clark or Simple determines which sub-division algorithm will be used.

 

Here for example, are the effects of View at various values:

 

View = 0

image

View = 1

image

View = 3

image

 

The mesh is smoothed a great deal with the simple click of a button.  However, as you can notice from the wireframe, you can still edit the source wireframe.  So you work in low resolution and see the results as they will be subdivided.  On the other hand, the polygon count is taking a kicking.

 

Here is the low polygon versions stats:

image

And here is the result after we apply a 3x sub division modifier:

image

 

… so that is why we work with a low polygon version! Smile  From 514 triangles to 66548!

 

One thing to keep in mind with the subdivision modifer, it works on the entire mesh, while sometimes you may just want to subdivide parts of a mesh… don’t worry, Blenders got you covered there too!

 

There is also the Multi-Resolution modifier, which performs almost identically, but allows you to sculpt with the generated vertices.  I have never personally used it, any time I’ve sculpted, I have simply applied the Subdivision modifier before sculpting.  I suppose the Multiresolution modifier is specifically to solve that problem.

 

Subdivide/Subdivide Smooth

 

When in Edit Mesh mode, you have two other options, subdivide and subdivide smooth.

 

Simply hit W to bring up the context menu and select either Subdivide or Subdivide smooth:

image

 

This modifier will be applied to whatever you have selected.  So for example if we wanted to add detail to the cockpit area, select it and choose either:

Subdivide

image

Subdivide Smooth

image

 

Unlike using a modifier, the effect is immediate and the base mesh itself is altered.  Of course, you can also pick and choose where you want the subdivision to occur.  You can of course run it multiple times.

 

Subdivide Smooth x 3:

image

 

What about sharp edges?

 

This is the first obvious question when it comes to smoothing via subdivision.  Partially, this is why Subdivide and SubDivide smooth both exist.  However, there are ways to maintain a sharp edge after you apply subdivision to it.

 

Consider the jet intake.  We want to to stay at a nearly 90 degree angle, but here it is with a SubDivision Modifier with View=2

image

 

That’s obviously not what we want.

 

Instead, we can select both edge loops around the intake, then hit CTRL + E to bring up the Edge edit menu, then select Mark Sharp, followed by Split Edge:

image

 

And now when you apply a subD modifier:

image

 

Your flat edges stay flat.

 

You can also achieve nearly the identical effect using edge loops before applying a subdivision.  Consider the same air intake, if you want to keep the front flat, you and add two new edge loops right beside the edge you want to stay sharp.  Like so:

image

 

And now when you subdivide, you get:

image

 

 

As you can see, it’s fairly simply to add detail to an existing mesh.

Art


15. September 2013

 

We come to the end of our time with Blender!  Its finally time to turn our 3D model into pixels.  We are going to render our animation out to a series of images with transparent backgrounds.

 

You have one final decision to make.  Perspective or Orthographic projection.  So, what exactly is the difference?  Well in a nutshell, something viewed with perspective changes in size as it changes in depth.  So the further away something gets, the smaller it will be.  This is essentially how we see the world, well, unless of course you have poor depth perception that is…  In Orthographic, things are drawn at the size they are.

 

Here for example is the same frame rendered each way:

Perspective:

PerspectiveProjection

Orthographic:

OrthographicProjection

 

Generally perspective is the defacto format you would use, but when working with sprites, orthographic makes a ton of sense.  If you decide to go with Orthographic, there are a few things you need to know.

 

As you may recall, you swap between different lens modes in the camera tab:

image

 

Once you switch to Orthographic, you can no longer zoom or pan the camera.  You instead tweak it using Orthographic Scale in place of zoom, and Shift X and Y in place of panning.

image

 

Now before you render you want to make sure your lighting is set and your camera is properly framed.  We obviously want to contain our entire sprite in every frame, so that means we need to make sure our sprite is entirely within the camera shot at it’s biggest point during rotation.  In this case, that would be frames 5 or 15 in our animation.  Play to one of those two frames, then make sure the jet is entirely within the camera’s shot:

image

 

Now bring up the Render panel in the Property window.  Of key importance are the resolution and animation frame start and end.

image

 

I want my final sprite to be 192x128 in size and I want to render all 20 frames in the animation.  Be careful of the percentage value, as it will be 50% initially ( which would result in your sprite being 96x64 instead ).  If you change the ratio between the X and Y resolution, be aware the camera target rectangle will change as well.

 

Since we want our background to not render, there are a few more settings we have to make.  Scroll down and locate Shading, and set Alpha to transparent.

image

 

 

Then scroll down to Output, select a path you want to save frames to ( yes, the results can end up looking a bit strange, like mine has here, don’t worry, it will still work ) and you want to make sure whatever graphic format you go with ( like PNG here ) supports an Alpha channel, so select RGBA.

image

 

And now we are finally ready to render!  Since we want to render all the frames in our animation, click Animation.

image

 

Then navigate to the output directory and…

image

 

Wahoo!  Our animated sprites are finally done.  Now if you were to use it in a game, at the current resolution it would look like:

jetAnimated

 

Congratulations, you just modelled, textured and rendered your first game sprite in Blender!  I hope you’ve enjoyed the series!

 

I will be covered a few more topics in appendix form but that concludes the Blender portions required to make the game sprite.

 

I was going to cover creating a sprite sheet, then I realized I already had… oops.  This tutorial shows how you can create a sprite sheet from a series of images using GIMP.  This tutorial as well as this one show how to use a sprite sheet in Haxe/NME.  This one shows how to use TexturePacker to assemble your many sprites into a single sheet, as well as how to use a sprite sheet in PlayStation Mobile.  Finally this tutorial shows how to use a sprite sheet in Cocos2D HTML5.

 

So I guess I’ve already got the whole sprite sheet process covered! Winking smile

Art


14. September 2013

 

In Blender, when modelling, a world without light can be a great thing.  In a lightless scene, your model looks remarkably consistent from all angles:

image

 

That said, if you render a scene without light:

image

The results aren’t exactly brilliant!

 

The default Blender scene generally contains a single point light:

image

 

In object mode, these lights can be manipulated just like any other object in the 3D view.  Moving will effect where the light source is cast from, while the effect of scaling and rotate greatly depends on the type of light. 

 

When positioning lights, it’s often very handy to have your view set to either Texture or Rendered view.  The other view modes simply do not show the effect of the light.  Rendered view most accurately captures the effect of moving a light, but you are hugely restricted at what you can do in rendered view.  I generally use Texture view when placing lights, then flip over to rendered view while fine tuning, using a separate 3D view in textured, wireframe or solid view to position the lights.

image

 

There are a number of different light options in Blender, you can see them all via the Add->Lamp menu (why lamp???):

image

 

Here is the effect of each type, using the same scene:

 

The Scene:

image

 

Point Light:

image

 

Sun:

image

 

Spot:

image

 

Hemi:

image

 

Area:

image

 

 

With the exception of Point lights, all other lights have a direction, while a spot light also has a falloff.

 

A spot light in action

image

 

If you need to aim a light, you do it using the standard rotational tools.

 

Like the camera, there is a context sensitive control panel for controlling lights:

image

 

You can change between the various light types here.  The preview area is a sample of how the light will affect a black surface.  Each different light has a number of different settings.  For example, the Sun has options for sky and atmospheric effects, while the spot light has settings for controlling light falloff.  If you want to have a coloured light, you can do it here. 

image

 

Here, for example is the spotlight changed to red.

image

 

You can add as many lights to your scene as you want.  The actual art of getting proper lighting, well… that’s almost an entire career in and of itself!  For now a Hemi light is about as simple as it gets, so start there for now.

 

Rendering time next!


Click here for the Next Part

 

Art


14. September 2013

 

Now we are going to look at how you use the Blender camera.  If you look at your existing scene, you will probably see a camera object available somewhere:

image

 

If you want to render a scene, you need to have at least one camera.  If you don’t have a camera, no worries, they are easy enough to add, simply go to the Add menu and select camera:

image

 

Once the camera icon is selected you can perform any of the common Blender transformations on it, translate, rotate or scale.  That said, scaling simply increases the size of the icon and has no other effect.  Moving the camera will change it’s position in the world, while rotating it will change where it is pointed at.

 

You can set the current 3D view to look through the camera by pressing 0 on the numberpad.  If for some reason you don’t have a numberpad, you can in user settings enable numberpad emulation, making the top number keys work in their place.  You can also accomplish most of these tasks using the View menu in 3D View.  However you switch to camera mode, your view should change like:

image

The yellow dashed line represents the clipping area of the camera.  All of the details in the dark area are outside of the cameras field of view and wont be rendered. 

 

If you have multiple cameras in your scene, you can set the active camera by selecting the camera you want to make active in 3D view or Outliner and press CTRL + 0. 

 

I personally like to lock the camera to the view.  This can be done by clicking Lock Camera to View in the 3D View Properties panel.

 

image

 

Once the camera is the selected view ( you pressed 0 ) and Lock Camera to View is enabled, you can control it using familiar controls.  Zooming in and out is accomplished with the scroll wheel or using CTRL + MMB.  Rotating is done using the MMB and panning is down with SHIFT + MMB.  If you don’t set Lock Camera to View you either need to manipulate the camera widget in a separate 3D View, or by learning a new set of hotkeys ( mostly a combination of the normal G(rab) and R(otate) hotkeys.  Personally I find that option annoying you YMMV.

 

Of course there is one other option for setting the camera.  You can use a 3D view like normal, then when you’ve got an angle you like simply press CTRL + ALT + 0 and the camera will snap to match your current viewpoint.  This will make Camera the active view type however.  Switching out of camera view is as simple as selecting a different view, either with the numberpad or using the View menu.

 

Fine tuning the camera

 

Once you’ve got the camera selected you have a range of options available in the Properties window.  You should now see a camera tab available:

image

 

If you pull down the Camera list box, you can choose to emulate a series of existing real world camera:

image

 

Additionally, you can set depth of field or the focal point for the shot, the focal length of the lens and most importantly, toggle between perspective, orthographic or panoramic.  Personally, even though I own an DSLR camera I know almost nothing about the subject.  For you photography buffs though, I imagine you will get a great deal of enjoyment out of this.  Remember the location of the Orthographic toggle though, we will need that shortly!

 

Oh and something else I haven’t mentioned before

 

Throughout this entire tutorial series, there is a very handy window that I haven’t mentioned.  It doesn’t really belong here either, but I feel it’s something you should really know about if you don’t already, which is the Outliner I mentioned briefly above.

image

 

During modelling when we only had a single object, the Outliner utility is limited, but once we start dealing with multiple object in a scene it becomes invaluable.

image

 

This gives you a hierarchical view of your entire scene graph, including as you can see, the components that make up your objects ( such as the animations, textures and modifiers attached to our model ).  Left click an item on the left and it will become the selected item.  Right click brings up a menu of options allowing you to do such tasks as rename, delete or select that item,  As you can see in the image above, you can also make it so an item is unselectable ( except in the Outliner ), so it will be invisible during the rendering process or to hide/unhide it in the 3D view.  As your scene gets more complex, the Outliner becomes more and more handy.

 

Next up, we will take a look at lighting… almost done!


Click here for the Next Part

 

Art


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List