Repeat image on a fixed background, Cocos2D?

Question

I'm quite new to Cocos2d, does anyone know how to create a background that would be one fixed screen (no scrolling), with a small image just repeated to the whole size of the screen - depending on device?

The best way I can explain the look I'm after is something similar to repeating a small image for a website background.

Thank you in advance for any help :)

Answer 1

Since cocos2d is OpenGL based (sprites are just textured quads), you can create one large quad and modify the UV coordinates accordingly.

You don't have to mess with the UV coordinates yourself, cocos2d has some helper methods for that. In order to have an image repeat over the whole screen, you can do something like this:

// get the screen size
CGSize screenSize = [[CCDirector sharedDirector] winSize];

// create a sprite from file that will cover the whole screen
CCSprite* bg = [CCSprite spriteWithFile:@"image.png" 
    rect:CGRectMake(0, 0, screenSize.width, screenSize.height)];

// set texture parameters to repeat
ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
[bg.texture setTexParameters:&params];

// position the quad at the center of the screen
[bg setPosition:ccp(screenSize.width * 0.5f, screenSize.height * 0.5f)];

Now you should have a sprite bg that covers the whole screen with the repeated texture from "image.png".

Answer 2

Something along the lines of this...

NOTE: I have minimal knowledge of cocos2d/objective c

This is a nested for loop, If you would like to access data from each image at a later stage i'd suggest adding each tile to an array inside the nested for loop :) Hope this helps

    CGSize size = [[CCDirector sharedDirector] winSize];
    int TILE_SIZE = 57

    for (int y = 0; y < (size.height / TILE_SIZE); y++) {
        for (int x = 0; x < (size.width / TILE_SIZE); x++) {
            CCSprite *tile = [CCSprite spriteWithFile:@"Icon.png"];
            [tile setAnchorPoint:ccp(0, 0)];
            [tile setPosition:ccp(x * TILE_SIZE, y * TILE_SIZE)];
            [self addChild:tile];
        }
    }

The "57" in the set position method is the width and height of the image respectively.

If you want the images to fit perfectly in the screen then they will have to be resized accordingly