So, our TouchSheep traverses the folktale world of Little Bo Peep looking for his lost owner(even though the owner thinks it's actually her that has lost her sheep). Indeed we need a map that will represent the virtual world and hiding place of Bo Peep.
The first step in planning out the v
isuals of the map were to consider the, what I call "Hotspots" of the map, where the TouchSheep would interact with the board. For example, a cave where the TouchSheepo would stretch its head in to look for Bo Peep and either activate a swipe foreward gesture or a pinch out montion that calls on a "Baaa"-ing sounds as if it were the sheep asking if Bo Peep was there. The following show some Hotspot ideas and the corresponding audio output.
Place | Gesture | Metaphoric Gesture | AO Intro | AO Positive | AO Negative |
House | Tap | Knock | Sign that says “Please Knock” Welcome to pee’s household | TouchSheep, I found you!!!
TS:Sighs | Peep’s mom: “Bo Peep isn’t here right now, but you can check in the garden!” |
Garden outside | Move forward | Opens gate | | “ | |
Garden inside | Pinch out | Baa: Are you in here? | | “ | |
Log | Forward | Peeking in | | “ | |
Well | “ | “ | | “ | echoing baa |
Bridge | Left or right | Over side | | “ | |
Tree | Left or right | Looking around trunk | | “ | |
Wise Old Sheep (beard) | No gesture
Pinch out
No response | Walk
baaa: yes
no | Hello I’m the wise sheep. Do you want a hint about where Bo Peep is? | “ | |
Cave | Pinch out | baa: Are you there? | | “ | |
Flower/Blueberry | Pinch in | eat flower | You need food! | “ | |
Beach | Pinch out
Repeated left and right “Shake/Wiggle” | baa: Are you there?
Splash in water | Could Bo be swimming? | “ | |
Hopscotch | Move over number
Pinch out |
Baa | The last time I saw Bo Peep, she was on square 3+2. She might still be there! | “... eight, nine, ten! Sheep, you’re here!” | |
School | Tap/Click | Knocking on door | | “ | |
Picnic | Pinch Out | baa: Are you there? | | “ | |
Blueberry Patch | repeated left and right (shake/wiggle) | shake bush | | “ | |
Hayfield/cornfield | shake/wiggle | look though field | | | |
Watering hole | Pinch in | Drink | You are thirsty! | drinking/water sounds | drinking/water sounds |
I had to keep in mind many factors when designing the sketch.
First I had to keep in mind that we plan for the specific HotSpots to be 3D.
- That meant imagining the map with the object on it and considering the user experience with the components. The weight of the objects would dictate the mobility of the whole game. When buying materials I kept in mind that I didn't want things to be too heavy. Further when orienting each hotspots I thought about the balance of the object according to their weight. For example of there will be a heavy Hotspot on the bottom of the map, I made sure to arrange so that there was a hot spot with similar weight on the other side.
- I thought about what the user would see from their standing point playing the game in front of the map. I didn't want the height of objects in the foreground to be obstructing the view of components behind it nor did I want tall objects to make difficult reaching around objects to keep the TouchSheep moving. So the hotspots were positioned with shorter objects in the front but I still attempted to keep the weight balanced.
Then I had to try ways to encourage movement about the map. This meant I created barriers of movement to limit where the sheep could go.
- For example the only way to cross the river, that divides the board in half, is to cross the one bridge.
- Also the Wise Sheep or the hint sheep is across the board furthest away from the starting point so that players are not as tempted to ask for the hint at the beginning of the game when they just leaving their starting point, their pen.
- Another trick I introduced is the concept of recharging. Once in a while, the sheep will be called out to need food upon which the TouchShepp will have to return to it's pen to eat the flowers their or to need water upon which the sheep will need to reach the water hole that is in a corner of the board.
I also had to think about the orientation of the TouchSheep. We came with a hiccup recently when we realized that turning the mouse does not turn the xy, coordinates of the computer input. Aka, even though we turn the TouchSheep left to move left, the TouchMouse still senses it as moving forward. So, our TouchSheep now not only cannot be picked up b
ut also cannot be turned! We could figure out a way to fix that from the code and we really wanted to avoid have a physical constraint like a track that keep the TouchSheep in place so I came
up with a couple physical restraints as suggested by the map.
- Knowing the measurement of the TouchSheep and that we cannot have the sheep turned, as in it must always be vertical, I designed the p athways such as that the width of the pathways on the x axis did not allow for turning. The width between hotspots is always less than the y length of the mouse.
- Conversely, the y-axis on the map pathways are wide allowing comfortable traversing sideways with the length of the mouse.
Here's a picture of my late night/early morning prototyping session!
Next step crafting the 3D compnents!