Powered by GitBook

bootcamp

Particle System

Kwikにはパーティクル作成プラグイン Kaboomが有償で提供されています。価格　５０００円です。 http://kwiksher.com/product/kaboom/

Kaboom User guide http://kwiksher.com/user-guide/kaboom/

Kaboomをすでに購入されたている場合は,アカウントページからダウンロードを行うことができます。 http://kwiksher.com/my-account/

Kaboomは７１Squared社が提供するパーティクルデザイナーのファイルも読み込むことができます。パーティクルデザイナーはマック版のみで、Windows版はありません。 https://71squared.com/particledesigner

このチュートリアルでは、Kaboomでパーティクルを作成する方法、パーティクルデザイナーのファイルを読み込む方法、パーティクルのテクスチャーイメージを変更する方法を解説します。

rect01, rect02, rect03, rect04の4つの四角形をパーティクルに置換します。サンプルファイルは下記のURLからDLできます。 http://www.kwiksher.com/tutorials/Multi/KBTest01.zip

レイヤーと置換 > パーティクルに置換をクリックします。レイヤーはrect04を指定してみました。

Partilcle Replacementの画面が立ち上がります。Create Particlesのボタンをクリックします。

Kaboomの画面が立ち上がります。

LIVE PREVIEWボタンを作成します。プレビューが確認できたら、右下のCreateボタンで完了します。

Particle Replacement画面に戻ります。作成ボタンをクリックして完了します。

パブリッシュして、確認します。

パーティクルデザイナーからインポート

パーティクルデザイナーのファイルは、テクスチャー画像をEmbedせずに外部ファイルとして保存してください。エクスポートはJSONファイル形式で出力してください。 https://71squared.com/particledesigner

パーティクルデザイナーから出力したファイルをKwikのプロジェクトフォルダの直下にコピーします。 下記の例では、partilcle2.json, particle2.pngとparticle3.json, particle3.pngとなります。

レイヤー rect03をパーティクル置換してみます。パーティクルに置換をクリックして、ファイル選択ボタンから、paticle2.jsonを指定します。ファイルを指定して、右下の作成ボタンをクリックして完了します。Create ParticlesのKaboomは新規作成となりますので、間違えてCreate Particlesをクリックしないでください。

ファイル選択画面

rect03のパーティクルが作成されました。この作成されたパーティクルコンポネントをクリックします。

Particle Replacementで、Edit Particlesが表示されるようになっています。Edit Particlesをクリックします。

Kaboomが立ち上がります。

Live PREVIEWで動作が確認できます。右下のCreateボタンで閉じます。

Kwikパネルまで戻り、パブリッシュしてみます。

Corona SDKのサンプル

Corona Labs/Corona SDK/Sample Code/Graphics-Premium/EmitterViewerに様々なパーティクルサンプルが格納されています。 下記のzipファイルにKaboomで読み込めるJSONファイルと画像ファイルが格納されています。ダウンロードしてお試しください。

http://www.kwiksher.com/tutorials/Multi/CoronaSDK_Emitter_Viewer_Sample.zip

テクスチャーの入れ替え

パーティクルのテクスチャーを下記のファイルに入れ替えてみます。入れ替える画像は、PNGファイルとなります。プロジェクトフォルダの配下にフォルダを一つ作成して、その中に入れ替える画像を保存してください。例　[[~/Documents/Kwik/YourBook/img]]

サンプルですと、KBTest01の配下のimgフォルダとなっています。

KaboomのClik to Changeのテクスチャプレビュー部分をクリックすることで、画像を入れ変えができます。

ファイル選択

緑の星のパーティクルとなりました。Start Colorも変更しています。

ハートのテクスチャーに変更して、とVariance XやVariace Yを変更してみます。

オリジナルのPNGの色で表示したい場合は

下記の色設定をKaboomで行ってください。 http://forums.coronalabs.com/topic/49088-particle-designer-color-issue/ Blend source: GL_ONE Blend destination: GL_ONE_MINUS_SRC_ALPHA Start color: white (100% opacity) End color: white (100% opacity)

いろいろ試して、素敵なパーティクルを作成してみましょう。