Comments
Description
Transcript
講演ファイル（コースB）：大野 功二（PDF）
【コースB】 Unity2Dではじめる2Dゲーム作り 初心者徹底ガイド ＆ ゲームアプリのUI考え方と実装 自己紹介 お手元にあるUSBメモリから Unite2016Tokyo_TrainingDay_CourseBフォルダを お持ちいただいたパソコンのデスクトップに コピーしてください。 コピーが終わったら、Unity2D_Ohno.zip を解凍してください。 ６時間のワークショップです。 ３分間ほど時間を設けますので、 お隣の方にご挨拶、どうぞ！ アンケート • 学生の方 • Windowsの方 • Unityでゲームを１本でも作ったことがある方 （どんなものでもいいです） • Unityでスクリプトを使ってプログラムをした経験のない方 このワークショップの内容は、 後日、ビデオ・スライド・プロジェクトファイルのすべてが 公開されます。 何かわからないこと、 お困りのことが発生したら、 手をあげて、お近くのTAにご相談ください コースBの内容 • 12:00 Unity2Dではじめる2Dゲーム作り初心者徹底ガイド (大野 功二) • 15:00 ゲームアプリのUI考え方と実装 (池和田 有輔) Unity2Dではじめる2Dゲーム作り 初心者徹底ガイド １２：００∼ Chapter 1: Unity2Dの基本について解説（お話中心） １３：５０∼ 休憩 １３：００∼ Chapter 2: MecanimとPhysics2Dを使って、アクションゲームに挑戦！ １３：５０∼ 休憩 １４：００∼ Chapter 3: レベルデザインしてみよう！ １４：４５∼ コースB前半終了・休憩 １５：００∼ コースB後半・ゲームアプリのUI考え方と実装 なお、プログラムはC#で実装します。 また、C#の基礎知識については、深く解説しません。 今日は、完全に理解することよりも、 「このような処理をしている」という全体的な視野が持てるように 解説します。 ファイルのコピーと展開はできましたか？ UnityとUnity2Dの基本を知ろう！ Q.Unityとは？ A.ゲームに必要な複数の機能の集合体です！ ア 2Dグ 2D セット ラフィック 物理 (Unity2D) バンドル 3Dグラ uGUI エンジン Unity フィック サウンド Engine 3D SpeedTree 物理 アニメーショ エンジン ン AI Q.Unity2Dとは？ A.2Dゲーム制作に必要な機能の総称です 2D 2D物理 グラフィック エンジン 表示 （Box2D) 2Dグラフィック アニメーション Mecanim データ管理 Unity2Dゲームの作り方の流れ Step.1・「プロジェクト」の作成 Step.2・「アセット」を作る Step.3・「シーン」を作成する →実行して確認 Step.4・「スクリプト」を作成する →実行して確認 これから、この４ステップについて解説しますが、 「解説」「実装」の手順で説明します。つまり２回説明します。 「解説」は聞くだけでも大丈夫です。 Step.1・「プロジェクト」の作成 「プロジェクト」とは？ １本のゲームを作るための大きな管理ファイルやフォルダ 解説 Unityの起動 ② ① 解説 プロジェクトの作成 ③ ④ ⑤ 解説 成功・失敗 Unity2Dプロジェクト Unity3Dプロジェクト (シーンビューが平面で表示される) (シーンビューが立体で表示される) レイアウトはDefaultで行います 解説 Gameビューの設定を確認 ① ② ③ 編集モード トランスフォームツールバーの 一番右端の「2D編集ボタン」で編集 「Unityエディタ」の各ウィンドウの名称 Unity エディタ プロジェクト作成・実演 ・プロジェクトの作成 ・シーンビューの簡単な操作（移動・拡大縮小・カメラをダブルクリック） Step.2・アセットを作る 「アセット」とは？ ゲームを作るための「素材（資産）」 グラフィックや音楽などのでデータなど （この後に作られるスクリプトファイルなども含まれます） グラフィックデータを作る 画像ツールで作成したり、アセットストアで購入したり ① ② 画像データをプロジェクトブラウザに ドラッグ＆ドロップするだけ データのインポート・実演 ・データをプロジェクトブラウザからドラッグ＆ドロップ ・インスペクタでドラッグしたデータの内容を確認 Step.3・「シーン」を作成する 「シーン」とは？ ゲームの１場面を構成する管理単位です。 １ステージを１シーンで作るのが一般的です。 空のシーンに名前をつけて保存する ② ① ③ OR ショートカット 「Command + S」「CTRL+S」 落ちたときのために、 こまめにCOMMAND+S,CTRL+Sで セーブを！ シーンのセーブ・実演 キャラと地形でシーンを作る 「ゲームオブジェク」と「コンポーネント」で プレイヤーキャラを作る ゲームオブジェクト コンポーネント コンポーネント コンポーネント コンポーネント コンポーネント ゲームオブジェクト Transform 位置と向きと大 きさ SpriteRend ere スプライト 表示 「Transformコンポーネント」 位置（Position） 回転（Rotation） 大きさ（Scale） を管理するコンポーネント Unityエディタと座標 「SpriteRenderコンポーネント」 2Dグラフィック表示の仕組みを 「スプライト」という 実際に作るのは、Projectビューからシーンビューへ ドラッグ＆ドロップするだけ ① シーンの作成・実演 重なりの問題 地形のOder in layerを−１に設定 ソーティングレイヤー ソーティングレーイヤー オーダーインレイヤー 実行してみよう！・実演 Mecanimでキャラクタをアニメーションさせる Mecanmとは？ アニメーションを行うためのアニメーションエンジン 本来は3D用アニメーションエンジンだったが、 Unity2Dの採用にあわせて、 2Dスプライトもアニメーションできるようになった アニメーションさせる ゲームオブジェクト Transform 位置や向き SpriteRend ere スプライト 表示 Animator アニメーション アニメーション 簡単な方法 複数の画像を、シーンビューにドラッグ＆ドロップさせるだけ アニメーションの作成・実演 Physics2D キャラクターを動かしたり、アタリ判定を行うには、 物理演算エンジンを使うのがオススメ！ 2DゲームならUnityに搭載されている2D物理エンジン 「Physics2D」を使います。 Rigidbody2Dコンポーネントを使って、 キャラクタを動かす ゲームオブジェクト Transform 位置や向き SpriteRend ere スプライト 表示 RigidBody2D 物理エンジン Animator アニメーショ ン 「Rigidbody2Dコンポーネント」 剛体（硬い物体）の 運動をシミュレートする コンポーネント Rigidbody2Dコンポーネントの新規追加 ① ③ ② Rigidbody2Dコンポーネントの作成・実演 ・Rigidbody2Dを作成 ConstrainのZの設定 「Collider2Dコンポーネント」 アタリ判定を実現する コンポーネント BoxCollider2Dは 矩形のアタリ判定が取れる コライダーコンポーネントの新規追加 ① ③ ② BoxCollider2Dを追加 BoxCollider2Dコンポーネントの作成・実演 [キャラクタ] ・BoxCollider2Dを作成 ・EditColliderボタンでこりジョンの大きさを調整 [地形] ・キャラクタと同様の手順でアタリ判定をつける ・なお、Rigidbody2Dは不要（地形は動かないので） 「プレハブ」を作って、楽をしよう 「プレハブ」とは、シーンを超えて再利用できる ゲームオブジェクトです。コンポーネント情報も維持されます。 [プレハブ] ステージA プレイヤー [プレハブ] 地形A ステージB 「プレハブ」はハンコ！ Projectブラウザにドラッグ＆ドロップするだけで、 そのゲームオブジェクトはプレハブになります。 ① プレハブから作成した複数のゲームオブジェクと は、プレハブを編集するだけで、それらのゲームオ ブジェクとに反映されます。 プレハブの作成・実演 ・地形のプレハブを作成 ・スケールを変更してプレハブの機能を確認 Step.4・スクリプトを作成する Unityにキャラをジャンプさせるコンポーネントはあ りません。ジャンプさせるにはスクリプト（プログ ラム）を作成する必要があります。 複雑な制御は スクリプトでプログラムする ゲームオブジェクト Transform 位置や向き キー入力でジャンプ Script Component SpriteRend ere スプライト 表示 SPACEキー RigidBody2D 物理エンジン Animator アニメーショ ン 今回プログラムで使うクラス(API) ・Rigidbody2D 物理エンジンの剛体を管理するクラス ・GetComponent コンポーネントを取得するクラス ・Input.GetKeyDown キー入力を取得できるInputクラスとGetKeyDownメソッド ・Vector2 「座標」や「速さ」や「力」を表現するための２次元ベクトル Rigidbody2Dをスクリプトで制御する Velocity,AddForce rigidbody2D.Velocity(速度) 速さベクトル Vector(x,y) = (5,0) rigidbody2D.AddForce(力) SPACEキー 力ベクトル Vector(x,y) = (0,300) スクリプトエディタの作成まで Step.1・Projectブラウザからスクリプト作成 Step.2・ファイル名変更 Step.3・スクリプトエディタ起動→クラス名確認 Step.1・Projectブラウザからスクリプト作成 ① ② ③ Step.2・ファイル名変更 ③ ④ Step.3・スクリプトエディタ起動→クラス名確認 ⑤ダブルクリック 失敗している場合は、 “NewBehavioursScript”というクラス名になる この場合は、”Player”に書き直す スクリプトエディタ Mono Visual Develop Studio エディタ エディタ ジャンプスクリプトを作ってみる スクリプト入力が苦手な人は、 Unite2016Tokyo_TrainingDay_CourseB/Unity2D_Ohno/Samples/Player.cs をUnityのプロジェクトブラウザにドラッグ＆ドロップして、そのまま使ってください。 スクリプトをゲームオブジェクとに設定 ゲームオブジェクとを選択して、 スクリプトファイルをドラッグ ＆ドロップする ① ③ スクリプトファイルの作成 スクリプトの作成・実演 ・スクリプトをゲームオブジェクトにアタッチ ・PlayerのRigidbody2DのGravityScaleを10に修正し、 さらにジャンプパワーも1500に修正 イベントとは？ 「イベント」とは、Unityエンジンが任意の条件や段階で呼 び出す処理です。よく使うのは、次の４つです。 ・Awake シーン開始時に呼び出される ・Start ゲームオブジェクト作成後に呼び出される ・FixedUpdate 物理エンジンの1ステップ処理ごとに呼び出 される ・Update 描画タイミングごとに呼び出される http://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html 休憩１０分 13:00から再開です Unity2Dではじめる2Dゲーム作り 初心者徹底ガイド １２：００∼ Chapter 1: Unity2Dの基本について解説（お話中心） １３：５０∼ 休憩 １３：００∼ Chapter 2: MecanimとPhysics2Dを使って、アクションゲームに挑戦！ １３：５０∼ 休憩 １４：００∼ Chapter 3: レベルデザインしてみよう！ １４：４５∼ コースB前半終了・休憩 １５：００∼ コースB後半・ゲームアプリのUI考え方と実装 MecanimとPhysics2Dを使って、 アクションゲームに挑戦！ Chapter1で、ここまで追いつかなかった方は、 下記のフォルダをご利用ください。 Chapter1の完成版は、下記のフォルダにあります。 Unityエディタの「FIle」メニューから、「OpenProject」を選択して、 下記のプロジェクトファイルを開いてください。 /Unity2D_Ohno/Samples/Chapter1End_UnityChanGun Unity2D_Ohno/Chapter2/Sprite/の中の 画像データをAssets/Spritesへインポートしてください ① ② 画像データをプロジェクトブラウザに ドラッグ＆ドロップするだけ ガンシューティング 「Unity Chan Gun!」を作ってみましょう Unityちゃんを左右に移動させる スクリプトを作成する １・左右移動 ２・カメラにも対応 キャラを反転さて反対方向に移動させる transform.localScale(-1.0,1.0,1.0) transform.localScale(1.0,1.0,1.0) rigidbody2D.Velocity(速度) rigidbody2D.Velocity(速度) 速さベクトル Vector2D(-5,0) 速さベクトル Vector2D(5,0) 今回プログラムで使うクラス(API) ・transform ゲームオブジェクトのトランスフォームコンポーネント ・GameObject.Find ゲームオブジェクトを検索するメソッド ・Vector3 「座標」や「速さ」や「力」を表現するための３次元ベクトル 移動スクリプトを作ってみる(Chapter2-1) スクリプトの作成・実演 ・スクリプトの編集 撃つアニメーションを作成する (新規アニメーションの追加） Step.１・新規アニメーションとステートの登録 Step.２・トランジションの作成 Step.３・スクリプトの作成 Animator ・アニメーションを管理するためのコンポーネント Animation Clip ・アニメーションデータ Mecanimの仕組み（各コンポーネントとの関係） Mecanimの仕組み（スクリプトからの制御） Animator 今回のゲーム用に、打つアニメーションの構造を作る アニメーションステートとは？ 新規ステートの追加 ① アニメーションの作成・実演 ・スプライト画像のインポート ・攻撃アニメーションを複数選択して、 Playerゲームオブジェクトにドラッグ＆ドロップ ・AnimatorにFireトリガーを追加 トランジションとは？ トランジションのプロパティ ① ③ ② 今回プログラムで使うクラス(API) ・Animator Animatorコンポーネント Animator.SetTriggerでトリガーをセットできる 攻撃遷移スクリプトを作る(Chapter2-2) スクリプトの作成・実演 ・スクリプトの編集 弾を発射する １・弾の作成 ２・弾のスクリプトの作成 弾の作成 １・弾のゲームオブジェクト作成 ２・Rigidbody2DとCirle Collider 2D コンポーネントを追加 ３・スクリプトを作成・設定 ４・プレハブ化 ５・シーンにある元の弾は削除 今回プログラムで使うクラス(API) ・Instantiate ゲームオブジェクトを生成する ・OnTriggerEnter2D トリガータイプのコライダーの接触を検知したときに 呼ばれるイベント ・Collider2D 上記のタイミングで取得するコライダーのクラス ・DestroyObject ゲームオブジェクトの削除 弾スクリプトを作ってみる(Chapter2-3) 弾スクリプトを作ってみる(Chapter2-3) タグの設定 スクリプトの作成・実演 ・スクリプトの編集 ・プレイヤーのゲームオブジェクトに プレハブ化した弾のゲームオブジェクトを設定 ・タグの設定 アニメーションイベントで弾を発射する アニメーションイベントの作り方 １・スクリプトを作成 ２・アニメーションイベントを設定 今回プログラムで使うクラス(API) とくになし 弾スクリプトを作ってみる(Chapter2-4) 弾スクリプトを作ってみる(Chapter2-4) スクリプトの作成・実演 ・スクリプトの編集 ・アニメーションイベントの実装 敵を作る １・スプライトを複数選んで、 シーンにドラッグ＆ドロップ 敵の移動アルゴリズムを作る １秒ごとにRigidbody2D.AddForceでジャンプさせる Rigidbody2D.Addforce(力) 力ベクトル Vector3D(0,300) 敵のコンポーネント設定 今回プログラムで使うクラス(API) ・Time.time 時間を取得できる ・OnWillRenderObject カメラで映ったか（描画したか）取得できる ・SceneManager シーン遷移の管理クラス 敵を作ってみる(Chapter2-5) スクリプトの作成・実演 ・スクリプトの編集 休憩１０分 14:00から再開です Unity2Dではじめる2Dゲーム作り 初心者徹底ガイド １２：００∼ Chapter 1: Unity2Dの基本について解説（お話中心） １３：５０∼ 休憩 １３：００∼ Chapter 2: MecanimとPhysics2Dを使って、アクションゲームに挑戦！ １３：５０∼ 休憩 １４：００∼ Chapter 3: レベルデザインしてみよう！ １４：４５∼ コースB前半終了・休憩 １５：００∼ コースB後半・ゲームアプリのUI考え方と実装 レベルデザインしてみよう！ Chapter2で、ここまで追いつかなかった方は、 下記のフォルダをご利用ください。 Chapter1の完成版は、下記のフォルダにあります。 Unityエディタの「FIle」メニューから、「OpenProject」を選択して、 下記のプロジェクトファイルを開いてください。 /Unity2D_Ohno/Samples/Chapter2End_UnityChanGun Unity2D_Ohno/Chapter2/Sprite/の中の 画像データをAssets/Spritesへインポートしてください ① ② 画像データをプロジェクトブラウザに ドラッグ＆ドロップするだけ 作業ステップ • １０分 レベルデザインの基本について説明 • １５分 お手本作成 • １５分 ゲームジャムに挑戦！ 「レベルデザイン」ってなに？ • 「難易度調整」のことではなく、 「ゲームの場（レベル）や流れ」の設計のこと • ゲームのおもしろさは、ゲームシステムも重要だが、 レベルデザインは、それと同じかそれ以上に重要 • ゲームシステムの問題はレベルデザインで補えることもあるが、 レベルデザインの問題はゲームシステムでは補えない レベルデザインのよくある失敗アルアル • 変化がすくない • グラフィックは違うけど、遊びは同じに見える • ドラマッティックではない • 初見殺しが多い • もう一度プレイしたいと思わない 対策 • 変化がすくない →コントラストを作る • グラフィックは違うけど、遊びは同じに見える →遊びの「幅」と「深さ」の違いを知る • ドラマッティックではない →序破急やインタレストカーブを感じない • 前に進みたくなる動機がない、初見殺しが多い →フックがない • もう一度プレイしたいと思わない →失敗した理由（原因）がわかりにくレベルデザイン 「くやしい」ではなく、ゲームが悪いと思わせるレベルデザイン コントラストとは？ • コントラストは「物事の差」 • レベルデザインのうまいレベルデザイナーは、 コントラストを考えてテンポ・リズムを作っている • コントラストを強くすると「アクションが明確になる」 • コントラストを強烈にすると、 プレイヤーに「驚き」「ショック」を与えられる レベルデザインでのコントラスト コントラストを明確にすると「アクション」ハッキリがする レベルデザインでのコントラスト コントラストを強いと、プレイヤーに驚きを与える コントラスト・捕捉 • 派手にしたければ、コントラストを常に強めに • 落ち着きのある体験を演出したいなら、コントラストを弱めに レベルデザインにおける「幅」と「深さ」 • ゲームの遊びには「幅」と「深さ」がある • 「幅」は、目新しいチャレンジ 例えば、新しい敵やギミックなど • 「深さ」は、応用した遊びの楽しさ 例えば、AとBという敵がいた場合、AとBを順番に出すのは「幅」 を生かした遊び。AとBを組み合わせて同時に戦わせるのは「深 さ」の遊び 簡単な戦闘バリエーションの作り方 [幅] • 体力を増やす、減らす • 体を大きくする、小さくする • 移動を早くする、遅くする [深さ] • 敵の組み合わせ • 敵と地形の組み合わせ 構成 [ステージとしての構成] ・重力 ・横構成、縦構成、斜め構成 [おもしろさとしての構成] ・このあと説明 [物語としての構成] ・今回は説明しません 序破急・インタレストカーブ • おもしろいレベルデザインを作りたい場合、 もっとも簡単な方法は「序」「破」「急」の展開を作ること • これで作られるゲームのおもしろさが「インタレストカーブ」 • インタレストカーブは「コントラストの差」で作られる レベルデザインダイアログを作る 具体的に設計する 難易度は一気にあげない。必ず休憩できる場所を作る • 難易度を上げるだけにすると、プレイヤーは作れる • ある程度あげたら、一旦休憩を挟む。そして、下げる • 難易度にも「幅」と「深さ」がある 「フック」を作る • 「フック」とは、前兆 • フックがあれば、プレイヤーは学習する • フックがあれば、プレイヤーは失敗の原因を知ることができる • フックがあれば、レベルデザイナーがゲームの進行を誘導して も、プレイヤーは「自分で選択」したと感じる 「くやしい！」と思わせる • 失敗の理由を明確にプレイヤーに分からせる （フックなど） • 失敗の理由がわかりにくいレベルデザインをしない （ 失敗の理由がわかりにくいギミックを作らない） • 「簡単にできる１つのことから、同時に２つのことをさせる」 展開 難易度と高低差を同じにしている 敵の種類を増やす スケール２倍 スケール３倍 ブロックを追加 実際に作ってみます！ 最後に１５分だけ、自由にレベルデザインしてみてください。 できたら、隣の人にあそんでもらいましょう！ 本日使ったUnity Chan!データは、 WEBでも公開しています。 http://unity-chan.com 休憩１５分 15:00から 「 ゲームアプリのUI考え方と実装」 スタートです！！ 次のワークショップで使うzipファイルを 休憩中に解答お願いします。