スマホゲームをやっている気がつくのですが、画面をタッチするとキラキラ光る場合がありますよね？
あれを particle(パーティクル)って言うんです。
ユーザーがちゃんとタッチしたか分かりづらいから入っているんだと思います。
それを試しに実装してみます。
こんな感じ
ブラウザでの動作確認はこちらで出来ます。
開発環境
- Windows 10 Home 1903
- Cocos Creator 2.1.0
パーティクルを作る
Cocos Creator で作ることも出来るのですが、結構手間で思い通りに作れませんでした。
なので今回は、Cocos2d-x 用のパーティクルを作れるウェブサービスを使って作ります。
右側のスライダーや値などを変えると、左側のプレビューに反映されるので、直感的にパーティクルが作成できます。
いい感じのパーティクルが出来たらエクポート
いい感じのパーティクルが出来たらパソコンに出力します。
右側の Export を押して、上から1つ目の PNG Contained が書いてあるボタンでエクスポートします。
このボタンでエクスポートすると、パーティクルで使う画像が組み込まれた状態で出力されます。
利点はテクスチャをフォルダに置かなくていいことで、欠点はテクスチャを変えるのが面倒くさいことですね。
同じパーティクルでテクスチャだけを変えて変化を出したい場合は、一つ下のテクスチャが組み込まれていないタイプで出力すると良いかと思います。
Cocos Creator でパーティクルを表示する
Cocos Creator で適当にプロジェクトを作り、パーティクルを表示させます。
リソース用フォルダを用意する
Assets パネルでリソース用フォルダを作り、その中に先程のパーティクルファイルを入れます。
res > particle > particle_texture.plist
プロジェクト内にあればいいので、フォルダは適当で構わないです。
キャンバス内にパーティクルを配置する
Node Library から Renderer の ParticleSystem を Canvas に配置します。
パーティクルをプレハブ化する
で、そのままパーティクルをプレハブ化します。
Canvas に配置した ParticleSystem を、再度ドラッグで Assets の particle フォルダに入れます。
プレハブ化することによって、使い回しが楽になります。
プレハブ化した元の ParticleSystem は、もう要らないので削除しておきます。
プレハブ化したパーティクルを編集する
Prefab にした ParticleSystem を編集します。
Assets フォルダ内の particlesystem をダブルクリックすると、プレハブの編集画面になります。
そしたら、ParticleSystem の File に、Particle2dx で作ったパーティクルファイルをドラッグします。
パーティクルのプロパティを変更します。
- Auto Remove On Finish にチェックを入れる。（パーティクルの再生が終了したら、キャンバス内のインスタンスを削除）
- Custom にチェックを入れる。
- Duration を 0.1 に設定する。（パーティクルの再生時間）
今回はこれだけの設定を変更しました。
保存をしてプレハブの編集画面を閉じます。
タッチしたらパーティクルを表示するスクリプトを書く
タッチした箇所にパーティクルを表示するスクリプトを書きます。
処理に必要なコントールを宣言する
今回は、パーティクルを表示するキャンバスと、パーティクルのプレハブを変数宣言します。
@property(cc.Node)
canvas: cc.Node = null;@property(cc.Prefab)
particle: cc.Prefab = null;Cocos Creator で関連付けをする
宣言した変数と、画面のコントールを関連付けます。
それぞれ、同じ名前の場所にドラッグして、関連付けます。
タッチ開始時のイベント
画面をタッチしたらパーティクルが出るイベント処理を書きます。
self.canvas.on(cc.Node.EventType.TOUCH_START, function (event) {
createParticleme(event);
}, self.node);タッチしてドラッグ時のイベント
画面をタッチしたままドラッグした時にパーティクルが出るイベント処理を書きます。
self.canvas.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
createParticleme(event);
}, self.node);似ています。
onメソッドの event引数が違うだけですね。
パーティクルを作成してキャンバスに表示する処理
最後に、パーティクルを作成してキャンバスに表示する処理を書きます。
var self = this;
var createParticleme = function (event) {
var touches = event.getTouches();
var touchLoc = touches[0].getLocation();
var prefab = cc.instantiate(self.particle);
self.canvas.addChild(prefab);
var pos = prefab.convertToNodeSpaceAR(touchLoc);
prefab.setPosition(pos);
};パーティクルを生成して、タッチした座標に表示しているだけです。
Web Mobile で Build する
実際にウェブサービスにアップロードして動作確認をします。
メニューの Project > Build から、Platform を Web Mobile で Build して実行ファイル群を作成します。
Cocos Creator はクロスプラットフォーム対応なので、Webブラウザだろうが、Android アプリだろうが、Windows アプリだろうが何にでもビルドできちゃいます。
素敵でしょ。
動作確認
こちらで公開したので、誰でも試すことができます。
パソコンのブラウザでも、スマホのブラウザでも動作するのでぜひ、やってみてね。
参考にしたサイト
