Unityでアニメ調の煙パーティクル

Youtubeに8分ぐらいの動画で、Cartoon(カートゥーン)、アニメ調のパーティクルを作成するチュートリアルがあったので試してみました。この動画は8分ありますが、実際にはパラメーターをひたすら調整しているだけで、パラメーターを実際に触って変化をみるのが良かったです。

アニメ調の煙ができた!
アニメ調の煙ができた!

アニメ調の画像を用意する

エフェクトをアニメ調にするには、単純にアニメ画像を用意します。雲の場合はinkscapeなどベクター画像編集ソフトで簡単に作れます。私は絵心がないためGIMPやInkscapeをほとんど使えません。32×32のドット絵すら描けません。

今回、雲はどうやって作ったかというと、灰色と白の丸をずらして重ねただけです。Inkscapeは、ベクター画像なので、丸も綺麗に書けます。

白丸と、灰色丸をずらして重ねていくと煙ができる!
白丸と、灰色丸をずらして重ねていくと煙ができる!

色は、Unity側でパーティクル開始時に茶色っぽくして、終了時にアルファチャンネルを0にして消えるようにすればそれとなく煙のようになります。

アニメ調の画像をどうやって作ろうか悩んだのですが、実際にInkscapeなら私でも出来たのでデザインに自陣のない方も恐れず試してみるとよいです。

各種ParticleSystemのパラメータ

パラメータの設定は、自分で新規にプロジェクトを作って以下の値を、ひとつづつ設定していけば変化が分かります。各モジュールの細かい設定をしていますが、あくまでYoutube動画がいろいろ試していたので、私も同じように設定しただけです。とりあえずアニメ調パーティクルを作るだけなら、細かい設定は必要ないです。実際、各モジュールを設定する前からいい感じでした。

003

004

Inkscapeで作成した雲の画像は、Materialにしてから、ParticleSystemのRendererモジュールのMaterialに指定します。アニメ調のようにクッキリした画像を使う場合は、[Sort Mode]で調整できます。

  • [Youngest  in Front] – 生まれたての若いパーティクルを手前に表示する
  • [Oldest in Front] – 古いパーティクルを手前に表示する
  • [By Distance] – 距離で調整する

 

Texture Sheet Animation

UnityのParticleSystemでは、Texture Sheet Animationモジュールで、通常のアニメーションと同様パラパラ漫画のようにすることも可能です。キャラクターがダッシュしたり、ジャンプしたりするエフェクトの場合は、こちらを使えばよさそうです。

このプロジェクトの配布

Unity5.4

https://hajimete-program.com/games/ParticleAnimeSmoke.zip

Assets/Textures/CartoonSmoke.svgは、Inkscape用のSVGファイル(=プロジェクトファイル)です。

 

 

KTK_kumamoto様のUnityエフェクト集

Unity5のParticleSystem(Shuriken)を学習するには、人が作ったパーティクルを自分で作ってみるのが非常に効率の良い学習方法になります。今までYoutube動画を参考にパーティクルを作成していましたが、KTK_kumamoto様がゲーム開発奮闘記 で沢山のバリエーションのパーティクルを公開してくれています。すべてUnityのパッケージで作成しているので、自分でUnityのプロジェクトを新規作成して、Assetsストアのパッケージと同様に取り込むことが可能です。

 

「エフェクトサンプル集」でタグ付けされているので、そこから調べていくと、ヒットやトルネードなど様々なパーティクルが見つかります。

http://ktk-kumamoto.hatenablog.com/archive/category/%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E9%9B%86

 

 

 

Unity5でレーザーパーティクルを作成

KTK_kumamoto様がUnityのパーティクルを公開してくれています。今日はこのパーティクルをUnityに取り込んで、実際に自分でParticleSystemの項目を設定しながらレーザーを作成しました。

http://ktk-kumamoto.hatenablog.com/entry/2014/09/14/092400

KTK_kumamoto様のUnityパッケージでは、テクスチャ画像のタイプがAdvancedになっていましたが、通常のTextureのままでも問題ありませんでした。パフォーマンス関連の設定なのでしょうか。。。

