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

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

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

GIMPをドット絵エディターのように使う方法

Unityで2Dゲームを作るときにちょっとしたブロックや敵を作成したいと思いました。ドット絵を描く場合は専用エディターがありますが、GIMPで何とかしたいと調べたら、比較的簡単にドット絵エディターのようにすることができました。

1.メニュー[表示]->[グリッドの表示]

001

2.[画像]->[グリッドの設定]

002

3.お好みのグリッドサイズにします。

003

4.[ガイドにスナップ],[グリッドにスナップ]などを選択。

004

[鉛筆]で、ブラシを[1.Pixel]にして、お好みのサイズにします。

005

今回の設定は、5ピクセル単位にグリッド線を表示して、鉛筆のサイズを5ピクセルにしました。

006