前回は、cocos2d-htmlによる「Spriteの生成」のお話でした。
今回は、数あるアクションの中から、フェードイン・フェードアウトについてご紹介します。
Spriteを表示するために
addChild()
を使用することは前回の記事でお話しました。
この方法でSpriteを表示した場合、Spriteが画面上に突然現れるような描画になってしまいます。
ですが、ゲーム等を作成していく上で、数秒かけて徐々に画像を表示させたい場合がでてくると思います。
そのような場合に使用するのが、今回紹介しますフェードインアクションになります。
簡単な使用方法を先に記載しておきます。
以下をご覧ください。
まずは、前回ご紹介した方法でSpriteを作成しておきます。
ここで一つ注意していただきたいのが透過度を100％にしてaddChildしていくという部分です。
※setOpacity(0)です。 使用方法は前回の記事をご覧ください。
その後、フェードインの設定をします
フェードインの設定はvar action～ で行っています。
cc.FadeIn.create( x )の xの部分で秒数を指定します。
今回の場合、2.0秒かけてSpriteを不透明にする設定となります。
設定した内容を実行している部分が
circle.runAction～になります。
ここにある「 runAction() 」という関数によってアクションの実行を行います。
前回の set～ を使用する場合にも共通して言える事ですが、
“.(ドット)”を先頭につけ、Spriteを “.” の前に指定します。
circle.runAction( action )を例に説明しますと
circle（ Sprite ）は action（アクション）を runAction（実行）しなさい。
となります。
・参考画像
フェードインと反対に徐々に透過していくフェードアウトというものもあります。
使用方法はフェードインとほぼ変わりません。
以下をご覧ください。
cc.FadeInt.createが cc.FadeOut.createに変わっているだけです。
実行方法もフェードインのときとまったく変わりません。
・参考画像
これにより、
１．最初から表示する場合はアクションなし。
２．徐々に表示させたい場合はフェードインアクションを用いる。
という、使い分けが出来るようになり表現方法に幅が出来ました。
以上で、フェードイン・フェードアウトの紹介は終わりとなります。
<次回以降の更新について>
次回は、Spriteを動かすムーブアクションを紹介したいと思います。