鲍苍颈迟测と叠濒别苍诲别谤ハンズオン第9章
- 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 （スライド）
- 5. セッション内容 ? Unityの学び直し 今までチュートリアルをこなすことで精一杯になってしまい、理解度が弱かったため、 基礎部分を学び直していく。 ? 写真から３Dモデル化の修正 最近は写真から簡単に３D化できますが、ゴミが混ざっていたりするのでBlenderを 使って修正します。 ? スマホアプリのアイディア 今年は、Shizudev名義でスマホアプリを作成します。 プロトタイプ版を作成する予定です。※今回は間に合わなかったけど
- 7. Unityの学び直し ? はじめに 第6回にてミニゲーム発表会を行ったが、作成する上でまだちゃんと理解できていない部分があった。 今までチュートリアルをこなすことで精一杯になってしまい、理解度が弱かったため、 基礎部分を学び直していく。 資料作成の都合上、間に合わないのは持ち越します。資料作成が手一杯で間に合わないんだもん。 ? Unity4.6からUnity5.2にバージョンアップの注意点 さすがに時期的にバージョンアップしておかないとまずいと思って、今回バージョンアップしました。 Unity4.6時代のプロジェクトからバージョンアップすると、「Apply Root motion」のチェックが変換時 にオンにされてしまい、RigidBody2Dが動かなくなるので、チェックを外しましょう。 私はVisual Studioでデバッグしていたのですが、Unity5.2にアップデートしたところデバッグができなく なってしまいました。その場合、Visual Studio Tools for Unityのバージョン2.1をインストールしましょう。
- 8. Unityの学び直し ? アジェンダ ?アニメーション準備 ?Mecanimの構成 ?Animatorビューの編集 ?アニメーション遷移(Transition) ?アニメーションクリップの各プロパティ ?アニメーションパラメーターについて ?アニメーションパラメーター(Bool型) ? Has Exit Timeプロパティについて ?アニメーションパラメーター(Trigger型) ?アニメーションビュー画面について ?アニメーションイベント ?アニメーションの色替え ?ユニティちゃん 2Dデータを見よう ?アニメーションのミラーについて ?コ?ルーチン ?BGM、効果音 ?背景のスクロール ?ゲームマネージャ ?シーンの切り替え ?アニメーション ?パーティクル ?モバイル機器に転送 などは次回に持ち越します。
- 9. Unity:アニメーション準備 前回の資料で一部使わせて頂いた下記サイトが無くなってしまいました、残念です。 シューティングゲーム用ドット絵フリー素材 http://stg.iaigiri.com/material/ 今回の資料では下記サイトの一部を使わせて頂きます。公開に感謝します。 ぴぽや倉庫 http://piposozai.wiki.fc2.com/ ハロウィン(10月31日)直前なので、ハロウィンキャラを使用する。 ユニティちゃん 2Dデータ UNITY-CHAN! OFFICIAL WEBSITE http://unity-chan.com/contents/guideline/ http://unity-chan.com/download/index.php
- 10. Unity:アニメーション準備 dakabocha.pngファイルをAssets/Spritesにフォルダにセット、InspectorでSprite Modeを「Multiple」 に変更して、Sprite EditorにてGird 64ｘ64で厂濒颈肠别したら础辫辫濒测ボタンで适用します。
- 11. Unity:アニメーション準備 dekabochaは、各方向に3つアニメーションパターンが用意されています。 各方向のアニメーションを作成します。 各方向を3つ選択して、HierarchyまたはSceneにドラッグ＆ドロップしていきます。 アニメーションコントロール( ) とアニメーションクリップ( )が同時に出来ます。 方向によって名前を全て変更して下さい。(アニメーションコントロールとアニメーションクリップも) アニメーションコントロールとアニメーションクリップを全てAssets/Animationsに移動します。 方向 アニメーションパターン dekabocha_front dekabocha_left dekabocha_right dekabocha_back アニメーションコントロールと アニメーションクリップの名前の変更 名前を選択して、再度クリックすると 編集可能状態になる
- 12. Unity:Mecanimの構成 ? Mecanim(メカニム)とは MecanimはUnity4.xから搭載されたアニメーション機能で３つで構成されています。 Animation Controller Animation Clip Animator ビューで編集 Animation ビューで編集 Animatorコンポーネント
- 13. Unity:Animatorビューの編集 Hierarchyにてdekabochaを選択すると、Animatorタブに表示されます。 そこに、 Assets/Animationsフォルダからアニメーションクリップの dekabocha_rightとdekabocha_leftをAnimatorタブにドラッグ＆ドロップして追加します。 分かりやすいように dekabocha_right→dekabocha_front →dekabocha_left に上下に並び替えます。 各ステートの右クリックメニューで「Make Transition」を選択して、矢印↑↓で上下とも繋げていきます。 ※各ステートの名前が直ってなかったら、Inspectorで名前を修正してください。 デフォルトで実行される ステートはオレンジ色
- 14. Unity: アニメーション遷移(Transition) ? アニメーション遷移(Transition) 各アニメーションステート同士の遷移を表現します。トランジション(Transition)は遷移の意味です。 ? ソロおよびミュート機能 Animationの遷移を限定したり無効にしたりします。 Soloの場合、遷移先が2箇所以上の場合、どちらか片方のみ遷移します。矢印が緑色になる。 Muteの場合、遷移が無効化される。矢印は赤色となる。
- 15. Unity:アニメーションクリップの各プロパティ ? Loop Timeプロパティについて Animatorタブのdekabocha_frontステートをダブルクリックするとInspectorに表示されます。 (または、 Assets/Animationsのdekabocha_frontアニメーションクリップを選択する) チェックがオンだとアニメーションクリップが再生され最後に到達すると再スタートします。 ? LoopPoseプロパティについて LoopPoseをオンにするとモーションをシームレスにループ可能にします。 （大抵、より滑らかにループが繋がったように見えます、ガクガクしなくなります。 ） ? Cycle Offsetプロパティについて Animationの開始位置をズラすことができます。
- 16. Unity:アニメーションパラメーター ? アニメーションパラメーターについて アニメーションパラメーターは Animator Controller 内で定義され、スクリプトからアクセスしたり 値を割り当てることができる変数です。 スクリプトをどのようにコントロールするか、もしくはどのようにステートマシンの一連の流れに 影響するかを定義します。 http://docs.unity3d.com/ja/current/Manual/AnimationParameters.html パラメーターはアニメータークラスの関数を使用してスクリプトから値を割り当てることができます。 SetFloat、SetInt、SetBool、SetTrigger、ResetTrigger 種類 説明 Int 整数 Float 小数部分を持つ数値 Bool true または false の値（チェックボックスで表現されています) Trigger ステートの遷移がトリガとなった時、自動的にリセット(false)になる boolean パラメーター(丸ボタンで表現されています)
- 17. Unity:アニメーションパラメーター(Bool型) ? アニメーションパラメーターの追加 Hierarchyの「dekabocha_front」を選択して、Animatorタブにする。 Parametersにて「+」ボタンを押して、「Left」と「Right」のBoolパラメータを作成します。 各ステートの矢印(Transition)を選択して、条件(Conditions)を下記のように設定してください。 ? 「Rigidbody 2D」コンポーネントの追加 Hierarchyの「dekabocha_front」のInspectorにて、「Rigidbody 2D」を追加します。 この際に、「Gravity Scale」は「0」にしておきます。
- 18. Unity:アニメーションパラメーター(Bool型) ? キー操作によるアニメーション変更(bool型パラメーター) Assets/Scriptsにて、C#スクリプトの「decabocha」を作成して、 dekabocha_frontにアタッチします。 GetComponent<Animator>().SetBool(“Right”, false); としてアニメーションパターンをセットします。 左キーを押すと左向き、右キーを押すと右向きになり、必ず正面が間に挟む。 左向き→正面→右向き、右向き→正面→左向き void FixedUpdate() { Rigidbody2D rigidbody = GetComponent<Rigidbody2D>(); float h = Input.GetAxisRaw("Horizontal"); switch((int)h) { case 0: GetComponent<Animator>().SetBool("Right", false); GetComponent<Animator>().SetBool("Left", false); break; case -1: GetComponent<Animator>().SetBool("Left", true); break; case 1: GetComponent<Animator>().SetBool("Right", true); break; } } Input.GetAxisRaw("Horizontal") "Horizontal"の場合、 0：左右どちらも入力されていない -1：左が入力されている 1：右が入力されている (float型の値として)返ってきます。
- 19. Unity:Has Exit Timeプロパティについて ?チェックがオン (デフォルト)の場合、アニメーション再生回数を決め(通常は自動で決まっている） それが終了したらアニメーション遷移します。 ?チェックがオフの場合、 再生終了を待たずにConditionsにてアニメーション遷移条件を決めます。 Animatorタブのdekabocha_frontステートのInspectorにて「Speed」を「1」→「0.1」として遅くします。 dekabocha_leftステートに向かう矢印(Transition)の「Has Exit Time」のチェックを外します。 実行すると左キーは即反応するのに対し、右キーの反応は鈍いです。 【参照】Animator Controllerの遷移設定(Duration等)【ひよこエッセンス】 左キーはすぐに反応する。
- 20. Unity:アニメーションパラメーター(Trigger型) ? アニメーションパラメーターの追加 Hierarchyの「dekabocha_back」を選択して、Animatorタブにする。 Parametersにて「+」ボタンを押して、「Left」と「Right」のTriggerパラメータを作成します。 各ステートの矢印(Transition)を選択して、条件(Conditions)を下記のように設定してください。 ※Triggerは、ステートの遷移がトリガとなった時、 自動的にリセット(false)になるので片方のみに指定 ? 「Rigidbody 2D」コンポーネントの追加 Hierarchyの「dekabocha_back」のInspectorにて、「Rigidbody 2D」を追加します。 この際に、「Gravity Scale」は「0」にしておきます。
- 21. Unity:アニメーションパラメーター(Trigger型) ? アニメーションの操作について Assets/Scriptsにて、C#スクリプトの「decabocha2」を作成して、 dekabocha_backにアタッチします。 GetComponent<Animator>().SetTrigger(“Right”); としてアニメーションパターンをセットします。 左キーを押すと左向き、右キーを押すと右向きになり、必ず正面が間に挟む。 左向き→背面→右向き、右向き→背面→左向き 何故か2回繰り返してしまう、うーむ。 void FixedUpdate() { Rigidbody2D rigidbody = GetComponent<Rigidbody2D>(); float h = Input.GetAxisRaw("Horizontal"); switch((int)h) { case 0: break; case -1: GetComponent<Animator>().SetTrigger("Left"); break; case 1: GetComponent<Animator>().SetTrigger("Right"); break; } } Input.GetAxisRaw("Horizontal") "Horizontal"の場合、 0：左右どちらも入力されていない -1：左が入力されている 1：右が入力されている (float型の値として)返ってきます。
- 23. Unity:アニメーションパラメーター(Int型) ? Any Stateについて 現在どのステートにいるかに影響を受けることなく、特定のステートに遷移したい場合のために存在する。 Any Stateから各ステートの矢印(Transition)を設定し、条件(Conditions)を下記のように設定して下さい。 ちなみ、Any Stateの方向に矢印(Transition)は付きません。
- 24. Unity:アニメーションパラメーター(Int型) ? アニメーションの操作について Animatorタブのdekabocha_frontステートのInspectorにて「Speed」を「0.1」→「1」に戻してください。 GetComponent<Animator>().SetInteger("DirX", (int)h); としてアニメーションパターンをセットします。 Assets/Scriptsにて、C#スクリプトの「decabocha」を修正します。 「Any State」にしている為、正面を挟まずに左向き→右向きに切り替わります。 void FixedUpdate() { Rigidbody2D rigidbody = GetComponent<Rigidbody2D>(); float h = Input.GetAxisRaw("Horizontal"); float v = Input.GetAxisRaw("Vertical"); GetComponent<Animator>().SetInteger("DirX", (int)h); GetComponent<Animator>().SetInteger("DirY", (int)v); } Input.GetAxisRaw("Vertical") "Vertical"の場合、 0：上下どちらも入力されていない -1：上が入力されている 1：下が入力されている (float型の値として)返ってきます。
- 25. Unity:アニメーションパラメーター(Float型) ? アニメーションパラメーターの追加 Hierarchyの「dekabocha_front」を選択して、Animatorタブにする。 ParametersにてInt型の「DirX」と「DirY」を一旦削除して、Floatパラメータとして修正します。 各ステートの矢印(Transition)を選択し、条件(Conditions)を下記のように設定して下さい。 Floatには「Greater（＞ 大なり）」と「Less （＜ 小なり）」のみで「Equals」がありません。 back DirY Greater 0.1 front DirY Less -0.1 right DirX Greater 0.1 left DirX Less -0.1
- 26. Unity:アニメーションパラメーター(Float型) ? アニメーションの操作について GetComponent<Animator>().SetFloat("DirX", h); としてアニメーションパターンをセットします。 Assets/Scriptsにて、C#スクリプトの「decabocha」を修正します。 「Any State」にしている為、正面を挟まずに左向き→右向きに切り替わります。 void FixedUpdate() { Rigidbody2D rigidbody = GetComponent<Rigidbody2D>(); float h = Input.GetAxis("Horizontal"); float v = Input.GetAxis("Vertical"); GetComponent<Animator>().SetFloat("DirX", h); GetComponent<Animator>().SetFloat("DirY", v); } 【Input.GetAxis】 対応するキーを押してもすぐ には「-1」や「1」にはなら ず、少しずつのその値に近づ くようになっています。
- 27. Unity:アニメーションビュー画面について アニメーションビュー(Animation View)は、Hierarchyの「dekabocha_front」を選択して、 メニューからWindow → Animationを選択して開きます。 アニメーションイベントやアニメパターンの色を変更するなどいろいろ出来ます。 また、アニメーションクリップは、アニメパターンを複数選択してHierarchy等にドラッグ＆ドロップ して作成していましたが、パターン１つしかない場合は、ここでCreate New Clipで作成できます。
- 28. Unity:アニメーションイベント アニメーションに位置に設定したイベントを呼び出すことが出来ます。 イベント名はアタッチしたスクリプトの中から選択しますので、名前に決まりはなく自由に付けれます。 例えばシューティングゲームにて、プレイヤーが敵の弾に当たったら爆発アニメーションさせて 爆発アニメーションが終わったら、その爆発アニメーションオブジェクトを破棄させたりします。 Unity公式の第05回 当たり判定とアニメーションイベントとレイヤー Explosion.cs using UnityEngine; public class Explosion : MonoBehaviour { void OnAnimationFinish () { Destroy (gameObject); } }
- 29. Unity:アニメーションの色替え 例えばシューティングゲームにて、プレイヤーの弾に敵に当たったらダメージを受けた時の赤色にすると いった表現ができます。 Unity公式の第11回 エネミーのHP、弾の攻撃力、アニメーションの追加 「Add Property」ボタン(「Add Curve」ボタンは古い)でSprite Renderer → Colorを追加します。
- 30. Unity:ユニティちゃん 2Dデータを見よう 良いサンプルとして「ユニティちゃん 2Dデータ」を見てみましょう。 UNITY-CHAN! OFFICIAL WEBSITE http://unity-chan.com/contents/guideline/ ダウンロード場所 http://unity-chan.com/download/index.php
- 33. Blender:セッション内容(写真から３Dモデル化の修正) 最近は写真から簡単に３D化できますが、ゴミが混ざっていたりするのでBlenderを使って修正します。 目指したいのは下記サイトですが、時間の都合上難しそうです。 友人をスマホで撮影して3Dモデル化してUnityで動かしてみた 【ユニティちゃん】HGベアッガイさんが踊ってみた【3Dキャプチャ】 ‐ ニコニコ動画:GINZA Autodesk 123D CatchのPC版をダウンロードして、セッション資料用に下記8パターンを取り込んで みたものの、何度やってもエラーとなってしまうため断念しました。(日本語を含まないパスで作業)
- 35. Blender:セッション資料 今回のセッション資料となります。 https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session9 ※テクスチャの配置は下記フォルダになっているので注意 C:?Project?ShizuDev_UnityAndBlender?Session9?2276415_Mario?2276415_Mario?mesh?tex_0.jpg blenderファイル 内容 mario_import.blend インポート後、立方体付き mario.blend ゴミを削除後 mario_foot.blend 足の切り込み後 mario_leftarm.blend 左腕の切り込み後 mario_rightarm.blend 右腕の切り込み後 mario_hole.blend 頭裏の穴の埋め込み後 mario_decimate.blend ポリゴン数の削減後 mario_adjust.blend 微調整後 mario_origin.blend 原点に移動後
- 41. Blender:基本操作 ? 拡大?縮小 マウスのホイールで3Dモデルの拡大?縮小 ? 視点の向きの変更 マウスのホイールを押しながらマウス移動 ? 視点の移動 SHIFTキーとマウスのホイールを押しながらマウス移動 ? 前後不覚になった場合 Homeキーを押す、または下側にある「ビュー」メニューから「全てを表示」を 選択すると3Dビューウィンドウに丁度すべてが収まるように視点が移動される。 ? 履歴の参照とアンドゥで元に戻す 左側パネルの履歴にて 元に戻す(Ctrl + Z) やり直す(Shift Ctrl + Z)
- 46. Blender:ゴミオブジェクトの削除 辺選択から頂点選択にしたら、まだゴミが残っていたので綺麗に削除しておきます。 これからポリゴン数を削減していくので、ここらへんで一旦保存しておきましょう。
- 54. Blender:ポリゴン数の削減(Decimate) ポリゴン数削減(Decimate)には、3つの違う簡略化モードが選べます。 束ねる(Edge Collapse) ：辺を束ねます、一般的な方法。 分割の復元(UnSubdivide) ：面の分割を下に戻し、リダクションします。 平面(Planar) ：統合して平面をポリゴンにします。 比率によってポリゴン数を削減します。 三角面化：面を三角形にします。
- 58. Blender:原点に設定する ボーンを入れる前に、３Dモデルを原点に移動させます。ゴミを削除したのでズレている。 1. ビューの平行投影(Numpad 5)かつ前(Numpad 1)にします。 2. オレンジ色の●が原点です。「Shift + C」キーで3Dカーソルを原点に移動させます。 3. 表示が小さくなってしまうので、ホイールボタンで表示を大きくしていきます。 4. 3Dモデルの全体を選択して「R」キーでZ方向に回転させて、前向きにします。
- 59. Blender:原点に設定する 5. オブジェクトモードに変更し、「G」キーで3Dモデルの中心を青線に合わせ、赤線の上に移動します。 6. オブジェクト→トランスフォーム→原点を3Dカーソルへ移動を選択します。 7. ビューの右(Numpad 3)にして、 3Dモデルの中心を青線に合わせます。 8. 再度、ビューの前(Numpad 1)にします。 これでボーンを入れる準備ができました。
- 61. ご清聴ありがとうございました！