Grid Based Game Design

February 2001

Grid Based Game Design
by William Anderson

Have you ever wanted to design a game like Abe's Oddysee, Out of this World, Flashback, Blackthorn or Heart of Darkness? If so then sit back and take a wild ride with me through the wonderful world of Grid Based Design or GBD.

Just as Assembly level programming is almost a religious experience for programmers, so Grid-Based Design is to game play designers. Each is extremely tight in execution and unforgiving if done wrong. Nevertheless, GBD has many advantages over Free Flowing Design that can give greater depth to just about any story driven product.

What is GBD?

Grid Based Design or GBD is simply a system for making sure that the Player Character, Non-Player Characters, and all other elements of game play are controlled, laid out, and moved around based on a predefined screen or 3D grid. This style of design has been used for years in many award winning 2D and 3D games, and I suspect will continue to be so because of its ability to tighten up player to environment interaction.

Although GBD is being used more and more in 3D game design, for the purposes of this article and to keep it simple, I will only address GBD in 2D game play design. Many of the techniques are the same, and you can easily expand and apply the principles found in this article into your own 3D design projects.

But, before I walk you through this system, I should explain how I first learned about GBD. My learning experience demonstrates how you can easily learn from other designs and expand on it to make even better designs.

Back in the early 90s, I was working for Virgin Games as a Senior Designer when I was asked to review a game called Out of this World for possible conversion to Sega's new CD system. It was a great game but too short in play to recommend as a CD title. But being new to Virgin Games myself I was asked to prove that the game play was too short. Posing the question: "How does one prove the length of game play in a product when even the original designers never kept any notes?"

Two words: Reverse Design!

So with a video tape of me playing through the game, grid paper, and a long weekend, I walked through every element of the game and did a color story board of the design. By Monday, I proved to everyone that the game play was too short, learned a new design style, and was able to give the paper design over to the original designers who now could see where to expand on the game play.

We have seen many more games come out like that one over the years including my own contribution to the science of GBD in Abe's Oddysee and each adds one more twist to the system.

This whole design system starts with a simple screen grid template that looks something like this:

In the above grid system, the game play screen has been divided up into 17 Steps across with 5 Floor Planes, being represented by the left and right arrows. Within this simple diagram, all of the basic elements needed for player navigation are defined in space based on this grid system.

Based on this grid system, the Player Character, Non-Player Characters and all other items in the game are positioned and moved around based on this grid. This gives the designer, programmer, and artist tremendous control over knowing where the player is at any point in the game.

Why is this important?

For a character to feel like it really lives within in its environments, it must equally interact with that environment, like we do in real life. This is extremely hard to do in Free Flowing action games with no grid based controls as animations would be popping all over the place any time you needed to line up any two elements. But with a grid system, you will always know where and when the player can interact with the background or with any other character in the environment. One day 3D code and storage space may make this type of realism possible, but not yet!

How do I calculate my own grid systems?

Step 1: What screen X/Y resolution is your product shooting for? These numbers will lay the foundation for working out your grid size.

Step 2: Work with the artist to establish the best size for the Player Character. You must keep in mind that there are some trade-offs between art and game play here that you will have to work out. For example, if your character is too small then you can have more things on the screen, but you lose the ability to show a lot of detail and personality of the Player Character. But if your Player Character is too big, then you lose the flexibility of having more on-screen game play, but gain much more art and animation detail.

(No kicking, biting or clawing when deciding this issue with the art team).

Step 3: Now to figure out the number of grid steps across:

Formula: GridX = (Player Foot Width) / (Screen Width)

Remember that the Player Character's footstep width does NOT have to be the same as the total width of the Player Characters as shown in the Grid Example above, but you will need to keep this offset in mind when making door sizes, lifts, and other such navigation devices.

Step 4: Finally to figure the Y Grid size you will need to predefine or through testing define jump and climb heights. Notice that in the example given you see there are 3 jump heights defined and each will line up with the next Floor Plane up.

