Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
9. January 2014

 

Right off the hop for my new game I have to deal with a problem that many games have to deal with but one that could have a huge impact on how my game is structured, so I am going to address it with a proof of concept right up front.   That thing, as the title probably spoils, is character customization.

 

As I said earlier, this is a pretty common problem in games and something you see questions about quite often if you hang around game development forums for any period of time.  So what do I mean with character customization?  Ever played Diablo or a similar title?  When you change your gear in Diablo, your character is updated on screen.  This behaviour is pretty much expected in this day and age… personally I really hate when I am playing an RPG and the weapon I equip has no affect on my avatar.  That said, it is certainly a non-trivial problem and one that could have a pretty big impact on your game.

 

Let’s start by taking a look at the various options… at least the ones I can think of.

 

2D - Pre-render all possible configurations

Of course, brute forcing it is always a possibility and in a few cases may actually be ideal.  Basically for a 2D game, you simply create every combination of sprite for every combination of equipment.  So if you have an animation sequence for “walk_left” and “walk_right”, you would have to create a version for each possible equipable item.  So you might have “walk_left_with_axe” and “walk_left_with_sword” sprite sheets for the different weapon combinations.  If you are rendering your spritesheets automatically from a 3D application, this could actually be the easiest approach.  Of course there are some seriously massive downsides to this approach.  Memory usage quickly becomes outrageous.  For each piece of equipment you double the size of your original sprite sheet for example.  Once you start adding more and more options, this approach quickly becomes unfeasible.  If you only have a very small amount of customization ( two or three weapon options ), this approach may appeal due to it’s simplicity.  With anything more than a couple combinations though, this approach is pretty much useless.

 

2D – Pre-rendered spritesheet + pre-rendered weapon animation frames.

You can use a regular sprite sheet and simply keep the weapons separate.  So basically you have two separate sprite sheets, one of the character without weapons, one with just the weapons.  Then at run-time you combine them.   Consider these two sprite sheets ( taken from a StackOverflow question ).

Animated Character:

Player SpriteSheet

Weapon:

Weapon SpriteSheet

Then at run-time you combine the two sprites together depending on what is equipped.

In fact, if your weapon isn’t animated ( as in, it doesn’t move, like a sword, as opposed to a weapon like a whip or nunchucks ) you can get by using a hard point system, where you define the mount position of the weapon ( for example, the players right hand ) and orientation.  Basically for each frame of animation, you provide an x and y coordinate as well as rotation amount that represents where and how the weapon should be mounted.  Then at runtime you combine the two sprites, positioning and rotating the weapon sprite relative to the mount/hardpoint. This way, you only need a single image per equipable weapon.

This approach has a couple downsides.  First, you need a separate data file to hold mount point data and possibly a tool to generate it.  Second, it makes bounding/hit detection more difficult as the mounted weapon may exceed the dimensions of the originating sprite.  Third, you need to deal with z-depth issues, you cant simply paste the weapon on top of the sprite, as what happens when the character is walking right but carrying the weapon in the left hand?  To handle this your workflow needs to basically be: render obscured weapons, render character sprite, render foreground weapons.  Finally, weapons with their own animation, like a whip snapping, would require even more effort.

All told, this is probably the easiest while still flexible system for 2D animation.  It requires a bit more work than simply brute forcing your sprite sheets, but the payoffs in reduced size and complexity are well worth it, especially if you have more than a couple items.  One other big win about this approach is then weapons can be re-used across different sprites, a huge win!  Then you can model a single sword and it will be available to all sprite sheets with hard/mount point information available.

 

3D - Bone/hardpoint system

If your game is pure 3D this is often the way you want to go.  If you character is a knight for example, in your 3D modelling application you create named hard points in your model, either as bones or as an object of some form such as a null object, point or invisible box.  Then at runtime you bind other models to those locations.  So for example, if you equip a long sword and shield, your code searches for the “right_arm_shield” bone and uses it as the parent object for a shield 3D model.  Then you bind a sword to say… the “left_arm_hand” bone.  You can see an example of this behaviour in this UDK example.

This approach is basically identical to the last 2D method mentioned except in 3D and that you dont generally need to define your own hardpoint system, as most 3D packages and engines already support it out of the box, either by binding to a bone or by accessing and parenting 3D objects to named locations.  Like working in 2D, then your weapon and character are two separate entities, like so:

3P_Weapon_Attach.JPG

One of the major advantages of 3D over 2D is flexibility.  Most animations in 2D need to be pre-calculated, while in 3D you have a great deal more flexibility with the computer filling in the blanks for you.  Unlike in 2D, additional 3D animations add very little to the data file sizes.

 

