Transcript

• 1. UnityとBlenderハンズオン 静岡Developers勉強会 第3章 初めてのUnityとBlender
• 2. はじめに 静岡Developers勉強会では、過去に下記の勉強会を行いました。 2010年：「Programming in Haskell」 2011年：「JavaScript: The Good Parts」 2012年：「HTML5＆CSS3実践入門」、「GitHubハンズオン」、 「node.jsハンズオン」 2013年：「入門 機械学習」 2014年：「実践 コンピュータビジョン」 2015年は上記の勉強会で学んだことを実践し、Shizudev名義のスマホアプリ を開発します。 作成後は公開用のサイトや動画も作成し、機械学習を使ってダウンロード状 況などを分析していきます。 スマホの広告費は会費にあて、万が一予定より多く収入が入った場合には寄 付を考えています。
• 3. 自己紹介  やじゅ＠静岡・・・漢字名は「八寿」 平口八寿人(https://www.facebook.com/yasuhito.hiraguchi) アラフォーエンジニア、元ＭＳＭＶＰ(VisualBasic) 静岡県島田市のＳＬ(大井川鉄道)が走っている所に在住 Twitter：yaju はてなID：Yaju3D http://blogs.wankuma.com/yaju/ http://yaju3d.hatenablog.jp/ 数学と物理を基礎からやり直す) http://www.slideshare.net/yaju88/presentations （スライド）
• 4. 概要 2015年の静岡Developers勉強会は「スマホアプリの開発」を題材とします。 スマホアプリを開発する上で、汎用的なツールの使い方を学びます。 ・Unity 統合開発環境を内蔵し、複数のプラットホームに対応するユニティ・テクノロジーズが 開発したゲームエンジンである。ゲームとインタラクティブな3Dコンテンツ制作のため の常識にとらわれない強力な機能を提供します。 ・Blender オープンソースの3DCG制作ツールです。 3Dモデルの作成、レンダリングのほかアニメーション、コンポジット機能も備える。
• 5. セッション内容  Unityでパックマンもどきを作成 C#スクリプト http://noobtuts.com/unity/2d-pacman-game  Blenderで人の形を作成 「ブレンダーからはじめよう！」の本から  スマホアプリのアイディア
• 6. Unityでパックマンもどきを作成  はじめに ＠noobtuts さんのチュートリアルを参考にUnityの使い方をマスターする http://noobtuts.com/unity/2d-pacman-game 【学ぶポイント】Unityのアニメーションとルート巡回を理解する 今回使用するオブジェクト Mecanim …アニメーションシステム AnimatorController…アニメーションの制御オブジェクト WayPoint …巡回ポジションによる移動制御オブジェクト
• 7. Unity：プロジェクト作成(2D)  プロジェクトを作る Unityエディタの「File」→「New Project」を選択する。 必ず「2D」を選択する。
• 8. Unity：カメラの設定と背景の作成  Hierarchy(ヒエラルキー) Unityのゲームシーンは、キャラから背景まで、すべてのゲームオブジェクト (GameOnject)で構成されます。このゲームをオブジェクトを階層構造で編集 できるのがHierarchy(ヒエラルキー)です。 Main Cameraを選択して 右側のInspectorに内容が 表示されることを確認
• 9.  Inspector(インスペクタ) その時点で選択されているゲームオブジェクトやアセットの詳細情報を表示・編 集するビューです。 Unity：カメラの設定と背景の作成 Position X 14.5 Y 16 Z -10 Background 黒色 Size 30 に変更する
• 10.  Assets(アセット) Assetは資産の意味。Unityで使用するオブジェクトやスクリプトを保存するフォルダ。 Assetsの右クリックでCreate→Folderで「Scripts」を作成する。 「Show in Exprore」を選択し、packman/Assets/Scriptsフォルダに背景の「maze.png」を入れる。 資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 Unity：背景画像の保存
• 11. Unity：背景画像の設定  背景画像の設定 Assetsの「maze」を選択、Inspectorで変更する。 Pixels Per Units 8 Pivot Bottom Left に変更する。 Filter Modeを「Point」 に変更する。 画像をぼやけさせないで ドットを強調させるため
• 12. Unity：背景の設定 Assetsの「maze」をドラッグして、Sceneにドロップを行う。 拡大されて表示されている場合、マウスホイールで縮小させる。 チュートリアルは One Column Layout であるが変更は不要
• 13. Unity：衝突設定 Hierarchyで「maze」を選択し、Inspectorにて「Add Component」→「Physics 2D」→「Box Collider 2D」 を選択する。
• 14. Unity：衝突設定②  ５２個のブロックについて衝突サイズを変更する 迷路のブロックごとに衝突サイズを合わせる。 衝突サイズを変更可能 にする。 ※移動は出来ない
• 15. Unity：衝突設定③ 歯車アイコンを左クリックのメニューにて、コピー＆ペーストして５２個追加する。
• 16. Unity：衝突設定(Box Collider 2D) 1～26 No Center X Center Y Size X Size Y 1 14.5 31.25 27 0.5 2 14.5 30 1 2 3 0.75 16 0.5 31 4 28.25 16 0.5 31 5 14.5 0.75 27 0.5 6 4.5 28 3 2 7 24.5 28 3 2 8 10 28 4 2 9 19 28 4 2 10 4.5 24.5 3 1 11 24.5 24.5 3 1 12 14.5 24.5 7 1 13 14.5 24 1 6 No Center X Center Y Size X Size Y 14 8.5 23 1 4 15 20.5 23 1 4 16 10.5 21.5 3 1 17 18.5 21.5 3 1 18 2 21.5 2 1 19 27 21.5 2 1 20 4.5 18.5 3 1 21 24.5 18.5 3 1 22 4.5 15.5 3 1 23 24.5 15.5 3 1 24 2 12.5 2 1 25 27 12.5 2 1 26 5.5 20.5 1 3
• 17. Unity：衝突設定(Box Collider 2D) 27～52 No Center X Center Y Size X Size Y 27 23.5 20.5 1 3 28 5.5 13.5 1 3 29 23.5 20.5 1 3 30 8.5 15.5 1 7 31 20.5 15.5 1 7 32 11.25 17 0.5 4 33 17.75 17 0.5 4 34 14.5 18.75 6 0.5 35 14.5 15.25 6 0.5 36 14.5 12.5 7 1 37 10 9.5 4 1 38 19 9.5 4 1 39 2 6.5 2 1 No Center X Center Y Size X Size Y 40 27 6.5 2 1 41 4.4 9.5 3 1 42 24.5 9.5 3 1 43 5.5 7.5 1 3 44 23.5 7.5 3 1 45 4.5 3.5 3 1 46 24.5 3.5 3 1 47 8.5 5 1 4 48 20.5 5 1 4 49 14.5 6.5 1 7 50 14.5 6.5 7 1 51 10.5 3.5 3 1 52 18.5 3.5 3 1
• 18. Unity：衝突設定のスクリプトを作成 座標の入力が大変なので、スクリプトによってBox Colider2Dを追加する。 maze.cs を作成する。資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 void AddBoxColider2D() { ArrayList data = new ArrayList(); data.Add(new Rect(14.5f, 31.25f, 27f, 0.5f)); data.Add(new Rect(14.5f, 30f, 1f, 2f)); data.Add(new Rect(0.75f, 16f, 0.5f, 31f)); for (int i=0; i<data.Count; i++) { BoxCollider2D boxCollider2D = this.gameObject.AddComponent<BoxCollider2D> (); Rect rt = (Rect)data[i]; boxCollider2D.center = new Vector2(rt.x, rt.y); boxCollider2D.size = new Vector2(rt.width, rt.height); } }
• 19. Assetsの右クリックで「Show in Exprore」を選択し、packman/Assets/Spritesフォルダに 自キャラの「packman.png」を入れる。 資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 自キャラの「 packman.png 」のPixel Per Unitsを「100」→「8」に変更する。 Sprite Modeを「Single」→「Multiple」、Filter Modeを「Bilinear」→「Point」に変更する。 Unity：Pac-Man画像の保存と設定
• 20. Unity：Pac-Man画像のSlice(切り出し)設定 Sprite Modeを「Multiple」にすることで「Splite Editor」でメニューの「Slice」が有効になります。 Typeを「Grid」に変更し、Pixel SizeをX 16 Y 16にして「Slice」ボタンを押します。
• 21. Unity：Pac-Man画像のSlice(切り出し)設定 自キャラのpackmanが切り出されて12分割される。
• 22. Unity：Pac-Manのアニメーション設定 AssetsのSpriteの配下に「PackmanAnimation」フォルダを作成する。 packman_0とpackman_1とpackman_2を選択して、Sceneにドラッグ＆ドロップする。 animeファイルを保存ダイアログ画面が表示されるので、「right.anim」にして保存する。
• 23. Unity：Pac-Manのアニメーション設定 right.animと同じ操作で、他の向きも作成する。Hierarchyのpacman_0以外を削除する。 Left.amim packman_3, packman_4 , packman_5 up.amim packman_6, packman_7 , packman_8 down.amim packman_9, packman_10, packman_11
• 24. Unity：Pac-Manのアニメーション設定 pacman_3、 pacman_6、 pacman_9を選択して削除する。
• 25. Unity：Pac-ManのMecanim設定 Mecanimとは、Unity4で実装されたアニメーションシステムです。 Mecanimを使うと、ほとんどスクリプトを記述せずにアニメーションを設定することができます。 「pacman_0」をダブルクリックすると「Animator」タブに画面遷移します。 画面遷移しない場合、 「Animator」タブをクリックします。
• 26. Unity：Pac-ManのMecanim設定(State) 各方向の「State」を追加します。Project Areaから「left.anim」をドラッグ＆ドロップします。 残りの「up.anim」と「down.anim」も同様に行います。
• 27. Unity：Pac-ManのMecanim設定(Parameter) 後で「Any State」と「right」等を矢印線で結ぶため 「Any State」 だけ左に移動させます。 次に方向用のパラメーターとして「DirX」と「DirY」を作成します。 Prametersの[+]をクリックして「Float」を選択して、「DirX」と「DirY」の2つを追加します。
• 28. Unity：Pac-ManのMecanim設定(Transition) 「Any State」ボタンを右クリックすると「Make Transition」が表示されます。 「Make Transition」を押すと矢印線が表示されるので、最初は「right」ボタンに付けてください。 矢印線を選択すると、Inspectorが表示されます。※Transition(トランジション：遷移)
• 29. Unity：Pac-ManのMecanim設定(Conditions) 矢印を選択すると、Inspectorが表示されます。方向ごとにConditionsを変更します。 right DirX Greater 0.1 left DirX Less -0.1 up DirY Greater 0.1 down DirX Less -0.1 ＞ 大なり Greater ＜ 小なり Less
• 30. Unity：Pac-ManのMecanim設定(Speed) right,left,up,downのステートを全て選択して、InspectorにてSpeedを「0.8」にする。 PlayしてGame画面を確認する。 PlayしてGame画面 を確認する
• 31. Unity：Pac-Manの再設定(Position) Hierarchyにて、「pacman_0」を「pacman」に名称変更する。(右クリックでRenemaを選択) Inspectorにて、Positionを変更する。 X 14 , Y 14 に変更する。
• 32. Unity：Pac-Manの再設定(Collider) Inspectorにて「Add Component」→「Physics 2D」→「Circle Collider 2D」を選択する。 Inspectorにて「Add Component」→「Physics 2D」→「Rididbosy 2D」を選択する。 設定値を下記のように変更する。 Circle Collider(サークルコリダー) Radius(半径) 0.95 に変更する。 Rigidbody(リジッドボディ) Gravity Scale(重力の影響度) 0 Fixed Angle(回転) オン に変更する。
• 33. Unity：C#スクリプト(PacmanMove)の作成 ProjectエリアのCreateのメニューから「Folder」を選択し「Scripts」を作成します。 Scriptsフォルダを選択してCreateのメニューから「C# Script」を選択します。 Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「PacmanMove」 にします。 ※名前の変更が後回しになると、クラス名が「 NewBehaviourScript 」となってしまうので クラス名も「PacmanMove」変更にする必要が出てきます。
• 34. Unity：C#スクリプト(PacmanMove)の作成 ソースは、http://noobtuts.com/unity/2d-pacman-game からコピーする。 using UnityEngine; using System.Collections; public class PacmanMove : MonoBehaviour { public float speed = 0.4f; Vector2 dest = Vector2.zero; void Start() { dest = transform.position; } void FixedUpdate() { // Move closer to Destination Vector2 p = Vector2.MoveTowards(transform.position, dest, speed); rigidbody2D.MovePosition(p); // Check for Input if not moving if ((Vector2)transform.position == dest) { if (Input.GetKey(KeyCode.UpArrow) && valid(Vector2.up)) dest = (Vector2)transform.position + Vector2.up; if (Input.GetKey(KeyCode.RightArrow) && valid(Vector2.right)) dest = (Vector2)transform.position + Vector2.right; if (Input.GetKey(KeyCode.DownArrow) && valid(-Vector2.up)) dest = (Vector2)transform.position - Vector2.up; if (Input.GetKey(KeyCode.LeftArrow) && valid(-Vector2.right)) dest = (Vector2)transform.position - Vector2.right; } } bool valid(Vector2 dir) { // Cast Line from 'next to Pac-Man' to 'Pac-Man' Vector2 pos = transform.position; RaycastHit2D hit = Physics2D.Linecast(pos + dir, pos); return (hit.collider == collider2D); } } Rigidbodyを扱う時はFixedUpdateを使います。 FixedUpdateは、物理シミュレーター専用に用 意されている特殊な Update 関数です。フレー ムの概念とは関係なく一定時間毎に（デフォル トでは0.01秒）実行されます。
• 35. Unity：MonoBehaviorクラスとは Unityエンジンからゲームの実行状況に応じてメッセージが送信されると、 実装クラス内にあるメッセージと同じ名前の関数を実行します。 MonoBehaviorクラス Awake Start FixedUpdate Update LastUpdate OnGui OnColisionXXXX2D OnTriggerXXXX2D OnDisenable 継承先クラス Start FixedUpdate OnGui シーン開始時 に呼ばれる Unity GUI描画時 に呼ばれるOnColisionEnter2D コライダーヒット 時に呼ばれる Update 描画時(物理シミュレータの 進行で使用)に呼ばれる 描画時(フレームの進行)に 呼ばれる
• 36. Unity： Pac-Manの操作  C#スクリプト(PacmanMove)の追加 Hierarchyの「Pacman」を選択して、Inspectorで「Add Component」ボタンを押下し、 Component一覧からScripts→ PacmanMoveを選択する。 または「PacmanMove」スクリプトをHierarchyの「Pacman」にドラッグ＆ドロップする。 Playして左右の矢印キーでPac-Manが移動できることを確認する。 PlayしてGame画面を 確認する
• 37. Unity： Pac-Manの操作(向き変更) 上下左右にPac-Manを操作しても右向きのままだったので、向きに合わせて Pac-Manの向きになるようにスクリプトを変更します。 C#スクリプト(PacmanMove)のFixedUpdate()にAnimetion Parameters以降を追加します。 void FixedUpdate() { // Move closer to Destination Vector2 p = Vector2.MoveTowards(transform.position, dest, speed); rigidbody2D.MovePosition(p); // Check for Input if not moving if ((Vector2)transform.position == dest) { if (Input.GetKey(KeyCode.UpArrow) && valid(Vector2.up)) dest = (Vector2)transform.position + Vector2.up; if (Input.GetKey(KeyCode.RightArrow) && valid(Vector2.right)) dest = (Vector2)transform.position + Vector2.right; if (Input.GetKey(KeyCode.DownArrow) && valid(-Vector2.up)) dest = (Vector2)transform.position - Vector2.up; if (Input.GetKey(KeyCode.LeftArrow) && valid(-Vector2.right)) dest = (Vector2)transform.position - Vector2.right; } // Animation Parameters Vector2 dir = dest - (Vector2)transform.position; GetComponent<Animator>().SetFloat("DirX", dir.x); GetComponent<Animator>().SetFloat("DirY", dir.y); }
• 38. Unity： Pac-Manの表示レイヤー変更 ドットを食べるために、Pac-Manの表示レイヤーを１階層上げる。 Inspectorの「Sprite Renderer」コンポーネントの「Order in Layer」を「1」にします。
• 39. Unity：シーンの登録 ここまでで一旦保存しておく。Fileメニューの「Save Scene」を選択 チュートリアルと同様に「scene_main」で保存する。
• 40. Unity：Pac-Dot画像の保存と設定 Assetsの右クリックで「Show in Exprore」を選択し、pacman/Assets/Scriptsフォルダに ラケットの「pacdot.png」を入れる。 資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 ボールの「 pacdot.png 」とのPixel Per Unitsを「100」→「8」に変更する。 Filter Modeを「Bilinear」→「Point」に変更して「Apply」ボタンを押す。
• 41. Assets/Scriptsの「pacdot」をドラッグしてSceneにドロップ、Position X 0, Y 0 にセットする。 Inspectorにて「Add Component」→「Physics 2D」→「Box Collider 2D」を選択する。 Hierarchyにて「maze」の下位に「pacdot」を移動させます。 Unity： Pac-Dotの位置の設定 Box Collider 2D Is Trigger チェックオン Size X 0.25 Y 0.25 に変更する
• 42. Unity： Pac-Dotの位置のスクリプト作成 Pac-Dotの作成が330個もあり大変なので、スクリプトで追加する。 maze.cs を作成する。資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 void AddPacdot() { GameObject obj; ArrayList data = new ArrayList (); data.Add ("2,3,4,5,6,7,8,9,10,11,12,13,16,17,18,19,20,21,22,23,24,25,26,27"); //30 data.Add ("27,22,16,13,7,2"); //29 for (int i=0; i<data.Count; i++) { var xs = data [i].ToString().Split (','); for (int j=0; j<xs.Length; j++) { obj = (GameObject)Instantiate (pacdot, new Vector3 (float.Parse(xs [j]),30 - i, 0), Quaternion.identity); obj.name = pacdot.name; obj.transform.parent = this.transform; } } }
• 43. Unity：C#スクリプト(Pacdot)の作成 Scriptsフォルダを選択してCreateのメニューから「C# Script」を選択します。 Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「Pacdot」にし ます。 ソースは、http://noobtuts.com/unity/2d-pacman-game からコピーする。 using UnityEngine; using System.Collections; public class Pacdot : MonoBehaviour { void OnTriggerEnter2D(Collider2D co) { if (co.name == "pacman") Destroy(gameObject); } }
• 44. Assetsの右クリックで「Show in Exprore」を選択し、packman/Assets/Spritesフォルダに 敵キャラの「blinky.png」、「clyde.png」、「inky.png」、「pinky.png」を入れる。 資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3 敵キャラの「blinky.png」等のPixel Per Unitsを「100」→「8」に変更する。 Sprite Modeを「Single」→「Multiple」、Filter Modeを「Bilinear」→「Point」に変更する。 Unity：Ghosts画像の保存と設定
• 45. Unity：Ghosts画像のSlice(切り出し)設定 Sprite Modeを「Multiple」にすることで「Splite Editor」でメニューの「Slice」が有効になります。 Typeを「Grid」に変更し、Pixel SizeをX 16 Y 16にして「Slice」ボタンを押します。 敵キャラ「blinky」、「clyde」、「inky」、「pinky」を同様に行う。
• 46. Unity：Ghosts画像のSlice(切り出し)設定 敵キャラが切り出されて8分割される。 敵キャラ「blinky」、「clyde」、「inky」、「pinky」を同様に行う。
• 47. Unity：Ghostsのアニメーション設定 AssetsのSpriteの配下に「BlinkyAnimation」フォルダを作成する。 blinky_0とblinky_1を選択して、Sceneにドラッグ＆ドロップする。 animeファイルを保存ダイアログ画面が表示されるので、「right.anim」にして保存する。
• 48. Unity：Ghostsのアニメーション設定 right.animと同じ操作で、他の向きも作成する。Hierarchyのblinky_0以外を削除する。 Left.amim blinky_3, blinky_4 up.amim blinky_5, blinky_6 down.amim blinky_7, blinky_8
• 49. Unity：Ghostsのアニメーション設定 blinky_2、 blinky_4、 blinky_6を選択して削除する。
• 50. Unity：GhostsのMecanim設定 「blinky_0」をダブルクリックすると「Animator」タブに画面遷移します。 画面遷移しない場合、 「Animator」タブをクリックします。
• 51. Unity：GhostsのMecanim設定(State) 各方向の「State」を追加します。Project Areaから「left.anim」をドラッグ＆ドロップします。 残りの「up.anim」と「down.anim」も同様に行います。
• 52. Unity：GhostsのMecanim設定(Parameter) 後で「Any State」と「right」等を矢印線で結ぶため 「Any State」 だけ左に移動させます。 次に方向用のパラメーターとして「DirX」と「DirY」を作成します。 Prametersの[+]をクリックして「Float」を選択して、「DirX」と「DirY」の2つを追加します。
• 53. Unity：GhostsのMecanim設定(Transition) 「Any State」ボタンを右クリックすると「Make Transition」が表示されます。 「Make Transition」を押すと矢印線が表示されるので、最初は「right」ボタンに付けてください。 矢印線を選択すると、Inspectorが表示されます。※Transition(トランジション：遷移)
• 54. Unity：GhostsのMecanim設定(Conditions) 矢印を選択すると、Inspectorが表示されます。方向ごとにConditionsを変更します。 right DirX Greater 0.1 left DirX Less -0.1 up DirY Greater 0.1 down DirX Less -0.1 ＞ 大なり Greater ＜ 小なり Less
• 55. Unity：GhostsのMecanim設定(Speed) right,left,up,downのステートを全て選択して、InspectorにてSpeedを「0.8」にする。
• 56. Unity：Ghostsの再設定(Position) Hierarchyにて、「blinky_0」を「blinky」に名称変更する。(右クリックでRenemaを選択) Inspectorにて、Positionを変更する。 表示レイヤーを１階層上げる。Inspectorの「Sprite Renderer」コンポーネントの「Order in Layer」を「1」にします。 X 15 , Y 17 に変更する。
• 57. Unity：Ghostsの再設定(Collider) Inspectorにて「Add Component」→「Physics 2D」→「Circle Collider 2D」を選択する。 Inspectorにて「Add Component」→「Physics 2D」→「Rididbosy 2D」を選択する。 設定値を下記のように変更する。 Circle Collider(サークルコリダー) Is Trigger オン Radius(半径) 0.8 に変更する。 Rigidbody(リジッドボディ) Gravity Scale(重力の影響度) 0 Fixed Angle(回転) オン に変更する。
• 58. Unity：C#スクリプト(GhostMove)の作成 ProjectエリアのCreateのメニューから「Folder」を選択し「Scripts」を作成します。 Scriptsフォルダを選択してCreateのメニューから「C# Script」を選択します。 Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「GhostMove」に します。 ※名前の変更が後回しになると、クラス名が「 NewBehaviourScript 」となってしまうので クラス名も「GhostMove」変更にする必要が出てきます。
• 59. Unity：C#スクリプト(GhostMove)の作成 ソースは、http://noobtuts.com/unity/2d-pacman-game からコピーする。 using UnityEngine; using System.Collections; public class GhostMove : MonoBehaviour { public Transform[] waypoints; int cur = 0; public float speed = 0.3f; void FixedUpdate () { } void FixedUpdate () { // Waypoint not reached yet? then move closer if (transform.position != waypoints[cur].position) { Vector2 p = Vector2.MoveTowards(transform.position, waypoints[cur].position, speed); rigidbody2D.MovePosition(p); } // Waypoint reached, select next one else cur = (cur + 1) % waypoints.Length; // Animation Vector2 dir = waypoints[cur].position - transform.position; GetComponent<Animator>().SetFloat("DirX", dir.x); GetComponent<Animator>().SetFloat("DirY", dir.y); } void OnTriggerEnter2D(Collider2D co) { if (co.name == "pacman") Destroy(co.gameObject); }
• 60. Unity：Ghostの操作  C#スクリプト(GhostMove)の追加 Hierarchyの「blinky」を選択して、Inspectorで「Add Component」ボタンを押下し、 Component一覧からScripts→ GhostMoveを選択する。 または「GhostMove」スクリプトをHierarchyの「blinky」にドラッグ＆ドロップする。 Playして左右の矢印キーでPac-Manが移動できることを確認する。
• 61. Unity：Waypointsの追加 HierarchyのCreateにて「Create Empty」を選択して、「Blinky_Waypoint0」にリネームする。 Inspectorにて、アイコンを選択して赤のダイヤに変更する。 Gizmosをクリックして、「3D Gizmos」のスライダーを右に移動し赤のダイヤのサイズを大きくする。 ※Gizmo とはモデルの位置や向きを示すアイコンの事です。
• 62. Unity：Waypointsの追加(5つ) 「Blinky_Waypoint0」を複製して、「Blinky_Waypoint1」 ～ 「Blinky_Waypoint4」を作成する。 Blinky_Waypoint0 (15, 20)、 Blinky_Waypoint1 (10, 20)、Blinky_Waypoint2 (10, 14) Blinky_Waypoint3 (19, 14)、 Blinky_Waypoint4 (19, 20)
• 63. Unity：GhostのWaypointsによる動き確認 InspectorのGhost Moveの「WayPoints」のSizeを「5」に変更する。 Element 0～4にBlinky_Waypoint 0～4を割り当てる。 GameタブにしてPlay開始、GhostがWayPointを巡回されることを確認 Playしてゲーム開始
• 64. Unity：残りのGhostの作成 binky と同じ方法で残りのGhost(黄色の「clyde」、水色の「inky」、ピンク色の「pinky」)を作成する。 binky_waypoint0～群は、上階層に「blinky_waypoints」を作成して下位層に移動させる。 Ghostのwaypointのアイコンの色はGhostと同じ色とする。
• 65. Unity：残りのGhostの作成 赤色の「blinky」と黄色の「clyde」のInspector
• 66. Unity：残りのGhostの作成 水色の「inky」とピンク色の「pinky」 のInspector
• 67. Unity：パックマンのゲーム開始 ゲームが動いてくれれば完成です。 スコアを表示したりなど拡張するといい。 Playしてゲーム開始
• 68. Unity：スコアの作成準備 HierarchyのCreateでUIのTextを選択する。 Canvasを「Score GUI」に変更して、Textを「Score」にして、EventSystemを削除する ※ EventSystemは、画面のボタンイベント等の操作用オブジェクト、今回スコアでは使用しない
• 69. Unity：スコアの作成準備 Inspectorにて「Score GUI」のRender Modeを「World Space」に変更する。 「Score GUI」をゲーム画面の範囲に合わせる。 今度は「Score」を右上に配置して、Textを「Score:0」にFont Sizeを「16」にColorを白色にする。
• 70. Unity：スコアのスクリプト作成 ProjectエリアのCreateのメニューから、「C# Script」を選択します。 Assetsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「Score」にします。 Score.csをコピーして、HiScore部分を削除するかコメントアウトします。 http://japan.unity3d.com/developer/document/tutorial/2d-shooting-game/game/12.html Hierarchyの「Score GUI」を選択して、Inspectorで「Add Component」ボタンを押下し、 Component一覧からScripts→ Scoreを選択する。 Score GUITextにて「Select Text」ダイアログ画面から「Score」を選択する。
• 71. Unity：ブロックスクリプトにスコアを追加 スクリプトの「pacdot.cs」を起動して、下記を追加します。ゲームプレイして点が増えること確認
• 72. Unity：デバッグ方法の確認 スクリプトの「pacdot.cs」のSwitch文にブレークポイントを追加します。 スタートボタンをしてAttach to ProcessでUnity Editore(Unity)を選択し「Attach」ボタンを押します。 ゲームをプレイして、パックマンがドットに当たったら、ブレークポイントに止まることを確認する。 ※Macでデバッグ出来ない方は、[Mono-Develop-Mac]->[Add-in Manager...]->Installedタブ->Unity- >Mono Soft Debugger Support for Unityが有効またはインストールされていることを確認してください。
• 73. Unity：よりゲームらしくするために  パックマンがゴーストにぶつかったらゲームスタートに戻す  マネージャークラスを作成する 下記サイトを参考にタイトルの作成とManager.csを改良する。 http://japan.unity3d.com/developer/document/tutorial/2d-shooting- game/game/10.html  音を追加する 下記サイトを参考に音を付けます。素材 ゲーム開発に使える音源配布サイトまとめ（効果音編) http://japan.unity3d.com/developer/document/tutorial/2d-shooting- game/game/08.html
• 74. Blender:はじめる前に(fpsの設定) 右側にあるパネルのカメラのアイコンになっていることを確認 「Demensions」の「FrameRate」の「24fps」ボタンを押下して「29.97」に変更する。
• 75. Blender:はじめる前に(日本語の設定)  インターフェイスを日本語にする Fileメニューの「User Preferences」で「User Preferences」画面の「System」タブを選択する。 右下の「International Fonts」のチェックを入れて、 「Language」の「Default(Default)」ボタンを押下 して「Japanese(日本語)」にする。 「Translate」の「Interface」と「Tooltips」の 両方のボタンを押下する。 左下の「Save User Settings(ユーザーの設定の保存)」 で設定保存。 一部のコンピュータでは 「User Preferences」が 表示されない場合がある。
• 76. Blender:はじめる前に(その他の設定)  選択を中心に回転およびPythonツールチップを表示 「User Preferences」画面の「インターフェイス」タブを選択する。 「選択を中心に回転」チェックボックスをオンにする。 「Pythonツールチップを表示」チェックボックスをオフにする。  Numパッドを再現 テンキーの無いキーボードを使っている場合 「User Preferences」画面の「入力」タブを選択する。 「 Numパッドを再現」チェックボックスをオンにする。  3Dビュー Dynamic Spacebar Menu 「User Preferences」画面の「アドオン」タブを選択する。 「3Dビュー」の「Dynamic Spacebar Menu」のチェックボックスをオンにする。 左下の「Save User Settings(ユーザーの設定の保存)」で設定保存。
• 77. Blender:はじめる前に(操作系)  選択が右クリックはやっぱきつい方へ Blenderネタとしては定番になってる「選択を右クリックから左クリックに変更」。 ファイル→ユーザー設定→ 入力 → 選択の左に変更 ※今回のセッション資料上は、選択は右クリックのままで行います。  Macユーザーの方へ セッション作成者がWindowsユーザーのため、Macの方は下記サイトを参考に操作してください。 [Blender]事始めのチュートリアル動画まとめ Blender のための Mac OS X(雪豹)のトラックパッドおよびキーボード設定 Blender基礎最速マスター MacBookProでBlenderを扱うときにNumkeyが無い問題
• 78. Blender:基本操作 カメラ、3Dモデル、光源は右クリックで選択、オレンジで色が変わるので 右ボタンを押しながら移動(一旦、移動すれば右ボタンを押さなくてもよい）、 左クリックで確定させる。 F12キーで、カメラや光源が反映された3Dビューの表示が変わる。ESCキーで元の表示に戻る。 カメラ ３Dモデル 光源 ３Dカーソル ３D空間の場所を示す ためのポインタ
• 79. Blender:基本操作  拡大・縮小 マウスのホイールで3Dモデルの拡大・縮小  視点の向きの変更 マウスのホイールを押しながらマウス移動  視点の移動 SHIFTキーとマウスのホイールを押しながらマウス移動  前後不覚になった場合 Homeキーを押す、または下側にある「ビュー」メニューから「全てを表示」を 選択すると3Dビューウィンドウに丁度すべてが収まるように視点が移動される。
• 80. Blender:箱に色をつける  箱の色を変更する 箱を右クリックで選択、プロパティエディタの右から 4番目の「マテリアル」ボタンをクリックします。 「ディフューズ」で指定の色にする。  履歴の参照とアンドゥで元に戻す 左側パネルの履歴にて 元に戻す(Ctrl + Z) やり直す(Shift Ctrl + Z)
• 81. Blender:ウィンドウ・フレームを分ける ウィンドウの右上側の角にある三角（右図の黄色の線で囲まれた部分）はスプリッタ・ウィジェット です。ウィンドウを分割したり、結合したりします。 スプリッタ・ウィジェットをドラッグしながら移動させる。 3分割するなどして、ビューにより視点を各フレームごとに切り替えておくといい。 元に戻したい場合、スプリッタ・ウィジェットをドラッグして結合先のウィンドウが少し暗くなった らドラッグを解除する。
• 82. Blender:キャラクターを作成(モデリング) ~無料でできる3Dアニメーション~ ブレンダーからはじめよう! http://www.amazon.co.jp/dp/4774151513/
• 83. Blender:モデル表示の拡大 マウスのホイールで3Dモデルの拡大させる
• 84. Blender:頭部を作る(首の作成) 編集モードの面選択にする。 上の面を選択します。「E」キー(押し出し)でマウス移動させて少し上に押し出します。
• 85. Blender:頭部を作る(首の作成と頭部の準備) 「S」キーを押して、首にあたる部分を作成します。 「E」キーを押して、首の長さ分ほんの少し上に押し出します。 更にもう一度、 「E」キーを押してほんの少し上に押し出します。
• 86. Blender:頭部を作る 「S」キーを押して、首にあたる部分を作成します。胴体よりほんの少し小さいくらいの 大きさまで拡大します。続いて、「E」キーを押して頭部を作成します。
• 87. Blender:胴体の形を整える(胴体の選択準備) 「A」キーを押して選択を解除します。(オレンジ色の選択がなくなるようにする) 「見えている部位のみ選択」ボタンをクリックしてオフにすると、3Dビューの裏側の線まで見える。
• 88. Blender:胴体の形を整える(胴体の選択) 胴体を構成する５つの面の中心にある点を、Ctrlキーを押しながら、右クリックでドラッグして 囲んでください。右図の赤枠のところがオレンジ色になっていることを確認してください。 やり直す場合は、「A」キーを押すことで選択を解除します。
• 89. Blender:胴体の形を整える(胴体の形状変更) 下図の赤枠のアイコンをクリックして、マニュピュレータを表示させる。 緑の四角いマニュピュレータをドラッグしてY軸方向に縮小し、体を薄く、 赤いマニュピュレータをドラッグしてX軸方向にも少し縮小して少し歩の長く胴体っぽい形状にする。
• 90. Blender:腕と足を作る(ループカット) メニューの「ループカットとスライド」を選択するか、またはショートカットキー「Ctrl + R」キー でループカットを使って押し出す面を作ります。先に「A」キーを押して選択を解除しておきます。 ピンク色の線が胴体に横に線が入った後に右クリックして、黄色の線になったらマウス移動させて、 腕を作る位置(半分より少し上側)で確定させます。
• 91. Blender:腕と足を作る(腕の作成) 面選択にして腕の部分を選択します。その後に「E」キーを押して、腕の長さになるまで伸ばします。 左腕は、後でミラー機能により自動生成させます。
• 92. Blender:腕と足を作る(足の作成準備) 視点の向きの変更(マウスのホイールを押しながらマウス移動)や視点の移動(SHIFTキーとマウスのホ イールを押しながらマウス移動)したりして、下側が見えるようにします。 胴体の底面を面選択します。その後に「E」キーを押して、ほんの少し押し出します。
• 93. Blender:腕と足を作る(足の作成) 赤の四角いマニュピュレータをドラッグしてX軸方向に縮小し、股の部分を作成します。 右足を作る部分の底面を面選択します。 その後に「E」キーを押して、足の長さになるまで伸ばします。
• 94. Blender:体を左右対称にする 視点を正面近くに変更しておく。メニューの「ループカットとスライド」を選択するか、 またはショートカットキー「Ctrl + R」キーでループカットを使って体の半分に切り込みを入れます。 ぴったり中心に切りたいの２回目のクリックはしないで、右クリックしてエッジの移動をキャンセル してください。
• 95. Blender:体を左右対称にする(フロント 平行投影) 「A」キーで選択を解除します。 ビューの「前」の後、ビューの「透視投影/平行投影」を選択して、画面表示を「フロント 平行投影」に します。テンキーがある人は、テンキー「1」→「5」で変更できます。 ここらへんで一旦ファイル保存しておくといいでしょう。
• 96. Blender:体を左右対称にする(左半身のカット) 面選択にします。「B」キーを押し、ドラッグで左半身の面を矩形選択します。 ※股間の面が選択しづらいので注意しましょう。 「X」キーを押して、メニューの「面」を選択します。
• 97. Blender:体を左右対称にする(ミラー機能) プロパティエディタのアイコンを「スパナ」に変更して、追加ボタンで「ミラー」を選択する。
• 98. Blender:ミラーリングで体が左右に分離する場合 体の中心がずれてしまっている可能性があります。この場合、頂点選択ボタンをクリックします。 位置を揃えるエッジの１つを「Alt(Macはoption)」キーを押しながら右クリックを選択すると 頂点がループ状に選択されます。
• 99. Blender:ミラーリングで体が左右に分離する場合 「N」キーでプロパティを開き、変形のXの値を確認します。値が「0」でなければ、選択頂点のいずれか が中央からずれています。まず、選択頂点の縦位置を揃えます。 「S」→「X」を押した後で、「0」を入力して、Enter (Macはretuen)キーを押してください。 これはX方向に0倍縮小することで、選択頂点のX位置を揃えたことになります。 最後にプロパティの変形のXの値をクリックし、「0」を入力すればエッジの頂点は全て「X=0」になる。
• 100. Blender:曲面化する プロパティエディタのアイコンを「スパナ」に変更して、追加ボタンで「細分割曲面」を選択する。 [Subsurf]モディファイアの[細分化]の[ビュー]の値を「2」に変更してください。
• 101. Blender:曲面化する(表面滑らか) 「A」キーを押して全ての面を選択します。シェーディング/UVタブの面「スムーズ」をクリックします。 表面が滑らかになります。
• 102. Blender:曲面化する(脇の調整) 曲面化によって、やわらかい形状になりましたが、形が崩れてしまったので修正しましょう。 まずは脇下のカーブが大きいので修正します。 メニューの「ループカットとスライド」を選択するか、またはショートカットキー「Ctrl + R」キーで ループカットします。ピンクの線が肘の位置にくるようマウスを移動し、一度クリックしま。 線が黄色になったら、脇の下の近くまでマウスを移動して、脇の形状を調整しクリックします。
• 103. Blender:曲面化する(脇の調整) 手首、足首、手先、足先の形状を整えます。ひじ、ひざ、首、頭周り、胴の５箇所についても長さを二分 するように、ショートカットキー「Ctrl + R」キーでループカットを繰り返してください。
• 104. Blender:今回はここまで次回の予定  １. つま先・顔を作ろう  ２. 人型モデルにアーマーチュアを入れよう  ３. 人型モデルにＩＫをつけよう
• 105. スマホアプリのアイディア 今年は、Shizudev名義でスマホアプリを作成します。 最初は、お金の負担が少ないアンドロイド向けに開発する。 好評なら、iPhoneアプリも開発する。 前回、発表した子供向けかつ教育向けのゲームアプリのまとめを行う。 6月に 2Dミニゲーム作成と発表」を企画しています。 これまで学んだ内容からオリジナルのミニゲームを時間内で作成し、発表してもらいます。 ここでプロトタイプ版のゲームが出来るようにして発表を予定しています。
• 106. ご清聴ありがとうございました！