Blog for GamerGirl at GarageGames.com

How to create a pre-rendered background for use with the Adventure Kit

GamerGirl — 2007-01-05T07:28:14+00:00

I realized today that you could use the Adventure Kit along with a pre-rendered background and get a similar effect to Baldur's Gate. Here's a tutorial on what I found out through experimentation (including work on a project years ago with pre-rendered backgrounds). There may be easier ways to do some of this--if so, don't hesitate to let me know and save me some work. ;-)

This tutorial assumes you're using 3D software and Photoshop. It is easiest with a 3D app that supports isometric cameras. If your 3D app doesn't let you simply set a camera to be isometric, you'll have to research that part and get it figured out before you start the tutorial.

The goal of the first few steps is to set the image resolution for your entire project. The key to making your life easier with pre-rendered backgrounds is to always have everything at the same visual size or scale. That means you don't want to create your camera settings based on a single room, then move the camera back to fit an entire house, because that will make your characters and all of the objects visually smaller in the image. The easiest solution is to figure out the largest scene you'll ever want in an entire level, then determine the image resolution based on what gives you the figure size you want on screen. It sounds wackier than it really is, trust me. :-)

Think about the kind of game you're making. How big do you expect a single level to get? Do you want large outdoor areas, like Baldur's Gate? Here's a comparison of two Baldur's gate levels: one outdoor, and one indoor. Both are at the same scale, so you can see the difference in the amount of "turf" in each level.

Also think about how large you want your character on screen when the app is running full-screen. It can help to find a game you like, get a screen shot of it, make sure it's the resolution you want for your app, then keep it open in Photoshop for comparison.

1) In the 3D app, insert a plane or a flattened cube as the ground. Insert a figure at a scale that makes sense to you (like height = 2 meters, or 6 feet, etc.) at 0,0. Insert a camera and set it to "isometric" mode. Make sure one of your windows is set to look through the camera's POV (that's what you'll be rendering.

2) Make the ground cube as large in proportion to your figure as you think you might want to have in a level. If it helps, you can add rudimentary trees or something the height of a building, to get a sense for how the space works. Here's a shot from my setup to show the relative scales of the figure (red) and the ground (grey) that I settled on.

3) Once you like the size of your figure versus the environment, you can pick your resolution. You want to work in multiples of 256, because you'll be cutting the large images into 256X256 cubes when you bring them into TGB. How large you need the resolution depends on how big your ground is. It's hard to have any real sense of it when you look at your scene in the 3D app (at least, it is for me). What I do is render the scene at a resolution I think will work, then open the image in Photoshop and view it at 100%. If you want to be *really* thorough, reduce the canvas size (with the figure still at the center) to whatever your final app resolution is, and take a look at how the figure fits on the screen. Once you have the resolution you want, resize the ground and figure together to create the right size for your character on screen. Again, rendering then checking at 100% is the best way to do this.

I used 5120 X 5120, and here's a shot of how big my sample character would be full screen at 1024X768.

4) Once you like the resolution, lock the camera so you can never accidently move or alter it, and save that file as a template. You'll begin every level in that template, at 0,0 then save under a new name to leave your template pristine.

Before the next step, I created a simple room out of blocks. Here's a shot of the room as it sits in the full image resolution. Note that there is a lot of leftover space--that's OK, because it's the amount of space I need for larger levels, and I'm going to throw away the parts of this image that are not required.

5) With either the sample image or any image at your final resolution, create guides at every 256 pixels starting at zero. You can create a new guide by choosing View/New Guide. You're going to create vertical and horizontal guides every 256 pixels to cover the whole image. When you're done, choose View/Lock Guides so you can't accidently move them. Here's how my guides looked when I was done.

6) Save the file as something like Guides Template, because now you have a template that has the guides already set for your final image resolution, and you'll never have to do that again. :-)

7) Open up your working version (i.e. not the template). Click on the slice tool.

8) With the slice tool selected, choose Slices From Guides (a button that should be in the toolbar along the top of the window). That will slice your background image along the guides you set.

