Directory of All Essays

Saturday, September 15, 2007

Tree Story wireframes

I've been dabbling with quick wireframes to explain the design of Tree Story. There are two common ways you can look at a spec.
  • One is that of the blueprint, a plan that will be rigorously followed by production workers in order to achieve the end result. In this model, the team members are followers who are expected to implement a list of fixed details, not innovate.
  • The other is that of a communication tool. As a communication tool, you are trying to seed key concepts in your team so that they can take ownership and run with the idea during implementation. In this model, the team members are ultimate owners of the final design and the 'designer' is more of a facilitator of the process. Any spec exists only to spark conversation so that the team can build up a shared understanding of the feature's goals.

I've found that text is rather horrible as a communication tool, especially with small teams. It takes too long to iterate on and starts bogging down as soon as there is more than one person editing the document. Even worse, text fails horribly when describing anything visual or tactile.

Instead, I'm a big believer in using storyboards augmented by multiple discussions around a whiteboard, especially for early discussions. The story boards / paper prototypes can be quite concrete, but they are still visual and tactile enough for two or three people to stand around and comment on.

The iteration process is straight forward:
  • Whip up a quick storyboard. Limit yourself to spending 30 minutes to an hour on it. Make it very rough.
  • Print your latest 'official' wireframe on the biggest paper you can lay your hands on,
  • Tape it to a whiteboard and nab the first person you spot on your list of influencers.
  • Brainstorm around the idea. The taped version acts as a starting point for the conversation and an anchor if the conversation gets lost.
  • Immediately update the wireframe with the new thoughts.
  • Rehang it on the wall. Ideally look for a spot with a lot of traffic.
  • Rinse and repeat.
Within a short period of time, you have a design that:
  • Is easily understood in a glance.
  • Is understood by multiple team members. The story board acts as quick reference to your indepth conversations.
  • Is up-to-date.
  • Is a conversation starter for the rest of the team. I've had the best results when my desk is positioned near where the drawings are hung and I can leap out and chat with people wandering by.
Example wireframes
Here's a stab at some wireframes for Tree story. Sorry that we don't have a good white board built into this blog. Someone needs to fix that. :-)

The basics of communication
In Tree Story there are NPCs you can chat with. Here is how.

Picking up objects
You can also pick up objects and drop them where you desire.

Planting seeds
A special type of object is a seed. It lets you grow new platforms in the world.

Each seed creates a different type of tree. Use different sized
trees to reach different areas or grow interesting fruit.

These were done in a vector drawing tool because I find wireframes use a lot of objects that are the same. I personally prefer to copy and paste instead of spending time redrawing. However, they could just as easily been done by hand. They are likely a bit more detailed than necessary, but I'm compensating for the rather low bandwidth nature of a blog.

take care

Weather system
PS: Here are some additional wireframes that describe how a sunlight and weather system might work. This could be used with Clint's idea for the weather trees and machines.

Labels: , ,

Read more!

Sunday, August 19, 2007

Tree scribble

I've been filling notebooks with extensive sketches of worlds built out of a single homegrown tree. Houses, monuments, clouds, vines and more, drooping, draping and bursting forth in a blossom of growth.

Last night I had a chance to jot down some of the graphics in Painter. My few hours of effort resulted in a basic tree trunk, some foliage and a little girl. Overall, I suspect this would be a pretty easy game concept to get up and running.

Further implementation thoughts
Harold stopped by last week and we brainstormed a little on the Tree Story idea.
  • Collision detection: The foliage uses 1/2 circles as a the collision detection zone instead of the typical rectangles you find in most platform games. This should give the worlds a bit more of an organic feel and results in some simple controls. For folks that have been playing with the Space Cute graphics, you may be able to reuse your existing collision detection systems.
  • Bundling to create platforms: By overlapping a few simple foliage brushes, you can create interesting and realistic trees.
  • Blurry parallax layer for depth: You can create a feeling of depth by putting blurred foliage on a parallax layer behind the main action. Scroll this layer at a slower pace than the main layer that the player is on and it will seem like the scene has perspective.
If anyone is interested in playing with some of the graphics, let me know and I can upload a few in a more reasonable form. Before implementing images, I'd recommend first creating two simple prototypes:
  • Movement prototype with primitive half circles for terrain and a blob for the player to test out movement and the 'fun factor' of the design.
  • Tree prototype: Use long rectangles and half circles to see if you can auto-generate interesting trees.
Hope you are well on this rainy Seattle sunday afternoon. :-) I think it is time for a bit of tea.

take care

Labels: , , ,

Read more!

Saturday, June 30, 2007

Tree Story

I just wanted to share a quick design that occurred to me this morning. This isn't a design challenge since I don't have new graphics for it. We watched My Neighbor Totoro recently and my brain has been quite inspired by the scene where Totoro grows a giant tree from a seedling. I imagine that with a sufficient level of polish, this game might inspire some of the same feelings of delight and awe.