2D Bone based animation

One of the major downsides to 2D animation is, as you add more animations, it takes up more space.  People have been working on solutions, one of the most common of which is 2D bone animation.  How exactly can you use bones on a 2D image file you ask?  That’s a good question!  In 3D, its pretty simple… the motion/influence of the bone transforms the attached geometry.  In 2D, there is no geometry, so how can you do this?

Well, the simple version is, you cut your bitmap or vector image up into body parts.  So instead of a single image of an animated character, you instead of an image for the foot, lower leg, upper leg, torso, waist, shoulder, left upper arm, etc…  Then you can draw 2D bones that control the animation of this hierarchy of images.  There are applications/libraries that support this, making it mostly transparent for you.  Here is one such example from Spine from Esoteric Software.

 

The character:

Creating Bones

 

It looks like a single image ( and you can see a couple bones being drawn in the foot/leg area ), but it is actually composed of a few dozen source images:

Set Parent

 

Basically the workflow goes, you create your traditional image in your regular art program, except instead of creating a single image, you create dozens of hopefully seamless ones representing each body part.  You stitch them together, setting the drawing order ( what’s covering what ), then define bones to create animations.  This has the double advantage of massively decreasing space requirements while simplifying the animation process.  The downsides are creating your initial image are a great deal more difficult and of course, you need to buy ( or roll your own ) bone system, such as Spine. 

 

Spine is not the only option, there is also Spriter from BrashSoftware and probably others I am unaware of.  Both of these are commercial packages, but then, both are dirt cheap ( IMHO ) with price tags between $25 and $250 dollars, with $60 and $25 dollars being the norm with each package respectively.

The nice thing about taking this segmented bone approach… you basically get the ability to swap components or bind weapons for free.

 

2.5D hybrid approach

2 1/2D is becoming more and more popular these days.  Essentially a 2.5D game is a 3D game with 2D assets ( such as 2D sprites over a 3D background ), but more commonly its 3D sprites over a 2D background.  How does this work?

Well there are two basic approaches.  You model, texture, animate your 3D model as per normal.  Any character customization you perform you would do as if you were working in full 3D.  Now is where the two different approaches vary, depending on performance, the hardware you are running on, etc…  You can either generate a sprite sheet dynamically.  Essentially when your character is loaded or you change equipment, in the background your game renders a sprite sheet of your updated character containing every animation frame, then you use this sheet as if it was a normal 2D sprite sheet.  The other option is, you render your character each time it moves.  Creating a spritesheet consumes more memory, but very little GPU or CPU demand.  Generating your characters current animation frame dynamically on the other hand, takes almost no memory, but at a much higher CPU/GPU burden.  Which is right for your game is obviously up to you.

Of course the 2.5D approach certainly has it’s share of problems too.  First off, it is the most complicated of the bunch.  Second, you cant do any “by hand” calculations on your generated sprite/spritesheets, as they are now being rendered dynamically.  This means no ability to create pre-calculated bounding volumes for example.  On the other hand, the 2.5D approach gives you most of the advantages of 3D ( compact animation data structure, easy programmable modification, ability to alter texture mapping, lighting effects, etc… ) that 3D does, but with the simplicity of dealing with a traditional 2D world.

One animation to rule them all!

You may be thinking WAHOO… I can cut my work way down now!  All I need to do is animate an attack sequence and then I can simply substitute the different weapon images.  Not so fast I am sorry to say.  Think about it this way…  are the images for swinging an AXE and a Sword the same?  What about a pole arm?  You are still going to have several different animations to support different classes of weapons, but these techniques will still vastly reduce the amount of data and work required while allowing a ton of customization.

 

 

So then, what am I going to do?

So, which approach am I taking?  Ultimately I am going to require a great deal of customization, going far beyond the examples described above.  One such example scenario is a Mech with a customizable left weapon… this weapon could be an arm holding a gun, a turret containing one or more guns, or possibly even a large pack of rockets.  Each “weapon” could have it’s own animation set.  Oh, and I am much more proficient in 3D than 2D.  On the other hand, the game itself is a 2D game and I would prefer to keep it that way for the simplicity that brings in a number of areas ( level creation tools, path-finding and other AI tasks, physics, cheating at art, etc… ).  As a result, I am going to try the 2.5D approach, where the mech is created and animated in 3D, dynamically equipped, then rendered to 2D.  I am going to try both pre-rendering sprite sheets and dynamically rendering a single frame and see what the overhead of each is.  I actually have the compounded issue of dealing with enemy characters that are also dynamically generated, so any impact will be magnified many time over!