9) Choose File/Save for Web. You may get a message that Photoshop will behave slowly on an image this size, but that's OK because even if it's slow, it's saving you a lot of time.

10) Imageready will open, with your image in it. You may have to zoom way out to see the entire image. Once you zoom out, select all the slices by dragging across all of the slices. When you have a slice selected, it will not have the blue tint over it, but will show its normal colors (kind of the opposite of what you might expect). Here's what my image looked like in Imageready with all of the slices selected.

11) Change the preset on the right to PNG-24 instead of GIF, then click the Save button. Choose Images Only from the pull-down, then save. Let Imageready work at it for a few seconds, and when you check the folder where you saved, you will see a bunch of .png files created from your guides and slices.

12) Weed out all the blank images. For my image, I had only 14 images to use and I pitched the rest. Sure, I rendered out a bunch of blank space. On the other hand, I now have a setup that means I can render any level in my game without moving the camera or resizing any images, and all of my guides are already set up correctly. For example, I accidentally rendered my room with the figure in it. Oops! It took me literally 3 minutes to turn a new render without the figure into the final set of slices ready for TGB, because I simply pasted the new render into the template, sliced on the guides, exported, and tossed the blanks.

13) Fire up TGB and add the slices that make up your level as imagemaps.

14) Add a new tilemap that is roughly the same proportion to the camera view as your huge render is to the final app resolution. I took a 1024 X 768 image and pasted it into the full image so I would have a good idea what the proportion would be. We want the tilemap to be roughly the same proportion as the big image because we're going to use this image map as a template too, and copy and paste it for all future tilemaps. This ensures all future tilemaps will always have the same scale.

The white square in this image is 1024X768 laid over my full image resolution.

15) Set the tilemap to however many grid squares you made with your guides. Mine was 20 X 20. Change the tile size to whatever makes your tile array fit the tilemap size.

16) Zoom back in and paint the tiles from your test room onto the tilemap. You'll get a good sense of how your tilemap is sized based on how those tiles fit onto the screen. I ended up adding a single small black image to put into the spaces that are blank, so you can scroll around and not hit the end of the tilemap.

Here's how the experiment looks with the TGB Adventure Kit orc running around in it. He's not a good fit either in size or rendering angle, but he'll be replaced with a new character soon enough. Render out some of the items that need to be parsed for depth (like the walls), add some collision according to the guidelines in the Adventure Kit, and you're in business! :-)

Rough character portraits

GamerGirl — 2006-12-28T20:47:05+00:00

This is an image of the main character in the game, Sara.

And this her friend, Aron.

I was working on the characters about a year ago, and rendered this out to remind me of where I was with them when I left off. The game I'm planning will have character portraits, although I'd like a less photo-real look. My next development step is to work with the tiles in the Adventure Kit, and try to define the exact look I'm going for in the world. That will help determine the final rendering style for the character portraits.

Getting a Poser character into the Adventure Kit

GamerGirl — 2006-12-28T05:24:36+00:00

I've been lurking here at GarageGames as an owner of both TGE and TGB, but never posted a blog entry... mostly because I wasn't sure what I could talk about that would be useful. I never had time to get very far into a project because I was in one mad crunch after at work.

I'm starting a new project in TGB, which has come a long way since the Early Adopter version I bought when it first became available. I'm trying to find my way around as a newbie, so I figured I would blog about some of my discoveries in case they help other folks who are just starting out. For you experts, it may seem like trivial stuff, but it's not that obvious when you're just starting out in TGB (and you're not much of a programmer). There are also probably easier ways to do some of this, so let me know and I'll keep this updated so it's useful.

GETTING A POSER CHARACTER INTO THE ADVENTURE KIT
Uses TGB, Adventure Kit, Poser 6, and Photoshop

1) Take a single frame of one of the orc animations (I used the run east) and save it out as a jpg. You can resize it to 2X or 3X to make it a bit easier in Poser. You can find these in the TorqueGameBuilderPro\games\resources\AdventureKitArt\sprites folder.