Also keep in mind to leave some buffer screen space at the top and bottom of the screen.

Some of the issues that might need to be resolved are Status Bars and natural Screen Cut-Off Space. And, as a basic design rule, it looks nasty to have the player head jumping off the top of the screen when on the top most platform.

With this information in hand you should be able to draw out your paper template just like the one I've shown above.

How do I lay out my own GBD maps?

Simply by placing one screen grid next to each other or above/ below the next, you can build larger environments just like you would have done with any Free Flowing game play map design.

What I like to do is simply layout my ideas out on a note pad and work out the details before I start laying them out on the grid paper. This saves me a lot of time in clean up work and makes the final design copies cleaner.

Note that if the product you are designing does not have scrolling screens then it's best not to have jumps out of one screen to the next. This would become frustrating for the player as they can't see where they are going to land.

Grid Paper recommended for maps is 8x8 squares per inch grid paper.

For Single Screen designs I like to use 6x6 squares per inch grid paper just to show more detail.

What's the best way to convert these designs into the product?

With this basic information and your designs in hand there are two ways to implement them into a product: the classic Tile Based Design system or Pre-Rendered Design.

My personal vote is for Pre-Rendered because of the true life feel you get in the background art and the newer game systems can handle load time and storage much faster than back in the old SNES/Genesis days.

However, if you're working on hand-held game systems then Tiled is the way to go!

No matter what system you decide on it won't really effect your paper designs much as they both would be laid out in the same way.

Finally, to get your designs into the game there are a number of different approaches I have used and you can decide what works best for you.

For Pre-Rendered Backgrounds:

1: With an art program that hopefully has a Grid Draw function create some basic shape templates that reflect all of the design elements you will have in your maps.

2: Draw out each screen of your design in these basic shapes.

3: Save each screen out in a format that can be loaded into the art package that your art team is working with.

4: Convert your screens in the same way the final screens would be and put them in the game.

This may require other elements such as Contours and Walls, so whatever steps you use you need to get it up and running with this basic art in the game.

"Don't ever give untested Test Levels to the art team!"

This would waste lots of time and money in unneeded revisions and make you enemy #1 with your art team.

Once you are happy with the play, then and only then, move onto Step 5.

5: Copy your maps and deliver them to the artist responsible for its creation, making sure to walk them through any and all large and small details.

At this point your art team can use your basic shapes to guide them in drawing or rendering the final backgrounds.

Don't worry if these are 3D SGI or PC Rendered backgrounds, the artist can load your screen in as a Layer and by simply placing their rendering camera out at the right position you will get great results.

For Tiled Backgrounds:

1: Like with Pre-Rendered you will create your basic template of basic shapes in what ever tool or art program you team is using.

2: With the same Tile Editor the art team is using you will lay out each of your screens.

3: Follow Steps 4-5 in the Pre-Rendered procedures.

The final note on the background art development is to not assume that the artist working on the backgrounds can read you mind. If anything is unclear on paper then it will more than likely end up in errors in the art. Work with them every day if need be and let them know that their input is important, before, during, and after the level designs are done. They need feel equal ownership in the work! Moreover, more often than not they come up with some great ideas that will also enhance game play.

Now there are many more issues that will come up when diving into this system of game play design such as Screen-to-Screen transitions, use of Lifts and Elevators and if you need me to expand on some of the subjects here or others just email me.

Bio

William Anderson is currently President of Eagle Claw, Inc. a Game Development and Consulting Company. He has been designing Interactive Entertainment products for over 20 years. Just a few of his notable accomplishments include Senior Designer on Maximo for the Sony Playstation 2, Senior Designer on the multiple award winning game Aladdin for the Sega Genesis, Designer of Cool Spot and Global Gladiators. He was also responsible for the original gameplay design for Abe's Oddysee for the Sony Playstation. You can contact Mr. Anderson at MagicByDzn@Hotmail.com.