Monday, May 8, 2006

Viki: A visual wiki design

Remember when you were a young and you drew epic images on giant rolls of butcher paper? The little boys would draw cool spaceships and army men battling one another in landscape full of tunnels, fortresses and lots of explosions. The little girls, with their surprisingly superior sense of color, drew fish, rainbows, and people. You didn’t worry about your drawing skills. You just doodled for the fun of it.


The best part was either a study hall or perhaps when you had one of your friends over. You’d grab a whole sheet of paper and you’d each start doodling on part of it. He’d draw some massive star destroyer that was about to take out your very nifty fighting ship. Naturally, you’d unleash your fighter’s super powerful “Mega-Zapo-Cannon” which would result in a giant explosion. You told your story and mashed it all up with your friend’s story. Half the fun was making up nifty scenes with ninjas, robots, spaceships and more. The other half was seeing what your friend managed to think up.

These paper mashups were a quirky upwelling of that primordial communal artistic pulse that lies within all of us. At a very basic human level, it is joyful to create cool intricately detailed images and share them with your friends.

Viki is a design for a communal art mash up that riffs upon those simple butcher paper drawing sessions from long ago. It is a game design and community site that can be made by anyone with some solid AJAX skills.


Web 2.0 games
I’m a big fan of modern software development tools, especially ones like the Web 2.0 technologies or Flash that allow rapid development of web applications without a heavy investment in expensive infrastructure. Server space is cheap and the tools are free or very low cost. More importantly, the mechanisms for communication and collaboration are built into the basic infrastructure of the platform. With a bit of brains, a lot of hard work and a very solid sense of marketing, there are oodles of opportunities for upcoming game developers.

The trick, however, is not about trying to replicate Space Invaders or Doom. Instead we need to create game designs that take advantage of the unique characteristics of the platform. Here is a hypothetical design exercise. Imagine you’ve been handed a piece of rope, three sticks and a duck. Your goal is to make a game out of this arbitrary collection of technologies and capabilities. If you try to replicate Doom, I guarantee that you’ll fail.

If you work within the constraints of the platform, some genius will create a game that is surprisingly addicting. It turns out that there are lots of things you can do with a duck.

The challenge with the web is the same story with different pieces. When you are developing for a new platform, you need to toss out the old genres and improvise some new ones.

What is a Viki?
A Viki in its most basic incarnation is a visual wiki. Instead of creating pages of words that are hyper linked together, the users create pages of images that are hyperlinked together. Think of it as the ultimate sticker book mash up.

You start with a set of stamps. Some of these are primitives like squares and circles. Others are text boxes. Others are clip art of spaceships, aliens, castle walls, and oddly attractive cucumbers. You can place and arrange any of these stamps on a canvas. This canvas is your very first, very personal page.



You can create more pages by selecting an object and saying that it is a link. Viki will ask you if you want to create a new page or link to an existing one. If you type in the name of a new page, voila…you have a new page that you can navigate to and start filling up.



Now the cool thing is that each page generates a thumbnail that is added to your stamp collection. Simply by creating new pages, you end up creating new stamps.




Viki is communal
A viki is a communal space. Anyone can go to a page and edit it provided that they have the correct permissions. Most folks claim that they can’t draw to save their life. However, if we provide easy-to-use tools and we provide strong social rewards to people for being creative, all sorts of creative sparks are bound to flourish. A little admitted lesson that many artists understand is that creativity is dramatically enhanced by peer pressure.

In addition to the communal reward systems, Viki also has a full suite of wiki features such as version control, recent changes and comments on changes. This helps people manage the Viki quite nicely.

Technology
The entire application runs in a browser with the data stored asynchronously on the server. For the user, there are very low barriers to entry since there is no install and no heavy download. Even the interface is simplified. Users don’t have to know Photoshop or Illustrator. They don’t need to spend years mastering the art of placing a line on paper. They browse to a URL and start creating.

There are also some nice bits for the developer here. Since we are using very simple technology, the prototype could be whipped up in a few nights of programming by an intermediate skill AJAX coder. Can you place a transparent gif with a CSS div and store it in a database? My friend Harold mocked up a basic proof of concept in a night of playing with Ruby on Rails.

Some of the more complex features such as thumbnail generation require server side image processing. This is not rocket science, merely work.

Someone I know once claimed that art programs will never make it onto the web. I call BS on this dinosaur thinking. :-) The trick is finding an application that benefits from web technology instead of attempting to shoehorn Photoshop into a web browser.

The game
So far, I’ve described an interesting toy, but not a game. Instead of laboriously iterating through potential design specs, I want to tell you a story about this design. It is an attempt to capture the feeling of playing the game. This provides a starting vision for the next stage of creating a new core mechanic through intensive iterative prototyping.

There are five main stages to our tale.
  • Discovery: How the player finds the world.
  • The Hook: Why makes the player want to dig further into the game?
  • The Feedback: What are the feedback systems that encourage deeper play?
  • The Store: How does this title make money?
  • The Source of Content: How do we provide the player with new content so they stay?
The Discovery
Harvey, an avid MySpace user discovers the NinjaGarden.com while browsing around looking for something ‘cool.’ Harvey is a rather normal kid of about 14 who enjoys doodling in his notebooks. He isn’t the best artist in the world, but that has never stopped him. He thinks the name is hilarious and the artwork on the site is rather fun.

