【Unity:ParticleSystem】花びらのエフェクトを作ろう
難易度:初めての人向け
制作時間:ゆったり読んで50分
今回は、ParticleSystemの制作方法がどんな物かを実際に簡単なゲームエフェクト制作で体験してみましょう。
ParticleSystemの簡単な説明はコチラ↓(過去記事)
1.事前の素材準備
画像素材を制作するのに無料ペイントソフト"Medibang Paint Pro(以下メディバン)"を使用します。まだインストールしていない方は下記URLからインストールを推奨します。
なお、Photoshopが使える方はそちらで。
1.1.素材画像を作ろう
1） メディバンを開くとまずはキャンパスサイズの大きさを設定します。正方形(高さ＝幅)であればいくつでもいいですが、今回は256×256で行きます。
2）サイズを設定したらさっさと画像を作りましょう。まずは範囲指定を選択して、花びらの形を作りましょう。花びらの形はマウスでてきとーな形で十分です。
3）少し見えやすくするために、上にある表示＞透明背景のチェックを外して、表示＞背景色の指定で背景の色を真っ黒にしましょう。
4）グラデーションツールを選択して花びらの根元からドラッグ＆ドロップで白色を塗る。
5）できたら表示＞透明背景のチェックを入れて、ファイル＞書き出しで透過PNGを選択して、画像を保存しましょう。
画像の名前は何でもかまいません。
MedibangPaintを閉じようとすると、おそらく.mdpファイルの保存も聞かれます。コレもついでに保存しておきましょう。(いわゆる編集ファイルで、次回にデータを保持したままひらけます)
1.2.Unityにインプットしよう
続きまして、Unityを開いて先ほどの画像を取り込みます。ドラッグ&ドロップで直接入れ込むことができます。
1.3.Unityで使えるようにしよう
画像をUnityに取り込んだらParticleSystem用のマテリアルを作りましょう。
Projectビューで右クリックして、Create＞Materialで新規マテリアルを作り(名前は何でもいいです)そのマテリアルの設定にあるShaderをParticles＞Addictiveに変更する。
その後に表示された画面で、ParticleTextureの画像を変更します。右の正方形にあるSelectをクリックして花びらの画像を選択しましょう。
ここに画像を直接ドラッグ&ドロップしても同じ事ができます。
コレで準備は完了です。次回以降はマテリアル生成の説明を省きます。
2.さぁ、ゲームエフェクトを作ろう
2.1.今回作るエフェクトのイメージ
こちらはデレステの3DMV「桜の頃」です。全体に舞い落ちている桜の花びらをイメージして作りましょう。実際作るエフェクトのイメージをまとめましょう。なお、制作中にも細かい変更点が追加して、目的のエフェクトを完成させて行きましょう。
2.2.ParticleSystemを用意しよう
ParticleSystemはゲームオブジェクトの一種です。他の3DオブジェクトやUIと同じように生成してください。
そしたら、そのInspectorの中にあるRenderer(下の方にあります)＞Materialに花びらのマテリアルを設定してください。
2.3.良い位置に移動させよう
右上から舞うようにしたいので、Sceneビューにあるマテリアルを移動・回転させて右上から発射させるようにしましょう。コツとしては下に向け過ぎないということです。
今見ている位置とMainCameraの位置が違えば、GameObject＞Align With Viewを選んで、Cameraの位置を見ている位置に移動させましょう
2.4.どんな出かたをするか【初期値設定】
ParticleSystemの一番上の欄は初期設定です。
数値の右側にある▼をクリックすると次のような物が出ます。いわゆる数値の決め方を変えれます。(中には4つないものもある)
・Constant
1つの値を決めて、その値のみに従います。
・Curve
下の方でカーブで値を決めます。図は(縦軸,横軸)＝(設定値,Durationの時間)です。カーブ線上でダブルクリックすると頂点を追加、左右の白い棒で傾きを変えれます。
・Random Between Two Constans
2つの値を設定して、その間の値をランダムに決めてくれます。
・Random Between Two Curves
カーブ2つを設定して、その間の色つき範囲をランダムに決めてくれます。
とりあえずわからなかったら Constant か RandomBetweenTwoConstants を選んでください。
というわけで、実際に値を変更していきましょう。すべての値をちょいちょい変えていくのが実際の編集方法になります。目的に合わせて編集をしてください。
★はRandomBetweenTwoConstantsです。
・長く表示させたい→Start Lifetime
★速さを変更したい→Start Speed
★大きさを変えたい→Start Size
★向きを変えたい→Start Rotarion
・色を変えたい→Start Color
・重力を付けたい→Gravity Modifier
コツとしては、RandomBetweenTwoConstantsを設定するとき、2つの値の間を大きくしすぎないことです。
参考画像と結果
動画のほうを参考に作ってください。カメラの位置などが人によって異なりますので、必ずしもこの値にするわけではありません。
2.5.発射口をおっきくしよう【Shape】
これだけでは左上や右下に行き渡っていません。もっと全体に花びらを舞うようにしましょう。
2つ下の「Shape」の文字をクリックすると色々と出てきます。その中にあるShapeは発射口の基本形の設定です。これをBoxに変更してください。
このBoxを大きく伸ばしてください。直接数字を打ち込んでもいいですが、Sceneビューにある水色の箱(これが発射口の形)にある水色の点を直接ドラッグしてもOKです。
2.6.量を変更しよう【Emission】
桜の花びらの量も変更しましょう。ステージの背景をイメージしている方は少なめで、奥義のカットインをイメージしたいなら多めで設定していきましょう。ここであなたのセンスを光らせてみましょう。
Emission>Rate over Lifetimeの値を変更して量を変更しましょう。
2.7.ひらひらさせよう【Rotation over Lifetime】
まぁまぁ完成してきましたが、よく見てみると花びらがその向きのまま移動しているだけなのが気になります。ひらひらと舞うようにしましょう。
「ひらひら舞う＝向きが変わる」と考えて、再生中の向きが変わる Rotation over Lifetime を使います。
項目の Separate Axes にチェック入れるとXYZの三方向の向きを変えることができます。さらに自然観を出すためにRandom Between Two Contentsでランダムに向きを決めましょう。
3.完成
桜の花びらエフェクト完成イメージ pic.twitter.com/KRkXV2HhsD
— りーりあ (@Twinkle_magi) 2017年8月14日
コレで完成です。桜のステージで使えるような、もしくは奥義のカットインに使えそうな花びらのエフェクトができました。
花びらを「葉っぱ」に変更し、色を赤・オレンジにするだけで秋に使える紅葉のエフェクトにできますね。
まだ気に入ってないのであれば、気に入るまで編集して凝ってみてください。
