Novashell Game Creation System

Making The Game: Dragon Eggs: VisualProfiles and you

This continues the game we started in part 3. Or you can start from this.

If you've been diligently following the tutorials up until now (shame on you for inserting swear words everywhere in your scripts -- Nah, j/k, I do that too), you've probably had the random family member walk by and ask why the characters in your "game" are floating around like stupid looking cardboard cut-outs.

Well, I can't help the stupid looking part with my lame art skills, but I can show you how to plug in a visual profile to easily allow smooth, directional animations.

Hmm, I don't really have an appropriate animation sitting around except for.. well, sorry, but our hero will just have to become a crayon. If any artists want to help me out here please drop me a line.

First off, download this zip and place the folder "top_crayon" inside your DragonEgg/script directory.

This contains the visual profile (top_crayon.xml) and some additional directories containing the images the .xml references. I tend to use directories like this because it's more organized.

So your script dir should look like this now:

Next, modify your player.lua's OnInit() as follows:

function OnInit() //run upon initialization
	this:SetVisualProfile("top_crayon/top_crayon.xml", "top_crayon");
	this:GetBrainManager():Add("StandardBase","");
	//hint to the path-finding system that it can ignore this while computing paths if it needs to
	this:SetIsCreature(true);
end

If you play the game now, you'll be moving around a weird crayon thing. It's the same crayon from the TreeWorld test but rendered from an overhead perspective.

A Visual Profile is a group of data that described what an entity should look like in its current state and direction. If information is missing, the system guesses at the best alternative and uses that instead.

Let's take a quick look inside the top_crayon.xml file. (you can use any text editor to edit it)

The first part looks like this:

	
<profile name="top_crayon">
 
	   <anim state="idle_left" spritename="idle_left" mirrorx="no"/>
	   <anim state="idle_right" spritename="idle_left" mirrorx="yes"/>

... snipped ...

This defines the profile "top_crayon". A single .xml can hold more than one profile, and they can share animations.

The animation state "idle_left" or "idle_up_left" or "walk_left" are all pre-defined words that the engine understands so it knows which animations to play. However, you can also specify and use your own custom animations using any name you wish.

A full list of the pre-defined animation keywords the engine will check for is here.

Now, if we look at this pic I pasted earlier, you can see it's still using the collision data we assigned back when it was a tilepic. This is a bad idea, because we're not even using the original image it was attached to anymore, so there is no reason we should require that pic to be around to use its collision info.

Let's assign it a specific collision file to use. Make the following changes in your player.lua.

function OnInit() //run upon initialization
	this:SetVisualProfile("top_crayon/top_crayon.xml", "top_crayon");
	this:GetBrainManager():Add("StandardBase","");
	//hint to the path-finding system that it can ignore this while computing paths if it needs to
	this:SetIsCreature(true);
	this:LoadCollisionInfo("top_crayon/top_crayon.col");
end

Now as the player is initialized, it will try to load top_crayon/top_crayon.col - but not finding a file by that name, the engine will create a simple default collision box that will automatically be saved to top_crayon/top_crayon.col.

If you look at it (Ctrl-Q), it's in a totally wrong place. Use the collision editor to delete the old one and make a nice circle shape around the feet.

Ah, much better. You should draw the collision shape around the X thingie, which is his real position, makes pathfinding and stuff make more sense.

If we look closely, his animations don't really place in the perfect place. Instead of trying to hand edit the .xml, select the player and choose Modify Selected->Visual Alignment Editor.

You can make the animation look better by carefully changing the X/Y offset of each animation so the center point is about in the same place visually for each animation, in this case, about the center of his feet.

When you click close, the X/Y offsets are saved inside the .xml file. Note that none of this affects game logic/mechanics, only the where the visuals appear.

Now, when you play things should look pretty good. Although, the game seems harder now, because his collision box is bigger. You can scale him down a bit to make it easier, notice his collision box scales with him.

Now that we have sprites for each direction, you may want to try changing the player's turn speed in his script to something smaller, like 0.1. You'll be able to see him smoothly turning instead of instant changing directions.

Well, I guess that's the end.

Back to tutorial index