UnityとBlenderハンズオン第3章

UnityとBlenderハンズオン
静岡Developers勉強会
第3章初めてのUnityとBlender

はじめに
静岡Developers勉強会では、過去に下記の勉強会を行いました。
2010年：「Programming in Haskell」
2011年：「JavaScript: The Good Parts」
2012年：「HTML5＆CSS3実践入門」、「GitHubハンズオン」、
「node.jsハンズオン」
2013年：「入門機械学習」
2014年：「実践コンピュータビジョン」
2015年は上記の勉強会で学んだことを実践し、Shizudev名義のスマホアプリ
を開発します。
作成後は公開用のサイトや動画も作成し、機械学習を使ってダウンロード状
況などを分析していきます。
スマホの広告費は会費にあて、万が一予定より多く収入が入った場合には寄
付を考えています。

自己紹介
 やじゅ＠静岡・・・漢字名は「八寿」
平口八寿人(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 （スライド）

概要
2015年の静岡Developers勉強会は「スマホアプリの開発」を題材とします。
スマホアプリを開発する上で、汎用的なツールの使い方を学びます。
・Unity
統合開発環境を内蔵し、複数のプラットホームに対応するユニティ・テクノロジーズが
開発したゲームエンジンである。ゲームとインタラクティブな3Dコンテンツ制作のため
の常識にとらわれない強力な機能を提供します。
・Blender
オープンソースの3DCG制作ツールです。
3Dモデルの作成、レンダリングのほかアニメーション、コンポジット機能も備える。

セッション内容
 Unityでパックマンもどきを作成 C#スクリプト
http://noobtuts.com/unity/2d-pacman-game
 Blenderで人の形を作成
「ブレンダーからはじめよう！」の本から
 スマホアプリのアイディア

UnityとBlenderハンズオン第3章

Unityでパックマンもどきを作成
 はじめに
＠noobtuts さんのチュートリアルを参考にUnityの使い方をマスターする
http://noobtuts.com/unity/2d-pacman-game
【学ぶポイント】Unityのアニメーションとルート巡回を理解する
今回使用するオブジェクト
Mecanim …アニメーションシステム
AnimatorController…アニメーションの制御オブジェクト
WayPoint …巡回ポジションによる移動制御オブジェクト

Unity：プロジェクト作成(2D)
 プロジェクトを作る
Unityエディタの「File」→「New Project」を選択する。
必ず「2D」を選択する。

Unity：カメラの設定と背景の作成
 Hierarchy(ヒエラルキー)
Unityのゲームシーンは、キャラから背景まで、すべてのゲームオブジェクト
(GameOnject)で構成されます。このゲームをオブジェクトを階層構造で編集
できるのがHierarchy(ヒエラルキー)です。
Main Cameraを選択して
右側のInspectorに内容が
表示されることを確認

 Inspector(インスペクタ)
その時点で選択されているゲームオブジェクトやアセットの詳細情報を表示・編
集するビューです。
Unity：カメラの設定と背景の作成
Position X 14.5 Y 16 Z -10
Background 黒色
Size 30 → 変更してもいい
に変更する

 Assets(アセット)
Assetは資産の意味。Unityで使用するオブジェクトやスクリプトを保存するフォルダ。
Assetsの右クリックでCreate→Folderで「Sprites」を作成する。
「Show in Exprore」を選択し、packman/Assets/Spritesフォルダに背景の「maze.png」を入れる。
資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session3
Unity：背景画像の保存

Unity：背景画像の設定
 背景画像の設定
Assetsの「maze」を選択、Inspectorで変更する。
Pixels Per Units 8
Pivot Bottom Left
に変更する。
Filter Modeを「Point」
に変更する。
画像をぼやけさせないで
ドットを強調させるため

Unity：背景の設定
Assetsの「maze」をドラッグして、Sceneにドロップを行う。
拡大されて表示されている場合、マウスホイールで縮小させる。
チュートリアルは
One Column Layout
であるが変更は不要

Unity：衝突設定
Hierarchyで「maze」を選択し、Inspectorにて「Add Component」→「Physics 2D」→「Box Collider 2D」
を選択する。

Unity：衝突設定②
 ５２個のブロックについて衝突サイズを変更する
迷路のブロックごとに衝突サイズを合わせる。
衝突サイズを変更可能
にする。
※移動は出来ない

Unity：衝突設定③
歯車アイコンを左クリックのメニューにて、コピー＆ペーストして５２個追加する。
※入力が大変なのでスクリプトで追加することにしました。

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
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

Unity：衝突設定(Box Collider 2D) 27～52
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
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

Unity：衝突設定のスクリプト
座標の入力が大変なので、スクリプトによってBox Colider2Dを追加する。方法については後程、説明する。
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);
}
}

