バスケットのゴールに可愛いどうぶつボールを投げると得点が入ります。制限時間内にどれだけ得点を稼げるか競うシンプルなゲームです。もう少し、演出やゲーム性を詰めていきますが、ひとまずは動かせるのでリリースしました。
ブラウザでどうぶつバスケットをやる
https://dev001hajipro.github.io/AnimalBasket/
ソースコード
Unityのプロジェクト一式も公開しています。
https://github.com/dev001hajipro/AnimalBasket
タグ: Unity
Unityでアニメ調の煙パーティクル
Youtubeに8分ぐらいの動画で、Cartoon(カートゥーン)、アニメ調のパーティクルを作成するチュートリアルがあったので試してみました。この動画は8分ありますが、実際にはパラメーターをひたすら調整しているだけで、パラメーターを実際に触って変化をみるのが良かったです。
アニメ調の画像を用意する
エフェクトをアニメ調にするには、単純にアニメ画像を用意します。雲の場合はinkscapeなどベクター画像編集ソフトで簡単に作れます。私は絵心がないためGIMPやInkscapeをほとんど使えません。32×32のドット絵すら描けません。
今回、雲はどうやって作ったかというと、灰色と白の丸をずらして重ねただけです。Inkscapeは、ベクター画像なので、丸も綺麗に書けます。
色は、Unity側でパーティクル開始時に茶色っぽくして、終了時にアルファチャンネルを0にして消えるようにすればそれとなく煙のようになります。
アニメ調の画像をどうやって作ろうか悩んだのですが、実際にInkscapeなら私でも出来たのでデザインに自陣のない方も恐れず試してみるとよいです。
各種ParticleSystemのパラメータ
パラメータの設定は、自分で新規にプロジェクトを作って以下の値を、ひとつづつ設定していけば変化が分かります。各モジュールの細かい設定をしていますが、あくまでYoutube動画がいろいろ試していたので、私も同じように設定しただけです。とりあえずアニメ調パーティクルを作るだけなら、細かい設定は必要ないです。実際、各モジュールを設定する前からいい感じでした。
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ストアのパッケージと同様に取り込むことが可能です。
「エフェクトサンプル集」でタグ付けされているので、そこから調べていくと、ヒットやトルネードなど様々なパーティクルが見つかります。
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にしました。これによりテクスチャを引き延ばすことができます。
以下のようにLength Scaleを50にすると、コーン上のスパークが右に長くなってコーン型が分かるようになっています。
Length scaleが10だとあまり引き延ばさないので、発射したときのエフェクトとしていい感じの仕上がりです。
テクスチャの重要性
このレーザーを作成するために、各３つのパーティクル用に3つのテクスチャ画像をGIMPで作りました。以下のような黒背景に放射状にグラデーションを付けて、中心に白い円を描いただけです。
実際にパーティクルを作ると、この白い円の大きさなどで結構エフェクトの見た目がかなり変わりテクスチャの重要性を再確認しました。UnityではParticleSystemのオブジェクトをHierarchyビューで選択していると再生され続けるので、GIMPで白い円を修正して、pngファイルをエクスポートして、Unityで目視確認というのを繰り返し行って調整をしました。
このプロジェクトの配布
Unity5.4
https://hajimete-program.com/games/ParticleLaser01.zip
Assets/Texturesフォルダー内に、png画像ファイルと、GIMPのプロジェクトファイルも入っています。
プロジェクトには、KTK_kumamoto様のファイルは含まれません。必要な場合はKTK_kumamotoのサイトからダウンロードして勉強するとよいです。
Unity5のParticleSystemでテクスチャを使う
Unity5のParticleSystem(Shuriken)について調べていたら、毛筆フォントをテクスチャ画像に使って、パーティクルを作ると面白い効果があるので、実際に作ってみました。この記事では簡単作り方の説明と、ソースコードとプロジェクトも配布をします。
作り方のポイント
上記GIFを見るとなんかUnity初心者には作れない凄いパーティクルに見えますが、たいしたことはありません。
- フリーの毛筆フォント(青柳隷書しも あおやぎ・れいしょ・しも)をWindowsにインストール。
- GIMPなどで512×512の「火」「滝」などの毛筆１文字画像を作成
- Unityで上記画像から、Particle用Materialを作成
- ParticleSystemで炎のように
※隷書体(れいしょたい)：漢字の字体の１つで、昔の文字に使われている。
作り方のポイントは、Unityのパーティクルではなく、単純にGIMPなど画像処理ソフトでテクスチャ画像を用意することです。
フォントのインストール
武蔵システム – OpenType.jp – 青柳隷書しも から、フォントがダウンロードできます。Windows版をダウンロード、展開して、Windows10の場合はフォントファイルを右クリックして、コンテキストメニューからインストールが可能です。フォントをインストールする理由は画像編集ソフトで使うためです。
GIMPで毛筆１文字画像を作成
背景を透明にして、512×512で作成しました。特にサイズの意味はなく1024でも64でも問題ありません。今回配布するプロジェクトに私が作成したGIMPのプロジェクトファイルもAssets/Textures/KanjiAoyagi.xcfとしてあります。
Particle用Materialの作成
Materialを新規作成し、Shaderを[Particles/Additive]に変更し、上記画像のように画像ファイルを割り当てます。これでParticleSystemでこのマテリアルを使えるようになります。
ParticleSystemの作成
Hierarchyビューで、新規にParticleSystemを作成し、以下のように各モジュールの項目を設定します。
ParticleSystemモジュールでは、Start Size、Start Rotationで２つの値の範囲内で生成させるようにしています。またGravity Modifier(重力)を-0.8にして、上に早く移動するようにしています。
Velocity over Lifetime (生存期間中の速度)
右の▼をクリックすると、[Random Between Two Curves]が選択できます。これを選択すると、以下のような２つの曲線を使うことができます。
座標の味方
この座標の見かたですが、横軸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にします。つまり、揺らいだ感じになります。
また、曲線が２つですが、パーティクルはこの赤い範囲内の値をランダムで取るので、パーティクル１つ１つの動きが異なるため炎のようになります。
座標の使い方
曲線上で、ダブルクリックすると、キー(曲線上の点)が新規作成され、それをドラッグアンドドロップすることで、曲線を動かせます。また曲線上で右クリックして[Add Key]からも作成できます。キーを削除する場合は、キーを右クリックして、[Delete Key]で削除できます。
Force over Lifetime (生存期間中の力)
生存期間中の力もX,Y,Z軸個別に設定しますが、この値はVelocityほど影響がないので、有効にすると柔らかい変化があります。Y軸、Z軸の画像キャプチャーを取ってませんが、適当でよいです。勉強のために設定して変化を見てみましょう。（微々たるもので他のモジュールを無効化しないとわからないです。)
Color over Lifetime (生存期間中の色)
Color項目の右の図をクリックすると、[Gradient Editor]が表示されます。上側に矢印と、下側に矢印がありますが、以下GIFのように、ダブルクリックで、矢印を追加できます。削除はDeleteキーです。
上側はアルファチャンネルで、下側は色を変更します。上側で説明すると、
パーティクル開始から、50%付近までは、アルファチャンネルが255で色が表示されています。最後(100%部分)の矢印で、アルファチャンネルを0で、色が表示されていないので、パーティクル開始後、50%から100%で色が消える事になります。
下側も同様で、色を細かく変化するようにしています。今回のパーティクルは下から上に進むので、最初は白、黄色となり、最後は濃い赤から黒になります。実際にはアルファチャンネルで黒くなった状態は見えません。
Size over Lifetime (生存期間中の大きさ)
大きさもだんだん小さくするようにしました。今回は勉強のために２つの曲線ですが、別に１つの曲線でも問題ありません。
Rendererモジュールの設定
最初に作成した、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さんは、動画でチュートリアルも公開しています。ところどころ声が小さい場合がありますが、やっぱり日本語だと助かります。
ほかにもホーミングミサイルの短いサンプルを見つけました。
