静岡Developers勉強会のUnityとBlenderハンズオン第5章の資料となります。

1. UnityとBlenderハンズオン
静岡Developers勉強会
第5章 初めての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://japan.unity3d.com/developer/document/tutorial/2d-shooting-game/
前回の続き、10章から開始します。
2Dの間は資料上Unity4.6を使用するが、3Dをやる9月以降はUnity5に変更する予定です。
今回の資料はUnity5でも問題ないはず。
 Blenderで人物キャラクターのアニメーションの作成
「ブレンダーからはじめよう！」の本から
 次回の「2Dミニゲーム作成と発表」の情報提供
次回はこれまで学んだ内容からオリジナルのミニゲームを時間内で作成します。
参考となる情報を紹介
 スマホアプリのアイディア

7. Unityでシューティングゲームを作成
 はじめに
Unityの公式チュートリアルを参考にUnityの使い方をマスターする。今回は１０章から再開。
注意：Google Chromeで WebPlayer が起動できない件について
【学ぶポイント】Unityのゲームらしさを理解する
今回使用するオブジェクト
Polygon Collider 2D …ポリゴンによる衝突判定
Layer Collision Matrix …レイヤー同士の当たり判定
Sound …BGM、効果音
HiScore…ハイスコアの記録
Manager …ゲームマネージャー
PlayerPrefs …スコアの保存用
などなど

8. Unityでシューティングゲームを作成
 １０章から再開
UnityとBlenderハンズオン 第4章 93ページ 「Unity：第10回 タイトルを付ける」から再開
http://www.slideshare.net/yaju88/unityblender4

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

11. Blender:基本操作
 拡大・縮小
マウスのホイールで3Dモデルの拡大・縮小
 視点の向きの変更
マウスのホイールを押しながらマウス移動
 視点の移動
SHIFTキーとマウスのホイールを押しながらマウス移動
 前後不覚になった場合
Homeキーを押す、または下側にある「ビュー」メニューから「全てを表示」を
選択すると3Dビューウィンドウに丁度すべてが収まるように視点が移動される。
 履歴の参照とアンドゥで元に戻す
左側パネルの履歴にて
元に戻す(Ctrl + Z)
やり直す(Shift Ctrl + Z)

12. Blender:アジェンダ
 １. つま先・顔を作ろう
 ２. 人型モデルにアーマーチュアを入れよう
 ３. ＩＫ(インバースキネマティクス)を使う

13. Blender:つま先・顔を作ろう
 つま先を作ろう
編集モードの面選択にする。
「B」キー(箱選択)を押して、足の先から付け根までを領域選択する。

14. Blender:つま先・顔を作ろう
 つま先を作ろう
「R」キーを押して、マウス移動で左クリック、足が地面と水平になるように調整する。
がに股にした後に、「G」キーを押して足の位置を修正する。

15. Blender:つま先・顔を作ろう
 つま先を作ろう
モデルの表示を斜めにして、つま先を作る面を右クリックで選択します。
「E」キーで押し出し、つま先を作ります。
ツール・シェルフ パネルの「ループカットとスライド」(または「Ctrl + R」キー)を選択して
使い形を整えます。

16. Blender:つま先・顔を作ろう
 目を追加する
ツール・シェルフ パネルの作成タブのメッシュ追加で立方体を選択します。
「G」キーで顔近くに移動させます。

17. Blender:つま先・顔を作ろう
 目を追加する
ツール・シェルフ パネルのシェーディング/UVタブで面のスムーズボタンをクリックします。
すると、より丸くなります。

18. Blender:つま先・顔を作ろう
 目を追加する
目を縮小させて、顔の目の位置に移動させてください。(顔表面より少し前に出っ張らせる)
箱の周囲にある赤、緑、青の矢印を「マニピュレータ」といいます。
下図の最右アイコンが拡大縮小、左か2番目の矢印アイコンが移動です、矢印をドラッグして操作します。
今まで通りに、「S」キーで拡大縮小、「G」キーで移動を使ってもいいです。
視点の向き変更
マウスのホイール
を押しながら
マウス移動

19. Blender:つま先・顔を作ろう
 鼻を追加する
目と同様に立方体を追加して、縮小と移動で顔の鼻の位置にもってきます。
1.ツール・シェルフ パネルの作成タブのメッシュ追加で立方体を選択、
2.シェーディング/UVタブで面のスムーズボタンでより丸くする。
3.マニピュレータで縮小と移動させる。(「S」キーで拡大縮小、「G」キーで移動でもよい)

