particle2dxでソードアート・オンライン風のエフェクトを作成し再生する

以前紹介したParticle2dxで遊んでみました。 アニメを見直しながら作ったわけではないので再現度は(?)ですが、「こんなのもさくっと作れるよ」という一例ということでご容赦ください。

パーティクル用画像を用意する

記憶では三角形がチラチラ散るようなエフェクトだったような。 ツールはなんでもいいので三角形(透過png)の画像を用意し、particle2dxにアップロードします。

今回はこんなの用意しました。

https://github.com/bokuweb/cocos2d-JS_samples/blob/gh-pages/samples/sao_sample/res/particle_texture.png

ここにドロップ。

パーティクルの調整

プロパティを見ながら放出量や寿命、重力等を設定していきます。 設定はこんな感じ。

plistとtextureのダウンロード

完成したら「Export」よりplistとtextureをダウンロードしておきます。

cocos2d-JSで再生する

github.com

・particle2dxで出力したplistとpngを読み込みます。

・タッチ時にパーティクルを再生します。

DEMO

今回はタッチすると再生されるようにしました。 さすがにスマホ+ブラウザだと描画がきつそうです。 ブラウザゲームの場合は素直にスプライトシートを作成して再生したほうがよさそうです。

Cocos2d-html5 Hello World test

その他

ネイティブでは試してませんが、スマホ+ブラウザでは描画がきつそうです。 *.plistによるアニメーションをスプライトシートに出力する術ってないんですかね。