LoginSignup
0
0

More than 5 years have passed since last update.

画像が重なっている場合のフェードインとフェードアウトへの対策。RenderTextureとui::ImageView

Last updated at Posted at 2018-06-26

cocos2d-x 3.x系です。

画像を前後に重ねた状態でフェードイン・フェードアウト処理をすると、背面にある画像が透けて見えます。

今回は両方同時にフェードイン・フェードアウトさせるのでマスクする事にしました。

前面の画像に合わせたマスク画像を作りそれを使って背面の画像をクリッピングする物です。

ClippingNodeを使う
ただ、これには問題があったらしい。
それでも今なら大丈夫でしょうと思ってやります。
http://ringworks.jp/blog/tech-blog/%E3%80%90cocos2d-x%E3%80%91%E3%83%9E%E3%82%B9%E3%82%AF%E5%87%A6%E7%90%86%E3%81%AE%E6%82%A9%E3%81%BE%E3%81%97%E3%81%84%E5%95%8F%E9%A1%8C

問題:
 この前面に配置した画像はサイズが可変になる仕様だが、Spriteクラスはサイズ変更ができない。
 ui::ImageViewにすると矩形でマスクされてしまって、これも使えなかった。

解決
 RenderTextureクラスを使用する
 (ClippingNodeでマスクに使うTextureを用意できればよく、このRenderTextureが使える)
 ui::ImageViewでサイズ変更させた物を描画して、それをマスク画像として利用する。
 サイズ変更の仕様に対応できた。
(サイズ変更してステンシル用のtextureに再描画する必要がある。)

ClippingNode生成

//マスク用のテクスチャ生成のパート
//任意のサイズで、適切なPositionに

RenderTexture* tex = RenderTexture::create(width, height);
target>addChild(tex);//retainで良いのだが、寿命が同じなのでaddChildeした

//マスク用の画像をImageViewで生成

auto mask_s9s_node = ui::ImageView::create("mask.png");

//テクスチャに、マスクする画像を描画。 適宜画像サイズを変更させていく。

//textureへの描画開始
tex->beginWithClear(1, 1, 1, 1);

mask_s9s_node->setContentSize(Size(100, 100));
mask_s9s_node->cocos2d::Node::visit();

//textureへの描画終了
tex->end();

その他
  1. RenderTextureの位置合わせ方法、
    SetPosition()を行う。
    ただし、
     AnchorPoint指定は機能しない
     ContentSizeも機能しない

  2. visit()命令のタイミングに注意すること。詳細は別途余裕があれば、

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0