Placeholder Image

字幕表 動画を再生する

  • In Unity 4.3 we're launching our first set of 2D features.

    Unity 4.3 より新たな2D機能が追加されました。

  • 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、2つの表示を切り替える事で

  • 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

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

  • in to the Run state.

    我々のゲームに関してはその必要はありません。

  • We then go on to add forces to the player's

    ステージの横幅はそれほど長くなく

  • 2D physics component, the rigidbody2D,

    殆どが画面に収まる広さのステージです。

  • in order to move him around.

    ですので、カメラの水平の動きと垂直の動きは同じ動きにします。

  • We also handle which direction the character is facing

    mainCameraのGameObjectに付属している

  • based on the value of Horizontal input,

    CameraFollowというスクリプトを見てみましょう。

  • checking whether it is above or below 0.

    どのような働きをするのか、コメントを確認してください。

  • This is because in Unity, holding the left input key

    色々な機能の中で最も重要なことは

  • returns a value of -1, where right returns positive 1.

    ヒーローの宇宙人を倒す能力です。

  • Depending on input, we then call a simple flip function,

    ヒーローのバズーカは発砲後の反動アニメーションがあります。

  • which reverses the X scale of the character,

    このアクションはいくつかの部分に分かれています。

  • giving him the appearance of facing the opposite direction.

    Fireキーの入力があると

  • To decide whether the player is grounded

    ロケットを発射して、オーディオを再生して

  • we added a layer in Unity called Ground

    アニメーションステートを再生します。

  • and applied it to all of our walkable foreground surfaces.

    もっと詳しく調べてみましょう。

  • We then used the Linecast function in 2D

    Runや他のアニメーションの再生中に

  • to check whether something on the Ground layer

    Shootアニメーションを再生するのため、

  • is below the character's feet.

    Shootingという別のレイヤーを作成しました。

  • To customise this more easily we created

    Weightプロパティを1にすると

  • an empty game object to use as a point

    Shootingレイヤーに含まれるパーツは

  • at which to check for the ground.

    ベースレイヤーの動きを完全に上書きします。

  • By adding a gizmo to this empty object

    このレイヤーは、プログラムからShootトリガーを呼び出されると

  • we are able to manipulate how far below

    いつでもShootアニメーションに切り替わります。

  • the character we'll check for the ground.

    Gunスクリプトのこの機能を調べてみましょう。

  • From a gameplay perspective this means that

    ここで、アニメーターを操作して

  • the character can only jump when grounded.

    ShootトリガーをTrueにします。

  • Check out the rest of the comments in the script for more

    トリガーはスイッチのように

  • information on the control of the player.

    次のフレームにFalseに戻り、再び使用できるようになります。

  • We will discuss the player's weapon

    これは攻撃のようなアクションにぴったりです。

  • later in this video.

    アニメーションをセットし、

  • Next, let's take a look at how the camera

    ロケットもこのスクリプトで発射します。

  • tracks the player in our demo.

    オーディオを再生して

  • In 2D games, much like 3D, the motion of

    プレイヤーの向いている方向に対して

  • the camera tracking the action can make

    ロケットの速度を設定します。

  • or break your game.

    このスクリプトはヒーローの

  • For a classic 2D platformer, we looked at the mechanics

    Gunという空のGameObjectに付属します。

  • of one of the most interesting camera in 2D gaming history,

    空のGameObjectにスクリプトを追加するのは、

  • the camera from Super Mario World on the Super Nintendo

    簡単にロケットの発射位置を設定できるようにするためです。

  • or Super Famicom.

    バズーカの先に空のGameObjectを配置して

  • In Super Mario world the camera tracks

    オブジェクトの位置にロケットが生成されるようにします。

  • horizontally, but uses a dead zone

    ロケットは2DRigidbodyを持って

  • or margin in the centre of the viewport

    それに速度を与えて動かします。

  • in which the character can move a little

    スプライトの排気炎を付け

  • without the camera tracking.

    パーティクルシステムの煙も足します。

  • Once the character moved beyond this margin

    パーティクルシステムも新たなスプライト版機能が追加されました。

  • the camera tracks back toward the player.

    煙のコマが描かれたスプライトをマテリアルに追加する事で

  • The Super Mario World camera used particular heights

    簡単にスプライトアニメーションのパーティクルを作成できます。

  • to snap to vertically, but we didn't need this

    敵またはフィールドにロケットが当たると

  • kind of detail for our game as we

    ロケットは消え

  • do not have a long level in the X axis

    爆発が生成されます。

  • but more of a stage on which the action takes place.

    爆発は単純なコマアニメーションを行うスプライトです。

  • For this reason our camera employs

    Sorting Layerで前景の最後に描画されるようにします。

  • similar tracking vertically as it does horizontally.

    このようなスプライトに基づいたアニメーションの追加は、

  • Take a look at the CameraFollow script on the

    Project Panelからファイルを選んで

  • mainCamera game object to see comments

    Sprite Modeを"Multiple"にします。

  • on how it achieves this effect.

    これでスプライトエディタを使い

  • There are several effects in the game,

    手動、もしくは自動的に分割する事ができます。

  • but most important is our heroes ability

    ファイルをスプライトに設定する利点は、

  • to slay the alien onslaught he's faced with.

    この様にApplyをクリックするだけで

  • Our hero shoots a bazooka which has animated recoil.

    Unityはファイルの子供としてそれぞれのスプライトを生成し

  • This action is made up of several parts.

    そのスプライトをそのまま使う事が出来ます。

  • First we listen for key input and when the Fire key is

    これがロケットの構造です。

  • pressed we instantiate a rocket,

    どのようにして敵を倒すのかは、

  • play an audio clip and trigger an animation state to play.

    後ほど敵の項目でお話したいと思います。

  • Let's break this down even further.

    話をプレイヤーキャラクターに戻して

  • in order to play the Shoot animation while other

    HPとダメージのことを調べましょう。

  • animations such as Run are playing we

    HPはfloatとして保存されています。

  • created a separate layer within our animator

    敵からのダメージはTakeDamage関数を呼び出して与えます。

  • called Shooting.

    プレイヤーが簡単に倒されてしまうのを避けるため、

  • By setting the Weight property to 1 here

    前回のダメージからrepeatDamagePeriodが経過した場合のみ

  • we can totally override motion in the base layer

    ダメージを受けます。

  • on any parts of our character that are animated

    また、敵から逃げ易くするため、

  • by clips on the shooting layer.

    そしてプレイヤーのダメージを表現するため、

  • In this layer we switch to the Shoot animation

    ダメージを受けたキャラクターをヒットバックさせます。

  • from any state, when the Shoot trigger

    TakeDamage関数で一時的にプレイヤーのジャンプを止め、

  • parameter is called from code.

    敵からキャラクターへの方向に物理的な力を与えて動かします。

  • Let's take a look at the Gun script in charge of this.

    hurtForceの変数はInspectorで表示しているので、