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

http://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

http://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

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

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

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

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

 

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

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

 

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

 

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編

Unity5で魔法陣を作ろう xOctoManx編

YoutubeでxOctoManxさんが、ヒーリングスペルのパーティクルの作り方を解説している動画をアップロードしています。前から気になっていたので試してみました。これを見るまで、パーティクルで螺旋を作る方法が分かりませんでしたが、アニメーションを使って、親のオブジェクトを回転させているだけでした。

パーティクルはシンプル

003

ParticleSystemコンポーネントはシンプルで、ポイントは、Simulation SpaceをWorldにしているところだけです。これをLocalからWorldにすると、このオブジェクトが移動したり、回転すると、その移動によってパーティクルが揺れることになります。

螺旋はアニメーションで行う

001

さきほどの設定で、ParticleSystemのSimulation SpaceをWorldにしました。親となる魔法陣オブジェクトのTransform.rotationを使って回転させると、パーティクルが揺れるようになります。そのためボタンクリックなど魔法発動時に魔法陣を回転させると、螺旋状態になります。

螺旋は、魔法陣が回転しているだけ!
螺旋は、魔法陣が回転しているだけ!

基本の仕組みはこれだけで、あとはアニメーションで最初は魔法陣とパーティクルが表示されていない状態にして、0.05秒後にアルファチャンネルを100%にするなどのアニメーションを調節していきます。また、今回のパーティクルは、螺旋が2本と、星のパーティクルで、合計3つのパーティクルになります。

SpriteRendererを使わないで魔法陣を表示する方法

2Dの場合などはSpriteRendererを使ってイメージを表示しますが、MaterialをParticles/Alpha Blendedなどにして、テクスチャーを指定します。この場合はMaterialをPlaneに割り当てると、透明部分はそのまま透明になり、色が付いた部分は表示されるようになります。

002

 

このプロジェクトの配布

Unity5.4

http://hajimete-program.com/games/Unity 5 Tutorial Particle Systems 02 – Healing Spell Effect (xOctoManx).zip

 

まとめ

このチュートリアルをやるまでは、パーティクルで螺旋をどうやって実現するのか不思議でしたが実際はアニメーションを使っているだけでした。また一見複雑なパーティクル表現は、複数のParticleSystemを使っていることもわかりました。

 

Unity5.4のParticleSystemのTriggerとCollisionモジュールの使い方

Unity5.4では、ParticleSystemにTriggerモジュールが用意されました。これはTriggerオブジェクトを用意して、そこにパーティクルが入る(Enter)または出る(Exit)時などに、パーティクルを破棄(Destroy)するなどに使えます。またスクリプトでは、OnParticleTriggerが用意されていてここで処理ができます。

Triggersモジュールの使い方

1.対象となるトリガーオブジェクトを作成

単純にEmpty Game ObjectにBox Colliderなどを用意して良いですし、以下のように、Cubeを作ってもよいです。トリガーにするため、Colliderの「Is Trigger」にはチェックを入れます。またプリミティブのキューブの場合などは、中が見やすいように、Materialのシェーダーの「Rendering Mode」(Albedoカラーのすぐ上の項目です。)をFadeかTransparentにして、Albedoカラーのアルファチャンネルを低くして透明にしてます。

001

Is Triggerにチェックを入れる
Is Triggerにチェックを入れる

 

2. Particleを作成

Triggersモジュールを有効にして、先ほど作成した青箱をCollidersとして設定します。パーティクルが青箱の外にいる時(Outside)、青箱の中にいる時(Inside)、青箱に入った時(Enter)、青箱から出た時(Exit)の4つの状態があります。今回は、青箱の中に入って、出ていくときにParticleをKill設定にしています。つまり破棄されます。

以下の画像のように、透過した青箱の中に、白いパーティクルが入っていきますが、出ていくタイミングで破棄されているのがわかると思います。

003

004

005

