To compliment this we have constructed a

我々の作成したデモを元に、

demo project with these tools.

これらの機能を解説したいと思います。

Our 2D platformer is nicknamed 'Tower Bridge Defence'

この「Tower Bridge Defence」というゲームは

It depicts London's Tower Bridge in the midst

宇宙人の侵略に晒されている

of an alien invasion.

ロンドンのタワーブリッジを描いたデモです。

It's a completely sprite-based, physics driven

これは、スプライトのみで構成された物理駆動のゲームで、

2D sample level that we hope will help you

Unityにおける2Dゲーム制作の理解に役立つのではないかと思います。

understand how 2D games are put together in Unity.

この動画では

This video will discuss the background and

デモの背景と前景の作り方

foreground construction, characters, effects,

キャラクター、エフェクト、カメラの追従

camera tracking, animation and scripting

アニメーションとスクリプトについて解説します。

used in the demo.

まずは、Unity 2Dの基本的な操作を説明しましょう。

To begin with, let's discuss the basics

まず、2D機能を使うにあたって

of working in 2D in Unity.

「Editor Behaviour Mode」を2Dにしてください。

Firstly, when working in 2D, you should set the

新規プロジェクトウィザードのドロップダウン

Editor Behaviour Mode to 2D

またはメニューから Edit > Project Settings > Editor

for various settings.

で設定出来ます。

This can be done when making a new project

この設定により

using the drop-down on the project wizard

インポートされたテクスチャーはデフォルトでスプライトに設定され、

or during a project by choosing

「Scene View」のデフォルトの表示は2Dになります。

Edit - Project Settings - Editor from the top menu.

このモードでは2Dゲーム制作を行いやすい様に

This means that by default textures

ビューは並行投影になります。

will be imported as sprites and the

そして、ビューの右上に表示されている3D Gizmoが非表示になり、

Scene View will default to 2D mode.

より広いスペースを使えるようになります。

This new mode gives you a completely orthographic

この設定以外の点では

view in which to construct 2D games.

2Dのワークフローは従来の3Dゲームを作るアプローチとよく似ています。

It also hides the usual 3D gizmo

なので、既にUnityを使ったことがある方なら

in the top right of the view, giving you more space

すぐに2Dゲームを作ることができると言うことです。

to work in. Aside from these settings the work

また、2Dと3Dの要素は混在できるので

flows for 2D have been designed to mirror

2Dゲームに3Dの要素を加える事も

existing Unity approaches to 3D game creation.

またその逆に3Dのゲームに2Dの要素を加えることもできます。

So if you already know a little about Unity

ではデモプロジェクトを元に

you'll be in a great position to start making

我々がどのようにステージを作成したのかを見てみましょう。

2D games right away.

まず、Photoshopでステージ構成の概要を作成し

It's worth noting at this stage that you can

そこからレイアウトを決めました。

still mix 2D and 3D in Unity,

レイヤー毎に書き出す事で、

so if you want to add 3D elements to your 2D game

Unityのスプライトタイプとしてインポートできます

or vice versa you can do that with no worries.

背景を視点に応じて移動させるため

Let's take a look at the demo project itself,

いくつかの背景要素は別にして

and how we built it up one stage at a time.

Background Sorting レイヤーに配置します。

We began by sketching out the level design

これはUnityの新たなもう一つの2D開発機能です。

for this sample level and then went about

このレイヤーにすべての背景を追加する事で、

recreating the layout in Photoshop.

Order In LayerというSprite Rendererのプロパティで

Creating and exporting the layers,

一括して描画順番を変更する事ができます。

we were able to import these in to Unity

配置位置が決まったなら

using the new Sprite type.

Sorting Layerの”Background”をロックする事で

In order to create parallaxing in our background later,

前景の要素を追加するときに

we kept some of the background elements separate

間違えて背景を動かせることを予防できます。

and placed them on to a Background Sorting Layer.

右上のLayersドロップダウンで

Yet another new feature of 2D development in Unity.

この設定を指定できます。

Having assigned all of our backgrounds to this layer,

背景は飾りの要素だけですので、

we could then use the Order In Layer property

スプライト以外のコンポーネントは必要ありません。

of the Sprite Renderer to sort them.

背景オブジェクトの親オブジェクトには

Once we were happy with their positions

視点に応じて位置を操作する

we could lock the Background Sorting Layer

BackgroundParallaxという単純なスクリプトが追加してあります。

so that when we added foreground elements

このスクリプトに関しての詳しい説明は

we didn't need to worry about accidentally