20. Blender:つま先・顔を作ろう
 鼻を追加する
今のままだとミラーリングにより２つが重なった状態になっています。
胴体と同じ様に鼻も左半分のメッシュを削除して、右半分だけにします。
ミラーモディファイアの目のアイコンを押すと、右半分の表示になります。

21. Blender:つま先・顔を作ろう
 鼻を追加する
操作しやすいように顔を拡大しておきます。
マウスのホイールで3Dモデルの拡大・縮小、SHIFTキーとマウスのホイールを押しながらマウス移動。
ツール・シェルフパネルの「ループカットとスライド」(または「Ctrl + R」キー)を選択して二分します。
ループカットは、1回目は左クリック、2回目は右クリックにすると中央に線ができます。

22. Blender:つま先・顔を作ろう
 鼻を追加する
「A」キーで非選択の状態にした後、「B」キーで押してドラッグして鼻の左側の側面を選択させます。
「X」キーを押してメニューから「頂点」を選択して鼻の左半分を削除します。

23. Blender:つま先・顔を作ろう
 鼻を追加する
ミラーモディファイアの目のアイコンを押して再度ミラー表示させます。
鼻を二分したラインをAlt(Macはoption)キーを押しながら右クリックで選択すると
ループ状に４つのエッジが選択されます。
微妙に位置がずれているため、「N」キーでプロパティを表示して、中点のXの値を「0」にしてください。

24. Blender:つま先・顔を作ろう
 形を整える
腕や足の太さ、ウエストを細くする、肩を上げる、ひざを曲げる、などの調整を加えます。
形状を調整していると、手足や顔部などメッシュ数が少なすぎることに気が付くと思います、
細部を作りこむにはループカットとスライドでメッシュを増やしてください。
資料場所：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session5/
時間の都合上、
ここまではやらない。
GitHubに置いておきました。
human05.blend

25. Blender:人型モデルにアーマーチェアを入れよう
 モデルを修正
アーマチェアを入れた時に綺麗に曲がるように、モデルを修正します。
間接部分に１本、その前後に１本ずつの計３本のエッジを作ります。
ループカットとスライド(Ctrl + R)を使って、手首、肘、肩、足の付け根、ひざ、足首に入れます。
ループカットは、ホイールでループ数を増やし、左クリック後にマウス移動し右クリックで確定。
ループカットをやり直す場合は、元に戻す(Ctrl + Z)を押す。

26. Blender:人型モデルにアーマーチェアを入れよう
 地面の上に移動
通常、Z座標が「0」の場所を地面にします。キャラクターを地面の上に移動させます。
Numキーの「5」と「1」を押してフロント・透視投影ビューにして、「A」キーを押して
人型モデルを全選択します。
マニピュレータの青矢印をドラッグして、足の裏が赤いラインと同じくらいまで移動させる。

27. Blender:人型モデルにアーマーチェアを入れよう
 ルートボーンの作成
アーマチェアを作成します。オブジェクトモードに変更してください。
まず腰のあたりにボーンを作成し、このボーンから上半身、下半身にボーンを枝分かれさせていきます。
ヘッダの追加→アーマーチェア→一つのボーンでアーマーチェアを作成します。
「Alt + G」キー(Macはoption + G)を押すと、アーマーチェアが原点(両足の真ん中)に移動します。

28. Blender:人型モデルにアーマーチェアを入れよう
 ルートボーンの作成
プロパティエディタを「オブジェクトデータ」ボタンをクリックしてプロパティに切り替え
表示タブの「レントゲン」と「名前」にチェックを入れてください。
Numキーの「3」で「ライト：平行投影」にします。また「編集モード」に変更します。

29. Blender:人型モデルにアーマーチェアを入れよう
 ルートボーンの作成
ボーンを右クリックして「R」キーを押し、ボーンの先が前へ向くように「Ctrl」キー(MacはControl)を
押しながら90度回転させます。
ボーンの先が腹と尻の間、背骨が通るラインに来るように、マニュピュレータの青矢印でボーンを移動
してください。

30. Blender:人型モデルにアーマーチェアを入れよう
 体の中心にボーンを作成する
ルートボーンの先端の小さい球を右クリックして選択し、「E」キーで上に押し出して体の中心を
通るボーンを作っていきます。
まず腹と胸の間まで押し出し、次に首の手前まで、次に首と頭部の間まで、最後の頭の上まで、
計4回、背骨を意識して押し出してください。

31. Blender:人型モデルにアーマーチェアを入れよう
 体の中心にボーンを作成する
