I'm in the beginning stages of creating a photo hunt/spot the difference game. The type where players must pick out differences between two similar photographs.
As a proof of concept, I created an incredibly crude prototype using almost entirely interface builder. I have 2 images on screen, with a bunch of nearly invisible buttons placed over differences in the pictures. When one of the invisible buttons is pressed, an alert pops up saying "You found a difference."
My question is from a design perspective, is there a better method of implementing this game programmatically? There must be a better way than littering the screen with invisible buttons and having 20 nibs for 20 pictures.
Since these photo hunt games are so popular, there must be some "standard" method of design/implementation i don't know of.
Probably just using a single NIB with an image, and using touch events to capture x/y coordinates would be the simplest design. Each image would have rectangles associated with it that represent the differences. Each time a user touches the screen, the x/y location would be compared to the list of rectangles.
Just out of curiosity... is there something that is going to make your photo hunt unique? Or is it just a learning experience for you?
Probably just using a single NIB with an image, and using touch events to capture x/y coordinates would be the simplest design. Each image would have rectangles associated with it that represent the differences. Each time a user touches the screen, the x/y location would be compared to the list of images.
Just out of curiosity... is there something that is going to make your photo hunt unique? Or is it just a learning experience for you?
I (not the OP) was thinking of doing one of these as a starter project just to get something onto the App Store, but eventually decided against it and started focusing on my "real" project. Anyways, the architecture you describe is essentially what I was thinking -- I think. Each "puzzle" would have a dataset consisting of an image (prebuilt with the different left and right side images) and a number of (x,y) positions. During game play, any touch position would be compared against all of the positions (adjusted for both the left and right panes). Any touch within a predefined radius of any of the positions would register as a correct guess, and that position would be marked as such, etc. etc. Pretty simple and straightforward implementation.
I'm using it primarily as a learning experience. Thus far the only saving/loading of information I've dealt with is using NSUserDefaults to keep track of high score data.
So if I understand both of your implementation suggestions correctly, I should have all my static images (ie: jpgs) stored in my project resources folder, as well as a text file of some sort (plist?) to save the x,y coordinates of the difference points.
Then I associate each picture to an entry in my text file.
ie: associate "1.jpg" to "entry 1" in the text file. With each entry formatted something like "[entry number:(x1 coordinate, y1 coordinate), ... (xN coordinate, yN coordinate)]"
I'm using it primarily as a learning experience. Thus far the only saving/loading of information I've dealt with is using NSUserDefaults to keep track of high score data.
So if I understand both of your implementation suggestions correctly, I should have all my static images (ie: jpgs) stored in my project resources folder, as well as a text file of some sort (plist?) to save the x,y coordinates of the difference points.
Then I associate each picture to an entry in my text file.
ie: associate "1.jpg" to "entry 1" in the text file. With each entry formatted something like "[entry numberx1 coordinate, y1 coordinate), ... (xN coordinate, yN coordinate)]"
Array (represents all pictures)
Array1 (represents picture)
Dictionary1 (2 coordinates for difference in image)
Number1 (x1 coordinate)
Number2 (y1 coordinate)
Number3 (x2 coordinate)
Number4 (y2 coordinate)
Number5 (found variable set to 1 if this difference found)
...
ArrayN
Dictionary1
Number1
Number2
Number3
Number4
Number5
An outer array represents all of my pictures, while the inner array represents an individual picture. Each of the 5 dictionaries in the inner array holds coordinates for differences in the pictures. The found variable is set to 1 when a difference for this image is found.
I detect when the user touches each point with the following code, shortened for brevity:
Code:
//pseudo code for brevity
-(void)touchesEnded:
get touch location
for (each dictionary in the picture array) {
if (player touches one of the points) {
set the found variable for this point to 1/YES
}
}
In the if statement, when a difference is successfully found, I set the "found" variable in my dictionary to "1" to indicate that I found a difference.
In the simulator everything works fine. But when I load the app onto my phone, and tap a difference point, the screen freezes. The only way to quit is to stop it within Xcode. Using the debugger, I pinpointed the crash to the line of code "[currentDiff setObject:tempBool forKey:@"found"];" below. Specifically the tempBool variable.
Code:
//2 rects always point to 1 difference. if finger in one of the two rects, found a difference
if (((CGRectContainsPoint(leftRect, location)) || CGRectContainsPoint(rightRect, location)) && (found == 0))
{
//now that we've found a difference, update local copy of the picture data and set its found flag to 1(true)
NSNumber *tempFound = [[NSNumber alloc] initWithInt:1];
[currentDiff setObject:tempFound forKey:@"found"]; //crashing game on iphone
[tempFound release];
[localCopyPic replaceObjectAtIndex:i withObject:currentDiff];
}
Why does this code work in the simulator but not on my phone?