If I can’t get adequate performance from each approach, I may be forced to go full 3D and emulating a 2D look.  As I said, it’s one of those things that can have a major impact on your game!  That said, I am pretty confident performance wont be too much of a factor.  My immediate take away task list is:

  • get a LibGDX project set up that can load and render an textured, animated 3D model exported from Blender. I am pretty new to 3D in LibGDX ( okay… completely new to it )
  • bind another model to a bone on this model ( aka, a sword to a hand bone )
  • try to dynamically generate a sprite sheet of the character’s complete animation.  Measure resulting memory usage and time required to generate sheet
  • re-architect the code to instead generate each frame of animation per frame on demand.
  • scale both scenarios up to include multiple instances and see results on performance
  • measure performance impact of each approach on both desktop and mobile.

 

The outcome of this experiment will ultimately decide what approach I take.  Stay tuned if that process sounds interesting!

 

Oh, and of course, these are only the scenarios I could come up with for dealing with dynamically equipped characters, if you have another idea, please share it!

Design Programming


1. October 2013

 

This game engine came to my attention yesterday on reddit so I took a bit of time to check it out and it has potential.

 

First off, it also has a few problems.  The installer has absolutely no feedback to say that it installed, no UI, nothing.  It left me scratching my head about what was going wrong and in the end everything was working fine behind the scenes.  It all ended up being moot though, as I never got the evaluation key I applied for anyway, so I was never able to run the local executables anyway.  This is all those teething growing pain issues and no doubt will be resolved in time.  My money says my email provider simply rejected their email… it happens.  Fortunately we can still get a pretty good look as the IDE runs in the browser as well and their is a demo on their site.

 

Speaking of which, here it is:

image

 

You can run the editor in demo mode by clicking here.  Unfortunately you can’t actually create projects this way, but it will give you an idea what SpellJS can do.  Otherwise you need a key.  There are a couple options here, free, not free and slightly more expensive.  Or more specifically:

 

image

 

 

So basically its free for non-commercial use, or 99 euro per developer if you want to make money selling your game directly.  If on the other hand you want to make money via advertising and/or make use of the analytic or cloud features it’s 239 euro per developer.  All told, fairly reasonable pricing in my opinion, but they will face the same trouble all other engine companies face…  a lot of their competition is free.

 

Then there is the matter of what platforms are supported:

image

 

That’s most of the major platforms covered with Flash support as a fallback for the non-compliant browsers out there.  The HTML5 layer is built over WebGL with fallback to Canvas/CSS3 rendering for non-compliant browsers.  The Android and iOS publishing is as native applications, not as web apps by the way, which is good as the iOS browser performance is often abysmal while Android is a mixed bag.

 

Ok, back to SpellJS…  the layout is pretty straight forward.

 

Games are laid out in terms of Scenes.  On the left hand side you’ve got the scene graph:

image

 

Right click on a scene and select Render Scene and it appears in the Scene view:

image

 

Here you can this scene in your game.  There are buttons across the top for pausing the scene and switching in and out of development mode.  Unfortunately they didn’t seem to work for me, I am not sure if this is a side effect of the editor.  SpellJS is supposed to support live editing, allowing you to change your game as you play it.

 

Across the right hand side is a context sensitive area depending on what you have otherwise selected.  This for example is what happens if you select the physics component in Update:

image

 

While if you have an entity selected, such as the HighScore, you will see:

image

 

This is where you would configure your various entities by setting the properties of attached components, or by adding new components.  Much like Unity, you can attach a series of components to your entities and multiple entities to your scene.

 

So, where the heck does code go?  That is the realm of scripts.  On the left hand panel, select Library:

image

 

And you will see the various assets that make up your game, such as graphics sounds and… scripts.

image

 

Here for example is the script showFinish showing in the in IDE editor:

image

 

The editor supports code folding, syntax highlighting but unfortunately doesn't seem to support code completion.

 

Scripts arent your only option, if you look the various systems that compose the update group, if you right click demo_asteroids.system.shoot and select show for example, the code that composes the system will be shown in the editor.

image

 

image

 

On other big question is… how is the documentation?  Quite good actually.  There is a Getting Started guide, a half a dozen tutorials and a fairly comprehensive, if a little sparse, reference guide.  One annoyance is, each click opens in a new tab, leading to tons of tabs to be closed.

 

image

 

All told, this looks like a very polished product and if you like working in JavaScript is certainly worth checking out.  Should my product key ever arrive and my calendar opens up a bit, I will take a closer look.  You can check them out at SpellJs.com.

