Unity5で魔法陣を作ろう 基礎編 チュートリアル

お手軽魔法陣!
お手軽魔法陣!

Unityのパーティクルシステムは、設定項目が多いので項目を覚えるよりも、よくある仕組みを実際に作ってみながら覚えたほうが効率が良いです。今回は、パーティクルが螺旋で動く魔法陣を作成します。

仕組みは簡単

  • この魔法陣の仕組みは実は簡単です。
  • Worldの影響を受ける柱パーティクルを2つ用意する。
  • 魔法陣テクスチャをドロップして、魔法陣オブジェクトを作る。
  • 魔法陣オブジェクトの子要素として、柱パーティクルを配置する。
  • 魔法陣オブジェクトをアニメーションで回転させる。

作成チュートリアル

作成方法が分かったので実際に実装してみましょう。

magiccircle
Inkscapeで512×512で背景透過で作成したpng画像

 

プロジェクトの作成

まずは、ParticleSpiral02など適当な名前3D用プロジェクトを新規に作成します。そして、フォルダーをいくつか作成して、上記の画像などをTexturesフォルダーに配置します。上記魔法陣の画像は、背景透過のpng画像です。(このブログでは、透明の画像で魔法陣の線が白のため何も見えなくなるので、CSSを黒くしています。)

001

画像は、Texture TypeがTextureになっているので、[Sprite (2D and UI)]にして[Apply]で適用します。

002

Cubeを作成し、先ほどのMagicCircle画像をシーンにドロップします。

003

MagicCircleのRotationをx:90にして、Cubeの子要素にします。

004

色は、Sprite RendererコンポーネントのColorで変更できます。そもそも魔法陣の画像をライトグリーンにしてしまう方法などもあります。画像を白にしておくと、Unity側でいろんな色のパーティクルと組み合わせやすいです。

005

 

ぽわぽあしているパーティクルの作成

まずは魔法陣の近くのホタルのようなぽわぽあしたパーティクルを作成します。新たにParticle Systemを作成し、Particle Systemモジュールの各種値を変更します。

006

また、最後にフェードアウトするように小さく消えてほしいので、[Size over Lifetime](=生存期間中のサイズ)モジュールにチェックして、曲線を編集します。

007

実際に使ってみてもらえば分かりますが、ダブルクリックで点を新規に作成してそれを動かすことで曲線を動かせます。また右クリックから点の削除も可能です。

a07

この図の見方は、横軸が時間で、0.0から1.0で表現しています。つまり一番左がParticleSystem開始時で、一番右が終了時になります。縦軸はSizeを0.0から1.0で表しています。よって、上記曲線の場合は、開始時に1=100%の大きさで、終了時に、0=0%の大きさになるが、大きさは曲線の変化によって徐々に小さくなるようになります。

008

例えば、一番右の点を、縦軸の1.0に持ってくると、上記画像のように直線になります。この場合は、開始から終了まで、Sizeが1.0なので小さくなっていきません。実際に何回も試してみましょう。

a08
ぽわぽわパーティクルができた!

柱パーティクルの作成

010

Duration 放射する時間 1秒

Start Lifetime 生存期間 1秒

Start Speed 放射する速度 4

Simulation Spaceは、Worldに変更すると、移動したときにパーティクルが揺らぐようになります。魔法陣を回転させると、パーティクルも螺旋を描くようになります。

Emissonモジュールで、一度に放射する量を調整できます。Rate 100の場合は、一回に100個のパーティクルを放射します。

 

009

Shapeモジュールで、放射する形を変更します。初期設定では、コーン型(メガホンのような形や、傘のついた街灯)なので、Angle角度と、Radius半径を小さくして、棒状に放射するようにします。

最後に、[Size over lifetime]で、開始時のサイズを小さくし、途中大きくし、終了時に小さくするようにします。もう少し綺麗に変形すればろうそくの火のような感じにもできます。

これで柱パーティクルが1つ出来たので、コピーして位置を変更してもう1つ作ります。

011
テスト用にParticleSystemモジュールのLoopingをチェックして柱2つを表示

魔法陣を回転させる。

これはParticleSystemの仕組みではなく、単純なUnityのアニメーションです。

012

Animationビューを表示して、HierarchyからMagicCircleを選択すると、[Create]ボタンが表示されるので、これでアニメーションを作成します。

013

[Add Property]ボタンでRotationを選択して、1:00(終了時)を360の倍数にします。今回は360*2 = 720にしました。

014

これで、螺旋を描くパーティクルが作成できました。この時点でゲームをプレイしてみると、起動と同時にアニメーションが実行されるのが確認できます。最後にボタンをクリックしたときに発動するようにしてみましょう。

ボタンをクリックしたときに魔法を発動させる。

ボタンを押したときに、魔法陣を回転させて、パーティクルを一斉に起動したいのでC#スクリプトで制御します。これはMagicCircleオブジェクトの親のCubeに割り当てます。

016

ボタン作成

Hierarchyビューで右クリックして、[UI]->[Button]でボタンを作成します。

015

ボタンのクリック時にMagicCircleスクリプトのDoMagicが実行されるようにします。

017

アニメーション遷移の修正

018
状態遷移の完成図

まだ、Waitアニメーションがないため新規に作成します。これは何もしないアニメーションで、”DoMagic”トリガーが実行されるまでここで待機するために用意します。作り方は簡単で、MagicCircleオブジェクトをHierarchyビューで選択して、[Create New Clip…]で作成します。以下のGifは既にWaitアニメーションを作成した後に、キャプチャーしたので、リストにRotate,Wait,Create New Clip…と並んでいますが、まだ作っていない場合は、リストにはRotate, Create New Clip…となっています。

a09

[Add Property]でPositionなどなんでもよいので選択して追加します。ただ待機用に用意したので値は変更しません。

019

トリガー作成

a10

トリガーは銃の引き金と同じで、これを実行するとアニメーションを実行するようにするフラグにします。C#スクリプトでは、GetComponent<Animator>().SetTrigger(“トリガー名”);のようにすれば、スクリプトから操作できます。そのためボタンを押したタイミングでこのスクリプトを実行すればアニメーションを動かせます。

上記のGifでは、新規にHelloTriggerトリガーを作成しましたが、DoMagicトリガーを新規作成すればよいです。

[Set as Layout Default State]により、起動時にWaitアニメーションが呼ばれて何もアニメーションしないようにします。

a11

あとは、Waitステート、Rotateステートを右クリックして[Make Transition]を選択すると、線を引けるようになるので、上記のようにRotateからWait,WaitからRotateに遷移できるようにします。

Wait->Rotate Transitions

021

[Has Exit Time]をチェックしないと、Waitアニメーションの終了を待たずにRotateへ遷移します。またConditionsにDoMagicトリガーを指定し、DoMagicトリガーが有効になったとき、Rotateアニメーションへ遷移します。

Rotate->Wait Transitions

022

こちらは特に細かい指定は合ってもなくてもよいです。

最後に、すべてのParticle SystemのParticleモジュールの[Play On Awake*]項目のチェックを外します。これは、最初に外しておくべきですが、このチュートリアルの画像では外すのを忘れてしましました。これを外しておかないと、ゲーム開始時に必ずパーティクルが実行されてしまいます。

完成

a12

このプロジェクトの配布

Unity5.4

http://hajimete-program.com/games/ParticleSpiral.zip

エクスプローラーからMain.unityをクリックして、Unityを起動すれば、Mainシーンが表示されます。またこの記事と箱となり、プロジェクトのボタンの位置やボタン名など若干変更しています。

 

 

 

 

unity5で魔法陣を作ろう-xoctomanx編

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

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

まとめ

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