Assetsの右クリックで「Show in Exprore」を選択し、packman/Assets/Spritesフォルダに
自キャラの「packman.png」を入れる。※資料は上階層に戻れば「Download ZIP」ボタンが表示される。
自キャラの「 packman.png 」のPixel Per Unitsを「100」→「8」に変更する。
Sprite Modeを「Single」→「Multiple」、Filter Modeを「Bilinear」→「Point」に変更する。
Unity：Pac-Man画像の保存と設定

Unity：Pac-Man画像のSlice(切り出し)設定
Sprite Modeを「Multiple」にすることで「Splite Editor」でメニューの「Slice」が有効になります。
Typeを「Grid」に変更し、Pixel SizeをX 16 Y 16にして「Slice」ボタンを押します。

Unity：Pac-Man画像のSlice(切り出し)設定
自キャラのpackmanが切り出されて12分割される。

Unity：Pac-Manのアニメーション設定
AssetsのSpriteの配下に「PackmanAnimation」フォルダを作成する。
packman_0とpackman_1とpackman_2を選択して、Sceneにドラッグ＆ドロップする。
animeファイルを保存ダイアログ画面が表示されるので、「right.anim」にして保存する。

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

pacman_3、 pacman_6、 pacman_9を選択して削除する。

Unity：Pac-ManのMecanim設定
Mecanimとは、Unity4で実装されたアニメーションシステムです。
Mecanimを使うと、ほとんどスクリプトを記述せずにアニメーションを設定することができます。
「pacman_0」をダブルクリックすると「Animator」タブに画面遷移します。
画面遷移しない場合、「Animator」タブをクリックします。

Unity：Pac-ManのMecanim設定(State)
各方向の「State」を追加します。Project Areaから「left.anim」をドラッグ＆ドロップします。
残りの「up.anim」と「down.anim」も同様に行います。

Unity：Pac-ManのMecanim設定(Parameter)
後で「Any State」と「right」等を矢印線で結ぶため「Any State」だけ左に移動させます。
次に方向用のパラメーターとして「DirX」と「DirY」を作成します。
Prametersの[+]をクリックして「Float」を選択して、「DirX」と「DirY」の2つを追加します。

Unity：Pac-ManのMecanim設定(Transition)
「Any State」ボタンを右クリックすると「Make Transition」が表示されます。
「Make Transition」を押すと矢印線が表示されるので、最初は「right」ボタンに付けてください。
矢印線を選択すると、Inspectorが表示されます。※Transition(トランジション：遷移)

Unity：Pac-ManのMecanim設定(Conditions)
矢印を選択すると、Inspectorが表示されます。方向ごとにConditionsを変更します。
right DirX Greater 0.1 left DirX Less -0.1
up DirY Greater 0.1 down DirY Less -0.1
＞大なり Greater
＜小なり Less

Unity：Pac-ManのMecanim設定(Speed)
right,left,up,downのステートを全て選択して、InspectorにてSpeedを「0.8」にする。
PlayしてGame画面を確認する。
PlayしてGame画面
を確認する

Unity：Pac-Manの再設定(Position)
Hierarchyにて、「pacman_0」を「pacman」に名称変更する。(右クリックでRenameを選択)
Inspectorにて、Positionを変更する。
X 14 , Y 14
に変更する。

Unity：Pac-Manの再設定(Collider)
Inspectorにて「Add Component」→「Physics 2D」→「Circle Collider 2D」を選択する。
Inspectorにて「Add Component」→「Physics 2D」→「Rigidbody 2D」を選択する。
設定値を下記のように変更する。
Circle Collider(サークルコライダー)
Radius(半径) 0.95
に変更する。
Rigidbody(リジッドボディ)
Gravity Scale(重力の影響度) 0
Fixed Angle(回転) オン
に変更する。

