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

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! :-)