Skip to main content

skip to main content

developerWorks  >  Linux  >

Using SDL, Part 3: Graphic design

Story development and graphic design in "Pirates Ho!"

developerWorks
Document options

Document options requiring JavaScript are not displayed


Rate this page

Help us improve this content


Level: Introductory

Sam Lantinga, Lead programmer, Loki Entertainment Software
Lauren MacDonell, Technical writer, Loki Entertainment Software

01 Apr 2000

Sam Lantinga and Lauren MacDonell are now developing the story and graphic design of "Pirates Ho!" -- a swashbuckling, role-playing game for Linux that they are creating from scratch. In this installment of their diary, the authors describe the story development process and their sources of inspiration. They also explain in detail how they design the images used in the game.

A good game consists of the story and the artwork. We believe some games require a better story than others. In constructing our story, we relied on a particular development formula and our imagination. The artwork is also a combination of working with technology and using the creative process.

The importance of a good story

Some gamers say it's the action that makes a game good. Others say it's the complexity and realism of the graphics. In the case of "Pirates Ho!" the definitive element of the game is the story.

Why put so much energy into the story? First of all, "Pirates Ho!" is an adventure game, so by definition the action in the game revolves around the story line. If we were working on an arcade-style game instead, we could get away with limiting the action to fighting bad guys and amassing treasure. But building the role-playing element we want in our game requires a strong story line as a basis for character development and interaction.

We've also found from experience that there are a lot of good combat and strategy games out there but few good role-playing games. That makes sense, considering the time, energy, and creativity involved in formulating a good story. But it's unfortunate for those of us who enjoy a good story in addition to combat and strategy. So we decided to develop all of these elements to the greatest extent possible. By including well-developed story lines in addition to exciting combat and challenging strategic components, we hope to enrich the experience for our players.

Finally, we want "Pirates Ho!" to appeal to a wide audience. We have a number of avid readers and moviegoers for friends who are not gamers but have said that they're excited and intrigued by the possibility of playing out a great adventure story. We hope that the combination of strategy, combat, and role-playing in "Pirates Ho!" will appeal to hard-core gamers and non-gamers alike.



Back to top


The story development process

In some circumstances story development is a purely creative process rather than a technical one. However, in the case of "Pirates Ho!" we faced a variety of technical issues in developing our story.

The programming technology posed one technical issue. We can't set up scenarios for our players that our game engine won't support. For example, we can't write large-scale sea battles directly into the game because the tactical combat system we're developing can only handle realistic and detailed combat between a few ships at a time. It would therefore not be advisable to develop plotlines involving large-scale political conflicts and other global events. Fortunately, focusing on individual character interaction and small-scale combat still leaves more than enough material for a great story.

The development of our story was also a technical process in the sense that we systematically and deliberately chose the elements we used. Instead of just including any old thing that struck us as interesting or funny, we tried to create the right mix of elements to encourage character development and interaction, to keep the pace of the game moving, and to keep players interested in what's going to happen next. We tried to create story lines that allow players ample opportunity to interact with the game environment and that make it easy for them to develop and improve their characters.

Making up the details of the game world was an integral part of the story development. We sketched out the social and cultural forces at work in order to give ourselves a context for developing the plotlines. We agreed that our world should include magical items, places, and creatures, as well as people who use magic. But we haven't decided yet how widespread magic will be or who will practice it. The realm of magic opens up many possibilities for story lines, and gives the characters a wider range of action.



Back to top


Sources of inspiration

In finding inspiration for our story, we drew from an eclectic assortment of sources. Of course we started out with classic pirate stories like Treasure Island . These stories gave us a feel for the general formula of the genre:

  1. The Good Guy (relatively speaking) finds or inherits a map, or receives instructions to go to someone who will eventually give him a map.
  2. The Good Guy comes into some sort of conflict with the Bad Guy, who wants to get the map, or get rid of the Good Guy, or both.
  3. The Bad Guy imprisons the Good Guy and/or takes the map from him.
  4. The Good Guy has to escape and/or retrieve the map from the Bad Guy.
  5. The Good Guy finds the treasure and kills or otherwise incapacitates the Bad Guy.

Our story follows the basic formula, but the events may not occur in the order listed above, and each event may occur more than once. Optional story elements include a love interest (who inevitably gets abducted by the Bad Guy), various Good Guy allies, and silly characters for comic relief. We included at least one of the optional elements, but you'll have to wait to find out which one(s)!

Because our game is set in a fantasy world, we also wanted to incorporate elements not generally associated with pirates in Western literature. Adding exotic ingredients to our story made it more interesting to us, as we hope it will do for our players. Most of the place names, for example, are corruptions of Persian words. We borrowed story ideas from sources as diverse as the "Arabian Nights", Terry Pratchett's "Discworld" series, and "South Park."



Back to top


Artwork

Concept art

In designing the graphics for our game, we first sketched out our ideas on paper. Our concept art began as line drawings and stick figures, and evolved through various stages and media into the graphics used in the game. This process was very important because it allowed us to play with different visual elements and determine the best way to achieve the look we wanted. It was also helpful to have something on paper to show to our friends so we could get feedback on our ideas. Here are a few samples of "Pirates Ho!" concept art:


A dialog interface


A town interface


A map interface



Back to top


Graphic design

We completed some of the initial artwork for "Pirates Ho!" using Bryce4, Fractal Design Painter 4, and the GIMP. Below are brief descriptions of some techniques we used to create our images.

Ship prototype