自分でもレーザーが作れた!
自分でもレーザーが作れた!

Stretched Billboardで引き延ばせる

このレーザーでは、RendererモジュールのRander ModeをStretched Billboardにしました。これによりテクスチャを引き延ばすことができます。

002

以下のようにLength Scaleを50にすると、コーン上のスパークが右に長くなってコーン型が分かるようになっています。

003
Length scale が 50

Length scaleが10だとあまり引き延ばさないので、発射したときのエフェクトとしていい感じの仕上がりです。

004
Length scale が 10

テクスチャの重要性

このレーザーを作成するために、各3つのパーティクル用に3つのテクスチャ画像をGIMPで作りました。以下のような黒背景に放射状にグラデーションを付けて、中心に白い円を描いただけです。

実際にパーティクルを作ると、この白い円の大きさなどで結構エフェクトの見た目がかなり変わりテクスチャの重要性を再確認しました。UnityではParticleSystemのオブジェクトをHierarchyビューで選択していると再生され続けるので、GIMPで白い円を修正して、pngファイルをエクスポートして、Unityで目視確認というのを繰り返し行って調整をしました。

005

このプロジェクトの配布

Unity5.4

https://hajimete-program.com/games/ParticleLaser01.zip

Assets/Texturesフォルダー内に、png画像ファイルと、GIMPのプロジェクトファイルも入っています。

プロジェクトには、KTK_kumamoto様のファイルは含まれません。必要な場合はKTK_kumamotoのサイトからダウンロードして勉強するとよいです。

 

 

Unity5のParticleSystemでテクスチャを使う

Unity5のParticleSystem(Shuriken)について調べていたら、毛筆フォントをテクスチャ画像に使って、パーティクルを作ると面白い効果があるので、実際に作ってみました。この記事では簡単作り方の説明と、ソースコードとプロジェクトも配布をします。

a01
毛筆フォントを使って、パーティクルを作成!

作り方のポイント

上記GIFを見るとなんかUnity初心者には作れない凄いパーティクルに見えますが、たいしたことはありません。

  1. フリーの毛筆フォント(青柳隷書しも あおやぎ・れいしょ・しも)をWindowsにインストール。
  2. GIMPなどで512×512の「火」「滝」などの毛筆1文字画像を作成
  3. Unityで上記画像から、Particle用Materialを作成
  4. ParticleSystemで炎のように

※隷書体(れいしょたい):漢字の字体の1つで、昔の文字に使われている。

作り方のポイントは、Unityのパーティクルではなく、単純にGIMPなど画像処理ソフトでテクスチャ画像を用意することです。

フォントのインストール

武蔵システム – OpenType.jp – 青柳隷書しも から、フォントがダウンロードできます。Windows版をダウンロード、展開して、Windows10の場合はフォントファイルを右クリックして、コンテキストメニューからインストールが可能です。フォントをインストールする理由は画像編集ソフトで使うためです。

GIMPで毛筆1文字画像を作成

背景を透明にして、512×512で作成しました。特にサイズの意味はなく1024でも64でも問題ありません。今回配布するプロジェクトに私が作成したGIMPのプロジェクトファイルもAssets/Textures/KanjiAoyagi.xcfとしてあります。

002

Particle用Materialの作成

003

Materialを新規作成し、Shaderを[Particles/Additive]に変更し、上記画像のように画像ファイルを割り当てます。これでParticleSystemでこのマテリアルを使えるようになります。

ParticleSystemの作成

Hierarchyビューで、新規にParticleSystemを作成し、以下のように各モジュールの項目を設定します。

004

ParticleSystemモジュールでは、Start Size、Start Rotationで2つの値の範囲内で生成させるようにしています。またGravity Modifier(重力)を-0.8にして、上に早く移動するようにしています。

Velocity over Lifetime (生存期間中の速度)

005

右の▼をクリックすると、[Random Between Two Curves]が選択できます。これを選択すると、以下のような2つの曲線を使うことができます。

006

座標の味方

