How to repeat an image like a pattern?

cocos2d-x C++
#1

Hello everyone!

I searched on the Internet before asking but everything I found seems old or not related to what I want to accomplish.

I have a tiny png image I want to repeat as a pattern. Here is an example:

Tiny image: http://i.imgur.com/tJd9vrv.png
Aftear repeating the image, the result should be: http://i.imgur.com/FMFiJuG.png

As you can see, what I want to do is a “kind of” CSS replicate.
I’m using an ImageView right now, but I imagine I could switch to another class if necessary (since is not for a background, just for some decorations)

Thank you in advance! :raising_hand:

#2

Possible options:

  • use Scale9Sprite

  • set repeat option for texture:

    Sprite *sprite = Sprite::create("PatternImage.png");
    Texture2D::TexParams params;
    params.minFilter = GL_NEAREST;
    params.magFilter = GL_NEAREST;
    params.wrapS = GL_REPEAT;
    params.wrapT = GL_REPEAT;
    sprite->getTexture()->setTexParameters(params);
    backgroundTex->setTextureRect(cocos2d::Rect(0, 0, 500, 500));

P.S. Updated answer. Forgot to set texture size :slight_smile:

#3

Thank you very much @MikhailSh

I had problems using your code but in the end it was because I was using setContentSize instead of a Rec.

Cheers :smile:

#4

You can also do it like this:

Texture2D *texture = Director::getInstance()->getTextureCache()->addImage("image_to_repeat.png");
Sprite textureSprite = Sprite::createWithTexture(texture, (Rect){ 0, 0, w, h });
#5

If you’re using a spritesheet, wouldn’t this apply the repeat to the entire texture and mess stuff up?

edit: seems like it at least shares the filter settings. Still working on getting the repeat itself to work

#6

Here’s a solution that uses a sprite from a given sprite sheet, draws it onto a POT (power of two-sized texture) and then uses that new texture to repeat, instead of altering the original sprite. I don’t know enough about scale9 sprites to use it properly, but this just makes one huge 1500x1500 wall of sprites

auto imgview = cocos2d::ui::ImageView::create("pink_monster.png", ui::TextureResType::PLIST);
ui::Scale9Sprite* scale9_sprite = dynamic_cast<ui::Scale9Sprite*>(imgview->getVirtualRenderer());
auto sprite = scale9_sprite->getSprite();

float scale = 2.0f;

auto sprite_size = Size(16, 16);
sprite_size.width *= scale * 2;
sprite_size.height *= scale * 2;

auto rt = RenderTexture::create((int)sprite_size.width, (int)sprite_size.height);
rt->retain();
rt->begin();
sprite->visit();
rt->end();

sprite = Sprite::createWithTexture(rt->getSprite()->getTexture());
sprite->setFlippedY(true);
Texture2D* tex = sprite->getTexture();
scale9_sprite->setPosition(get_center_pos());
auto tex_params = cocos2d::Texture2D::TexParams();
tex_params.minFilter = GL_NEAREST;
tex_params.magFilter = GL_NEAREST;
tex_params.wrapS = GL_REPEAT;
tex_params.wrapT = GL_REPEAT;
tex->setTexParameters(tex_params);
sprite->setContentSize(sprite_size);
sprite->setTextureRect({ 0, 0, 1500, 1500 });

sprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
auto pos = get_center_pos();
sprite->setPosition(pos);

this->addChild(sprite);