2) In Poser, choose File/Import/Background Picture and import the orc frame you saved out. If it asks you to resize the main window, let it resize. Your main view window should look something like this.

3) Select the Front camera from the Camera Controls.

3) On the parameters panel, set the Front camera to the settings below. This gets the camera roughly in the right position, in a view with no perspective.

4) Put a figure into the scene. I used Jesse Casual for the first test, because it's easier to tell which leg is in front, etc. when the figure has clothes on.

5) Choose Body for Figure 1 from the pull-downs on top of the view window, then set its parameters to match the ones below. This puts the figure in the right position relative to the camera, and turns it to face east (which matches the orc, if you used an eastern-facing pose for your background). Note that the orc is broader and shorter than the Poser male, so there will be a bit of difference in how they look.

6) Put whatever animation you would like onto the character, but don't change his translation. He will be moved through code.

7) Choose Render Settings... from the Render menu. Set the first tab (Render Settings) to whatever style you want.

8) Go to the second tab, Movie Settings, and use the settings below. Note that the Every Nth Frame setting of 3 works only if your animation has 30 frames in it. The goal is to have 10 total frames, so TOTAL FRAMES / X = 10 gives you your Every Nth Frame setting (the X in the equation).

9) Render the movie and it will save a series of PNG files with no background... which is just what we want, except as separate frames.

10) In Photoshop, open the orc animation file that matches the animation you just made. For me, it was the orc forward east animation filmstrip.

12) Open the 10 frames you rendered from Poser. It helps if you arrange them in numerical order, since they will come in out of order (for example, file 12 opens before file 1).

13) Starting with the first frame of your Poser animation, with the Move tool (see below), drag the Poser animation frame onto the orc animation frame, lining it up with the orc.

14) Continue to drag and drop each frame of the Poser animation onto the orc animation. Note that each drag and drop produces a new layer.

15) When all frames have been added, select all but the last (orc) layer in the layer window. With the move tool still selected, choose center align vertical and center distribute horizontal from the tool bar to line the animations up.

16) Hide the last layer (the orc) by clicking on the eye icon to its left.

17) Save the file. I usually save it as a layered PSD first, then do a Save As to generate the PNG.

18) Open TGB, and make a new project using the Adventure Kit template.

19) Add the new .png as an imagemap, choose CELL as the type with the spacing of 10 horizontal and 1 vertical. That should break it up into cells of 165 X 165.

20) Create a new animation using that imagemap. Click Use All Frames and it makes it right away. Remember the name you used for it. I just substituted "man" for "orc" to make it easier.

There is probably an easier and neater way to do these next steps, but here is what I did.

21) Open the managed/datablocks.cs file for your project, and the resourceDatabase.cs file from the resources/AdventureKitArt folder. Find the datablock in resourceDatabase.cs that matches the animation you did. For example, if you created a new forward east animation, you would find the datablock that starts with

new t2dAnimationDatablock(orc_forward_east_anim)"

.

22) Copy the entire line that starts with "dir" for that animation. For the forward east animation, it would be

dir = "1 0";

.

23) In the datablocks.cs file, find the new datablock created for your animation. At the end of that datablock, paste in the line you copied that starts with "dir." That sets the direction for the animation so the app will use the correct one.

24) Close and save the datablocks.cs file.

25) Open the /gameScripts/orcAnimSets.cs file, and find the orc animation that matches the animation you changed. Since I'm working with the forward east animation, this is the block that applies to me:

if ( !isObject( OrcRunAnims ) )
{
   new SimSet( OrcRunAnims );
   OrcRunAnims.add( orc_forward_northAnimation );

etc.

26) Change the name of the anim you made to match the datablock you set up in TGB. For me, that line was OrcRunAnims.add( man_forward_eastAnimation );

When you start TGB again, load your project, then load and play the start level, you will see your new animation replacing the old one!

A better way to handle those last few steps would be to create a new AnimSets file for your new character, but this gets the animation into the game ASAP. Since you saved the PSD file, it's easy to go back and tweak the placement of any of the frames to make it line up better. Just save the .png over the old one, and you're in business.