ブロックチェーンゲーム制作チェーン -Minimal Arcade Medal-

ブロックチェーン技術、ゲーム作成のためのコード、ドット絵やアニメーションの作り方を解説するブログです。最終的に記事の内容を組み合わせることで誰でもブロックチェーンゲームが作れるようにしたいです。Micro Arcade MedalというdApps開発中です。

素敵なエフェクトの付け方ーCocosCreator

particleシステムとは


f:id:kusakabob:20180711132851p:plain


ゲームには素敵なエフェクトが欠かせません。


例えば、炎の魔法を使ったら炎のエフェクトが現れるべきです。
また、回復魔法を使ったら光に包まれるようなエフェクトをかけたいです。


しかし、ゲーム内で炎や光、水しぶきなどを描画するのは結構大変です。


そのようなエフェクトを簡単に描画するための仕組みがパーティクル・エフェクト・システムです。


一言で言うと、ある物理法則に従って動く粒子群を作る仕組みです。


上の画像を見てもらうと、炎が描画されています。


これは小さな粒子の集まりで作られています。


今回はサンプルプロジェクトToggleParticleを使って、このシステムの使い方を解説します。


サンプルファイルの場所は
example/assets/cases/01_graphics/02_particle/ToggleParticle
です。


サンプルプロジェクトはCocosCreatorのNewProjectからExample Collectionで獲得できます。

パーティクルを使わないとどれだけ大変なのか


まずこのシステムを使わない場合どれだけ大変なのかを説明します。


例えば炎のエフェクトを作るとします。


ざっくりとした手順は以下の通り。

  • まず炎を構成するため無数の粒を定義します。大きさとか色ですね。
  • それら一つ一つを順に生成します。
  • 上に向かってゆらゆらっと進みます。
  • ある地点まで進むと消えます。
  • 上に進むにつれて色を赤からオレンジに徐々に変えつつ透明にしていきます。
  • 上記の手順をエフェクトを持続させたい時間分繰り返します。


といった感じで様々な要素をプログラムしなければいけません。


頑張れば自力で作れるんですが車輪の再発明になってしまいますし、生産的ではありません。


勉強目的であれば自分でプログラムするのもお勧めします。

パーティクルの作り方&AutoRemoved


f:id:kusakabob:20180711134355p:plain


これはToggleParticleを開いた画面です。


新しいパーティクルをNodeに追加する手順は非常に簡単です。


左側のNode TreeからNodeを選択後、Create>CreateRendererNodes>ParticleSystemNode
をクリックすればパーティクルNodeが作成されます。


すると右側のPropertyから設定をいじれるようになります。
さらにCustomをオンにすると詳細な設定ができます。


ここを調整することで炎や煙などのエフェクトを作っていきます。


ちなみにexample/assets/cases/01_graphics/02_particle/には
AutoRemoveParticleというSceneもあります。


propertyの一つであるAuto Removedのオンオフの違いを説明するためのものです。


内容が単純なのでここで説明します。


AutoRemovedがオンだとパーティクルが消えるときNodeごと消えますが、オフだとNodeは残ります。


これはサンプルファイルを実行してもらえれば一目瞭然だと思います。

パーティクルの設定


propertyにはたくさんの設定値があります。


f:id:kusakabob:20180711133321p:plain


各設定値のラベルの上にカーソルを合わせると、その設定値の説明が出てくるのでそれを読めばだいたいわかると思います。


ここにReferenceのurlを貼っておくのでわからない部分があったら確認してみてください。


ParticleSystem Reference · GitBook


色々いじってみると楽しいですし、理解も深まります。


ボックスが2つあるのはここからここの範囲でランダムな値を出してくれと指示するためです。
これでパーティクルにヴァリエーションをつけることができます。


設定したパーティクルの値はまとめてExportでパーティクルファイルとして書き出すことができます。


パーティクルファイルをFileボックスに入れてSyncを押すとロードされます。


サンプルの場合パーティクルファイルは
assets/res/imported/particle/
の配下にatomとsmokeがあります。


f:id:kusakabob:20180711133754p:plain


smokeにはパーティクルファイルとSpriteファイルがあります。


SpriteファイルをpropertyのTextureに入れることで、粒子の形をそのSpriteファイルで描かれた形に変換できます。

動的にParticleの設定を変える。


こちらのサンプル、ToggleParticleではボタンを押すとパーティクルが消え、もう一度押すと現れます。


f:id:kusakabob:20180711132622p:plain


ボタンを押したときにコードが実行されるのですが、とてもシンプルです。

ParticleControl.js

cc.Class({
    extends: cc.Component,

    properties: {
        particle: cc.Node,
    },

    toggleParticlePlay: function() {
        var myParticle = this.particle.getComponent(cc.ParticleSystem);
        if (myParticle.particleCount > 0) { // check if particle has fully plaed
            myParticle.stopSystem(); // stop particle system
        } else {
            myParticle.resetSystem(); // restart particle system
        }
    }
});


ParticleControl.jsが持っているparticle NodeからgetComponent()メソッドを呼び出しParticleSystemクラスへの参照を獲得します。
この操作によりmyParticleからParticleSysteが持っているメソッドへアクセスできます。


これらのメソッドはparticleの設定を動的に、つまりゲームの実行中に変更したいときに使います。


あとは、ボタンを押したときにparticleCount > 0 particleの数が0以外であればmyParticleからシステムをストップ。0の時にはシステムをリセットしています。


このコードで魔法を使ったときに炎が現れて、ダメージを与えた後に炎を消すといったことが実装できます。

所感

色々と試してました。画像は雪と炎です。


f:id:kusakabob:20180711132851p:plain


設定が多くて大変なイメージを受けますが、遊んでるうちにだいたい把握できると思います。


あとネットにエフェクトの設定値などが落ちてたりするので、それを参考にすると自分のイメージしているエフェクトを作りやすくなります。