Final Project — Presentation & Demonstration

Due Date (for Slide Submission)

Wednesday, December 16th — 11:59pm

Background

Final project presentations and live demonstrations will occur during the time allotted for the final exam (Thursday, December 17th 6–8pm). Each group will be scheduled a 4 minute chunk of time for their presentation and demonstration. This 4 minute time limit will be strictly enforced. The specific order of presenters will be determined next class.

Your presentation should consist of a minute or so of slides which present an introduction to your application, followed by an actual live demonstration of your app.

Your slides must be in PDF format and should contain the following content…

  • Title slide — consisting of app icon, app name and team member names
  • App Description slide — a one slide overview of your application
  • Frameworks and Libraries slide — a one slide that lists frameworks or libraries used by the app and mentions what they were used for
  • Backup Demo Slides — in the event that something fails during your live demo, you should have screen captures that are capable of being used as backup

Your demonstration should highlight the key features of your application. You are strongly encouraged to rehearse your demonstration ahead of time.

Demo Information

I will be building and installing all apps into the iPhone Simulator on my laptop for the demonstration. To ensure a smooth demo, I recommend the following…

  • When testing your app, I would strongly suggest that you remove your app from the simulator and try a fresh install before submitting to avoid any issues caused by (lack of) residual artifacts.
  • Perform a dry run on the demo hardware — I will be holding special office hours Tuesday, December 15th 5:30–7:00pm where you can stop by and do a dry run on the actual machine that will be used for the demos.

If your app requires features that are not supported on the simulator (such as camera, accelerometer, etc.) email me as soon as possible so we can make the necessary accommodations.

Submission

To submit your slides, open up a terminal, navigate to the directory containing your slides then issue the command:

submit cs491i final-slides slides.pdf
Advertisements

Final Project — Mock App Store Submission

Due Date

Tuesday, December 15th — 11:59pm

Background

If you were publishing an application on the App Store, you would need to provide information about your app for submission. To simulate that experience, you will prepare a “mock App Store” submission.

For this write up I’ve provided a zip file which you must use as a template for writing up the details of your app. This zipfile includes an HTML file that when viewed in a web browser displays a page similar to that on the App Store.

Specifically you must edit the following in index.html:

  • Copy your app’s icon (a 57x57px PNG file) into the directory and update the app icon’s image tag to show your icon. Note, you needn’t try to apply Apple’s rounding, beveling, or highlighting — I have a script that will generate the rounded version as seen in the simulator, including honoring the “Icon already includes gloss and bevel effects” flag.
  • Update the HTML to include your app’s name.
  • Update the HTML to include your name(s).
  • Update the Apple Frameworks Used list to include all frameworks imported by your app.
  • Update the Third Party Libraries Used list to include all libraries used by your app. If you aren’t using any third party libraries or classes, you may remove this section.
  • Replace the sample description text with your own app’s description. Do not use any special HTML or emoji within the paragraphs. If your app requires features found on certain devices (i.e. a camera) state so in the description. Do not include testimonials or reviews like you may see in some descriptions.
  • Include up to 5 screenshots (must be 320x480px or 480x320px PNGs) and captions from your app.

All “Mock App Store” submissions will be aggregated and posted on the course blog prior to the final presentations.

To get a feel for the content provided in app descriptions, I encourage you to take a look at apps that are on the store. Some of the more popular apps that I feel have pretty good descriptions are included below:

Submission

Once you’ve made the changes to the provided HTML file and swapped out the sample icon and images with your own package it up by zipping up the entire directory.

To submit your mock app store submission, open up a terminal, navigate to your zip file then issue the command:

submit cs491i final-appstore appstore.zip

Final Project — Source Code Submission

Due Date

Monday, December 14th — 11:59pm

Grading Criteria

Grading criteria for the final project will be based on the criteria from the week-long assignments…

  • Correctness of application
  • Appearance of application
  • Adherence to Objective-C and iPhone coding conventions
  • Neatly formatted and indented code
  • Well documented header files
  • Absence of significant performance issues
  • Absence of memory leaks

