Support for OpenGLES/OpenAL Sliding Puzzle Game Starter Kit

Popular questions for this item

How can I change the image used in the sliding puzzle

Replace image1.png in the project with a 512×512px PNG file saved in 32bit color.

In the comments you stated that it is possible to add many more .png files. Could you help me out here?

Change default image filename

  • The easiest way to change the default image is simply to overwrite the image1.png with a new file. See the first FAQ entry
  • If you want to change the filename for some reason though….
  • Open the project. Navigate to OpenGLController.m
  • Scroll down to the “loadImages” method
  • change the line
  • [self loadTexture:@”image1.png”];
    to refer to a new image (which you have added into your project, i.e. under the images folder in the project navigator


  • brushed.png is loaded into texture number 0
  • image1.png is loaded into texture number 1
  • restart.png is loaded into texture number 2
  • and solid.png is loaded as texture number 3.
  • the game uses texture 1 by default for the sliding tiles.
  • If you want to use multiple images

  • if you want to have multiple images you can load more images in “loadImages” and note down the texture number those would be e.g. if you add another line after “solid.png” it would become texture 4, the one after that would be texture 5 etc.
  • when you press the restart button or the game loads for the first time “shuffletiles” is run. Therefore this would be a good place to randomly change the texture number if you have more than one texture. The first line in “shuffletiles” is
    int imageno = 1;
    if you change this to use a random function such as
    int imageno = 4+ arc4random()%2;
    it will randomly assign the texture to one of the ones you have loaded.
  • Here is the example code change:
        [self loadTexture:@"brushed.png"]; //0
        [self loadTexture:@"restart.png"]; // we wont use this one anymore, load a small image into it
        [self loadTexture:@"restart.png"]; //2
        [self loadTexture:@"solid.png"]; //3
        [self loadTexture:@"one.png"]; //4 our first image
        [self loadTexture:@"two.png"]; //5 our second image
        [self loadTexture:@"three.png"]; //6 our third image
        int imageno = 4 + arc4random()%2; // gives random number 4,5,6
    -(void)drawView {
    if (spriteArray[s].textureid >= 4) {
    } else {