Unity：C#スクリプト(PacmanMove)の作成
ProjectエリアのCreateのメニューから「Folder」を選択し「Scripts」を作成します。
Scriptsフォルダを選択してCreateのメニューから「C# Script」を選択します。
Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「PacmanMove」
にします。
※名前の変更が後回しになると、クラス名が「 NewBehaviourScript 」となってしまうので
クラス名も「PacmanMove」変更にする必要が出てきます。

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秒）実行されます。

Unity：MonoBehaviorクラスとは
Unityエンジンからゲームの実行状況に応じてメッセージが送信されると、
実装クラス内にあるメッセージと同じ名前の関数を実行します。
MonoBehaviorクラス
Awake
Start
FixedUpdate
Update
LastUpdate
OnGui
OnColisionXXXX2D
OnTriggerXXXX2D
OnDisenable
継承先クラス
Start
FixedUpdate
OnGui
シーン開始時
に呼ばれる
Unity GUI描画時
に呼ばれるOnColisionEnter2D
コライダーヒット
時に呼ばれる
Update
描画時(物理シミュレータの
進行で使用)に呼ばれる
描画時(フレームの進行)に
呼ばれる

Unity： C#スクリプト(PacmanMove)の追加と操作
Hierarchyの「Pacman」を選択して、Inspectorで「Add Component」ボタンを押下し、
Component一覧からScripts→ PacmanMoveを選択する。
または「PacmanMove」スクリプトをHierarchyの「Pacman」にドラッグ＆ドロップする。
Playして上下左右の矢印キーでPac-Manが移動できることを確認する。
PlayしてGame画面を
確認する

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);
// 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);
}

Unity： Pac-Manの表示レイヤー変更
ドットを食べるために、Pac-Manの表示レイヤーを１階層上げる。
Inspectorの「Sprite Renderer」コンポーネントの「Order in Layer」を「1」にします。

Unity：シーンの登録
ここまでで一旦保存しておく。Fileメニューの「Save Scene」を選択
チュートリアルと同様に「scene_main」で保存する。

Unity：Pac-Dot画像の保存と設定
Assetsの右クリックで「Show in Exprore」を選択し、pacman/Assets/Spritesフォルダに
ドットの「pacdot.png」を入れる。
ドットの「 pacdot.png 」とのPixel Per Unitsを「100」→「8」に変更する。
Filter Modeを「Bilinear」→「Point」に変更して「Apply」ボタンを押す。

Assets/Spritesの「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
に変更する

Unity： Pac-Dotの位置のスクリプト
Pac-Dotの作成が330個もあり入力するのは大変なので、スクリプトで追加する。方法については後程、説明する。
void AddPacdot() {
GameObject obj;
ArrayList data = new ArrayList ();
data.Add ("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
pacdot.transform.position = new Vector3(2, 30, 0); //先頭は座標変更のみ
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;
}
}
}

Unity：C#スクリプト(Pacdot)の作成
Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「Pacdot」にし
ます。
using UnityEngine;
public class Pacdot : MonoBehaviour {
void OnTriggerEnter2D(Collider2D co) {
if (co.name == "pacman")
Destroy(gameObject);
}
}

Unity：C#スクリプト(PacDot)の追加
Hierarchyの「maze」配下の「pacdot」を選択して、Inspectorで「Add Component」ボタンを押下
し、Component一覧からScripts→ Pacdotを選択する。
または「Pacdot」スクリプトをHierarchyの「maze」配下の「pacdot」にドラッグ＆ドロップする。

Unity：C#スクリプト(Maze)の作成と追加
背景の各衝突設定(Box Collider2D)や各Pac-Dotの位置設定のスクリプト(Maze.cs)を下記から取得して
Assets/Scriptsに追加する。
Hierarchyの「maze」を選択して、Inspectorで「Add Component」ボタンを押下し、Component一覧か
らScripts→ Mazeを選択する。
または「Maze」スクリプトをHierarchyの「maze」にドラッグ＆ドロップする。
次にHierarchyの「maze」のInspectorのMaze(Script)の変数(Pacdot)に、Hierarchyの「Maze」配下の
「pacdot」をドラッグ＆ドロップしてセットする。