再び、ルートボーンの先端を右クリックして選択し、「E」キーで真下に向かって、足の付け根の高さまで
押し出して、腰のボーンを作成してください。
押し出し中にホイールボタンをクリックすると移動の軸が制限されて、真下に押し出すことが出来ます。

32. Blender:人型モデルにアーマーチェアを入れよう
 腕のボーンを作成する
Numキーの「1」を押して、「フロント：平行投影」にビューを変更します。
右側の腕を押し出して作成します。首の付け根のジョイントから押し出して、肩のボーンを作成します。
首の付け根のジョイントを右クリックで選択し、「E」キーで押し出します。
普通に押し出すとボーンが少しねじれてしまうので、押し出し中にホイールボタンをクリックし
真横に押し出してください。左クリックで確定後します。
次に「G」キーを押して、腕の付け根に移動させます。

33. Blender:人型モデルにアーマーチェアを入れよう
 腕のボーンを作成する
上腕、前腕、手のひらのボーンを押し出して作ります。
ジョイントを右クリックで選択し、「E」キーで押し出します。上腕、前腕、手のひらの３回繰り返す。
先ほど同様に押し出し中にホイールボタンをクリックして、移動を制限してください。

34. Blender:人型モデルにアーマーチェアを入れよう
 下半身のボーンを作成する
腰の骨から左足の付け根まで、押し出してボーンを作成してください。
Bone.005の大きすぎている場合、先にBone.005を全体を選択して「S」キーで小さくしておきます。
Bone.005の先端のみを選択して、「E」キーで左足の付け根まで押し出します。

35. Blender:人型モデルにアーマーチェアを入れよう
 下半身のボーンを作成する
Numキーの「3」で「ライト：平行投影」にします。
ボーンの先を選択している状態から、もも、すね、足のボーンを押し出して作ります。
ジョイントを右クリックで選択し、「E」キーで押し出します。もも、すね、足の３回繰り返す。
押し出し時に、ひざはほんの少しでいいので、必ず曲げてください。

36. Blender:人型モデルにアーマーチェアを入れよう
 下半身のボーンを作成する
Numキーの「1」で「フロント：平行投影」にします。
腰から足につながるボーン(Bone.010)を右クリックで選択し、「X」キーを押してサブメニューで
「削除」を選択します。削除しても、腰と足は点線でつながっていて、親子関係は残っています。

37. Blender:人型モデルにアーマーチェアを入れよう
 各ボーンに名前を付ける
半身完成したら、各ボーンの名前を付けていきます。
プロパティエディタのボーンボタンをクリックしてプロパティを表示し、各ボーンを選択して
名前を書き換えます。
元の名前 先の名前
Bone BodyRoot
Bone.001 Spine1
Bone.002 Spine2
Bone.003 Neck
Bone.004 Head
Bone.005 Pelvis
Bone.006 Clavicle
元の名前 先の名前
Bone.007 UpArm
Bone.008 LowArm
Bone.009 Hand
Bone.011 UpLeg
Bone.012 LowLeg
Bone.013 Foot

38. Blender:人型モデルにアーマーチェアを入れよう
 各ボーンに名前を付ける
名前を付け終わったら、右側の7つのボーンを範囲選択(Ctrl(Macはcontrol)＋ドラッグで囲む)などで
選択します。取りこぼした場合、Shiftキーを押しながら右クリックで選択していく。
ヘッダのアーマーチェア→オートネーム左右を選択（または「W」キー)します。
各ボーン名の後ろに「.L」が付きます。

39. Blender:人型モデルにアーマーチェアを入れよう
 左側のボーンの作成
右側のボーンを複製して、左側のボーンを作成します。
アーマーチェア→複製を選択し、すぐに右クリックで複製を終了してください。
移動操作をキャンセルしたので、わかりずらいですが同じ場所に重なって複製されています。
「N」キーでプロパティを表示し、「3Dカーソル」の位置のXの値を「0」にします。
ヘッダのピボットポイントを「3Dカーソル」に変更します。

40. Blender:人型モデルにアーマーチェアを入れよう
 左側のボーンの作成
メニューのアーマーチェア→ミラー→グローバルX軸を選択、3Dビュー内をクリックし
ボーンを左右反転させます。
ヘッダのピボットポイントを「中点」に戻しておきます。

41. Blender:人型モデルにアーマーチェアを入れよう
 左側のボーンの作成
左側のボーンが選択されている状態で、ヘッダのアーマーチェア→ボーン名反転を選択してください。
左側のボーン名の後ろが「.L001」から「.R」に変わります。
左側の右半身なので「R」です。これでアーマーチェアが完成しました。

