initials logo
previous: Concepts next: Comparisons


Once I had completed the basic tutorials mentioned in the previous post, I began "sandboxing" some small projects on my own. The key thing in this is that I wanted to build small, isolated projects to prove a particular concept or learn a technique. One of the main reasons I was picking up Unity is that I want to be able to make a physics/game-based drawing program on mobile platforms, so my initial demo projects were aimed in that direction.


I made a demo which let me use my finger on a multitouch device to paint, pan, and zoom on a flat surface:
mobile screenshot of painting demo

Next, I wanted to work with the accelerometer input, to make the same idea where instead of simply touching the canvas with your finger, you rolled a ball around on it. The idea was that the canvas would be on the same plane as a mobile device's screen, and by tipping the device, the ball on screen would move according to real-world gravity.

In order to do this, the first step was to learn how to make use of the device's gyroscope in Unity. I am using an iPod touch for development, so I just wanted to get something simple running on that which made sense of what orientation the device is in. A little searching on it sent me to a superb demo put together by Alexander Dezhurko at HeyWorks.
mobile screenshot of camera/gyroscope demo
What you're seeing here is a simple space where the screen on my iPod becomes a camera into the virtual world. As I move it around, different items in the scene appear to indicate which way I'm facing. As I rotate either myself, or the screen in my hand, it keeps the virtual world's coordinate system perfectly aligned with the real world. Down is down; left is left.

In the demo, Alexander resolves all of the pesky quirks that can afflict the conversion of the real world to our virtual world by way of the device in your hand and the Unity engine. And hey! I downloaded the code and ran it: worked perfectly the first time. Thank you so much!

So with this huge assistance, I put my thinking hat on. To make a ball roll around on the canvas, what did I want to do?

Ah yes! Clamp the canvas onto a rig that's attached to my virtual camera, like this:
illustration of how to tip a virtual world

  1. Human holds mobile device in the real world
  2. Yellow dotted line: GyroController code from HeyWorks keeps in-game camera aligned with real-world device
  3. Green Canvas: The flat green canvas is a physical object in the game world. We want it to move along with the camera as if it were attached. How do we do this?
  4. Purple Bar: This doesn't actually exist in the 3d world as an object, but as a relationship: by parenting the canvas surface to the camera, it will maintain its position relative to the camera.
  5. Red Ball: The ball, then, is free to roll around on the surface of the canvas, painting as it goes.

So here is a screenshot of that little demo in action. I named it "tipsy" because I am terrifically clever.
mobile screenshot of running prototype

After building this, and being satisfied with how well it worked, I found myself planning a different path: instead of getting lost in the painting program, which I knew would be likely to become way too complicated, why not build this into a game? It would be more limited in scope, and thus more likely to be something I actually finished and shipped in a timely fashion.

So that's the plan. Next up: what I'm looking for as a game designer, as compared to a few other games that already exist.

previous: Concepts next: Comparisons