Devising the Plot and Puzzles

When making your first title without prior game dev experience, how should one proceed? This was a very real question for us, and apart from discussing possible plot lines and puzzle settings, we weren’t getting very far with the actual game design. During that time I was becoming acquainted with mind maps as taught by my history teacher, and with minor modifications the system felt perfectly suited to plotting out the locations, items and other details in the game.

Potential spoiler warning. The level of spoilery depends entirely on your willingness to decipher the text on these reduced mind map images.

mindmap

Above is the first attempt of a mind map featuring some outlining of the puzzles. The image was made with Deluxe Paint II during the first wave (1993) of development.

mindmap2

Few years later (2000) the spoilerous mind map was tackled again. Several locations, items and characters were added as potential puzzle elements, and sure enough, many of the details in this plan ended up in the game.

As the final development took place (2007), it became apparent that all the early efforts to plan ahead had been rudimentary at best. The puzzle details and the story began taking shape as each element, item, and character in each scene was written out. Gradually we could see the game beginning to emerge, taking a final shape. In the early plans lots of details had been overlooked, some puzzles planned only on paper needed complete overhauls for either being too simple or too illogical. Making any games with puzzles requires a good amount of testing and iteration.

In the grand scheme of things, the 15 year legacy of the project ended up being one of the biggest challenges. In the beginning we had painted with a large brush, making design decisions without better knowledge, based on a whim or a personal preference at the time. I still believe that despite all this baggage we managed to pull off an entertaining homage to the great adventures of the 1990s, whilst setting up the stage for the sequels (which will need to stand more firmly on their own legs).

Advertisements

Iterations: Castle Garden

Castle garden is a prime example of the “wrong style syndrome”, the result of working on the art in two separate locations in the pre-internet 90s. My take on the castle walls turned out okay’ish, but if one had to describe the textures and colors with one word, it would be “dull”.

garden-orig

Once the look for the castle wall had been nailed in the castle gate scene, it became obvious that the garden needed to be reworked. It was also an ideal opportunity to rethink the player’s point of view on it.

gate

Luckily I had some foresight to save lots of work-in-progress stages. Following is a series of snapshots of the painstaking process of pixeling a background image from a rough sketch to a finalized version.

This slideshow requires JavaScript.

Tools: AWE and Dialogger

AWE is the in-house editor and engine upon which everything in Bingwood has been built. It works as a comprehensive resource database for all the images, sounds effects, music files, voice lines etc. allowing the designer to place the resources into the scenes and assign scripts to them. The scene being worked on can be previewed with a push of a button. AWE also boasts a simple animation editor in which the sound effects can be triggered to play during specific animation frames. It also packages the game into a binary file. Games created with the editor are almost completely data driven, which allows for easy porting if the need arises.

AWE

AWE features a scripting language of our own design, with which the whole game has been put together. This intuitive and simple scripting language supports variables, IF-statements as well as several dozens of different commands. An AWE script assigned to a shovel in the game might look something like this:

FUNCTION TAKE
QUEUE1 HERO GOTO -32 76
QUEUE1 HERO FACE “W”
QUEUE1 HERO SAY “This shovel looks useful!”
QUEUE1 HERO ANIMATION “PICKUP” *)
QUEUE1 HERO TAKE SHOVEL **)
END FUNCTION

  • *) Animation calls into action a previously made animation
  • **) Take removes the item from the scene and adds it into the inventory

The Dialogger is another in-house tool used to create dialog trees built up by connecting individual dialogue nodes to each others. Each node contains the actual spoken line (linked to the equivalent voice file), the player character’s reply options and triggers to specific scripted events. Scripted conditions can also unlock previously hidden parts of a dialog or trigger game events. The 2500 lines of dialogue with the accompanying voice files make up more than half of the size of the whole game.

Dialogger

Creating a game with self-made tools has been an educational journey. The tools are far from perfect, some unsavory changes were made as a result of new features being added along the way. These learnings could be used to create a kick-ass sequel editor. It would feature a scripting system working similarly to the Dialogger, being completely visual and doing away with text-based script writing. The resource management and saving/loading system (which caused some gray hairs in this project) would need to be remade from scratch. While AWE was a nice tool to get the job done, it could be polished into a shining jewel.

