Thursday, January 28, 2016

Level 2 - From Design to Game ( Full Version )

Originally Written by George Tsouris as a four-part series.

Mike created an application, Give Up Games Tile Editor, that allows you to paint a level in 2D, as if you were looking down at the level (bird's eye view). This means that on a 2D plane that looks like graph paper, Mike was able to color in the squares to create a layout for the level. The first image above is the screenshot of Give Up Games Tile Editor, after Mike designed the level.

Give Up Games Tile Editor supports unlimited layers, so you can paint the floor on a separate layer than the walls. You see that in the image because each layer has different colors. The screenshot above shows a zoomed in image of the factory area of the level. Different elements of the factory area are on different layers in the Give Up Games Tile Editor, so they are represented by different colors.

That is, on one layer in Give Up Games Tile Editor, Mike would lay out the floor (the dark brown area). Then he would create another layer to make the surrounding walls (the light blue area). In order to add a little variety to the level, he also created other floors (beige for the outside hallway, orange for a mezzanine, and salmon for the vent pipes) that would be elevated, the stairs to get to those elevated floors (the green stairs to the mezzanine), and a few other obstacles to throw in for fun (light brown for machines, teal for boxes, and red for conveyor belts). Each of these items would be on a different layer in Give Up Games Tile Editor. (The big blue blob with a red square was an area that  got left out of the game.) The hall-like area to the right of the factory doesn't have a floor, but has several boxes where the player has to jump in order to navigate safely. That became the furnace corridor.

Below is an image of the final version of the factory area, and it might make more sense.

When the two images are compared, you can see that the salmon colored area in Give Up Games Tile Editor is actually the pipe that the character has to run through, and the beige colored area is the hall where the pipe ends up. The dark brown is the factory floor, and you can see the other obstacles as well.

Here are some details about how the graph-paper illustration Mike designed turns into a level.

Let's start with the level design application, Give Up Games Tile Editor.

First, Give Up Games Tile Editor converts the 2D pixels from the graph-paper scene to 3D geometry objects, based on the layers, and exports the geometry into the Give Up Games Scene Designer. As you see below, Give Up Games Tile Editor exports each of the layers as a separate object, but they all have the same height. Here is an image of what the whole level looks like when it is exported from the level designer to the Scene Designer

As you can see, this doesn't look much like a playable level. Everything is the same height, so basically all we have so far is a large floor.

However, because each layer is exported as its own object, it is easy to fix this problem. Once the objects are in the Scene Designer, Mike can select the walls and scale them vertically, giving them height, so they look like real walls. He can also position multiple floors to create multi-level structures, and move, rotate, or scale any other objects as is necessary. Therefore, certain changes can still be made   to the design at this step of the process.

This looks more like a level that a player can run around.

The Scene Designer can export these manipulated 3D levels into .fbx files that can be read into Maya, and edited further, or used as a guide to building a level.

Mike developed the Give Up Games Scene Designer so that objects can be exported from the Scene Designer into .fbx files, which can then be imported into Maya to finalize.

Because the Scene Designer, and the level designer only, ultimately, export boxes, there is a lot of tedious resolution that needs to be cleaned up. The first time that I actually saw the whole level in this fashion, I couldn't really read it, or make sense of what I was looking at. You can see from the wire frame, and the shaded images here, that without knowing anything previously, it was difficult for me to make sense of the design.

However, after talking to Mike, and a few modifications to Give Up Games Tile Editor, I was finally able to see the level for what it was. (The first thing I had to do was take out the ceilings so that they didn't obscure the view.

I had to edits or re-build the level and make the art assets to be used in the game. Because there are so many boxes from the Tile Editor, these boxes had to be combined. Further, whereas boxes have six sides, walls in game levels don't need all of these sides, so they had to be deleted to make the level more efficient. In a couple of cases, the actual geometry generated from the Give Up Games Tile Editor is actually used in the final game for the physics.

Because of the nature of the factory level, this is one of the levels where Give Up Games Tile Editor geometry was very helpful, and could even be used to prototype, built on top of, and stylized. This is because Level 2 is very much a man-made construction. However, in a more organic level, like Level 1 or Level 3, very little of the original prototype geometry would be used. (The pipe area of Level 2 is a good example of where the shape of boxes was changed to create a more interesting shape than simple boxes.)

Later, in order to make the level run more efficient in the Give Up Game Engine, I had to break out each of the separate areas in the level so that they could be turned off when the player does not see the area.

I hope the reader can see how the Give Up Games Tile Editor application that Mike created has been very useful in level design. It has increased the speed at which we can prototype levels, see what works and what doesn't, and make quick changes before a lot of time is spent to finalize a level. Theoretically, a game creator can actually make a game without too much talent with 3D applications, only using Give Up Games Tile Editor. Here is one example of how Mike prototyped the factory level without the use of Maya. (Of course, the characters that he's shooting were created in Maya.) This is an early version of the factory level, and it was changed based on playing through this prototype, and figuring out a design that we liked best.

As you can see, Mike created the Tile Editor so that simple tileable textures can be applied to the objects in the level. Here is an early version of the first level, almost completely created in the Tile Editor, where we could run through the level, and see how it feels. Again, there are only a few props that were already made that he used, but for the most part, the level is created in the Tile Editor. 

No comments:

Post a Comment