There are dozens of very interesting stories on the site and he becomes enthralled in a particularly fascinating one about Mickey Mouse as a blood thirsty master ninja. The fact that someone took a worn out icon and made it authentic and edgy rocks his world.

The Hook
As Harvey digs deeper into the stories, he hits a wall that encourages him to register. Once he is registered, he has his own account that gives him energy points. He can keep reading until he runs out of energy points. The only way to get more energy points is to rank pages or start a story of his own.

He spies a story thread that he really like and creates a link off of one of the main scenes.

A new canvas opens up and he starts plunking down some of the basic elements in the basic collection. There are ninja cats, giant robots and naturally retro spaceships with fricking laser beams. And you can type rude things.

The Feedback
Other people start viewing Harvey’s new page. They dig it and offer comments. He is feeling popular and making new friends who appreciate what his creation. Reading stories is fun, but social interaction with real people is intoxicating.

Whenever someone visit or ranks his page, they leave energy points behind. These boost Harvey’s points which lets him read more. They also encourage him to create new pages. As Harvey’s page gets more readers who rank and comment on his work, he gains a reputation.

Some of the really popular pages make it to onto the “Garden of the Day” list. This means thousands of users are likely to check it out. Harvey begins to dream of one day reaching such heights.

The Store
The original set of stamps is rather limited. It turns out that there are lots more out there that you can buy using extra energy. Some of them are quite rare and a few you need to buy with a combination of energy and real money.

Harvey buys a set or two of professionally drawn Mickey images. They only cost him a five or six bucks and they let him create much more in-depth scenes.

The Source of New Content
It turns out that the stamps of Mickey and friends are created by a lass named Aya. At age 17, she is an excellent illustrator and delights in seeing what people create with her artwork.

She gets half the money that Harvey spends. There are two hundred other people that also bought her work and she just received a check for $150. That will pay for a very cute pairs of shoes. More importantly, she is famous. Her online reputation is reflected directly in the reputation of the pages that are created with her artwork. Perhaps it is only on one site with a small group of people. But it feels good to have people respect her and her art. She would not give that feeling up for the world.

Now the circle of content is completed. The few highly creative people provide a seed that encourages others to be creative. The result is an explosion of content that acts as a magnet for additional potential customers.

Is this a game?
You’ll notice that this is not a traditional electronic game where you shoot things. Some traditionalists might argue that it is not a game at all. On the surface, it has more in common with Wikipedia or Slashdot than your typical first person shooter.

Yet all the basic pieces are in place for a rousing social game. You have user created worlds where the act of consuming stories and creating stories are the game play verbs. You have a robust feedback system complete with strong goals for players to strive towards.

Viki is to traditional games as Charades is to Chess. It is a social sandbox game played by creative people.

Future Extensions
This is just a sketch of the basic Viki system. In the future, there are numerous styles of play that you can support with the same engine:
  • Living world: By building logic into the stamps, you can have a world that grows as you play. Logic can take into account the position of stamps and their time on the canvas. Trees can grow, characters can change facial expressions, etc. Drawing becomes a more involved act similar to gardening.
  • Combat: With the addition of basic Javascript-based collision detection, you can add a turn based system where players place object that attack one another. The pace of the game is such that the collisions only need to be detected one per click and can be calculated offline if necessary. The goal of the game is to build the coolest image while damaging the other side’s pieces.
  • Comic creator: Any time people put down images and text, they tell stories. Wouldn’t it be enjoyable to let people subscribe to a particular author’s canvas and encourage them to create a series of online comics. Think of it as a comic blog (a clog?).
  • Product design: With a viki, we have a system where larger numbers of people collaborate on complex multi-dimensional designs. Imagine a dozen participants with the best ideas percolating to the surface due to the built-in ranking system. Suppose that you are dealing with a design for a three hundred page website. A viki becomes your essential sketch pad and its contents are sorted by the wisdom of the masses.
Conclusion
I have several more of these ‘alternative’ game designs lurking in notebooks and half finished essays. I’m sharing them for two reasons.

First, most of the designs I’ll suggest are pretty inexpensive to implement and some folks may enjoy noodling with them as projects. To this end, I’m providing all source files from my mockups. Use and abuse as you desire as long as you include my name and a link back to this article. I'd be happy to publicize any fun experiments on this website. Click here to download the source images (1.2 MB)

Second, I want to encourage folks to think outside of the box when it comes to game designs. Not all casual web games need to be Match Three variants. There is an infinite universe of fascinating social games that have barely been explored. Some smart cookie is going to create an amazing entertainment phenomenon using tools that have been readily available to millions. They’ll be willing to try something new and when they do, everyone else will wonder why they failed to think of it first.

take care
Danc.

References
The quote that inspired the game
“My top five favorite things to do as a kid:
5) Play army
4) Walk the rail road tracks and explore wilderness.
3) Make weapons.
2) Build stuff with Legos.
1) Draw epic spaceship battles on 100 feet stretches of computer paper.”

- Robert 'Apache' Howarth on VoodooExtreme
http://ve3dboards.ign.com/Message.aspx?topic=23127087

Photoshop tennis
http://en.wikipedia.org/wiki/Photoshop_tennis

Note on Legal Issues:
In any title that has user created content played by minors, there are legal issues. Luckily, other sites have been dealing with these for many years so the solutions are straight forward.
  • Collection of data from children under 18
  • Report problematic images. Quite likely these are tagged with a nudity tag and then just culled from under 18 imagery and searches.