この座標の見かたですが、横軸0.0から1.0は時間で、0.0が開始時、1.0が終了時です。つまりパーティクル開始時から終了時になります。Velocity over Lifetime(生存期間中の速度)の場合、縦軸は、2.0から-2.0とありますが、2.0だとX軸に2.0の速度がかかるため、X軸方向に曲がっていくことになります。逆に-2.0だったら逆方向に曲がっていきます。曲がっていく感覚は文章では分かりづらいですが、実際にこの曲線を動かしながら、パーティクルをSceneビューで見てみると直感的に分かります。

今回の炎はちょっと独特で、最初X軸に1.5の速度で曲がっていたものを、途中で、-2ぐらいに変化させて、最後は-1.5にします。つまり、揺らいだ感じになります。

また、曲線が2つですが、パーティクルはこの赤い範囲内の値をランダムで取るので、パーティクル1つ1つの動きが異なるため炎のようになります。

座標の使い方

曲線上で、ダブルクリックすると、キー(曲線上の点)が新規作成され、それをドラッグアンドドロップすることで、曲線を動かせます。また曲線上で右クリックして[Add Key]からも作成できます。キーを削除する場合は、キーを右クリックして、[Delete Key]で削除できます。

a02
線をドラッグ
a03
線上をダブルクリックして、キーを作成
a04
キーをドラッグアンドドロップで移動

a05

 

Force over Lifetime (生存期間中の力)

生存期間中の力もX,Y,Z軸個別に設定しますが、この値はVelocityほど影響がないので、有効にすると柔らかい変化があります。Y軸、Z軸の画像キャプチャーを取ってませんが、適当でよいです。勉強のために設定して変化を見てみましょう。(微々たるもので他のモジュールを無効化しないとわからないです。)

007

 

Color over Lifetime (生存期間中の色)

008

Color項目の右の図をクリックすると、[Gradient Editor]が表示されます。上側に矢印と、下側に矢印がありますが、以下GIFのように、ダブルクリックで、矢印を追加できます。削除はDeleteキーです。

a06

上側はアルファチャンネルで、下側は色を変更します。上側で説明すると、

パーティクル開始から、50%付近までは、アルファチャンネルが255で色が表示されています。最後(100%部分)の矢印で、アルファチャンネルを0で、色が表示されていないので、パーティクル開始後、50%から100%で色が消える事になります。

下側も同様で、色を細かく変化するようにしています。今回のパーティクルは下から上に進むので、最初は白、黄色となり、最後は濃い赤から黒になります。実際にはアルファチャンネルで黒くなった状態は見えません。

Size over Lifetime (生存期間中の大きさ)

大きさもだんだん小さくするようにしました。今回は勉強のために2つの曲線ですが、別に1つの曲線でも問題ありません。

009

Rendererモジュールの設定

010

最初に作成した、Particle用のMaterialを設定します。

完成

これで炎のパーティクルが完成しました。滝のパーティクルも同じ要領です。ShapeをConeにして、90度回転し、そこから強めの重力を設定すれば、下に流れていきます。プロジェクトを配布しますので参考に作ってみてください。

このプロジェクトの配布

Unity5.4

https://hajimete-program.com/games/ParticleByNullpro.zip

Assets/Scenes/Main.unityをダブルクリックでシーンがUnityで起動できます。

UnityでParticleSystem(Shuriken)を学ぶための資料

Unity5で、パーティクルを作成する際は、今までYoutube動画を主に参考にしていましたが、日本語でかなりサンプルを配布しているブログを見つけたので紹介します。

 

この方のレーザーを参考に自分で作ってみると理解が深まりそうです。

このKTK_kumamotoさんは、動画でチュートリアルも公開しています。ところどころ声が小さい場合がありますが、やっぱり日本語だと助かります。

 

ほかにもホーミングミサイルの短いサンプルを見つけました。

 

Unityで雪パーティクルエフェクトを作成しましょう。

Unityにはパーティクルシステムがあるので、Unityエディター上でパーティクルを作成できます。設定項目が多いので、項目はたくさん作って覚えていくしかありませんが、雪のパーティクルはいろんな項目を使って作れるので初心者に最適です。

まずは作ってみよう。