To model the ship we combined the basic geometric shapes available in Bryce. Using Boolean operators to combine positive and negative forms, we created all of the essential shapes for the ship. For the body of the ship, we generated a squashed sphere and covered the top half of it with a rectangular prism. After setting the sphere's value to positive and the prism's value to negative and then grouping them, only the bottom, boat-shaped half of the sphere was visible. We added three tall, thin cylinders for masts and then created the sails. For the sails we combined a positive squashed cylinder with an identical negative one shifted over. This mean that only the front edge of the positive cylinder was visible and gave us more or less the look of a billowing sail. The next challenge was to build in details like railings, cannons, and other small features to give the ship some character.

Boolean rendering
Boolean rendering is a rendering process where either the space taken up by "negative" objects is subtracted from "positive" objects, yielding an object with portions removed, or two or more objects are combined to form a composite object combining the mass and dimensions of all contributing objects (see the Bryce4 User Guide in Resources).

Ships

Islands

We created our islands using the terrain editing tools in Bryce. We used the paintbrush feature in the terrain editor to shape the islands from scratch. We created different effects in our terrain using the elevation and erosion brush behaviors. We played with several different textures for the islands and ultimately settled on "Mediterranean Hills," which features scrubby green spotted with rocky patches; a rocky-looking texture would be nice for some of the smaller islands. The next challenge was to populate the islands with villages, towns, docks, and other trappings of society. Simple, whitewashed, one or two-story buildings would be nice for the primary architectural style. This is not just because they are easy to model, but it also emulates real Mediterranean villages.

Islands

World map

We created the map using Painter 4. Before we began work on the map, we spent a lot of time looking over pictures of authentic and reproduction 16th and 17th century maps. All the elements of our game world map are based on features we found during our research. We drew the island outlines freehand and then tweaked them until we were satisfied with the color and shape. In placing the islands on the map, we tried to produce the optimal arrangement to allow for travel and commerce without making the geography of the region look overly planned. Finally, we applied a paper texture to the map and edited it until it looked sufficiently antique.

Game map

Character display screen

We also used Painter to create a prototype for the character display screen, which will be used at the beginning of the game to display character stats and other information. To create the background for this screen, we copied part of a graphic containing a wood-paneled texture. We adjusted the color and texture a bit, and used the modified texture to create boards that look like a close-up of a ship's body.

We created the character portrait by importing a digital photo of Sam in pirate garb, fitting it into a field that was the right size, and using the texturing tools in Painter to apply paper grain and brush stroke effects to the photo. We added the frame because the screen looked a little flat and boring with the portrait sitting on the background with no border. To create the frame, we took a picture of a gold-painted wooden frame and copied and pasted sections of it together until it was the right size. We added the scroll to display the name of the character prominently, and to set it apart from the other information on the screen. We created it by taking a downloaded image of a scroll and changing its color and shape to fit our display screen.

We then added a semi-opaque field of approximately the same value as the background to display the character stats. We left it partially transparent because we liked the look of the boards showing through; that way the left side of the screen has a little bit more detail, which balances out the busy brush strokes of the portrait. For contrast, we added white text for the character stats and history (the character stats and other elements of our role-playing system will be covered in an upcoming article).

Character display screen



Back to top


Game menu screen

For the main menu, we wanted a light airy effect similar to the splash screen. We created a sea scene for the background, and looked in our toolbox for the right tool for the buttons. We ended up creating the buttons using the GIMP, which has a rich set of logo plugins and text effects with freely available fonts. We played around until we found a font and effect that was close to what we wanted. We settled on "Glowing Hot" using 18-point Dragonwick font.

We found that the GIMP generates its logos in layers, and that interesting things can be done on the stock logo output by manipulating those layers. Instead of creating box buttons the way we originally planned, we removed the background layer to get a glowing effect around the edges of the text directly on the menu background image. We saved the images as PNG format images, which saved the alpha channel and can be read directly by the SDL_image library and blitted to the screen. In the process of testing, we improved the speed of the SDL alpha channel blit by nearly 100%, and contributed these optimizations to the SDL 1.1.3 CVS codebase.

We also discovered that by removing all the "Glowing Hot" effect layers except for the glow itself, we could get a brighter version of the original button text. We used this in the main menu to "light up" the menu options as the mouse passes over them.

Game menu screen



Back to top


The look of the game

So far we have tried to achieve a look that is both appropriate for the technology level of the game world and that more or less resembles 17th century Europe. For example, we created the world map and character portrait in artistic styles appropriate to the era. For the land and seascapes we used bright colors to evoke tropical associations, since the climate of our game world is something like the Caribbean. Of course, we expect the look of the game to change as we add new elements and refine our skill with our design tools.



Back to top


Looking ahead

We are just about ready to start working seriously on the graphical interface, which will be covered in detail in our next article. Animation sequences that will appear in the game are also in the works. Our next article will also deal with our scripting language and building the user interface using Lex and Yacc.



Resources



About the authors

Sam Lantinga is the author of the Simple DirectMedia Layer library, and is currently employed as lead programmer at Loki Entertainment Software, a company dedicated to bringing best-selling games to Linux. His involvement with Linux and games began in 1995 with various DOOM! tool ports and the port of the Macintosh game Maelstrom to Linux.


Lauren MacDonell is a technical writer with SkilledNursing.com and co-developer of "Pirates Ho!". When she isn't working, writing, or belly dancing, she takes care of her tropical fish.




Rate this page


Please take a moment to complete this form to help us better serve you.



 


 


Not
useful
Extremely
useful
 


Share this....

digg Digg this story del.icio.us del.icio.us Slashdot Slashdot it!



Back to top