This is the final version of the "Filling Station" experience created in Unity 3D & Maya.
It's been heavily modified and incorporated a lot of the feedback I received with the last iteration.
Please download it below and let me know what you think.
Mozilla just announced a design competition to develop "Firefox add-ons that turn the open Web into a rich learning environment."
As this is a subject that is very near and dear to my heart, I'd like to put together an IMD team and give it a shot. If you are interested, please contact me at jloganolson@gmail.com.
More info here: http://design-challenge.mozillalabs.com/jetpack-for-learning/index.html
FYI: The "jetpack" refers to a tool Mozilla just released that makes extension development more accessible to designers, but for the initial phase of this competition, all you need is a written pitch and mock-ups.
Let's do it!
Formatted PDF version: Download file
Backseat Driver
CTIN 405 - Context-specific mobile game
Backseat Driver is an iPhone game that uses Google Maps and challenges car passengers to find the fastest route to their real-world destination in a strategic racing game.
Context
The Backseat Driver app targets iPhone users who are stuck as passengers in a car. More specifically, it targets those passengers who think they know a better way to reach their destination.
Design
Backseat Driver’s gameplay consists of selecting routes for the player’s three cars in order to reach a particular destination as fast as possible. The player must then modify the routes in real-time as the cars run into traffic.
The player’s goal is to reach the destination using the virtual cars before he or she reaches the destination in real-life (determined by the iPhone’s GPS).
Beyond directing the routes of the cars, the player can use special “reckless driving” abilities to make real-time play more exciting. These abilities include “sidewalk driving” and “run a red light.” When a player uses an ability, he or she plays a short arcade mini-game in the vein of Frogger or other simple 2D retro game. The more an ability is used, the more difficult the games become. Failing to complete a mini-game results in a time penalty.
The primary challenge in developing this game is determining the traffic density and speed of surface streets. Google Maps only covers the general speed of freeways. The temporary solution to this problem to create general speeds for different surface streets on a city-by-city basis for the different times of day—morning-peak, morning off-hour, midday-peak, midday off-hour, afternoon-peak, afternoon off-hour, evening, early morning.
If enough users participate, the program could track the users and record their speed on a given street at a particular time. With enough data, the average speed of different routes could reflect this data. This information could even extend to Google Maps database similar to Google Image Labeler.
Play Experience
After the player enters the application, the destination is pulled from the Maps application. The player must confirm this destination. If the destination is denied or no destination is found, the player must enter a destination using the Maps app interface.
The player then enters a route using waypoints, similar to the route creation on the web version of Google Maps. Once the route is determined, players may alternate between the different cars.
The user sees the selected car’s location (a red icon) and speed. The other cars’ locations are marked by green icons.
The user may expand this window and select “Change Route” or one of three abilities: “Run red light,” “Sidewalk drive,” or “Illegal maneuver.”
If an ability is selected, a new view is opened with a top-down view mini-game. These mini-games can be decided at a later time. If the player loses, the car is slowed down and the player receives a message, such as “Stopped by a cop!” If the player succeeds, the car increases in speed. In either case, abilities for that car are given a 15 second cool down. Every time an ability is used, the associated mini-game becomes more difficult.
If a car reaches the destination before the user, the player receives a win-screen and score. If the player reaches the destination in the real-world first, the player loses and receives an end-game screen celebrating the talents of their driver.
Formatted PDF version: Download file
Two playtests of Wrangler’s first iteration were conducted with different rules and settings. Eight people organized into three teams participated both times.
The first 5-minute session took place at The Grove and required players to move strangers into circles. The second 10-minute session was played at an adjacent park and eliminated the circles with player’s able to take pictures of strangers in any location.
Results
Players noted that strangers were more receptive to participating at the park as they were not traveling to a particular destination. Players also mentioned that moving into the circle “freaked out” targeted strangers. In both locations, there was concern from strangers regarding their photograph being taken. In an instance of emergent gameplay, one team had concerned strangers cover their face with the flier while another team only took pictures below the neck.
Beyond these stranger-player dynamics, players commented that there were only one or two tactics in approaching strangers. There was no variation in their contact strategy. Furthermore, each team has the same bonuses (more strangers at once is better and raptors for double points). There is potential for different bonuses that could alter play strategies beyond canvassing crowds of strangers
While two of the teams were successful, the third team gave up early and got a fraction of the points of the other two. Afterwards, they mentioned a sense of shame in approaching strangers. This needs to be dealt with, as one of the points of this experience is to create a fun motivation for talking to strangers and remove that shyness. While variations in bonuses and tactics could help this, it is worth looking at one of the most minor rules of the game, but one of the most popular—the raptor pose.
Making strangers pose as raptors for extra points was an afterthought, but the two teams who saw the rule heartily endorsed it (in fact, the team that gave up early didn’t even know about that rule). Players suggested adding more poses as different bonuses, but this comment could be extrapolated to a more generalized mechanic: making playful requests of strangers that make them active participants in the game. The circles was a location-based way of doing that, but posing as a dinosaur is a lot more fun than walking into a circle on the ground (and a lot less foreboding).
Other points of note:
• Parties were interested in seeing their pictures online
• Players would point to other teams to look legitimate
• Strangers were more apt to hold on to the flier if they knew the game rules were on the back (a serendipitous printing mistake)
Planned Changes
The second iteration will replace the circles with new, more playful tasks like the raptor pose, which the strangers must do for the players. These different tasks will result in different point multipliers and unlock new tasks.
Potential tasks include new animal-based poses, action shots (e.g. the strangers must be photographed in mid air), or convincing strangers to take pictures together with the players. The original core mechanic—taking pictures of as many strangers at once as possible—will be downgraded to be one of these tasks. These tasks make the game similar to a photographic scavenger hunt in which players must interact with their subjects.
By focusing on creating a more playful dynamic between strangers and players, the game will deemphasize shameful soliciting and highlight the players’ duty to bring strangers into the magic circle.
Minor changes:
• Intentionally printing rules on back of fliers
• Shorter game time – approx. 5 minutes
• Locations must focus on recreational areas such as parks
I started with two objectives:
1. Force players to draw strangers into the game and directly interact with them
2. Make it a promotional game for a website/movie
It became a game about wrangling strangers and photographing them with promotional materials for a friend's website, 5secondfilms.com.
PDF of the real-world game prototype, "Wranglers": Download file
Document text without the nice formatting:
Wranglers
Wranglers is a location-based promotional game in which teams of players move, or “wrangle,” strangers into pre-defined areas and take pictures of them holding promotional materials for points.
This promotion will be for the comedy website, 5secondfilms.com.
Goal
Earn the most points by taking photos of strangers holding your team’s 5secondfilm cards in your team’s designated area.
The more strangers you photograph at once, the more points. Players earn additional points by convincing the strangers to pose like a raptor.
Setup
At least six players are needed.
The players divide into three color-coded teams—red, blue, and white. Players are given colored armbands corresponding to their team.
The game should take place in a heavily trafficked area such as an outdoor mall or shopping center. Three circles—one for each team—are drawn in chalk 10 feet apart in an open space.
The players are given two items:
1. Two identical instruction cards
2. One-hundred identical color-coded promotional cards per team to be used in the photos with strangers for points
Instruction card text:
1. Get strangers into your team’s colored circle - the more, the better.
2. Take pictures of the strangers holding your team’s promotional cards.
a. Each stranger is worth 1 point times the total number of strangers in the picture → if you take a picture of 2 strangers at the same time, they’re each worth 2 points.
b. Make them pose like raptors for double points!
3. Team with the most points in 15 minutes wins.
Tips:
1. Keep one teammate near the circle ready to take pictures
2. Spread-out to grab passer-by’s as well as groups farther away
3. Try to convince strangers to stay in the circle until you’ve got a bigger group to photograph (3 people in one photo is worth 9 people in 9 different photos)
To win more prizes after the game:
1. Friend “5secondfilms [team color]” on Facebook
2. Post the photos on Facebook and tag them with your new friend, “fivesecondfilms [team color]” the same week you’ve played the game
3. The team with most points on Facebook wins [insert prize]
Promotional card description:
Cards are color-coded by team and contain a graphic and web address for 5secondfilms.
Tallying Points
The moderator who drew the circles and passed out game materials does an initial point tally. Moderator takes back leftover materials and erases circles. After one week, moderator logs on to the three Facebook accounts 5SecondFilms Red, White, and Blue and tallies points again for the official score.
One photo’s points = (number of strangers in photo) per stranger. Strangers posing as raptors are worth two times the numbers of strangers.
Potential Directions
Facebook friends of players will be exposed to photos from the promotional game and have an opportunity to click through to the 5secondfilm profiles. The use of Web 2.0 extends the game beyond initial participants to the social network of each individual.
The promotion can be made even more effective by adding a broader game in which the recruited strangers can participate. The promotional cards the stranger holds in the photos could include unique codes that can redeemed online for a chance to win prizes or to sign up and participate in a meta-game. By taking a photo and receiving a promo card, strangers can join afterwards online and follow the larger progress of their team as the location-based game occurs multiple times in different locations.
I had trouble with the file that Will posted, so I just went through the first stages of the BIT-101 tutorial. I replaced the ball's constant motion with random x and y values. When the user touches the screen the ball's random location is reduced to a 20x20 area around the touched area.
Here is a .zip of the project: Download file
I initially tried to grab values from an XML file, but it just wasn't panning out. If anybody has any good tutorials/resources, it would be much appreciated.
Per Rebecca's write-up, our goal was to create a digital prototype for a local news aggregator combining "citizen journalism" with more established news articles.
Here is a .zip of the Xcode project: Download file
Planned functionality that didn't make it in:
Ability to switch main view between articles and citizen sources
Color of UITableCell's to denote source (I settled w/ changing the text color)
Rolling text of alternate main view at bottom of main view
Detail view of a source just Google's the source's title (no real links)
Additionally functionality that would've been nice for the digital prototype:
Text that isn't hard-coded into an array but drawn from a webpage's content
Secondary line of text with different formatting (primary line would be first line of content, with second line being source)
After creating this prototype, the biggest addition needed was not foreseen in the write-up--how a user adds and manages the content received. There needs to be some way to rate feeds and individual pieces of content, as well as a way to connect stories together under one topic. Otherwise, a site manager or algorithm (?) would be responsible for parsing all of the data, which drops the site back into the moors of managed news content that we were trying to escape.
Taking this into consideration, I realized we'd need a back end to either host user content or at least a database of ratings and connections for the content out there (or a combination of the two). It almost seems worth making a website like this first and then porting it to the iPhone down the line.
So this week, I was supposed to create an iPhone prototype that incorporates the ideas of space and place.
Idea:
When users twitter or take a photo, the picture or text would be tied to the GPS coordinates of its creation. Users could enter the app and see glowing nodes whose size and brightness would be relative to the user's proximity to the original location. Nodes would be created for not only the iPhone user but his or her friends' text/photos, as well.
Prototype:
My goal was to create a modifiable SQLite database that contained a user's notes and GPS coordinates (which were loaded on startup as opposed to pressing a button in the UI). I was also trying to figure out graphics that do not use the UI framework.
Execution:
I was working off of three separate examples:
1. My previous assignment for GPS
2. This tutorial for SQLite: http://icodeblog.com/2008/08/19/iphone-programming-tutorial-creating-a-todo-list-using-sqlite-part-1/
3. The Apple Dev Center's GLSprite example
Unfortunately, things didn't go as smoothly as planned. I didn't get so far as the graphics, getting stuck with the SQLite and GPS combination. Here is the botched project: Download file
Some of the questions I have after this endeavor:
1. What does the CLLocation's "(id) sender" refer to and how can I incorporate it into NSTimer?
2. Will NSNumber work for holding the GPS coords?
3. What sqlite3_column_* and bind_* type works for incorporating the GPS coordinates?
4. Is there a way to print to a console or something similar for debugging?
A Hello World'esque application - the user presses a button to view his or her Latitude and Longitude coordinates.
Next step is to figure out CoreGraphics and create some visuals outside of Interface Builder.
Here is the code for my second sketch:
import JMyron.*;
JMyron theMov;
int[] currFrame;
int[] prevFrame;
int[] fadeFrame;
int tolerance;
int modNum;
boolean revealing;
void setup() {
size(640, 480);
theMov = new JMyron();
theMov.start(width, height);
theMov.findGlobs(0);
// initialize the pixel arrays to avoid a NullPointerException
loadPixels();
currFrame = prevFrame = fadeFrame = pixels;
tolerance = 53;
modNum = 1;
revealing = true;
}
void draw() {
// erase the previous image
theMov.update();
// save the last frame before updating it
prevFrame = currFrame;
currFrame = theMov.image();
// draw each pixel to the screen only if its change factor is
// higher than the tolerance value
loadPixels();
for (int i=0; i < width*height; i++) {
if(brightness(pixels[i])<255)
{
fadeFrame[i] = int(brightness(pixels[i]+modNum));
if(brightness(pixels[i])>255)
{
fadeFrame[i] = color(255,255,255);
}
}
}
background(255);
for (int i=0; i < width*height; i++) {
pixels[i] = color(fadeFrame[i]);
if (comparePixels(i)) {
pixels[i] = color(0);
fadeFrame[i] = color(0);
}
}
updatePixels();
}
boolean comparePixels(int index) {
if (Math.abs(red(currFrame[index])-red(prevFrame[index])) < tolerance)
if (Math.abs(green(currFrame[index])-green(prevFrame[index])) < tolerance)
if (Math.abs(blue(currFrame[index])-blue(prevFrame[index])) < tolerance)
return !revealing;
return revealing;
}
void keyReleased() {
if (key == '.' || key == '>') {
// increase tolerance
tolerance += 2;
} else if (key == ',' || key == '<') {
// decrease tolerance
tolerance -= 2;
}
else if (key == '+' || key == '=') {
// decrease tolerance
modNum += 1;
println(modNum);
}
else if (key == '-' || key == '_') {
// decrease tolerance
if(modNum>0)
{
modNum -= 1;
}
println(modNum);
}
}
public void stop() {
theMov.stop();
super.stop();
}