hierarchyビューで、右クリックして、Particle Systemでオブジェクトを作成します。パーティクルはデフォルトが横向きなので、Rotate Xを-90にしておきます。

hierarchyビューで右クリックして、ParticleSystemを選択
hierarchyビューで右クリックし、ParticleSystemを選択
Rotate Xを-90
Rotate Xを-90

Particle System

基本設定はいろいろ修正しても問題ありませんが、Gravity Modifierで、重さが決まるので、ここをいろいろ調整しましょう。ふんわりした感じがほしいのでひとまず0.13にしました。

001

Emission

Rateは一度に降る量です。

002

この項目を増やすときは、1つ注意が必要です。Sceneビューで以下のようなダイアログがあるので、Pause(一時停止)またはStop(停止)をしてから修正しましょう。例えば、30から間違えて3万にした場合、かなり強力なPCでないとUnityがフリーズ状態になり数分しないと応答が返ってこない状態になります。

012

Shape

Radiusで、この円内に雪を降らせます。

003

Velocity over Lifetime

生存時の速度。以下のように、X,Y,Zの速度調整ができます。前後左右にゆらゆらしたいので、XY座標はある一定のランダムの値を取らせたいです。そのような場合は、右の▼をクリックして、Random Between Two Curvesを選択します。

004
▼で、Random Between Two Curvesを選択

画面右下に、以下のような曲線(Curve)が表示されます。線上で、右クリックで、Add Keyを表示して追加するか、線上でダブルクリックをすると、キーが用意されます。これはキーボードのDeleteキーで削除できます。

005
右クリックして、コンテキストメニューからキーを作成できる。

このキーを上下左右に動かす事で曲線を作成します。

a03
曲線を作成している様子

X座標は、この上部、下部の2つの曲線内の値をランダムに取るため、雪が左右に揺れることになります。Y座標も同様に適当に曲線を用意します。

006

 

Color over lifetime

生存時の色。カラーバーをクリックすると、以下のGradient Editorが表示されます。画像の赤枠内はアルファチャンネルで、クリックすると矢印が追加されます。Deleteキーで削除できます。矢印を用意したら、Alphaを0-255に設定します。

今回は設定しませんでしたが、画像の緑枠内は、カラーで、ここもクリックして矢印キーを追加して、Deleteキーで削除できます。こちらの矢印を選択するとカラーが表示されるので、そこから色を変更できます。これにより、白から赤へのグラデーションなどを作成できます。

007

Size over Lifetime

生存時の大きさ。これも雪のふわふわした感じを作るために、2つの曲線で適当にキーを用意して作ります。

008

Rotation over Lifetime

生存中の回転。雪のテクスチャに大きな結晶画像などを使う場合は、Random Between Two Curvesで、いろんな動きにすると面白いはずです。今回はCurveで1つの曲線に適当にキーを用意しました。

009

Collision

今回はPlanesに何も指定してませんが、ここに対象を指定したりするとそこでとどまったりします。例えばGroundを用意してそのオブジェクトを指定すれば、そこに衝突します。Bounceは小さくしないと、ボールのように跳ねてしまいます。

010

Renderer

Materialで任意のマテリアルを設定できますが、今回は初期設定のままです。

011

完成

a05

 

公式ドキュメント

Unity パーティクルシステム(Shuriken)

このプロジェクトの配布

Unity5.4

https://hajimete-program.com/games/ParticleSnow.zip

まとめ

今回は、細かい説明をせずに、まずは作ってみました。パーティクルシステムは項目が多いため、人が作ったものを自分で同じように複製して見たり、繰り返し項目を変更していくと自然と項目がわかってきます。スタンダードアセットの爆発パーティクルなどは複数のパーティクルを組み合わせて1つの爆発にしているので非常に参考になります。

Unityで雪のパーティクルを作成する時のおすすめチュートリアル

最近Unity5のパーティクルを少しづつ勉強し始めました。手始めに雪のパーティクルを作成しましたが、以下動画が11分ぐらいで、設定項目を説明しているので大変参考になりました。近いうちに、このチュートリアルの解説と、作成した雪パーティクルのプロジェクトを配布しようとおもいます。