Scriptsフォルダにあるスクリプトのコメントを参照して下さい。

dragging background elements around.

次は、前景の要素、キャラクターの作成です。

This is done using the Layers pull-down in the

デザインはロンドンのタワーブリッジの中に

top right of the interface.

UFOが着陸した状況です。

Because the background elements are purely decorative

プレイヤーはフィールド内を動き回り、

we did not require any additional components

敵は空から登場して

on the sprite game object.

フィールドの中を移動します。

They were parented to an empty game object

そういった、キャラクターの移動のために、

that has a simple script to handle parallaxing

各前景の部分にはコライダーが必要です。

called BackgroundParallax.

大体のフィールドには2DのBox Colliderで良いのですが、

For more information you'll find this script

UFOの形はかなり複雑です。

fully commented in the Scripts folder.

UnityのPolygon Colliderはスプライトの形に基づき

Next up came the creation of the foreground elements

自動的にコライダーを作成してくれます。

that our characters would actually traverse.

また、生成されたコライダーの形を手動で調整する事も可能です。

We designed London's Tower Bridge with a UFO

ポイントの移動、追加、削除で

landed in the centre.

コライダーの形を歩かせるのに適切な形にします。

The character has the run of the environment

前景を背景より手前に表示するために

as enemies spawn from the skies and begin

Tags and Layersマネジャーに

to navigate around the level.

"Foregrounds"ソートレイヤーを作成してあります。

As such, each piece of the foreground required

次は、プレイヤーキャラクターを見てみましょう。

a collider for characters to walk upon.

プレイヤーキャラクターもPhotoshopでデザインしました。

For most of the environment we used 2D

2Dゲームに合うように

box colliders for efficiency,

Raymanの様に手足が独立したデザインです。

but the UFO itself has a more complex shape.

もしくは、スプライトアニメを用いた コマアニメーションで表現する事も可能です。

Unity's Polygon Collider allowed us to

そのアプローチは後で背景の鳥に使用します。

automate creation of the collider itself

キャラクターの手足を別々に動かしたいので

based on the shape of the sprite.

Unityが別のスプライトとしてインポートされる様に

It even meant that we could tweak the shape of

それぞれ分割して配置します。

the collider later.

これにより、全てのスプライトを独立的に動く様に配置する事ができます。

Moving, adding or subtracting points

新しい"Character"ソートレイヤーに配置して

of the collider shape to make it more

PositionのZの値を入力して描画順を設定します。

appropriate to walk over.

プレイヤーキャラクターのスプライトは空のGameObjectの子供に設定し

To sort these foregrounds we created a

親のオブジェクトにはコントロールスクリプト、コライダー、

Foregrounds Sorting Layer, which was drawn

フィジックス、その他を付加します。

above the backgrounds in the Tags And Layers manager.

その後、新しくなったAnimation Windowで

Next, let's take a look at our hero.

待機、移動、ジャンプ、攻撃、死亡の時の

Our player character was yet again designed

各スプライトのパーツの動きを設定します。

in Photoshop, and for this demo

Animation windowのDopesheetビューを使う事で

we chose to make a character with independent

簡単に設定ができます。

limbs and features in the style of

親オブジェクトにアニメーションを追加して

2D hits such as Rayman.

子オブジェクトのKeyframeを作成します。

Our other option would have been to design

再生位置を動かし、キャラクターのパーツを動かして

a sprite sheet-based animation and design each

自動的にKeyframeを作ってアニメーションを作る事ができます。

each frame in Photoshop,

CurveとDopesheet、２つの表示を切り替える事で

an approach we use later for the background Swan,

タイミング及びデザインを調整も

which we'll discuss later in the video.

完成したアニメーションを

Because our character had independent elements

ステートマシーンを使って切り替える事が出来ます。

that we wish to animate we finalised the design

キャラクターのAnimator Controllerは bipedを使用していないので

and then moved his bodily elements in to separate

Apply Root Motionのチェックを解除して

spaces on our canvas to allow Unity to isolate them

Animate Physicsを有効にします。

as separate sprites in the Importer.

これで、物理エンジンで正しくアニメーションされる様になります。

This meant that we could then arrange all of

フィールド上を移動する為に

our sprites as separate elements to be animated.

プレイヤーの足元にはCircle Colliderがあります。

We placed these on to a new Character Sorting Layer

また、体を囲うBox Colliderもあります。

that we created, and then used Z values in the

これにより、段差をスムーズに乗り越える事ができ

transform to sort their rendering depth.

ジャンプの時は頭が天井にをぶつかるようになります。

