1. Create new View-Based Application

2. Resources/Add New Group (gfx)

3. Spend 20 minutes trying to draw simple tile in Gimp!

4. Create gfx folder in dev folder

5. Copy tile to gfx folder.

6. Drag tile into gfx group

---

Load img into Variable

-> Controller.h

inside function

UIImage* img_squareTile;  // Variable name we'll be using.

below function

@property (nonatomic, retain) UIImage* img_squareTile; // Something I don't understand about the variable we'll be using!

-> Controller.m

under @implementation

@synthesize img_squareTile; // *shrugs*

inside dealloc

[img_squareTile dealloc]; // Clears it when we quit.

inside viewDidLoad

img_squareTile=[UIImage imageNamed:@"squareTile.png"]; // Loads image into Variable : Note, it ignores the folder! *sigh*

Test run : Build successful : Grey Screen

---

Create main loop

-> Controller.m

inside viewDidLoad

[NSTimer scheduledTimerWithTimeInterval:(0.033) target:self selector:@selector(perFrame) userInfo:nil repeats:YES]; // .033 seconds = approx 30 frames per second.

create perFrame to go with it.

// Gets called 30 times per second.

- (void)perFrame {

}

-> Controller.h

Add perFrame, under @property

- (void)perFrame;

Test run : Build successful : Grey Screen

---

Make array for grid

-> Controller.h

inside function, declare variable.

int gameGrid[150]; // Array of numbers, for us..  320x460 / 32x32 tiles = 10x14 tiles = 140 + "whoops" buffer zone.

-> Controller.m

inside viewDidLoad, clear array before use.

for (int n=0;n<140;n++) {

gameGrid[n]=0;

}

Test run : Build successful : Grey Screen

---

Make secondary grid to hold all the little images.

-> Controller.h

UIImageView* viewGrid[150];  // Array of "views", for the iPhing

-> Controller.m

replace the previous for loop with..

int x=0;

int y=0;

for (int n=0;n<140;n++) {

gameGrid[n]=0;

viewGrid[n]=[[UIImageView alloc] initWithImage:img_squareTile]; // Make viewGrid a ImageView using squareTile as the default image.

viewGrid[n].frame=CGRectMake(x*32,y*32,32,32); // Give it an X/Y co-ordinate and width/height

[self.view addSubview:viewGrid[n]];  // then add that into the overall view

x++; if (x==10) {x=0;y++;}     // Shift the X/Y

}

Test run : Build successful : Grid!!!

---

Tapping the grid to change it's colour

Open up Gimp and struggle to make a second image, then get that loaded in like we did earlier.

-> .h

UIImage* img_squareTile2;  // Other variable name we'll be using.

@property (nonatomic, retain) UIImage* img_squareTile2; // Something I don't understand about the variable we'll be using!

-> .m

@synthesize img_squareTile2; // *shrugs*

dealloc{

[img_squareTile2 dealloc]; // Clears it when we quit.

viewDidLoad{

img_squareTile2=[UIImage imageNamed:@"squareTile2.png"]; // Loads image into Variable

Next, dump a quick flip technique into the perFrame function

perFrame{

int x=round(random() % 10);

int y=round(random() % 14);

int ID=y*10+x;

gameGrid[ID]=1-gameGrid[ID];

if (gameGrid[ID]==1) {viewGrid[ID].image=img_squareTile2;}

if (gameGrid[ID]==0) {viewGrid[ID].image=img_squareTile;}

}

Test run : Build successful : Colour changing Grid!!