Abstract
So, we have a game design, we have characters, and we have a story. Broadly speaking, these are the bare bones over which the body of the game is built. The design and story dictate to some extent the direction the programmers might take, and of course the same is true for the artistic style, which is where the job of a concept artist begins.
Keywords
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.
So, we have a game design, we have characters, and we have a story. Broadly speaking, these are the bare bones over which the body of the game is built. The design and story dictate to some extent the direction the programmers might take, and of course the same is true for the artistic style, which is where the job of a concept artist begins.
In this chapter, we’ll explore the different parts of the art production process for Shadows on Deck, from first ideas through to implementation of the finished art. Along the way, we will encounter various problems and explore the methods of solving them, and throughout there will be lots of advice and tips about creativity and the art process in general.
A Little Art History
The video game artist’s job has certainly evolved over the past 20 years. In the 1990s when Zool was made, it was possible for a team of three people to create a game from scratch and get it onto the shelves in under six months! Back then, most of the game graphics still involved sprites that moved against layered 2D backgrounds, but since then, games have become far more elaborate and complex to develop. This meant the job of the artist expanded to include many roles, such as concept designers, character modelers, animators, 2D texture artists, and HUD/ front-end designers. As a result, it became impossible for one artist to perform all the tasks required within a game’s development.
Happily, however, our game Shadows on Deck is to be presented as a classic style of game: an homage to how games used to be made, which means most of the graphics and art comes from the hand and mind of a single artist. By the end of this chapter, you should be in a position to pick up that role and take the game to new places from your own imagination.
Shadows On Spec
Everyone loves a pirate story. As a theme, these swarthy bilge rats have persisted for centuries, thrilling generations of children and adults alike with their outlandish costumes and the romance of high-seas adventure. Pirates are perfect computer game material, and a gift for any artist lucky enough to work on such a game.
As described in the previous chapters, our game is to feature backgrounds and characters presented in an intriguing silhouetted style. Producing art of this type might seem straightforward—after all, we don’t have to worry about color or the finer aspects of costume design or the surface detail of the environment. However, presenting everything as a flat, single-colored shape comes with specific problems of its own:
-
How do we make the characters stand out from the backgrounds?
-
How do we prevent a collection of shadowy shapes looking obscure?
-
Can we include a little detail on the characters, and how could this be achieved?
-
What methods can we use to add depth to the levels?
-
How many layers should we use for the backgrounds?
-
Will it be possible to tell the story effectively in a silhouette style?
-
What tools should we use to design, create, and animate the artwork?
These are kinds of questions that we will try and address in the remainder of this chapter as we take you through a standard art process that might take place for a game like this.
The Art Process
Just as the story for the game has a beginning, middle, and end, the whole art process must progress in a similar way. Some of the issues identified in the last section can only be addressed as the game develops, so in the first instance, we’ll cover a stage in the art process called conceptual design. Once that’s over, we’ll move onto the serious business of asset creation, and finish up by touching upon art integration, bringing us neatly back into the implementation side of the game. We’ll take each of these in turn to provide an insight into how the whole process fits together when you create a game.
Phase 1: Conceptual Design
The conceptual design phase is all about trying out as many ideas as possible in order to come up with something that works. This initial period spent sketching, gathering reference material to inspire ideas, and the imagination is quite an in-depth process, requiring a great deal of detailed thought, as you shall see!
There is a saying: “measure twice, cut once.” This basically means that you pay a lot of attention at the start of a job, thinking carefully about what you want to achieve and what you need to do to make sure it goes smoothly. While the burden of this task is very much on the concept artist, it’s important to stay in close contact with your creative colleagues to avoid going off in the wrong direction and having to throw away your hard work.
The Art of Communication
To begin, the designer, programmer, and artist get together to discuss the art style and design aesthetic, as well as brainstorming lists of things the game might feature, including characters, enemies, objects, and environments. Although it is too early in the process for this list of assets to be definitive, by the end of the meeting, you should have a plan of action that helps to guide the initial direction for the artistic content of the game.
It may seem strange to sit down with a programmer to discuss the art style, but there are usually technical constraints to consider, which designers and artists might not be fully aware of. There may even be technical concepts that need trying out in order to discover whether a particular style or visual technique is feasible on the target platform.
A Pirate’s Brew
I met up with Jake (the programmer) and Nana (the designer) in a coffee shop to discuss the initial idea for the game. Back then, it didn’t even have a name, but Nana had a clear idea of what she’d like to achieve with the game play and story, and Jake was keen to keep a handle on the technical and time constraints. I made some notes in my sketchbook as we threw ideas around and by the end of the meeting, I had some initial ideas for some styles that I wanted to play around with. You can see some of my initial scribbles and notes in Figure 10-1.
Gaining Inspiration
Inspiration can be a tricky thing to pin down, but it’s also a very good excuse to watch lots of DVDs. One absolutely essential requirement for any artist (or would-be artist!) is a good selection of books, comics, magazines, and DVDs. As you work through different projects, you tend to acquire new reference materials along the way, and eventually you’ll be the proud owner of a fantastic selection of imagination-inspiring things. But where do you start such a library in the first place?
Your house very probably has many interesting books, objects, or DVDs in it to start with, just have a good look around and see what you can find that looks interesting or that gives you cool ideas to work from. You might want to tailor your collection according to what you have in your game design. If you have creatures and natural environments in your game, then watch some natural history documentaries, look up such subjects online, or get a hold of some cool natural history books. The same goes for buildings or vehicles. Check out your local library, too; there are always lots of interesting things to discover there, just remember to take your notebook with you! Postcards, weekend newspaper supplements, cereal boxes, pizza flyers dropped through the letterbox; absolutely anything could spark some amazing response in the imagination receptors within your brain, so learn to see the potential in everything you come into contact with.
After a while of reading and studying, your head will naturally fill with all sorts of knowledge and facts, and it’ll stay up there even though you might not realize it! Then, when you’re thinking hard about some design problem, you’ll find that stored knowledge will inspire all sorts of ideas to come flooding out!
Phillip Pullman said the way he approaches writing is “to read like a butterfly and write like a bee. Any honey in my writing is due to the nectar I found in the work of better writers.” This is a wonderful sentiment and is as true for art or music as it is for writing. So read, look, listen, learn. Remember, you get out what you put in, so cram as much cool stuff into your head as you can!
Reference Material
Nana’s starting point for this game was to create a platform game in a silhouette style. The problem of selecting environments and characters that would “read” well as silhouettes became the inspiration that ultimately suggested a pirate-themed game. Once they were in the mix, there were a number of obvious, and not so obvious, places for me to look for further inspiration. Watching Pirates of the Caribbean and other pirate films was a natural place to start, and helped to generate numerous drawings in my sketchbook. I also spent some time studying old sailing ships, familiarizing myself with the way the masts are constructed and gathering ideas for objects I could produce for the game levels. I even browsed online for fancy dress stores; pirate costumes are as popular as they ever have been, it seems!
However, the game is not solely restricted to a pirate ship. There are two other levels I had to design assets for, one is based in a swamp, the other is a village built onto the sheer walls of two facing cliffs.
For these environments, I wanted to come up with as many ideas for plants, trees, houses, and platforms as possible, and so natural history DVDs and books on botanical subjects became my next port of call. In particular, I drew huge inspiration from fungi for some of the strange plants and growths that rise from the swamp and cling to the cliff faces, as their fantastic shapes and forms are nearer to fantasy than reality, distinctive shapes and outlines that lend themselves effortlessly to our game’s requirements!
Other inspirational avenues include browsing through my collection of art books. In particular, my ‘Art Of…’ video game books and guides, plus movie and animated film art books. Titles as diverse as Monsters, Inc., Super Mario Galaxy, The Legend Of Zelda: Wind Waker, Avatar, The Lord of the Rings, and Aliens vs. Predator all offer a little something to the mix.
Getting Warmed Up
With this philosophy in mind, you can set about developing the sketches and doodles you have made so far into a series of more detailed exploratory drawings. This artwork should be experimental; a series of tests just to see how characters and environments might look and work together, but it is also an opportunity to get a feel for the project and continue the creative flow.
This is all about the creative exploration of ideas, and taking those ideas as far as possible. Unbridled artistic creativity early in game development is responsible for the way the game will eventually look, so you want to allow those ideas to be as wild, silly, and outlandish as possible! In so doing, you may well come up with some unusable stuff, but there will be plenty of material you can then develop and build upon.
Drawing Tips
My earliest memories involve drawing Daleks, The Incredible Hulk, and Dinosaur-Cybermen on my bedroom walls with wax crayons. In a bid to save the wallpaper, my mother bought me paper and pencils and from then on I was hooked. But even though I have been drawing since I was little taller than those pencils my mother bought for me, it is still difficult on occasion to get myself into a frame of mind where the work flows. Sometimes it can be a little… sluggish. The ideas just refuse to come, that blank page is just too intimidating.
Such times happen rarely these days, thankfully, but when they do there is a simple exercise I use to get going, and all it requires is a bit of faith in your own imagination. With pencil poised over a blank sheet of paper, close your eyes and make a few marks or scribbles on the page! It may seem like madness, but the paper is no longer blank, you’ve made a start! And the best part; those random lines you’ve made can become absolutely ANYTHING. Just let your mind relax and allow your pencil to build upon the marks on the paper!
The More the Merrier
No matter how concrete your initial game idea seems, it always evolves from its original form, so during this early stage, we try to include as many eventualities as possible. One such strategy is to aim to produce more concepts than are actually required.
Let’s say, for example, that in your finished game you want to have ten different bad guys with three boss characters ranged over eight levels. It’s a fair target, but it might be a good idea to increase those numbers a little; perhaps 15 different baddies, 5 bosses, and 12 levels. With luck, you won’t need to use all of these, but it is always better to have too much content at the start than not enough. Often, the original ideas turn out not to work as well as everyone thought and the extra ideas take their place, perhaps even opening up new avenues for the game design in the process. So, make a list of everything your game might feature, and then add a little more, just for luck!
Idea Building
Once you’re ready to get stuck into designing characters and environments, you’ll want to come up with as many ideas as you possibly can. Remember, at this stage, it’s always better to have too many ideas to choose from than too few.
One method I sometimes use to get those ideas flowing is to “invent” a game and explore concept designs for it. Let’s imagine we need to design a space ship for a video game. We all know one when we see it, but there are so many different design choices that can be explored:
-
How many engines does the ship have?
-
How many wings, fins, and other such features are there?
-
Are there weapons? Where are they situated?
-
What is the configuration of the ship?
-
How large is it?
I begin this exploration process by filling a page with drawings of ships, simple sketches from a top-down perspective, experimenting with different outlines and silhouettes, moving engines around, and positioning weaponry in different places (see Figure 10-2). I then choose the best examples from this page, and set about producing another page of ideas with these as a starting point. While it might seem excessive to produce so much artwork when so few will ever be used, the sheer number of variations means there is a greater chance of finding that killer design, and some of the other designs can of course be used elsewhere in the game, or used in a future project! Finally, I chose an image from the last page of variations and rendered this up as a finished design (see Figure 10-3). The player won’t know how many different designs were explored in order to reach this point, but the result benefits from all that hard work.
Silhouetiquette
It was during this phase that the issue of silhouette legibility came to the fore. The initial sketches for the levels made it clear that some objects were either a little obscure, such as the featureless squares of boxes and crates, or just messy in the case of bushes and trees. The solution to these problems also answered another issue, that being whether or not to include certain amounts of detail in the artwork. So, a featureless box becomes a crate by the use of erased lines to define the planks of wood that make it. A messy bush gains some definition via a little trimming and erasing leafy shapes into the silhouetted mass (see Figure 10-4). Once the decision is made to add this sort of detailing, then the flat-colored shapes that will define the game environment become a little less intimidating to tackle, and a lot easier to visually read.
Complementing the Code and Design
If there is one truly unique aspect about video game development, that has to be the relationship between the very different disciplines involved in the production. Coders (or programmers), artists, and designers each do very different jobs involving very different skills and abilities, and yet they can work together in amazing ways while making video games.
Sometimes this relationship can result in something extremely cool happening in the evolution of the game’s design. This happens when one member of the team interprets the output of another in ways that they had never intended, but the game becomes much better as a result. Designers sometimes refer to players finding cool solutions to their games that they never intended as emergence. This is just another kind of emergence, but one that happens at the design stage rather than after the game has been released.
Emergent Design
The very first game I worked on was a racing game called Fatal Racing. My responsibilities included designing and building the race courses using a software engine coded by one of the programmers on the team. The engine initially allowed for rather straightforward race tracks that were flat and went around bends, with the ability to make the road surface tilt a little. I soon started experimenting, and realized I could not only tilt the road, but make it spin almost completely around, allowing the cars to drive upside-down on “corkscrew” sections of track. It didn’t work very well at first, but I showed my ideas to the programmer who was amazed! He’d not anticipated his engine being used in such a way, and he went away for an afternoon to write some extra code to allow my ideas to be incorporated in a more robust way. Within a few weeks, we were building race tracks with loops, corkscrews, moving ramps, bridges, and extreme jumps! None of which had been a part of the original game concept, but they went on to become the defining features of the game. It was a great example of artist and programmer achieving more together than they could alone, and the resulting game was great fun because of it.
In a similar way, the artist can expand upon the elements set down in the game design by the designer. The Shadows on Deck design calls for enemies in the form of pirates and skeletons, chosen for their striking silhouettes. During my initial sketching (and indeed throughout the game development), I expanded this baddie list to include all sorts of monstrous variations the designer hadn’t considered (whelks for heads, eyeballs on tentacles, snake bodies, flying winged skulls, bee-hive-headed pirates, and so forth). I then began to think about other creatures, such as hermit crabs, lizards, spiders, and bears, and wondered if I could make some of those work in the silhouette style of the game. As a result, the finished game should look a little more varied, and greater variation makes for a more interesting game!
By the end of the conceptual stage, we had concept sketches for Flynn (see Figure 10-5) and many, many enemies (Figure 10-6). The three level environments—Pirate ship, Cliff village, and Swamp—are all roughly sketched out (for example, Figure 10-7). The first stage of the art process is over, and so the middle section of the art “story” begins!
Phase 2: Asset Creation
Generally, the artist and designer would maintain close contact during the concept stage, but at the end of it, the whole team gathers together again to review the direction of the style. These first drawings offer a visual starting point from which we develop a more specific idea about how the game will look. A further list of requirements is drawn up, including ideas for level content and characters, plus storyboards for cut-scenes. All this feeds into the evolving plan for the game that begins to solidify as the style is signed off and the process of building the first set of game assets begins.
Art Pipeline
The art pipeline is the process by which raw artwork ends up in the finished game, and it is an important thing to start to nail down at this stage. Shadows on Deck calls for a lot of outlined shapes for monsters and swash-buckling environments; something that lends itself well to a traditional approach that starts with a sketchbook, pencils, and drawing pens. From here, these can be digitally scanned and cleaned up in a package such as Adobe Photoshop (see Figure 10-8).
There are numerous software art packages you can use, but Photoshop is the industry standard. It is an incredibly versatile piece of software that allows you to easily manipulate photographs or scanned-in pencil artwork as well as providing numerous drawing tools to create your own artwork from scratch. With layers and the life-saving undo function (Ctrl Z shortcut fans!), you can be confident you are producing great artwork without any mistakes.
Animations
The mechanics of character movement and animation need to be considered at this point, too. This is going to be a 2D game with a retro feel, but we want it to be a lot more crisp than the low-resolution games of the past. Sprites were traditionally drawn by hand, pushing pixels about in a 2D art package such as Deluxe paint, but animating higher-resolution characters in this way is a job for an army of Disney animators, not a small team of game developers. That’s why we decided to use Anime Studio (Debut edition) to create our animations. Anime Studio provides a hierarchical animation system similar to the ones in 3D animation packages used in modern films and games (see Figure 10-9). That means you can create animations by posing the character in different positions and the package creates the frames in-between for you.
So working back from our animation technique, we know that the characters will need to be created from separate body components: torso, upper and lower arms, upper and lower legs, and heads. These parts will be linked together in an intuitive biological way; lower arm connected to the upper arm at the elbow, upper arm connected to the torso at the shoulder, and so forth. Therefore, we must split character art into all these composite parts. These are all scaled to ensure all arms and legs and other parts are proportioned correctly, before being saved as separate pieces of art. We can then pass them onto the animator to be “rigged” (attaching the animation hierarchy to the images) and animated in Anime Studio.
Anime Studio renders each animation as a movie file that you can then import back into Photoshop and render it out again as a sequence of .png images compatible with Game Maker. Figure 10-10 gives an overview of the overall process, but we show you how to do it step-by-step in the section on Art Integration.
Environments
The asset pipeline for environment art is a little more straightforward than for animated characters. In fact, you can just resize some of the artwork and export it as .png files that will load straight into Game Maker. Nonetheless, a significant portion of the background artwork needs to be put into a format that is compatible with Game Maker’s tileset system. This means breaking down objects into a set of square sections that you can arrange into different configurations. The exact number and choice of tiles depends entirely on the situation. For the rocks on the Rogues’ Rendezvous section, we needed to consider all the different combinations of full- and half-sized tiles (see Figure 10-11). This can be quite fiddly, but it’s worth it to give the maximum scope for the level designer to work with.
Character Building
We have a good starting point for Flynn thanks to the sketches provided by the designer (see Chapter 7). An ordinary boy, 15 years old sounds simple enough, but it actually presents some interesting problems:
-
Can such a seemingly unremarkable character work as a silhouette?
-
How do we ensure he stands apart from all other characters and enemies?
-
How can we make his silhouette interesting without over-embellishment?
-
How extensive should the cosmetic changes to the character be, as the player progresses through the game?
You can see the initial side-on pencil drawings of the character in Figure 10-12. Based on the original sketches, numerous drawings were made with variations of hair style and clothing. These were then tidied up and inked using a black drawing pen, resulting in a set of black outlined drawings. Rather than using a brush and ink to block in the color, it is easier and quicker to scan the line art into the computer and finish it up digitally.
Photoshop is great for tidying up any blotches or stubborn pencil strokes and ensuring the outlined shapes don’t have any breaks in them. This is important when using the Paint Bucket Tool. Using this tool, you can instantly fill a selected area, or an area bound within another color. With any gaps filled in, the Paint Bucket Tool will fill the inside area of scanned line drawings, turning them into the solid, flat black shapes required (see Figure 10-13).
The question of detailing and how to add things like facial features must now be addressed. It is important that Flynn’s features are not overly expressive, which will set him apart from anyone or thing he might encounter during his adventures. His spiky hair and slight, boyish frame will also help to make him a distinctive counterpoint to the various villains and monsters he will meet, but perhaps a face might imbue him with a little more character that will bolster his unique personality. Using the Eraser Tool in Photoshop, features such as eyes, nose, ears, and hair-line are suggested by simply deleting appropriate portions of the head, using the original inked drawing as reference. Details are added to the torso and the other body parts in the same way. (This process is also applied to the various monsters and enemy pirates). Obviously, this method of detailing will need to be tested against the level environments, but as this cannot be further investigated until the Integration part of the process, the art components of Flynn and the other Shadows on Deck characters are signed off, for now.
Ssssh: Character Design Secret!
A handy and time-saving technique I use to produce multiple variations on a theme involves making a basic line drawing of a character pose, side or face-on. This drawing needn’t be too detailed, as long as the arms and legs and body and head are all proportioned correctly and the features of the face are very loosely suggested with sketched marks. You can make this drawing in pencil and scan it into the computer or you can draw it using Photoshop or another such program. You can then print the drawing out as many times as you need, and on each you can make a character concept drawing featuring as many different variations as you like, without having to work out the body shape every single time. It might seem like a bit of a cheat, but when a deadline is looming, you need every trick you can use to get as much work done as possible in as little time as possible!
Let’s Get Environmental
The characters are coming along nicely, so it’s time to start producing some levels for them to inhabit. In most games, different levels offer a wide range of variation defined by time of day, weather, and quality of light. Variation is also found in details such as location and the materials objects are made from.
In the case of our pirate game, the silhouette aspect meant the environments had to be distinctive in ways not reliant on color and other atmospheric details. Also, in some cases, to ensure objects work as a single flat color, a little simplification of form is required (see Figure 10-15). This is particularly applicable for some deep background objects where finer detail could be lost, or make it harder to recognise the shape. For example, a bush or tree that is used as a foreground object might have some leafy definition added within its mass (added using the same Eraser/ deletion method as employed with the characters), but these details are not required if the tree were to be used as a distant object. Any excessive detail in a piece of the deep background would serve only to distract the eye of the player. Even if this distraction were slight, after a while of playing, the cumulative effect of this “messiness” in the background environment would become tiresome, and this is the last thing a game should be. As with any piece of art, knowing when to reign in the detail is of paramount importance.
Luckily, the themes and objects associated with the pirate concept lend themselves very well to the art style arrived at during the concept phase. Boxes, rigging, masts, barrels, treasure chests, and all the other things you are likely to find on a pirate ship can all be rendered legibly in silhouette, as can the wooden huts, trees, and various other plants and platforms that inhabit the different level environments.
The process involved in building the raw art for the levels is the same as that used to create the characters: pencil drawings are touched up with ink, scanned into Photoshop, and turned into solid black shapes. The detailing process is similar, too. The Eraser Tool is used as before to define textures and add some identity to the shapes, such as the planks of wood that make up barrels and crates, or patches on the caps of fungi. Although most of the in-game art was traditionally drawn and “inked”, then scanned and finished digitally, it was easy to use Photoshop to produce further unique or location-specific objects, using the existing material as a jumping-off point. In this way, a broken crate can be produced by taking an existing whole crate and manipulating the planks using the Selection, Erase, and Transform/Scale Tools until they look battered and split. Several new assets were produced from existing platform elements by scaling and rotating them. In this way, you can produce enough material to ensure a level has lots of uniquely interesting components within it (see Figure 10-16).
The environments must also feature interactive components; these are the platforms and objects Flynn can walk on or use to traverse otherwise impassable areas (see Figure 10-17). Such objects must look clearly and distinctly as if they can be walked upon, which for the most part means they have flat upper surfaces, and are arranged in such ways as to suggest a route across the environment toward a target area or objective. These are an integrally important part of the game environment, and will require substantial testing during the Integration phase of the art process. As with the characters, the different elements of each level are arranged into separate .psd files for backgrounds, objects, and interactive objects.
By the end of the Asset Creation phase, we have components for Flynn, the pirates, and their various allies as well as interactive and background elements for the levels. These assets are presented in a format ready to be used within the game, and so begins the final phase in which the art is integrated into the game.
Phase 3: Art Integration
The Integration phase, as the title suggests, is when the environment and character art can finally be seen working in the game. This does not mean that the job of the artist is over, however, for although the art puts flesh on the bones of the game concept, the very act of doing so will reveal any problems with how that art works within the game, and any such problems that might arise will need to be rectified.
Art Therapy
When a level is constructed using the art assets, previously static graphics come to life as the first living, breathing version of the game is born. Although it is undeniably exciting to be able to glimpse how the game might look when completed, it is while playing this “first skinned” version of the game that any problems with the art assets will need to be identified and solved. (Objects might need redesigning, or further objects might be required). The artist must therefore be on call to help with the troubleshooting, making amendments to the art where required, as many times as necessary until each issue is resolved satisfactorily.
Shades of Grey
During the initial level construction, one of the first problems to arise involved the backgrounds. Because the objects that made up the background were black, they threatened to obscure the characters, and in turn became obscured where different background layers were positioned over one another. Also, there was a more fundamental problem in that it was impossible to differentiate interactive objects such as platforms from non-interactive elements (see Figure 10-18).
The solution involved changing the default color of all background level components to 50% grey. These could then be altered to a lighter shade if they were to be in deep background, or darker if they were closer to the foreground, but they would never be true black to ensure the characters were well-defined against them.
In the case of the interactive platforms, they too needed to be clearly separate from the non-interactive elements of the levels, and so were all colored black, making it clear to the player on which areas they could walk.
The resulting level environments have a depth and clarity they previously lacked, and won’t obscure the characters in front of them.
The Devil Is in the Detail
Now that the environment art is in place within the levels, and a villainous rabble of baddies is in residence, we can test how the characters actually work against the backgrounds. This includes appraising how the detailing on those characters looks in game, and addressing any problems that might arise.
The final method of detailing the characters is decided by a process of trial and error. Initially, during the Asset Creation phase, facial features and buttons, studs and other features of clothing were created by simply erasing portions of the character elements. Now that the characters can be tested against the level backgrounds, it becomes clear that the see-through aspect of these details became easily confused or obscured by the background visible behind them.
To rectify this problem, these see-through areas are filled with white, and the results are immediately much better. It might take the characters a step away from being true silhouettes, but it does allow them to show a little more detail, and in doing so a little more personality is added (see Figure 10-19).
However, our hero Flynn became an interesting exception to the rule. He was given detailing and features just like every other character, but we found we didn’t like the result. Giving Flynn eyes and nostrils gave him a very fixed expression, which didn’t always suit the conversations or situations he was in, so we decided to keep him all black. We think it works better this way as it is now easy to imagine different emotions on his face, without the fixed one getting in the way.
It is worth noting that this legibility issue was not so important for the environments as it was for the characters, so any “erased” detailing in the environment elements were not filled with white. This also sets the backgrounds apart from the characters quite nicely.
We’ve Got It Covered
It was during the final art phase that artwork for the cover of The Game Makers Companion was completed. Although this doesn’t implicitly relate to the in-game material, it was developed from sketches made of Flynn during the Concepting stage, and is an interesting addition to the art story (see Figure 10-20).
The initial sketch was quite loose and ill-defined, but was a great starting place from which to develop a new, tighter pencil drawing. This featured a great, dynamic pose as well as other content such as the parrot and the bat-skulls!
An inked version of this drawing is made, before being scanned into Photoshop. The inked image is tidied up digitally, and the outlines of the various elements are thickened slightly. Next, a new layer is created above the line drawing, and the blending mode is set to Multiply. This will allow the ink beneath to show through. Flat colors are carefully added into this layer using the Paint Bucket Tool, with the Lasso Tool defining the boundaries of all the different areas in turn.
Finally, a little shading and highlights are added using Dodge, Burn, and Hue/Saturation. The final result is a clearly defined image that should prove a striking addition to the cover!
Pirate CD
We’ve deliberately created far more artwork for Shadows on Deck than is actually required for the version of the game we’ll be making in the book. If you explore the Chapter10 directory on the CD, you’ll find many more examples of monsters, environments, and objects that you can use to build completely new levels and scenarios. We’ve tried really hard to make it easy to mix and match artwork to fulfill your own wild ideas. How about flying ships, upside-down swamps, or levels made entirely out of skulls and bones? Perhaps you’d like to make a skeletal centipede dragon? How about cannon-headed pirates or skeletons with spider legs? Well, if you want them, then it’s now within your power to create them. The beauty of the silhouette style is that it’s really easy to modify, recombine, and incorporate bits and pieces of other artwork. In this section, we’ll give you a brief crash-course in how to modify these resources for yourself. This is not intended as an in-depth tutorial of any kind—more of a quick bluffer’s guide to creating and animating graphics for Shadows on Deck.
Paint it Black
Although we realize that not everyone will have access to Photoshop, it’s certainly worth investing in if you’re serious about artwork. We’re going to focus on Photoshop CS3 for this tutorial, but any of the more recent versions will do just as well. Before you fire it up, take a moment to explore the contents of the Chapter10/Environments/Cliff directory on the CD. Here, we have a huge range of objects, scenery, and platforms that are designed to be used in the Rogues’ Rendezvous level. These are all high-resolution images colored in a mid-tone grey so that you can easily adapt them to the needs of different levels and situations.
You should be familiar with the idea of using RGB (red, green, blue) values to specify colors, and we’re going to use absolute black for foreground objects (R=0, G=0, B=0), and a very dark blue for objects in the near background (R=35, G=37. B=53). This slight difference is enough to give a visual cue to the player about what to expect to be collidable within the environment. Getting the artwork in these colors is very easy.
Adjusting the Color of the Environment Artwork
-
1.
Load one of the .psd files into Photoshop and double-click on the main layer to open up the Layer Style dialog.
-
2.
Now select the Color Overlay option within the dialog. A check mark should then appear next to this option and the layer should turn bright red, as shown in Figure 10-21.
-
3.
Click on the smaller red rectangle and a color picking dialog should appear. You can now select the color you require. Try both absolute black and the dark blue value (R=35, G=37. B=53) to see what it looks like.
-
4.
Now use the Crop Tool to select the rectangular area of the image that you’re interested in and then press Enter to crop.
-
5.
Next, use the Image, Image Size option to rescale the artwork to an appropriate size, bearing in mind that the entire game screen is only 1024x600 pixels.
-
6.
Finally, use the File, Save As option to save the file as a .png format file, which is compatible with Game Maker and preserves the transparency of the image. Don’t worry about doing this for now, as this is a hypothetical exercise.
Of course, you don’t just have to stick to using the artwork we’ve provided and it’s quite easy to turn a photograph into a silhouette using the same Color Overlay option. You’ll need to cut out the shape of the image from the photograph first, but if you take your own photographs of objects against a single-color background, then it’s child’s play to use the Magic Wand Tool to highlight and delete the background. Figure 10-22 shows a children’s toy turned into a spooky-looking church by applying this technique. Just think how easy it is to realize your craziest ideas with all the images of the internet at your disposal.
Make it Move
Now explore the contents of the Chapter10/Characters directory on the CD. Here, you’ll find all the various body parts that are available to you to create all the different characters and monsters in the game. Making your own characters is a little more involved than creating environment art and will also require a copy of Anime Studio Debut, which costs about $50. However, it doesn’t necessarily require animation skills, as we’ve provided a whole range of animations for you in the Chapter10/Animations directory and all you need to do is swap out the body parts to create a new animation for your character. In this section, we’ll take you through the process with a simple example: creating a new pirate walk-cycle animation for a pirate with a clam for a head.
Making a New Pirate Walk-Cycle Animation
-
1.
Load Mad Pirate Heads.psd into Photoshop from the Chapter10/Characters directory.
-
2.
Use the Crop Tool to select the area enclosing the clam head in the top left corner of the image and press Enter to crop.
-
3.
Now, save the image in .png format to somewhere on your PC using the file name PirateHeadClam.png. You can now minimize Photoshop.
-
4.
Launch Anime Studio and select File, Open to load PirateWalkCycle.anme from the Chapter10/Animations directory on the CD. If you are asked whether you want to use the basic version, select No, as we will quickly need to access one of the features that isn’t available in basic mode. The interface should now look like Figure 10-23.
-
5.
If you press the small Play button beneath the pirate image, then you will see the walk-cycle animation playing. Notice the moving red vertical line within the timeline beneath the pirate. This shows the current frame.
-
6.
Stop the animation and drag the red line back to frame 0 at the start of the animation. This is critical before you perform the next steps, otherwise the changes you make may be treated as part of the animation and not a global change to the hierarchy.
-
7.
In the Layers section on the bottom right, find the two Head layers. There is one with a bone icon next to it and one with a picture icon. Double-click on the one with the picture and a dialog should appear. Select the Image tab and click on the Source Image button.
-
8.
Select the PirateHeadClam.png file you created earlier and select OK. The pirate should now have the clam’s head, but it will be a little bit off-center.
-
9.
Select the Translate Layer Tool from the Layers Tool section on the left-hand side of the interface. Now, drag the clam’s head so that it fits neatly within the pirate’s neckline. as shown in Figure 10-24.
-
10.
Next, select the Set Origin Tool from the Layers Tool section. The origin determines the rotation point of the head image, which is currently positioned at the red cross shown in Figure 10-24. Move its position by clicking somewhere near to the position of the blue cross shown in Figure 10-24 instead. This will not make a huge difference for this example, but it can be essential to reset the origin for some combinations of body parts.
-
11.
Now, play the animation and it should look fairly reasonable (for someone with a clam for a head, anyway). All we need to do now is render it out as a movie file.
-
12.
Go to File, Project Settings and click on Background Color. Make sure this is set to absolute black (R=0, G=0, B=0) before continuing. If you don’t do this, then the edges of your animation images will have a faint color to them (the color of the background).
-
13.
Select File, Export Animation and click OK to accept the default settings offered. Choose where you want the movie saved to and call it PirateClamWalk.mov. The Compression Settings dialog should then appear, as shown in Figure 10-25. Change the Compression Type to PNG (we know where we are with pngs) and Depth to Millions of Colors+. The plus is important, as it indicates that you want to include alpha so that the background can appear transparent. Now, select OK and you should now see the animation rendered in front of you. This may take some time, but once it has finished, you can close down or minimize Anime Studio.
-
14.
Maximize Photoshop again and load in the PirateClamWalk.mov file you just created. Go to the Window menu and enable the Animation window (see Figure 10-26). This window allows to you play and view the animation from within Photoshop.
-
15.
The first thing to do is to scale down the dimensions of the animation to something compatible with the game. Go to Image, Image Size and set the image dimensions to 210x210 pixels. Select Convert when you are asked if you want to convert the video layer into a smart object layer.
-
16.
Now go to File, Export, Render Video and the dialog shown in Figure 10-27 should appear. Make sure that your settings are the same as these before clicking Render.
-
17.
After a short period, you will have a new directory filled with sequentially numbered .png files corresponding to each frame in the animation (there should be 24, numbered 0-23). These are now ready to import directly into Game Maker as new animated sprites.
So that’s it. You can now let your imagination run riot, creating bizarre combinations of pirates using all the limbs, heads, and weapons provided on the CD. If you get into Anime Studio a bit more, you can soon begin to create your own animations, too. We look forward to seeing what you come up with.
Conclusion: Save Progress and Continue!
Rick Wakeman said: “Success is found buried in the garden of failure. You have to dig a lot before you find it!” The Shadows on Deck art process threw up some interesting problems, but through generous portions of trial and error, and a lot of sustained effort, we managed to find some interesting ways to address them.
In doing so, the team witnessed Shadows on Deck evolve from a story into a living, breathing entity, perhaps the likes of which even they hadn’t quite envisioned, but this is the role of the artist, after all! The art process doesn’t quite end here, though; as the programmer implements the art into the game, there are bound to be one or two further issues that arise, but creating something isn’t as much fun if it’s too easy!
Author information
Authors and Affiliations
Rights and permissions
Copyright information
© 2010 Jacob Habgood, Nana Nielsen, Martin Rijks, Kevin Crossley
About this chapter
Cite this chapter
Habgood, J., Nielsen, N., Rijks, M., Crossley, K. (2010). Of Mice and Pen: Pirate Art. In: The Game Maker’s Companion. Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4302-2827-1_10
Download citation
DOI: https://doi.org/10.1007/978-1-4302-2827-1_10
Publisher Name: Apress, Berkeley, CA
Print ISBN: 978-1-4302-2826-4
Online ISBN: 978-1-4302-2827-1
eBook Packages: Professional and Applied ComputingProfessional and Applied Computing (R0)Apress Access Books