Yes, the name is an acronym, and we came up with it before the project was actually started. Once we realized that the editor itself wasn’t going to chip in workwise, Adventures Without Effort turned into a much more realistic Adventures With Ease. Be that as it may, Bingwood wouldn’t have been made without it.

Disclaimer: This introduction was written in 2008.

Iterations: Bingwood Map

The aerial view of the village was originally sketched just for own our reference, but soon we were planning to use it as a background for the main menu. Following is a walkthrough of the pixeling process.

This slideshow requires JavaScript.

  1. Original pencil sketch of the aerial view of the village
  2. Moving some buildings to better fit the image, preliminary coloring
  3. Finding base colors for grass and foliage
  4. The look of the forest and grass areas finalized
  5. Cliff face texture and buildings made based on the finished game backgrounds
  6. More buildings and field added
  7. All grassy areas base colored
  8. Cliff face finalized
  9. Island and water areas finalized, scarecrow added in the field
  10. Castle first iteration, background hill colored in
  11. Castle finalized
  12. Forest areas finalized
  13. Hill iteration to make it seem more like an obstacle
  14. Working to find a good look for the rocky hill
  15. Decided to get rid of the hill, replaced it with a lengthier chasm
  16. Adding details
  17. Added a tollbooth in the crossroads, color tweaks
  18. Final tweaks to the buildings to make them match with the game backgrounds

The image was finished, yet it became obvious that the image would benefit from some small animations to liven it up.

bingwood_map_anim

Once we had all the in-game scenes linked, we realized having a quick travel option would be ideal. The aerial view was promptly re-purposed into a handy map.

bingwood_map

 

Animation: Walk Cycles

As with the rest of the graphics, the first walk cycles and other animations were originally made with Amiga’s Deluxe Paint II. When the project was picked up again several years later, Amiga’s .iff image format was well on its way to becoming obsolete. I was relieved to find that some image viewers still supported it, so I could bring the old work files on 3½-inch floppy disks back to life, this time saved as .gifs.

After some initial tinkering I concluded that a full walk cycle can be done with six frames, without the end result being too choppy (by 1993 standards). Once the hero’s frames were finished, they could be used as a base for all the other characters. Naturally each individual character still needed their own specific touches to make them walk with their own natural gait.

I’m especially happy with how the shopkeeper character turned out. His body is practically a heavy wobbling sack, and all the other body parts are frantically working together to move the mass.

walk-anim

Iterations: Fisher’s Hut Interior

Here is another example of a scene (1993) with nothing really wrong in it… apart from the style. The excessive smoothing and blending with muted colors gave the image a stuffy and somewhat bland result.

fisherhut-old

fisherhut-new

The remade image (2007) addressed most of the issues. The colors are more vibrant, and there are less of them. Everything was redrawn with a more crooked and “top heavy” look. The darker outline helped emphasize some key items relevant to the quest and the main character’s background. The simple fireplace animation was added to relay a sense of living space.

Iterations: Cliff Path Scene

When the pixeling of the background art started, the workload was divided for myself and the friend behind the sketches in the previous post. The penciled designs were run through a handheld scanner (state of the art technology in the early 90s), which allowed us to start working directly over the sketched pencil lines. My friend started on the cliff top background, I took the path to the cliff. This is the end result.

vs.png

As we were both working at home in a Skypeless era, there was no simple way to keep the style consistent. In addition to this we used portable CRT TVs which would fuzz the image (hardware antialiasing well before its time) and distort the colors. The official Amiga monitors would’ve fixed these shortcomings, but they were a luxury we couldn’t yet afford. There were some who actually preferred the softer image of a TV to the sharp crispness of a monitor.

antialias
Image source

At the turn of the century the second major attempt of getting the game done took place. I took a good look at the graphics finished so far, and couldn’t help but realize the huge disparity in the quality of the background images. Ones made by my friend were skillfully stylized with a bold selection of colors. My own efforts appeared over rendered with a stuffy and muddled color palette.

The only way forward was to redo all the background images I had made. Here are some images of the process.

This slideshow requires JavaScript.

  1. The original image (1993)
  2. Using crispier colors and the preferred stylization was started (2001)
  3. The same process taken a bit further (2001)
  4. Adjustments on the look of the cliff face and the shack were made to better link the scenes (2001)
  5. Tweaking of the sky and clouds, final color adjustment (2007)