Unity：Pac-Manの移動制御とドットの確認
Playして上下左右の矢印キーでPac-Manの移動制御ができるようになっていることを確認する。
次にPac-dotが画面全体に表示されており、Pac-Manによって食べられることを確認する。
PlayしてGame画面を
確認する

Assetsの右クリックで「Show in Exprore」を選択し、packman/Assets/Spritesフォルダに
敵キャラの「blinky.png」、「clyde.png」、「inky.png」、「pinky.png」を入れる。
敵キャラの「blinky.png」等のPixel Per Unitsを「100」→「8」に変更する。
Sprite Modeを「Single」→「Multiple」、Filter Modeを「Bilinear」→「Point」に変更する。
Unity：Ghosts画像の保存と設定

Unity：Ghosts画像のSlice(切り出し)設定
Sprite Modeを「Multiple」にすることで「Splite Editor」でメニューの「Slice」が有効になります。
Typeを「Grid」に変更し、Pixel SizeをX 16 Y 16にして「Slice」ボタンを押します。
敵キャラ「blinky」、「clyde」、「inky」、「pinky」を同様に行う。

Unity：Ghosts画像のSlice(切り出し)設定
敵キャラが切り出されて8分割される。
敵キャラ「blinky」、「clyde」、「inky」、「pinky」を同様に行う。

Unity：Ghostsのアニメーション設定
AssetsのSpriteの配下に「BlinkyAnimation」フォルダを作成する。
blinky_0とblinky_1を選択して、Sceneにドラッグ＆ドロップする。
animeファイルを保存ダイアログ画面が表示されるので、「right.anim」にして保存する。

right.animと同じ操作で、他の向きも作成する。Hierarchyのblinky_0以外を削除する。
Left.amim blinky_2, blinky_3
up.amim blinky_4, blinky_5
down.amim blinky_6, blinky_7

blinky_2、 blinky_4、 blinky_6を選択して削除する。

Unity：GhostsのMecanim設定
「blinky_0」をダブルクリックすると「Animator」タブに画面遷移します。
画面遷移しない場合、「Animator」タブをクリックします。

Unity：GhostsのMecanim設定(State)
各方向の「State」を追加します。Project Areaから「left.anim」をドラッグ＆ドロップします。
残りの「up.anim」と「down.anim」も同様に行います。

Unity：GhostsのMecanim設定(Parameter)
後で「Any State」と「right」等を矢印線で結ぶため「Any State」だけ左に移動させます。
次に方向用のパラメーターとして「DirX」と「DirY」を作成します。
Prametersの[+]をクリックして「Float」を選択して、「DirX」と「DirY」の2つを追加します。

Unity：GhostsのMecanim設定(Transition)
「Any State」ボタンを右クリックすると「Make Transition」が表示されます。
「Make Transition」を押すと矢印線が表示されるので、最初は「right」ボタンに付けてください。
矢印線を選択すると、Inspectorが表示されます。※Transition(トランジション：遷移)

Unity：GhostsのMecanim設定(Conditions)
矢印を選択すると、Inspectorが表示されます。方向ごとにConditionsを変更します。
right DirX Greater 0.1 left DirX Less -0.1
up DirY Greater 0.1 down DirY Less -0.1
＞大なり Greater
＜小なり Less

Unity：GhostsのMecanim設定(Speed)
right,left,up,downのステートを全て選択して、InspectorにてSpeedを「0.8」にする。

Unity：Ghostsの再設定(Position)
Hierarchyにて、「blinky_0」を「blinky」に名称変更する。(右クリックでRenameを選択)
Inspectorにて、Positionを変更する。
表示レイヤーを１階層上げる。Inspectorの「Sprite Renderer」コンポーネントの「Order in
Layer」を「1」にします。
X 15 , Y 17
に変更する。

Unity：Ghostsの再設定(Collider)
Inspectorにて「Add Component」→「Physics 2D」→「Circle Collider 2D」を選択する。
Inspectorにて「Add Component」→「Physics 2D」→「Rigidbody 2D」を選択する。
設定値を下記のように変更する。
Circle Collider(サークルコライダー)
Is Trigger オン
Radius(半径) 0.8
に変更する。
Rigidbody(リジッドボディ)
Gravity Scale(重力の影響度) 0
Fixed Angle(回転) オン
に変更する。