Collisionモジュールについて

パーティクルは、緑の地面に反射させるためCollisionモジュールを有効にして、Worldの設定をしています。特に難しいことはなく、これを有効にするとパーティクルが跳ね返るようになります。まずはDampen,Bounceで、跳ね返る力を調整してみるのが良いです。

 

スクリプトで操作するには

Unity5.4では、OnParticleTriggerが用意されたので、パーティクルを放出したときから補足でき、先ほどのOutside,Enter,Inside,Exitの状態を確認して、パーティクルを変化させることが可能です。以下の公式では、Triggerオブジェクトに入ったタイミングで、色を変化させています。

https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnParticleTrigger.html

また、スクリプトを追加するオブジェクトはParticleSystemコンポーネントがあるオブジェクトになります。私の例の場合は、青箱ではなく、Particle System自身ですので注意しましょう。最初、青箱側にスクリプトを配置して動作せず戸惑いました。

今回配布するこのプロジェクトでは、OnParticleTriggerでDebug.Logのみを出力しています。

このプロジェクトの配布

Unity5.4

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

レベルデザインの学習

Unity5を使ってガン・シューティングゲームを作っています。とりあえずある程度実装できましたが、少し単調すぎてどうしたものか悩んでしまいました。そこで一度手を止めて、レベルデザインについて調べてみました。2016年のUniteのワークショップで、大野 功二さんが初心者向けにレベルデザインについて講義してくれていて非常に参考になります。

 

001
制作中のガンシューティングゲーム
002
単調なのを何とかしたいが…

レベルデザイン

日本でレベルという言葉を使う場合は、RPGゲームのレベル上げのように使いますが、英語の場合は、レベルはfloorと同じ意味もあるそうです。先ほどのYoutube動画で、いくつか注意点が描かれていたので整理してみます。

  1. 変化、コントラストを作る
  2. 遊びの「幅」と「深さ」を理解する。
  3. 起承転結、序破急を作る。
  4. フック(予兆、前兆)を作る。
  5. 失敗した理由を分かりやすくする。

1.変化、コントラストを作る

以下画像のように、なだらかに上昇していく場合は、人はあまり変化や驚きを感じません。プレイヤーに手応えを感じさせるには、ある程度の高低差のあるものなどを用意するべきです。

003
継続的な変化
004
大きな高低差

敵を出現させるときも同様で、継続して少しづつ出すよりかは、ウェーブのような仕組みを用意したり、一匹出たと思ったら、次は大量に出てくるなど変化を付けると良いです。

005
敵の増え方が緩やか
006
一匹の後は、大量に出てくる例

ある程度ゲーム経験のあるユーザー向けだからと言って、いきなり大量の敵で、継続的に増加していくなどは避けたほうがよく、うまく量や緩急などを調整していく必要があります。

私の作っているゲームでこの事を応用する場合は、敵のゾンビを秒単位に順々に増加していくのではなく、ウェーブ形式にして、ゾンビの数の調整、ウェーブ毎に出現するゾンビの種類、ウェーブのタイミングなどを細かく調整していける状態にしたほうが良いようです。

 

2.遊びの「幅」と「深さ」を理解する。

001
敵の色や大きさで種類を増やす例

ここでいうは、単純にバリエーションです。以下のような項目を修正すればよいのでこれは実装も簡単です。

  • 体力の増減
  • スプライトの大きさ
  • 速度
  • 移動経路の種類
  • 移動速度

「深さ(Depth)」ですが、これは組み合わせの事です。

  • 敵の組み合わせ
  • 敵と地形の組み合わせ

以下の画像は、敵はそれぞれ別の角度でジャンプしているだけです。しかし地形が階段になり、複数の敵が配置されると、プレイヤーは複雑に感じます。この組み合わせが発生した場合、プレイヤーは戦略を考える必要が出てきます。これによりゲームの深み、つまり面白さが生まれてきます。