Programming


28. September 2013

image

There are a new set of coordinated releases to the Cocos2d-x family of game development libraries and tools.  The changes include:

 

CocosStudio

  • UI editor for UI graphic artists
  • Animation editor for graphic artists
  • Data editor for game data designers
  • Scene editor for game designers

 

 

Cocos2d-html5

  • Improved Sprite, Node, LabelTTF class, now it is clean and clear
  • Added a new sample game Fruit Attack which works great on PC browsers, mobile browsers, and can even be run natively as an android and iOS app with JSB
  • Replaced cc.Sprite and its subclasses's texture from DOM element to cc.Texture2D on Canvas mode,
  • Improved cc.Texture2d. Now you don't need to wait for loading resources when creating a new scene or layers. Textures will pop up when they are loaded
  • Improved the update function of Actions. Now Action objects use less temporary objects, making it better for GC performance.
  • Improved LabelTTF rendering pipeline. Now it caches the result which is 100% faster on mobile browser
  • Fixed API compatibility between Cocos2d-html5 and JSB: cc.ParticleSystemQuad has merged intocc.ParticleSystem. For more info, please read Upgrade guide v2.1.5 to v2.2
  • Added Auto Hiding url address bar for mobile browsers. Please refer to the template and the Hello World for examples
  • Added frame event, collider and blend type supporting for Armature. Now Armature supports 2 tools: 1.CocoStudio, 2.DragonBones
  • Set auto render mode $Default value$ to canvas for mobile browsers and WebGL for desktop browsers

 

Cocos2d-x

  • Initial version of Windows8 and WinPhone8 port
  • Supported the first stable version of CocoStudio v1.0.0.0
  • Added CocoStudio GUI
  • Almost no differnce between JSB and cocos2d-html5 v2.2
  • Lua binding supports CCTableView and CCScrollView

 

 

The Cocos2d-html5 project also released a new sample game, Fruit Attack:

FruitAttackGame

 

You can play it in your browser here.

 

You can read the official announcement here.  Or head on over here to download.

News


11. September 2013

 

Now we are going to export our texture so we can edit it in an external image editor.

 

First in the image editor, make sure Mode is set to View.  ( We changed it to paint in the last section ).

 

In UV Window, Select Image-> Save As Image

image

 

Pick a filename and location and then click Save As Image:

image

 

Now we can export the UV layout to help us with the painting.

 

In 3D View, switch to edit mode and select All ( A ).

In the UV window select the UV menu, then Export UV Layout:

image

 

Once again, pick a directory and location for the saved image file.  I personally went with ReferenceImages5UVLayout.png.

 

Now load your exported texture file in your image editor of choice.  You have the option of registering a program that will be opened by Blender automatically if you prefer, then you can simply select Image->Edit Externally.  For now we will simply open it manually.

 

In this case I am going to use the GIMP as the editor.  The GIMP is a freely available 2D graphics package.

 

Here is our texture loaded in GIMP. 

image

 

Now let’s load the UV Layout.  In the GIMP select File->Open As Layers

image

 

Select the file you saved the UV layout to.  Now it should appear like so in GIMP:

image

 

Now we draw the additional texture details on our texture.  Just be certain you have the right layer selected when you edit:

 

image

 

Drawing textures is an art in and of itself that I can’t cover here.  Frankly, I am not very good at it either.  Now I add some graphical details to the image and end up with something like this:

 

Untitled 3 2 (6)

 

… yeah, I’m no artist!  Don’t worry though, in sprite sheet form it will look just fine.  Just make sure when you export the image from your image editor, the reference layer ( the wireframe ) isn’t visible.

 

Once you are done editing your texture, assuming you didn’t change the location or filename, in the UV/Image Editor window, simply select Image->Reload Image or press Alt + R.  If you did change the file name, instead select Image->Replace.  Keep in mind you also have to change the texture name in the Texture panel if you renamed it.

 

image

 

As a 3D model though, it could certainly use a bit of work.  It’s a matter of adding more details to the texture, as well as implementing normal maps to give it some depth, something we will hopefully talk about later.  You can also greatly improve rendering with various texturing modes ( specular, bump, etc ) which only will work within Blender.  ( Wont work when exported to a game engine ).  This is also something we will hopefully talk about in more detail later.  Texturing adds a hell of a lot to your models quality, so it’s certainly a skill you should take some time to develop ( unlike me! Smile )

 

image

 

 

Tips

Often you will find yourself working in the UV Window and wanting to figure out just what @#[email protected]$#ing Polygons you are working on.  Fortunately there is an easy way to do this.  In the UV window, make sure you are in View ( as opposed to Paint ) mode.  Then click the Keep UV and edit mode mesh selection in sync icon:

image

 

Now you can select stuff in the UV window:

image

And in the 3D View, the corresponding items will be selected.

image

 

 

Another thing you might have noticed is how incredibly annoying the layout is to paint on.  The UVs are set how Blender thinks they fit best, not necisarrily how you think they should be arranged to paint on.  You can however move the UVs however you want.  Unfortunately every single time you Unwrap again, the UV layout changes you have made will be reset.

 

Say for example we want to paint our cockpit in it’s natural direction.  We could then move the cockpit UVs into a position that is more appropriate to painting ( using G(rab), R(otate) and S(cale) like normal 3D editing ).  Like I’ve done here by moving them to the right and rotating 90 degrees:

image

 

This will be a great deal easier to paint.  Unfortunately if we go to 3D View and choose Unwrap:

image

 

Well, that’s annoying!  Fortunately there is a solution.  If you want to have a custom UV layout, you need to “Pin” them in place.  Then when the model is Unwrapped again, Blender knows where to put it.

 

Select the outermost two vertices and press P to pin them in place.  The selected value will turn red(ish) when selected, like so:

image

 

Now the next time you Unwrap the texture, these UVs will be pinned in place.  Of course, you could just select and Pin all vertices in place, but you are greatly handicapping Blender’s ability to deal with UV map changes.  Keep in mind too that adding a Seam will automatically cause an Unwrap. 

 

Final tip.  Notice the ugly line across the tail of the plane?

image

What causes this?  It’s the texture seem.  Basically make sure the edges of your textures where you cut a seam have a matching seamless colouring on both sides, or you will end up with an ugly artefact like this.  A few seconds with a Blur brush would solve this problem.

 

The astute eyed may also notice that the text is mirrored on the mirrored half of the model:

image

 

This is a side effect of using the mirrored modifier.  You’ve got a few options here.  1 – apply the modifier, to form a single mesh and texture each side manually ( nah! ).  2- Switch to a symmetric number like 808  3- live with it.  I’ve chosen 3.

 

Next up we will look at animation.


Click here for the Next Part

 

Art


9. September 2013

 

First, let me start by saying this step is completely optional!  Blender has integrated texture painting functionality, but if you prefer to work entirely in a 2D application like GIMP or Photoshop, that is completely your option.  That said, Blender’s painting abilities are pretty solid and are a great way to block in colours rapidly. 

 

You enter Texture Painting mode the same way you enter Object or Edit mode, in 3D view.  Just pull down the mode dropdown and select Texture Paint.

image

 

Once in Texture Paint mode, hit T to open up the Tools panel.

 

Clicking the Brush icon allows you to select between the various brushes:

image

 

While the controls right below the brush allow you to select the active color, set the brush strength, radius and blending mode ( as in colour blending ):

image

 

 

There is a ton more functionality in there, such as painting with a texture pattern, changing brush stroke styles, etc… but we will just be using the painting tools to block in our basic colours.  Most jets have a grey on grey camouflage colour and that’s what we are going to go with here. 

 

Let’s start with our base color, from the colour picker, select a light grey colour.  Then set the radius to a large value and keep strength at 1 ( full ).  Like so:

image

 

Now you should see a very large circle over the cursor in 3D View.  This represents the radius of the brush.  Left clicking will paint with the current brush:

image

 

Now, let’s look at something rather cool.  As you paint in the 3D View, it will automatically update in the UV window:

image

 

Even cooler, you can paint in the UV window and it will update in the 3D view.  To paint in 2D in the UV window, simply click the Mode dropdown at the bottom of the UV/Image Editor window and select Paint.

image

 

Now you can paint in the UV window!  Keep in mind though, colour and brush selections are still done from the Tools panel of the 3D view.

 

Now I am just going to paint the entire Jet in our light grey colour.  Keep in mind you will have to rotate and zoom the camera around to get in every nook and cranny while painting.  Fortunately you can easily see from the UV windows if you missed a spot.  You of course could just paint in the 2D layer, but then you don’t get nice crisp edges in the texture map.

 

Here is the fully painted jet:

image

 

Next I simply vary the grey-ness of the brush and randomly layer colours to get a gray on gray camo pattern.  I then pick a slightly darker gray and colour in the cockpit area.

 

image

 

That’s it for painting in Blender.  Next up we will finish the details of our texture in an external 2D graphics package.


Click here for the Next Part

 

Art


GFS On YouTube

See More Tutorials on DevGa.me!

Month List