格子状の動く背景を作ってみる

概要

同じ画像を格子状でリピート表示され、それが斜め上とかに永遠に動いている。
そんな背景を作ってみる。

環境

• cocos2d-x v3.3

格子状の動く背景を作る

画像を用意する

2の階乗のサイズで用意する。

GL_REPEATを使ってしきつめる

auto director = Director::getInstance();
const auto vs = director->getVisibleSize();
const auto vo = director->getVisibleOrigin();

// テクスチャを生成
Texture2D *texture = Director::getInstance()->getTextureCache()->addImage("bg.png");

// テクスチャのパラメータを生成
const Texture2D::TexParams tp = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};

// テクスチャのサイズ設定用のRectを生成
// - 画面サイズに画像サイズを縦横に1個分ずつ追加する（アニメーションさせるため）
auto rect = Rect(0.0f, 0.0f, vs.width, vs.height);
rect.size.width += texture->getContentSize().width;
rect.size.height += texture->getContentSize().height;

// Spriteを生成
// - 画面の下と右に画像1個分はみ出すように配置する
_bg = Sprite::createWithTexture(texture, rect);
_bg->setAnchorPoint(Vec2::ANCHOR_BOTTOM_LEFT);
_bg->getTexture()->setTexParameters(tp);
_bg->setPosition(Vec2(vo.x, vo.y - texture->getContentSize().height));
addChild(_bg, 0);

updateで動かす

auto director = Director::getInstance();
const auto vs = director->getVisibleSize();
const auto vo = director->getVisibleOrigin();

// 位置を左上に動かす
// 画像1個分以上移動していたら最初の位置に戻す
{
    auto pos = _bg->getPosition();
    pos += Vec2(-0.5f, 0.5f);

    auto diff = pos - vo;

    if (fabsf(diff.x) >= _bg->getTexture()->getContentSize().width) {
        pos = Vec2(vo.x, vo.y - _bg->getTexture()->getContentSize().height);
    }

    _bg->setPosition(pos);
}

参考

• cocos2d-xで画像をシーンの背景にリピート表示