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.

Movement
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.

Objects
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
Danc.

Short thoughts on games and interaction design

For some odd reason, I've been chatting more with people that are interested creating web 2.0 applications that borrow substantially from online games. If you see games as a technique for teaching skills and maintaining attention in a pleasurable fashion, I would expect this crossbreeding to only expand in the future.

Why games are interesting to the web
Website developers are desperate to have their users enjoy the experience of using the website. If you look at traditional usability and interaction design literature, it says a lot about improving functionality, but almost nothing about making that functionality pleasurable. In the gap there as emerged a faith derived aesthetic where minimalist, highly efficient interfaces are described as the major source of user pleasure. If the only tool in your toolbox measures efficiency, that is what you as a designer value. Regardless of whether or not cold efficiency is what your users value.

Games are interesting to web developers because they demonstrate a rich set of techniques, proven over the course of thousands of projects to keep users heavily engaged. Experience points, in game currencies, mission, player housing, avatar creation, and guilds are some of the meta-game systems that are almost immediately applicable to practically any existing class of application. These keep users around longer, give them an increased sense of community and when used appropriately give them warm fuzzy feelings.

Another area of great interest is that game explicitly deal with the concept of user exploration and the acquisition of new skills. They are experts at giving users the freedom to explore at their own pace while still encouraging the user to master new techniques, tools and skills. At the end of a game of Zelda you've learned hundreds of new techniques and you've enjoyed doing it.

At the end of a few hundred hours of used Digg, you've learned perhaps one or two new techniques. If you are really lucky, you've figured out their commenting system. Modern interaction design has great difficulty with the topic of learning. The current rule of thumb is that users should never be forced to learn any new skills in order to use the application. This greatly limits the scope of potential designs and their ultimate usefulness to expert users. Game techniques, as systems that teach, allow designers to break free from the oppressive assumption that they must only design for the lowest common denominator.

The baggage of games
Games also bring with them some interesting baggage. There is an unfortunate tendency to copy wholesale a game design and merely reskin it with a new theme. Math Blasters is certainly not the high point of cross breeding interaction design and game design. We need a deeper understanding of game design that allows us to choose the right elements for the job at hand. Here are a couple of pitfalls.

Don't use spatial relationship if it isn't necessary
Most occur in concretely realized spatial environments, whereas most applications do not. You play a game in a world with walls and ledges and characters. Many of the core mechanics of existing genres are built around these constructs. Some designers immediately think "3D world like Second Life!" when they imagine a game-like application. One of my favorite 'horrible user experiences' was in the early days of VRML, some fellow had replaced the desktop with a virtual office you wandered about. You were forced to walk from shelf to shelf and fiddle with clumsy 3D notebooks in the vain hope of finding the right 3D model that represented your last used document.

Applications operate in an abstract land of concepts. The mapping between navigating a maze in Pacman and linking cells in a spreadsheet formula is not obvious, nor is it likely even desirable. Instead consider the dozens of other game design techniques such as point systems, power ups, skill trees, currency and more. There are plenty of useful techniques that don't involve wandering about a world.

Inappropriate use of theme for the application at hand
Two people in the past week have asked me, "Does including a rich game-like theme increase the number of users or scare them off?" Their worry was that creating a theme for their application that sported rich characters and a predefined world (in one case a fantasy-land and in the other case a soap opera-esque college scene) would create an immediate filter that knocked out a goodly number of people from even trying the app in the first place. If you look at MySpace, Facebook or Digg, none of them have an obvious theme and they are the gold standard of success. Admittedly, almost all web 2.0 projects adhere to a ruthlessly minimalist school of design so that absence of rich setting is by no means evidence that it doesn't work.

Yet, if you were building a game world, this isn't even a question you ask. Our assumption is that people need a theme (Pirates! Elves!) in order to engage the abstract mechanics of the game. The theme is both the initial hook and a way of creating a context for the actions that eases the learning curve. Game designers can point to Warcraft, Tomb Raider, Ultima, and Mario and practically any title except Tetris that setting is critical to success. We fixate on establishing a rich, unique world as the single most valuable element of a game's brand.

But truth be told, I don't know if a rich theme is always a good idea for every application and every audience. Perhaps more importantly, I don't have the analytics tools (beyond some informed guesses) that would provide the insight necessary to make a good decision.

An open field
I'll stop now since this is my attempt at shorter post and it is a rather enormous topic. We are in a place where there is obvious benefit to be gained from cross breeding the two worlds of traditional interaction design and game design. However, it is not completely clear what should be borrowed, what should questioned and what should be reinterpreted. It is a fascinating topic for further inquiry. :-)

take care
Danc.


Reference

Interaction Design image source
I borrowed the picture above from this lecture on interaction design.
http://ccrma.stanford.edu/courses/250a/lectures/interactiondesign/

What is interaction design
"Interaction design aims to minimize the learning curve and increase the accuracy and efficiency of task completion, without diminishing the value of a product's useful functionality. The objective is to lead to less frustration, higher productivity, and higher satisfaction for users."
- http://en.wikipedia.org/wiki/Interaction_design

"Ideally, products would have no learning curve: users would walk up to them for the very first time and achieve instant mastery."
- http://www.asktog.com/basics/firstPrinciples.html

All wonderful stuff that I practice daily. What I find fascinating is how there is no direct representation of user pleasure in the process. There is instead an assumption that by solving a problem in a pragmatic fashion, the user will automatically become happy. Taken to an extreme, interaction designers seek to build a utopia where every action is transparent and effortless.

Yet online game designers know from painful practical experience that utopias result in angry, destructive users. In almost all game designs, the process of mastery is the source of user value. An acknowledgment of pleasure of doing is missing from modern interaction design.

PS: July 2nd, 2007: Updated post to clarify the structure a bit.