a05

実際、ゲームをしている時、あまりにも難しい仕組みの場合はストレスでしかありませんが、ちょっとした部分を攻略できたりすると「よし!」と手ごたえを感じることがあります。シューティングゲームやアクションゲームは特にこの傾向が強いです。

 

3.起承転結、序破急を作る。

シンデレラ曲線や感情曲線でGoogle検索すると、この手の資料はたくさん見つかります。一番はじめに説明した「コントラストを作る」をふまえて、2D Platformerの場合は、はじめは簡単にしつつもコントラストを意識し、最後にボスを用意すればよさそうです。アクションゲームやシューティングゲームの場合は、中ボス、ボスで緩急を付けやすいので、経験が少ない場合は積極的に中ボスなどを用意するのもよさそうです。

007
引用:https://youtu.be/Dgcdo_VPHh8?t=1h2m19s

ボス素材は用意する必要ない?

ボスのキャラクターを用意しなくても極端に大きくしたりするとボスっぽくなるので、あとは攻撃方法や移動方法を調整するという手もあります。

008
キャラクター素材は同じでも、極端におおきくするとボスっぽい

 

4.フック(予兆、前兆)を作る。

a06
予兆がない死

基本的に、突然死になることはやってはいけません。プレイヤーのストレスになるだけです。ゲーム実況などで盛り上がる部分ではありますが例外のようです。

上記の画像の場合、トゲが見えていてグラグラしていたら、それは予兆になるので、プレイヤーは推測や試行錯誤で楽しむことができます。

 

5.失敗した理由を分かりやすくする。

a07
トゲに刺さってプレイヤーは死ぬ。

よく分からないまま失敗すると、プレイヤーは「もう一回やってみよう」ではなく、「よくわからなくて、つまらない」となってしまいます。エフェクト、効果音などを駆使して、失敗した理由を分かるようにして、「これをやればいけそうだ!」と挑戦させるようにしなければなりません。

 

ここまでを踏まえてチュートリアル・ステージを作成。

 

弾丸を撃つのとジャンプをするだけのプレイヤーと、ジャンプするだけの敵を作成して、シンプルな2Dプラットフォーマーを作成しました。

009 010 011 012 013

チュートリアル・ステージは全然面白くありません。しかし、レベルデザインを学習したことにより、言葉でレベル(=場)の流れやそこにオブジェクトを配置した動機や理由を説明できるようになりました!

このサンプル・プロジェクトには、コインなどの報酬やスコア、ハイスコアなどがないため、リスクとリターンなどのゲーム性をまだ追加する必要があります。

 

このプロジェクトの配布

Unity5.4

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

まとめ

レベルデザインを学習して、実際にチュートリアルステージを作ってみました。漠然とオブジェクトを配置するだけではなく、意図を持ってオブジェクトを配置できるようになったのは自分の中でとても大きいです。あとは、ステージをもう少し継続して作っていきながら、3Dゲームにつなげていきたいです。

物質自体に色はない?

Unityのマテリアルチャートをみると、プラスチックなどの非金属の場合は、sRGBは、50-243の範囲で使うとあります。今まで0-255でやってきた値と異なります。そこで、色とは何かを調べてみたのですが、ccs-inc.co.jpの記事がとても分かりやすく、光源と物体と目の関係を説明してくれていました。イチゴを青色LEDで見ると、かなり黒くなっているのはとても新鮮な感覚で見ることができました。

また、UnityのマテリアルのAlbdoも、その色を反射する値と考えれば納得できそうです。

https://docs.unity3d.com/jp/current/Manual/StandardShaderMaterialCharts.html

http://www.ccs-inc.co.jp/s2_ps/s1/s_04/column/light_color/vol11.html

http://www.ccs-inc.co.jp/s2_ps/s1/s_04/column/light_color/vol12.html

http://illustrator-ok.com/illustrator_koza/color/contents/color1.html