…as well as…

  • Scope — Is the app sufficiently complex? Does it deliver what was proposed?
  • Polish — How polished is the app? Does it have a launch screen image? Does it have an app icon? Is the app appropriately named? Is the user experience well thought out?
  • Interesting, novelty and uniqueness — Is the app interesting, or is it just a remake of an already existing app? What’s the overall coolness factor?
  • Required Elements — Does it contain multiple views? Does it persist some form of data?
  • Suggested Elements — Does it contain sound effects? Does it contain animation?

Submission

Like all of the week-long projects this semester, you will need to submit your source code and necessary resources for grading. You should remove your build directory and zip up the directory containing your Xcode project.

To submit your final project source code, open up a terminal, navigate to your zip file then issue the command:

submit cs491i final-code project.zip

Assignment 8 — Redrawing the View

I’ve had several people email me with issues redrawing the board on touch events. Since this seems to be a semi-common problem, I thought I’d take a moment to address it here.

The problem is likely caused by not all of the draw code being executed. If you take a look at the GLView class’s drawView method, you’ll see that there’s some code before and after the call to the delegate’s (the view controller) drawView: method. It is this code that actually does the screen refresh.

- (void)drawView {
  glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
  [delegate drawView:self];
  glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
  [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

So, by simply calling the view controller’s drawView: method the screen refresh doesn’t happen. To ensure this code gets called, instead of invoking the view controller’s drawRect: method simply invoke the GLView’s (the view controllers view property) drawRect method like so…

[(GLView *)self.view drawView];

Assignment 8

Due Date

Monday, November 23rd — 11:59pm

Background

This project is designed to give you some hands on experience with…

  • Using Xcode & Interface Builder
  • Declaring and wiring outlets and actions
  • Testing applications in the iPhone Simulator
  • Utilizing OpenGL ES to draw geometry into an OpenGL UIView
  • Handling touch-based events and updating graphics accordingly
  • Playing sounds based on user interactions
  • Firing events using timers

Task

For this assignment you will be implementing the class game Simon.

Your application needn’t look identical to the one shown in the description, but must it contain the following elements…

  • A toolbar with a button that allows the user to start a new game
  • A large game board that must be rendered using OpenGL ES 1.1 and contain the following elements:
    • The main, rounded game board
    • 4 slices for each of the red, green, blue and yellow buttons
    • A “status” label that informs users of the number of correct guesses in a row or tells them that the game is over

Note that all of the geometry of the board must be generated by geometry (vertex arrays) and not images.

Main App Behavior

When your app initially loads it should look similar to the screen shown below. Unlike the last game, when the app is launched a game should not be automatically started.

Initial Screen

Initial Screen

The user starts the game by pressing the “New Game” button. Immediately after the use presses the button, the app should automatically start the game by selecting a button at random and both light the button up and play its sound. Below is an example where the app has selected the red button, it is lit below.

App Playing Red Button

App Playing Red Button

After the app is done playing selecting and playing/lighting the button, the board should return to the initial state and wait for the user to enter the same sequence as shown below.

User's Turn

User's Turn

The user should then have some fixed amount of time to press the button played/lit by the app. Below we see the user pressing the red button. When the user presses a button it should light up and play that button’s associated sound.

User Pressing Red

User Pressing Red

If the user successfully replays the button that was lit, then the label for the number of items correct, should increment for that series.

Score Updated to 1

Score Updated to 1

Immediately after the user re-enters the sequence, the app will replay the first button, then select a new button to press at random and replay button’s sound and relight the button. So, if the app selected blue as the second item, it would play red (from the first round) then blue (selected at random this round). Below we see the blue button lit up as the app plays the sequence for the user.

App Playing Blue Button

App Playing Blue Button

After playing the sequence of 2, the app then gives the user some fixed time to enter re-enter the entire sequence in order. Each button press that the user makes should light up the button and play the corresponding sound. If the user enters the sequence correctly (red then blue), then the score is updated to 2 (for successfully replaying a sequence of length 2). Below we see the updated screen after the user successfully entered the sequence of 2, before the app picks a third button and starts playing the new sequence.

Updated Score to 2

Updated Score to 2

Once the user successfully enters a sequence of the app should pick a new button, let’s say it was blue a second time. Thus the sequence to play would be red, blue, blue. Each time the user correctly enters the sequence in the time allotted, the score should be updated and the app should pick a new random color and replay the new sequence. This process continues indefinitely — until the user fails to replay the sequence.

If the user doesn’t replay the sequence successfully, then instead of playing the sound for the button, the app should play a special game over sound and update the status area with a game over message. Below is an screen shot of a game that is over.

Game Over

Game Over

The app should also end the game if the user takes too long to replay a given sequence back.

Gameplay Video

If pictures are worth a thousand words, then videos are worth much more.

Gameplay Video

Gameplay Video

This is a video capture of 2 plays through the game. In the first game the user manages to get up to playing back a sequence of length 7 before getting confused and pressing a wrong button. In the second game the user makes it through a couple of rounds before losing by not pressing the buttons in the time allotted.

Persisting Data

There are no persistence requirements for this assignment.

Provided Files

For this project I’ve provided 2 different zip files — Simon.zip & Sounds.zip.

The Simon.zip file is an OpenGL ES 1.1 Xcode project to get you started. This project is based off of Jeff LaMarche’s OpenGL ES template, but I’ve stripped out some things (namely animation and several of the extra files that we don’t need for this project). Additionally, I’ve adjusted the view and have drawn a sample blue quad onto the screen for you. Simply building the project should give you the following screen in the simulator.

Provided Project Screenshot

Provided Project Screenshot

The Sounds.zip file contains 5 .caf sound files — one for each color (red, green, blue, yellow) and one to be played when the game is over.

Hints

Start by downloading, building and running the starter project.

One of the first things to tackle is how to draw the board using vertex arrays. I’d recommend thinking about the board as a unit circle. Using trig functions you should be able to programmatically generate vertex array data to draw the circle. Then, think about how to draw the buttons using triangle vertex arrays. Again, trig is your friend.

Next, you’ll probably want to tie in user touches. There are several ways to tell what the user is pressing, but the following is a pretty straight foward method in OpenGL that happens to be available on the iPhone.

GLubyte col[4];	
glReadPixels(pos.x, -pos.y + 480, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, &col[0]);
NSLog(@"r: %d, g: %d, b: %d", col[0], col[1], col[2]);

Next you’ll want to probably get the buttons to light up and the sounds to play on presses. From there you’ll probably want to implement using NSTimers to play app generated sequences of buttons. Some timing data that I found to work well in my app was to light up a button for .4 seconds, rest for .1 seconds, then move into the next button. I also found that allocating a second based on the number of buttons for that round was a reasonable time for the user to respond (i.e. 5 buttons, give the user 5 seconds to enter them once the app has finished playing them). Lastly, implement the actual game logic and tie in the toolbar and status labels.

Additional Ideas

The following items are provided as thoughts as to how you might extend or improve the project beyond the basic requirements. You are not required to implement any of these.

  • Customize the game pieces
  • Add in some animation (i.e. show the button fading out)
  • Try out alternate color combinations — just don’t make my eyes bleed
  • Feel free to play with the layout and style of elements — just be sure that things are neatly aligned and that there is at least some justifiable method to your madness
  • Add your own images

Grading

Your projects will be graded on the following criteria:

  • Correctness of application
  • Appearance of application
  • Adherence to Objective-C and iPhone coding conventions
  • Neatly formatted and indented code
  • Well documented header files
  • Absence of significant performance issues
  • Absence of memory leaks

Submission

Like the previous assignment, you are required to submit a zip file of your project directory. Be sure to manually remove the build directory before zipping things up.

To submit the assignment, open up a terminal, navigate to your zip file then issue the command:

submit cs491i assignment8 Assignment8.zip

If developing on your own Mac, you’ll need to transfer the file into your GL account (via SCP), then SSH into GL and issue the submit command.

Assignment 7

Due Date

Wednesday, November 11th — 11:59pm

Background

This project is designed to give you some hands on experience with…

  • Using Xcode & Interface Builder
  • Declaring and wiring outlets and actions
  • Testing applications in the iPhone Simulator
  • Utilizing Core Graphics to generate custom UIViews
  • Handling touch-based events and updating graphics accordingly

Task

For this assignment you will be writing a basic Four-in-a-Row app. Your implementation will be a 2-player version of the game where the iPhone/iPod touch could be passed back and forth between two players. This saves you the overhead of implementing an AI to play against.

Your application needn’t look identical to the one shown in the description, but must it contain the following elements…

  • A toolbar with a button that allows the user to start a new game
  • A large game board that must be rendered using Core Graphics and contain the following elements:
    • The main game board section that has holes in it to see the dropped piece (yellow in my screen shots)
    • Legs on each side that protrude below the bottom of the main board section (blue in my screen shots)
    • Pieces visible through the board as they are dropped into a column (red and black in my screen shots)
    • The piece about to be dropped should be rendered above the currently selected column (red and black in my screen shots)
  • A “status” label that informs users of whose turn it is and alerts users to wins/losses/ties
  • Running totals for:
    • Red Wins
    • Black Wins
    • Ties
  • Main App Behavior

    When your app initially loads it should look similar to the screen shown below. When the app is launched a game should automatically start and whose turn it is should be shown in the status area.

    Initial Screen

    Initial Screen

    The user starts the column selection process by pressing their finger down over a column. When the finger is pressed down (and not yet released) the player’s piece should appear centered above the column their finger is over. The user should be able to drag their finger left and right, and as they do so, the marker should switch columns as needed. You’ll need to detect where the user has their finger and draw accordingly (in my implementation the finger can appear anywhere “in” that column for the full height of the UIView). A finger press is shown below.

    Finger Press over the Center Column (Red's Turn)

    Finger Press over the Center Column (Red's Turn)

    Only when the user lifts their finger should the selection be finalized and the piece dropped to the bottom-most free row as shown in the screen shot below. Note that the status has also been updated to reflect black’s turn.

    Finger Release over the Center Column (Red's Turn)

    Finger Release over the Center Column (Red's Turn)

    The screen shot below shows the finger press down for the black player. Notice that the piece is now black at the top when the user presses their finger down.

    Finger Press over the Center Column (Black's Turn)

    Finger Press over the Center Column (Black's Turn)

    Again, only when the user’s finger is released should the current column be selected as shown below. Notice that the status is once again updated to reflect the red player’s turn.

    Finger Release over the Center Column (Black's Turn)

    Finger Release over the Center Column (Black's Turn)

    As users drop pieces into the game board your app should check to see if a user has one by getting four-in-a-row on the horizontal, vertical or either diagonal. If a four-in-a-row is detected, your app should notify the winner in the status area. Additionally, your app should draw a line on the board indicating the four-in-a-row as shown below.

    Red Win

    Red Win

    If the game board is not currently in play (someone won or there was a tie) and the user presses the “New Game” button, the app should clear the board and alternate user turns. Below we see the result of pressing the button — it is now Black’s turn.

    New Game

    New Game

    If the game is not over and the user presses the “New Game” button, an action sheet should should pop-up to confirm that the user really wants to abort the current game as shown in the screen shot below. If the user accepts, the board should be reset. If they decline, then game play should continue uninterrupted.

    New Game Confirmation

    New Game Confirmation

    Your app should be smart enough to not show the user’s piece above the board if the column is full (or if the game is over). For example, if the user presses their finger down in the column immediately left of center the piece should appear…

    Finger Press over the Left of Center Column (Black's Turn)

    Finger Press over the Left of Center Column (Black's Turn)

    …then if they drag to the right, the piece should disappear from the column left of center, and since the center column is full no piece should appear above the center column…

    Finger Press over the Center Column (Black's Turn)

    Finger Press over the Center Column (Black's Turn)

    …but if they continue to drag to the right, once they clear the full column, the marker should reappear as shown below…

    Finger Press over the Right of Center Column (Black's Turn)

    Finger Press over the Right of Center Column (Black's Turn)

    If the board gets completely full without a win, an appropriate status message should be updated. Pressing over any column should have no effect.

    Tie Game

    Tie Game

    Persisting Data

    There are no persistence requirements for this assignment.

    Hints

    As usual, the first thing I’d probably do is to print out the initial screen and identify outlets, ivars, action methods, etc. You can probably build out the initial UI pretty quickly — less the custom UIView being drawn to by CoreGraphics.

    To tackle the UIView that’s rendering the game board I’d recommend starting by sketching out on a piece of paper the overall outline of the board and position of notable items (i.e. legs, main board, position of holes & location of hover pieces). You really need to plan out the dimensions of all of these elements before digging in. I’d recommend making this UIView as large as you can in IB and jotting down the dimensions so you know what your constraints are.

    Once you know the positions of the items you will be drawing, I’d move into actually building out and rendering those items. It probably makes sense to start with the 2 legs and main board. Once you have that positioned appropriately, I’d them move onto painting the holes in the board. You’ll want to figure out how to do this using loops — you really don’t want to specify the coordinates of all 42 holes.

    After you have the static board drawn, I’d then move onto capturing the finger events and simply logging which column on the board you’re over. Once you know you have that correct, you can move onto actually trying to render the piece in real time. Next, I’d probably write the code to actually drop a piece into the correct position when the finger is released.

    Once you have that done, it’s a matter of implementing the game logic — alternating turns, checking for wins, updating UI labels, etc. You’ll want to handle suppressing the piece if it shouldn’t be displayed. You’ll also need to wire in the “New Game” button and add the action sheet.

    Lastly, don’t forget that you need to draw a line through the four-in-a-row. Think about what information you need to draw this line and where/when you have it.

    Additional Ideas

    The following items are provided as thoughts as to how you might extend or improve the project beyond the basic requirements. You are not required to implement any of these.

    • Customize the game pieces
    • Add in some animation (i.e. show the piece dropping to the correct slot)
    • Try out alternate color combinations — just don’t make my eyes bleed
    • Feel free to play with the layout and style of elements — just be sure that things are neatly aligned and that there is at least some justifiable method to your madness
    • Add your own images

    Grading

    Your projects will be graded on the following criteria:

    • Correctness of application
    • Appearance of application
    • Adherence to Objective-C and iPhone coding conventions
    • Neatly formatted and indented code
    • Well documented header files
    • Absence of significant performance issues
    • Absence of memory leaks

    Submission

    Like the previous assignment, you are required to submit a zip file of your project directory. Be sure to manually remove the build directory before zipping things up.

    To submit the assignment, open up a terminal, navigate to your zip file then issue the command:

    submit cs491i assignment7 Assignment7.zip

    If developing on your own Mac, you’ll need to transfer the file into your GL account (via SCP), then SSH into GL and issue the submit command.

Assignment 6 — Adding the MapKit Framework

I thought I’d take a moment to post about a problem a couple of people have been having. If you’re getting the following error, it is probably the result of not having added the MapKit framework…

*** Terminating app due to uncaught exception ‘NSInvalidUnarchiveOperationException’, reason: ‘*** -[NSKeyedUnarchiver decodeObjectForKey:]: cannot decode object of class (MKMapView)’

Under Xcode 3.2 (the screenshots in the notes) MapKit is pre-populated in the Add → Existing Frameworks… dialog and simply requires selecting MapKit from the list. However under Xcode 3.1 you have to do a bit more work. Follow the steps below for adding MapKit to your project if you haven’t done so already…

1) Open Finder and browse to /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS3.0.sdk/System/Library/Frameworks as shown below (you may need to adjust the path a little if using a SDK newer than 3.0 with Xcode 3.1)…

Finder Window

Finder Window

2) Select the MapKit.framework fold and drag-and-drop it into the root of your Xcode project as shown below…

DnD Framework into Xcode

DnD Framework into Xcode

3) You should uncheck the box that states “Copy items into destination group’s folder (if needed)”, and press Add…

Copy Dialog

Copy Dialog

4) The MapKit framework should now appear under your project with the rest of the frameworks and your app should now contain the necessary MapKit libraries to run.

The Added Framework

The Added Framework