42. Blender:人型モデルにアーマーチェアを入れよう
 メッシュにアーマーチェアを関連付ける
キャラクターのメッシュにアーマーチェアを組み込みます。
「オブジェクトモード」に戻します。
人体のメッシュオブジェクトを右クリックして選択します。
アーマーチェアをShift + 右クリックで追加します。
オブジェクト→親→「自動のウェイトで」を選択します。

43. Blender:人型モデルにアーマーチェアを入れよう
 メッシュにアーマーチェアを関連付ける
アーマーチェアを選択またはアウトライナーで「Armature」選択してから「ポーズモード」にします。
ボーンを選択すると水色になります。「R」キーで各ボーンを回転させ、ポーズを変更してみましょう。
ポーズに合わせてメッシュが変形するようになりました。

44. Blender:人型モデルにアーマーチェアを入れよう
 目や鼻が置いていかれた場合
目や鼻のメッシュオブジェクトが置いていかれたり、変形がおかしいときは、メッシュオブジェクトの
ウェイトを修正します。(自分の場合、目と鼻とも連動したので本のモデルを使いました。)
人型モデルの頭の部分を選択してから、「ウェイトペイントモード」に変更します。
全体が青くて頭部分だけ赤くなった状態になります。
塗られたウェイトは色で表現されます。強い順に赤→黄→緑→水色→青の色で塗られます

45. Blender:人型モデルにアーマーチェアを入れよう
 目や鼻が置いていかれた場合
目を左クリックで選択します。すると顔に目が自動的に配置されます。
「オブジェクトモード」に戻した後、再度アーマーチェア(顔のボーン)を選択します。
「ポーズモード」にした後に、顔のボーンで「R」キーを押すと目が連動するようになります。

46. Blender:IK(インバース・キネマティクス)を使う
 IK(逆運動学)とは
IKとはインバース・キネマティクスの略です。
通常のボーンは、FKでフォワードキネマティクスの略です。
FKの場合は親が動くと子も動くという仕組みで普通に体を動かす時の感じです。
それと違い、IKは子を動かすとつられて親が動くという仕組みです。
誰かに手を持たれて動かされると、動かしているのは手だけなのに、肘も腕も肩も動くのと同じです。
IKとFKの違い
もっとも大きな違いのひとつが補完されたモーションです。
親子関係の有無によってIKは直線的に、FKは円弧的に補完されます。

47. Blender:IK(インバース・キネマティクス)を使う
 Auto IKを使う
Auto IKは自動的にIKを適応してくれます。
ツールシェルフ→オプション→ポーズオプションでオートIKにチェックを入れます。
ボーンを選択して、「G」キーで移動させると他のボーンも動きます。
オートIKにチェックを付けたり外したりして、違いを見てみましょう。

48. Blender:カメラの配置とレンダー
「F12」キーを押してレンダーしても、変な位置にキャラクターが表示されてしまっている。
「Ctrl + Alt + Q」キーを押すと四分割に表示されます。元に戻す場合は、再度「Ctrl + Alt + Q」キーを押す。
または、「N」キーでプロパティを表示して「表示」にある「四分割表示」で切り替えることが出来る。
Numキーの「0」を押すとカメラ表示画面になります。
アーマーチェアの文字は、アウトライナーの「Armature」の目アイコンで非表示にする。

49. Blender:カメラの配置とレンダー
オブジェクトモードにして、アウトライナーの「Camera」を選択する。
カメラや光源を「G」キー(移動)や「R」キー(回転) を使って
下図の赤枠にキャラクターが納まるように配置します。そしたら「F12」キーでレンダーします。

50. 次回の「2Dミニゲーム作成と発表」の情報提供
次回はこれまで学んだ内容からオリジナルのミニゲームを時間内で作成します。
参考となる情報を紹介、昔のゲームウォッチなどの電子ゲームがインスピレーションを産みそうです。
弾むボールをゴールに導く「Jump」など地味にハマるミニゲーム約20種
1年間で50個も作ったパズル・アクション・シューティングゲームなどがプレイし放題
ゲームウォッチの全機種とプレー記事一覧
えっホントに遊べるの!? Web上に再現された「ゲーム＆ウォッチ」博物館がアツい
電子ゲーム紹介
フリー音楽素材 Senses Circuit
フリー素材で作るiOSゲームアプリ〜フリー素材サイトとその探し方〜【その他】
ゲーム素材サイト | SDIN無料ゲーム

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

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