So I present to you Tree Story, a platform game where you grow trees in order to collect all the pieces of your broken heart.

The Tale
One upon a time, a young girl in love sang a most beautiful melody. A Bird of Fate, called by her song, blew through the window and struck her full upon the chest. Her heart shattered and she could love no more. Full of sorrow, she left her lover behind and began wandering the earth. She sits now alone on a land that borders a distance sea. All around her is emptiness. The only thing she owns is a single seed. If she plants it, it will grow into a tree. Perhaps, if she is strong enough, she can regrow her world and rediscover the pieces of her heart. Only then can she love again.

You control a character that sits in the middle of a scrolling screen. On the screen is a simple scape made of branches and foliage. At the bottom of the screen is the sea. You start on a small island in the middle of the sea.
  • When you press left and right, you can walk around the circumference of the tree foliage until it becomes completely vertical. Your character is always oriented relative to the normal of the foliage.
  • You can jump using the jump button (the up arrow)
  • When you jump, you jump straight out from the normal of the foliage. However, gravity points downward.
  • You have some slight air control when in the middle of a jump using the left and right arrow keys.
  • If you hit another bit of foliage, you grab on and reorient yourself to the new foliage.
There are many objects that are strewn about the world. You can interact with them in a variety of ways.
  • Picking up a seed: If you happen across a seed object, you can pick it up by running into it. You can only have 1 seed at a time, so if you run into another one, you will ignore it.
  • Using a seed: You can plant a seed by pressing the action button. When the seed is planted it will sprout into a tiny branch with a new bit of foliage. This slowly grows on its own until it reach a small fixed size.
  • Picking up flowers: If you happen across a flower object, you can pick it up by running into it. You can have as many flowers as you want at a time.
  • Growing a branch: If you stand at the base of a branch, you can feed it flowers in order to make it grow. By standing at the base of a branch, a HUD appears that instructs you how to perform the basic growing action. Hold down the action key and press up. Your flower count will decrease and the branch will grow. I can imagine turning this into a simple rhythm game, but for initial prototyping it is okay to keep it simple.
  • Bending a branch: You can also bend a branch. Stand at the base of a branch. Hold down the action button and press left or right. Your flower count will decrease and the branch and its foliage will grow. Branches can only be bent so much.
  • Chopping off a branch: You can remove a branch. Stand at the base of a branch. Hold down the action button and press down. A meter builds up and you give the base a mighty blow. The branch and any attached branches will be turned back into seeds that fall to the ground.
  • Picking up a star: Stars hang in the sky. Most of them you cannot reach. However, if you grow a tree, you can climb upon it and reach a star. When you catch a star, it pops and spits out a random prize. The prize could be a branch seed or it could be a dozen flower seeds. The prize falls down and rests upon whatever foliage it hits. Flowers seeds immediately blossom into flowers when they hit foliage.
  • Picking up a heart: If you happen across a piece of the young girl's heart, you can pick it up. Collect enough pieces and the girl is able to love again.
The basic game play

You start with a single seed that grows into a tree. You climb upon the tree and reach new stars. When you collect them they sprout into seeds and flowers. When you collect the seeds and flowers, you can grow new branches off your old tree. This in turn allows you to reach more stars and grow more branches. Eventually, you collect all the hearts and win the game.

Advanced game
There are numerous types of seeds, each of which creates a different branch.
  • Tall branches
  • Fat branches
  • Branches that sprout extra flowers all on their own.
  • Branches that sprout a specific type of seed if you feed them flowers.
  • Branches that are homes for little creatures. They tell you hints, bits of story and give you goodies. Give them a seed of the desired type and they may give you a rarer seed in return.
  • Branches that teleport you to another sister branch
  • Branches that sprout powerups that give you temporary flight or super jumps or double the number of goodies that you get from stars.
When night falls, more stars appear. When day comes, more flowers sprout and trees grow larger. There is a natural rhythm to the game world, despite its simplicity.

Winning the game
There is only one level in the game. This is not a puzzle game where you beat carefully designed levels. It is a playground game where you build and build and see how far you can get. The more hearts you get, the closer the girl becomes to achieving true love. Players who win will have built hundreds of branches and their tree will cover the entire map.

The game can be won, but it can't really be lost. If you come back to your saved game later, new flowers will have sprouted and new stars will have appeared. The little creatures on the map will have new trades and they'll let you know that they missed you.

So there you have it. There is a dash of Animal Crossing mixed with a hint of Knytt and a whiff of Little Big World. And of course, the spirit of Totoro. In my head, at least, it all seems like a pleasing way to spend an afternoon. :-)

take care

Labels: , ,

Read more!