Ebisu

Here is a little painting I've been working on for the past couple of weekends. There are seven lucky gods that are celebrated in Japan. One of them is Ebisu, god of prosperity and fishermen. He traditionally holds a Tai, or red sea bream (pagrus major), an auspicious fish that is often used as a symbol of good luck. Just looking at this picture means that glorious things are about to happen in your life.

I also happen to be a fan because there is a delightful Japanese brew called 'Yebisu' that is also named after the cheerful fellow.

This image will be used for the local Aki Matsuri fall festival posters come September. I have traditionally been a rather geeky (perhaps even self absorbed) fellow who rarely took the time to volunteer. Lately I've come to realize how immensely satisfying it can be to give back to the local community. The act is nothing fancy; just simple labor given freely with no expectation of reward. Fascinating.

take care
Danc.

Latest crop of sweet prototypes (with source!)

Update (6/6/07)
Ezin has made the source to his delightful Flash-based prototype available. If you want a jump start on how tile layout and shadows work, this is a great starting place. Thanks, Ezin!

• http://67.169.215.5/cutegod.zip
• Mirror: cutegod-flashsource.zip

___

Folks have been busy! The PlanetCute prototypes got off to a great start last week and there is still some great work being done with the SpaceCute concept. I count 11 glorious links to check out and analyze. If I missed any, let me know. Big kudos to everyone who has participated so far.



Think of these as inspiration for your next iteration. The challenge goes on. Each example here was done in a few stolen hours over the course of a week or two, so the challenge has proven itself to be quite feasible. For those with little time, I find it heartening to realize that the real trick to making a game is simple. Consciously set aside a few hours each week and create something.

As promised, here they are...


Sokoban, baby
Kev over at cokeandcode.com built this wonderfully polished sokoban game that add the additional madness of height to the puzzle. I still can't get by level 2, but the first level had me grinning. :-)

• http://slick.cokeandcode.com/demos/cuteplanet.jnlp

Platform madness
Prisselle created an adorable platformer

• http://dubromelle.free.fr/mmf2/pm.zip
• http://prissille.blogspot.com/

My Game Builder: Web-based game editor
The creative team over at Jolly Good Idea is using PlanetCute tiles in their amazingly extensive online game building tool. This is a great example of Flex in action. It was created by one programmer in his spare time over the course of half a year. There is a full on pixel editor, mapping tool and system of setting up basic game mechanics.

• http://mygamebuilder.com/

Quarry game
Brwn 2.0 (aka Ahad L. Amdani) posted a game of his that used a similar stacking mechanic. It is a good source of inspiration and shows how stacking can be combined with cute little semi-autonomous agents.

• http://moppi.inside.org/quarry/Quarry.zip

PlanetCute in 3D!
n.n. listened to the feedback about the perspective and height and wondered what the game would be like in full 3D. I can't wait to see where this goes.

• Home page: http://haitaka.googlepages.com/xnacutegodprototype

Terrain effects and patterns in GodCute
Ezin is closing in on getting the core mechanic working. He has the terrain moving up and running. The shadow system is in place. He's added a wonderful set of terrain rules that result in grass growing over exposed dirt and stones sinking into water.

The first case of pattern matching is working, but there is no reward or feedback system for completing patterns. Enjoyment level is low. I'd recommend adding a scoring system temporarily to encourage the player to have a reason for completing patterns.

• http://67.169.215.5/cutegod.swf
  

Shadows and vertical tile movement in GodCute
Corsix extended his wonderful little editor to include some of the concept of moving tiles around. He also implemented the shadow system to great effect. In particular, we see the inclusion tiles moving up and down independent of the grid. This is an effect that I suspect can be quite useful as we move forward in the prototyping. Just because the tiles are blocks doesn't mean that all mechanics need to take place on a grid.

Corsix also improved on his map generation algorithm to create smoother, more visually appealing maps.

• http://www.corsix.org/GodCute.rar

Phage: Game demo
Matt came up with an interesting variation on Every Extend. He says "The object of Bacteriophage is to kill as many bacteria with each available Phage as you can. You begin with 10 Phages. Simply move your Phage to the place of your choice on the screen, preferably near large numbers of bacteria, and left-click to blow it up. Right click to randomize the field for better shot looks. Your phage will detonate and expand for a brief time before vanishing, killing any bacteria that overlap or come too near it. You get increasing numbers of phages as bonuses for "fighting off" a series of bacterial infections each 5 levels, so use your phages wisely."

• http://www.guruchild.net/phage12.zip (9.5megs)
  

Why shadows matter (and first prototype!)
Bjoernke started things off with this great demonstration of how hard it is to correctly interpet height when the shadows tiles aren't used.
Perspective is confusing
Hunty came to a similar conclusion with his Flash-based demo. He raises the very interesting point that perhaps the perspective is inherently flawed. This point spawns some good discussion and leads to improved shadows, better map generation and how the limitations of the perspective can be used to benefit the game.

• http://www.unm.edu/~luvcraft/adoration.swf
  

SpaceCute lives! And Thrives!
And last, but certainly not least, Scooter over at 2bitarcade.com produced a very polished SpaceCute prototype. Love the stars and the bounciness when you hit something.

• http://www.twobitarcade.com/sc_prototype.php

Till the next crop...
Wow. You are all amazingly creative and productive. Remember however, this is just the beginning. Once the basic engines are up and running, that is when the real fun begins. I'm looking forward to seeing more experiments with the basic mechanics of the game. The core activitity of moving blocks is remarkably enjoyable by itself. Now is the time to wrap a game around that. Just ask the following questions:

• What does the player do?
• What is the feedback (reward or punishment) for doing that action?
• How do they use the skills, resources or tools gained from successfully mastering the action to do something new or better?
  

Never stop prototyping.
Danc