Unity：C#スクリプト(GhostMove)の作成
Assets/Scriptsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「GhostMove」に
します。
※名前の変更が後回しになると、クラス名が「 NewBehaviourScript 」となってしまうので
クラス名も「GhostMove」変更にする必要が出てきます。

Unity：C#スクリプト(GhostMove)の作成
using UnityEngine;
public class GhostMove : MonoBehaviour {
public Transform[] waypoints;
int cur = 0;
public float speed = 0.3f;
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);
}
// 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);
}
if (co.name == "pacman")
Destroy(co.gameObject);
}

Unity：C#スクリプト(Ghost)の追加
Hierarchyの「blinky」を選択して、Inspectorで「Add Component」ボタンを押下し、
Component一覧からScripts→ GhostMoveを選択する。
または「GhostMove」スクリプトをHierarchyの「blinky」にドラッグ＆ドロップする。

Unity：Waypointsの追加
HierarchyのCreateにて「Create Empty」を選択して、「Blinky_Waypoint0」にリネームする。
Inspectorにて、アイコンを選択して赤のダイヤに変更する。
Gizmosをクリックして、「3D Gizmos」のスライダーを右に移動し赤のダイヤのサイズを大きくする。
※Gizmo とはモデルの位置や向きを示すアイコンの事です。

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)

Unity：GhostのWaypointsによる動き確認
InspectorのGhost Moveの「WayPoints」のSizeを「5」に変更する。
Element 0～4にBlinky_Waypoint 0～4を割り当てる。
GameタブにしてPlay開始、GhostがWayPointを巡回されることを確認
Playしてゲーム開始

Unity：残りのGhostの作成
binky と同じ方法で残りのGhost(黄色の「clyde」、水色の「inky」、ピンク色の「pinky」)を作成する。
binky_waypoint0～群は、上階層に「blinky_waypoints」を作成して下位層に移動させる。
Ghostのwaypointのアイコンの色はGhostと同じ色とする。

赤色の「blinky」(X:15,Y:17、Speed:0.25)のInspector
黄色の「clyde」 (X:14,Y:17、Speed:0.2)のInspector

水色の「inky」 (X:13,Y:17、Speed:0.2)のInspector
ピンク色の「pinky」 (X:16,Y:17、Speed:0.18) のInspector

Unity：GhostのWaypoints作成準備
「Blinky_Waypoint0」のみ残して、「Blinky_Waypoint1」～「Blinky_Waypoint4」を削除する。
階層構造にしたいため、親階層を作成する。
HierarchyのCreateにて「Create Empty」を選択して、「blinky_Waypoints」にリネームする。
Inspectorにて、Positionは(0,0,0)にする。
「Blinky_Waypoint0」を選択して、「blinky_Waypoints」の配下に「Blinky_Waypoint0」を移動させる。

Unity：GhostのWaypoints作成準備(複製)
Hierarchyにて、「blinky_Waypoints」を選択して、右クリックのDuplicate(複製)する。
親子とも「blinky」名を残りのGhost(黄色の「clyde」、水色の「inky」、ピンク色の「pinky」)に変更する。
Clyde_Waypoint0は(X:14,Y:20)、Inky_Waypoint0は(X:16,Y:20) 、Pinky _Waypoint0は(X:13,Y:20)にする。
各Ghostに近い色に
アイコンを変更する。

Unity：C#スクリプト(GhostMove)の修正と設定
GhostのWayPointsの位置データを追加したスクリプト(GhostMove.cs)を下記から取得して上書きする。
Hierarchyの「blinky」のInspectorのGhost Move（Script)の変数(Ghost Waypoints)にHierarchyの
親階層の「blinky_waypoints」をドラッグ＆ドロップしてセットする。
各Ghost (黄色の「clyde」、水色の「inky」、ピンク色の「pinky」)も同様に変更する。

