Project 6: Adventure Game Map Display

Due: Sunday, April 8th, 2018


Write an application that displays a tiled map, like you might use in an adventure game. Set up a two-dimensional array of characters that tells what kind of tile should be in each square of a grid. For example, if the contents of the array are the characters shown on the left below, then the display might look like the image shown on the right below.
MMM..~ MMff.~ Mff.~~ ff...~ ..~~~~

The player character

Display an image for a player character (PC). The image can be the simple person picture in my files, a small spaceship, or whatever you want, as long as it's easily recognizable. The PC should be superimposed on the tile image for the square that it's in. In other words, you should be able to see the tile image behind the PC.

Allow the player to move the PC by tapping on the map. Tapping on the top of the map should move the PC one square up, tapping on the right side of the map should move the PC one square to the right, and so on. The PC should not move diagonally.

Your app should use coordinates of touch events to figure out how the character should move. You won't get full credit if you use buttons to tell which way the character should move.

Scrolling the map

When the player moves the PC to a square that is off the screen (but not off the map), your app should automatically scroll the map in the direction the PC is moving. For example, if the PC is on the top row of the screen and moves up, and there is at least one more row of map squares above the PC, then the app should move all of the map tiles down one row and display a new row at the top that shows that part of the map.

If the PC is on the edge of the map, and tries to move off the map (as opposed to moving off the screen, then the app should display a row (or column) of "out" tile images as a way of showing that the PC is on the edge of the map.

The PC should never move off the screen or off the map.

Make sure that your map is big enough to test scrolling. It should be at least 12x12 with a variety of terrain so that it's easy to see if the map is scrolling correctly.

NOTE: It's fine to move the map an entire row or column at a time. You don't have to use smooth animation or move the map a pixel at a time. In fact, it's better not to try to move the map a pixel at a time until after you get it to move one tile at a time.

Custom view component

Create a custom view class by subclassing UIView (iOS) or View (Android). Images should be drawn in the onDraw method for Android and in the drawRect method for iOS. Do not use image views or similar GUI components to display the images.

iOS notes

Android notes

Sample images

Here are some terrain images that I made that you can use if you'd like to:


Android apps should use AsyncTask to load images in the background.

Be sure to use good memory management techniques and follow the programming and user interface conventions and guidelines discussed in class, our textbooks, and in Apple and Android documentation.

Turn in

Please put your last name or initials in your package name and your app name. Put your complete project directory, including source files and resource files in a zip or tar file. Turn in your zip file on Canvas.

25 Displays images in a custom view
25 Uses 2D array of characters to determine which images to display
10 Displays player character (PC) superimposed on a tile
20 Allows player to move PC by tapping on map
20 Handles map and screen boundary conditions correctly