All of these sprites are then arranged under an

キャラクターのアニメーションを制御するために、

empty game object, which has all of our

2Dフィジックスで動かすスクリプトを作りました。

controls scripting, colliders, physics, excetera attached to it.

フィジクスを使ってキャラクターと

Once we'd done this we were able to use the newly

敵を動かしてもっとダイナミックな

upgraded Animation window to create

ゲームプレーが可能になります。

Idle, Run, Jump, Shoot and Death animations

キャラクターのPlayerControlスクリプトでは

by animating each of the character's sprites over time.

プレイヤーの入力をチェックします。

With the new Dopesheet View in the Animation window

入力は物理制御を通してキャラクターを移動させ、

this is easier than ever.

また、この入力をAnimatorに渡し

We simply add animation to the parent object

ステートから正しいアニメーションを選択して

and then create keyframes for any of the child objects.

それぞれのアニメーション間をスムーズに遷移させます。

Moving the playhead to where we want

アニメーションからステートを作成すると便利な点は

and then moving the various parts of the character

物理の速度に応じてアニメーションの速度を変化させられる事です。

to automatically keyframe the animation.

速度に応じてアニメーションを切り替える必要はありません。

The ability to switch between Curve and Dopesheet

FixedUpdateという関数は物理更新の毎に呼び出されます。

representation of our animation makes it easier than

この関数で水平方向の入力を取得し、

ever to adjust timing and design.

AnimatorのSpeedパラメータに入れます。

With these animations created we can

ステートマシーンの待機と移動間の遷移条件は

then design a state machine for our character

Speedパラメータが0.1以上かどうか、になります。

so that when called upon in code, differing animations

その状況になると、アニメーターは待機のステートから

could be played.

移動のステートにブレンドします。

the animator controller for the character is

次は、プレイヤーのRigidbody2Dという2D物理要素に

not driving a 3D biped, so we simply deselect

力を加えてプレイヤーを動かします。

Apply Root Motion and select Animate Physics

キャラクターの向いている向きを制御するのにも

in order to drive our animations in time with

水平方向の入力を利用します。

the physics engine.

Unityでは、左キーを押すと-1が返り

In order to traverse the environment our hero has a

右キーを押すと+1が返ってきます。

circle collider at his feet and a box collider

入力された値に応じて、Flip()関数で

to cover the rest of his body outline.

キャラクターのXスケールを反転させて

This means he can smoothly walk up and down hills

反対側を向いている状態を表現します。

and when he jumps his head will hit the ceiling.

地面を接地しているかどうかを決めるために、

In order to control the character and it's animations

Groundというレーヤーを追加して

we wrote a script that moves him via 2D physics forces.

すべての歩ける地面に適用します。

This means that we can apply physics to him

そして2DのLinecastという関数を使い

and the enemies during the game for more

キャラクターの足元にGroundレイヤーがあるかどうかを

dynamic game play.

チェックできます。

In our PlayerControl script for the character

より簡単に変更できるようにするため、

we check for player input.

接地判定用の空のGameObjectを追加しました

We use this to apply physics forces

この空GameObjectにGizmoを追加する事で

for movement and also send the value of the input

接地判定の距離を調整できます。

to the animator, which in turn defines which

ゲーム中は

animation should be playing and smoothly transitions

キャラクターは地面に設置している状況でのみでジャンプできます。

between the different animation clips that

プレイヤーの制御の詳細は、

we've created as states.

スクリプトのコメントを確認してみてください。

The great thing about using the animator to

プレイヤーの攻撃に関しては後ほどお話したいと思います。

create states from animation clips is

次は、このデモで

that we can go and tweak speeds of animation

カメラがどのような動きをするか見てみましょう。

to match our physics velocities

2Dゲームにおいても、3Dゲームと変わらず

without having to reanimate anything

カメラの動作はとても重要です。

The FixedUpdate function evaluates with

古典的2Dアクションのカメラを学ぶために

each physics step, and the first thing we

スーパーファミコンのスーパーマリオワールドを見てみましょう。

do with this is to feed the value of Horizontal

スーパーマリオワールドでは

input in to the Speed parameter of our animator.

カメラは横方向に追従しますが

The transition between Idle and Run

画面の中心にはキャラクターに追従しない遊び幅があります。

in our simple state machine requires

この遊び幅の外側に動こうとすると

that the Speed parameter is above 0.1.

カメラはプレイヤーの位置に追従します。

When it is, the animator blends from Idle

高さ方向に対しては一定段階の高さを保ちますが、