Unity：パックマンのゲーム開始
ゲームが動いてくれれば完成です。スコアを表示したりなど拡張するといい。
Ghostたちの速度が速いので変更する場合、UnityはスクリプトのPublic変数の値よりInspectorの値が
優先されるため、Speedを変更したい場合は、Inspectorの値を変える。
Playしてゲーム開始

Unity：スコアの作成準備
HierarchyのCreateでUIのTextを選択する。
Canvasを「Score GUI」に変更して、Textを「Score」にして、EventSystemを削除する
※ EventSystemは、画面のボタンイベント等の操作用オブジェクト、今回スコアでは使用しない

Unity：スコアの作成準備
Inspectorにて「Score GUI」のRender Modeを「World Space」に変更する。
「Score GUI」をゲーム画面の範囲に合わせる。Scaleを「0.0688」あたりにする。
今度は「Score」を右上に配置して、Textを「Score:0」のFont Sizeを「16」に右寄せでColorを白色にする。

Unity：C#スクリプト(Score)の作成
スクリプト(Score.cs)を下記から取得してAssets/Scriptsに追加する。
HiScoreを追加したい場合、下記サイトの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」を選択する。

Unity：C#スクリプト(Pacdot)にスコアを追加
スクリプトの「Pacdot.cs」を起動して、下記の赤文字を追加します。
ゲームプレイして点が増えること確認します。
using UnityEngine;
public class Pacdot : MonoBehaviour {
if (co.name == "pacman"){
// スコアコンポーネントを取得してポイントを追加
FindObjectOfType<Score>().AddPoint(10);
Destroy(gameObject);
}
}
}

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が有効またはインストールされていることを確認してください。

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

Blender:はじめる前に(fpsの設定)
右側にあるパネルのカメラのアイコンになっていることを確認
「Demensions」の「FrameRate」の「24fps」ボタンを押下して「29.97」に変更する。

Blender:はじめる前に(日本語の設定)
 インターフェイスを日本語にする
Fileメニューの「User Preferences」で「User Preferences」画面の「System」タブを選択する。
右下の「International Fonts」のチェックを入れて、
「Language」の「Default(Default)」ボタンを押下
して「Japanese(日本語)」にする。
「Translate」の「Interface」と「Tooltips」の
両方のボタンを押下する。
左下の「Save User Settings(ユーザーの設定の保存)」
で設定保存。
一部のコンピュータでは
「User Preferences」が
表示されない場合がある。

Blender:はじめる前に(その他の設定)
 選択を中心に回転およびPythonツールチップを表示
「User Preferences」画面の「インターフェイス」タブを選択する。
「選択を中心に回転」チェックボックスをオンにする。
「Pythonツールチップを表示」チェックボックスをオフにする。
 Numパッドを再現
テンキーの無いキーボードを使っている場合
「User Preferences」画面の「入力」タブを選択する。
「 Numパッドを再現」チェックボックスをオンにする。
 3Dビュー Dynamic Spacebar Menu
「User Preferences」画面の「アドオン」タブを選択する。
「3Dビュー」の「Dynamic Spacebar Menu」のチェックボックスをオンにする。
左下の「Save User Settings(ユーザーの設定の保存)」で設定保存。

Blender:はじめる前に(操作系)
 選択が右クリックはやっぱきつい方へ
Blenderネタとしては定番になってる「選択を右クリックから左クリックに変更」。
ファイル→ユーザー設定→ 入力 → 選択の左に変更
※今回のセッション資料上は、選択は右クリックのままで行います。
 Macユーザーの方へ
セッション作成者がWindowsユーザーのため、Macの方は下記サイトを参考に操作してください。
[Blender]事始めのチュートリアル動画まとめ
Blender のための Mac OS X(雪豹)のトラックパッドおよびキーボード設定
Blender基礎最速マスター
MacBookProでBlenderを扱うときにNumkeyが無い問題

Blender:基本操作
カメラ、3Dモデル、光源は右クリックで選択、オレンジで色が変わるので
右ボタンを押しながら移動(一旦、移動すれば右ボタンを押さなくてもよい）、
左クリックで確定させる。
F12キーで、カメラや光源が反映された3Dビューの表示が変わる。ESCキーで元の表示に戻る。
カメラ
３Dモデル
光源
３Dカーソル
３D空間の場所を示す
ためのポインタ

Blender:基本操作
 拡大・縮小
マウスのホイールで3Dモデルの拡大・縮小
 視点の向きの変更
マウスのホイールを押しながらマウス移動
 視点の移動
SHIFTキーとマウスのホイールを押しながらマウス移動
 前後不覚になった場合
Homeキーを押す、または下側にある「ビュー」メニューから「全てを表示」を
選択すると3Dビューウィンドウに丁度すべてが収まるように視点が移動される。

Blender:箱に色をつける
 箱の色を変更する
箱を右クリックで選択、プロパティエディタの右から
4番目の「マテリアル」ボタンをクリックします。
「ディフューズ」で指定の色にする。
 履歴の参照とアンドゥで元に戻す
左側パネルの履歴にて
元に戻す(Ctrl + Z)
やり直す(Shift Ctrl + Z)

Blender:ウィンドウ・フレームを分ける
ウィンドウの右上側の角にある三角（右図の黄色の線で囲まれた部分）はスプリッタ・ウィジェット
です。ウィンドウを分割したり、結合したりします。
スプリッタ・ウィジェットをドラッグしながら移動させる。
3分割するなどして、ビューにより視点を各フレームごとに切り替えておくといい。
元に戻したい場合、スプリッタ・ウィジェットをドラッグして結合先のウィンドウが少し暗くなった
らドラッグを解除する。

Blender:キャラクターを作成(モデリング)
~無料でできる3Dアニメーション~ ブレンダーからはじめよう!
http://www.amazon.co.jp/dp/4774151513/

Blender:モデル表示の拡大
マウスのホイールで3Dモデルの拡大させる

Blender:頭部を作る(首の作成)
編集モードの面選択にする。
上の面を選択します。「E」キー(押し出し)でマウス移動させて少し上に押し出します。

Blender:頭部を作る(首の作成と頭部の準備)
「S」キーを押して、首にあたる部分を作成します。
「E」キーを押して、首の長さ分ほんの少し上に押し出します。
更にもう一度、「E」キーを押してほんの少し上に押し出します。

Blender:頭部を作る
「S」キーを押して、首にあたる部分を作成します。胴体よりほんの少し小さいくらいの
大きさまで拡大します。続いて、「E」キーを押して頭部を作成します。

Blender:胴体の形を整える(胴体の選択準備)
「A」キーを押して選択を解除します。(オレンジ色の選択がなくなるようにする)
「見えている部位のみ選択」ボタンをクリックしてオフにすると、3Dビューの裏側の線まで見える。

Blender:胴体の形を整える(胴体の選択)
胴体を構成する５つの面の中心にある点を、Ctrlキーを押しながら、左クリックでドラッグして
囲んでください。右図の赤枠のところがオレンジ色になっていることを確認してください。
やり直す場合は、「A」キーを押すことで選択を解除します。

Blender:胴体の形を整える(胴体の形状変更)
下図の赤枠のアイコンをクリックして、マニュピュレータを表示させる。
緑の四角いマニュピュレータをドラッグしてY軸方向に縮小し、体を薄く、
赤いマニュピュレータをドラッグしてX軸方向にも少し縮小して少し歩の長く胴体っぽい形状にする。

Blender:腕と足を作る(ループカット)
メニューの「ループカットとスライド」を選択するか、またはショートカットキー「Ctrl + R」キー
でループカットを使って押し出す面を作ります。先に「A」キーを押して選択を解除しておきます。
ピンク色の線が胴体に横に線が入った後に左クリックして、黄色の線になったらマウス移動させて、
腕を作る位置(半分より少し上側)で確定させます。

Blender:腕と足を作る(腕の作成)
面選択にして腕の部分を選択します。その後に「E」キーを押して、腕の長さになるまで伸ばします。
左腕は、後でミラー機能により自動生成させます。

Blender:腕と足を作る(足の作成準備)
視点の向きの変更(マウスのホイールを押しながらマウス移動)や視点の移動(SHIFTキーとマウスのホ
イールを押しながらマウス移動)したりして、下側が見えるようにします。
胴体の底面を面選択します。その後に「E」キーを押して、ほんの少し押し出します。

Blender:腕と足を作る(足の作成)
赤の四角いマニュピュレータをドラッグしてX軸方向に縮小し、股の部分を作成します。
右足を作る部分の底面を面選択します。
その後に「E」キーを押して、足の長さになるまで伸ばします。

Blender:体を左右対称にする
視点を正面近くに変更しておく。メニューの「ループカットとスライド」を選択するか、
またはショートカットキー「Ctrl + R」キーでループカットを使って体の半分に切り込みを入れます。
ぴったり中心に切りたいの２回目のクリックはしないで、右クリックしてエッジの移動をキャンセル
してください。

Blender:体を左右対称にする(フロント平行投影)
「A」キーで選択を解除します。
ビューの「前」の後、ビューの「透視投影/平行投影」を選択して、画面表示を「フロント平行投影」に
します。テンキーがある人は、テンキー「1」→「5」で変更できます。
ここらへんで一旦ファイル保存しておくといいでしょう。

Blender:体を左右対称にする(左半身のカット)
面選択にします。「B」キーを押し、ドラッグで左半身の面を矩形選択します。
※股間の面が選択しづらいので注意しましょう。
「X」キーを押して、メニューの「面」を選択します。

Blender:体を左右対称にする(ミラー機能)
プロパティエディタのアイコンを「スパナ」に変更して、追加ボタンで「ミラー」を選択する。

Blender:ミラーリングで体が左右に分離する場合
体の中心がずれてしまっている可能性があります。この場合、頂点選択ボタンをクリックします。
位置を揃えるエッジの１つを「Alt(Macはoption)」キーを押しながら右クリックを選択すると
頂点がループ状に選択されます。

Blender:ミラーリングで体が左右に分離する場合
「N」キーでプロパティを開き、変形のXの値を確認します。値が「0」でなければ、選択頂点のいずれか
が中央からずれています。まず、選択頂点の縦位置を揃えます。
「S」→「X」を押した後で、「0」を入力して、Enter (Macはretuen)キーを押してください。
これはX方向に0倍縮小することで、選択頂点のX位置を揃えたことになります。
最後にプロパティの変形のXの値をクリックし、「0」を入力すればエッジの頂点は全て「X=0」になる。

Blender:曲面化する
プロパティエディタのアイコンを「スパナ」に変更して、追加ボタンで「細分割曲面」を選択する。
[Subsurf]モディファイアの[細分化]の[ビュー]の値を「2」に変更してください。

Blender:曲面化する(表面滑らか)
「A」キーを押して全ての面を選択します。シェーディング/UVタブの面「スムーズ」をクリックします。
表面が滑らかになります。

Blender:曲面化する(脇の調整)
曲面化によって、やわらかい形状になりましたが、形が崩れてしまったので修正しましょう。
まずは脇下のカーブが大きいので修正します。
メニューの「ループカットとスライド」を選択するか、またはショートカットキー「Ctrl + R」キーで
ループカットします。ピンクの線が肘の位置にくるようマウスを移動し、一度クリックしま。
線が黄色になったら、脇の下の近くまでマウスを移動して、脇の形状を調整しクリックします。

Blender:曲面化する(脇の調整)
手首、足首、手先、足先の形状を整えます。ひじ、ひざ、首、頭周り、胴の５箇所についても長さを二分
するように、ショートカットキー「Ctrl + R」キーでループカットを繰り返してください。

Blender:今回はここまで次回の予定
 １. つま先・顔を作ろう
 ２. 人型モデルにアーマーチュアを入れよう
 ３. 人型モデルにＩＫ(インバースキネマティクス)をつけよう

スマホアプリのアイディア
今年は、Shizudev名義でスマホアプリを作成します。
最初は、お金の負担が少ないアンドロイド向けに開発する。
好評なら、iPhoneアプリも開発する。
前回、発表した子供向けかつ教育向けのゲームアプリのまとめを行う。
6月に「2Dミニゲーム作成と発表」を企画しています。
これまで学んだ内容からオリジナルのミニゲームを時間内で作成し、発表してもらいます。
ここでプロトタイプ版のゲームが出来るようにして発表を予定しています。

ご清聴ありがとうございました！

UnityとBlenderハンズオン第3章

More Related Content

UnityとBlenderハンズオン第3章

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!