unityとblenderハンズオン第1章
TRANSCRIPT
UnityとBlenderハンズオン
静岡Developers勉強会
第1章 初めての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-tetris-game
Blenderでサイコロを作成(UVマッピング)
https://www.youtube.com/watch?v=IXXN3p8aCIM
Blenderでサイコロを作成(モデリング)
https://www.youtube.com/watch?v=3ae3bjvhjEQ
→当日、残り時間20分となったため、次回に移行
スマホアプリのアイディア
Unityでテトリスもどきを作成
はじめに＠noobtuts さんのチュートリアルを参考にUnityの使い方をマスターする
http://noobtuts.com/unity/2d-tetris-game
Unity：プロジェクト作成(2D)
プロジェクトを作る
Unityエディタの「File」→「New Project」を選択する。
必ず「2D」を選択する。
Unity：カメラの設定と背景の作成
Hierarchy(ヒエラルキー)
Unityのゲームシーンは、キャラから背景まで、すべてのゲームオブジェクト(GameOnject)で構成されます。このゲームをオブジェクトを階層構造で編集
できるのがHierarchy(ヒエラルキー)です。
Main Cameraを選択して右側のInspectorに内容が表示されることを確認
Unity：カメラの設定と背景の作成 Inspector(インスペクタ)
その時点で選択されているゲームオブジェクトやアセットの詳細情報を表示・編集するビューです。
Positin X 4.5 Y 7.5Background BlackSize 8に変更する
Unity：キャラクターの構成
キャラクターであるブロックの構成
キャラクター名は形から「I、J 、L、O、S、T、Z」と呼ぶ
※テトリスの著作権について【自作テトリスを公開したら違法？】
Unity：キャラクターの保存
Assets(アセット)
Assetは資産の意味。Unityで使用するオブジェクトやスクリプトを保存するフォルダ。
Assetsの右クリックで「Show in Exprore」を選択し、tetris/Assetsフォルダに
ブロックの「block.png」とボーダーの「border.png」を入れる。
資料：https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session1
Unity：キャラクターの設定(block)
ブロックの設定
Assetsの「block」を選択、Inspectorで変更する
Pixels To Units 32に変更する
最新バージョンではPixels Per Unitsに変更されている
Unity：キャラクターの設定(border)
ブロックの設定
Assetsの「border」を選択、Inspectorで変更する
Pixels To Units 32に変更する
最新バージョンではPixels Per Unitsに変更されている
Unity：背景の設定①
両端の準備
Assetsの「border」をドラッグして、HierarchyのMain Cameraと同じ階層に
ドロップして、両端を作成する準備を行う。
チュートリアルはOne Column Layoutであるが変更は不要
Unity：背景の設定②
両端の設定
Hierarchyの各「border」のInspectorを設定する。
Position X -0.5 Y 10Scale 40に変更する
Position X 9.5 Y 10Scale 40に変更する
PlayしてGame画面を確認する
Unity：キャラクターの作成(各ブロック) ブロック「GroupO」の作成準備
HierarchyのCreate→ 「Create Empty」でGameObjectを作成する。
Assetsの「block」をドラッグし、 GameObjectの下位にドロップする。
Oブロックなので、4回繰り返す。 Inspectorで各ブロックのPositionX=0 Y=0X=0 Y=1X=1 Y=0X=1 Y=1に変更する
Unity：キャラクターの作成(各ブロック) ブロック「GroupO」の作成
HierarchyのGameObjectを右クリックのメニューにて「Rename」で「GroupO」
に名称を変更する。
「GroupO」をドラッグして、Assetsにドラッグする。
Unity：キャラクターの作成(各ブロック)
各ブロック(GroupI～Z)の作成
「GroupO」と同じ手順で、他のブロックを作成する。
「GroupO」の右クリックで「Duplicate」で複製すると楽です。
X= 0 Y=3X= 0 Y=2X= 0 Y=1X= 0 Y=0
X= 0 Y=3X= 0 Y=2X= 0 Y=1X= 0 Y=0X=-1 Y=0
X= 0 Y=3X= 0 Y=2X= 0 Y=1X= 0 Y=0X= 1 Y=0
X= 1 Y=1X= 0 Y=1X= 0 Y=0X=-1 Y=0
X= 0 Y=1X= 1 Y=0X= 0 Y=0X=-1 Y=0
X=-1 Y=1X= 0 Y=1X= 0 Y=0X= 1 Y=0
Unity：キャラクターの作成(各ブロック)
各ブロック(GroupI～Z)の作成
「GroupO」と同じ手順で、他のブロックをAssetsフォルダに作成する。
Unity：シーンの登録
ここまでで一旦保存しておく。Fileメニューの「Save Scene」を選択
チュートリアルと同様に「scene_main」で保存する。
Unity：ゲーム世界の作成
HierarchyのGameObjectを右クリックのメニューにて「Rename」で「Spawner」
スポーナーに名称を変更する。
スポーン(Spawn)とは、コンピューターゲームにおいてゲーム開始を意味する事である。
もともと水中において卵が孵化することを意味するが、これに見立ててマップにプレイヤーキャラクターが出現すると言う意味で使われる。
Position X 5 Y 14に変更する
Unity：C#スクリプト(Spawner)の作成
ProjectエリアのCreateのメニューから、「C# Script」を選択します。
Assetsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「Spawner」にします。
※名前の変更が後回しになると、クラス名が「 NewBehaviourScript 」となってしまうので
クラス名も「Spawner」変更にする必要が出てきます。
using UnityEngine;
using System.Collections;
public class Spawner : MonoBehaviour {
Unity：C#スクリプト(Spawner)の編集AssetsのC#の「 Spawner 」をダブルクリックでMonoDevelopが起動します。
MonoBehaviorクラスを継承したクラスが生成される。
Behavior(ビヘイビア)=「挙動」や「ふるまい」といった意味となります。
groups変数の追加、spawnNext()の追加、Start()の編集を行います。Update()は削除する。
using UnityEngine;
using System.Collections;
public class Spawner : MonoBehaviour {
// Groupspublic GameObject[] groups;
public void spawnNext() {
// Random Indexint i = Random.Range(0, groups.Length);
// Spawn Group at current PositionInstantiate(groups[i],
transform.position,
Quaternion.identity);
}
void Start() {
// Spawn initial GroupspawnNext();
}
Unityエンジンからゲームの実行状況に応じてメッセージが送信されると、
実装クラス内にあるメッセージと同じ名前の関数を実行します。
Unity：MonoBehaviorクラスとは
MonoBehaviorクラス
Awake
Start
FlexedUpdate
Update
LastUpdate
OnGui
OnColisionXXXX2D
OnTriggerXXXX2D
OnDisenable
継承先クラス
Start
Update
OnGui
シーン開始時に呼ばれる
描画時に呼ばれる
Unity GUI描画時に呼ばれる
Unity：オブジェクトの設定
HierarchyのSpawnerを選択して、Inspectorで「Add Component」ボタンを押下
Component一覧からScripts→Spwnerを選択する。
Size 7 として、Elment0～6にAssetsからGroupI～Zをドラッグ＆ドロップする。
Unity：ゲーム初期画面表示最初のブロック(ランダム)が表示される。
PlayしてGame画面を確認する
Unity：C#スクリプト(Grid)の作成
ProjectエリアのCreateのメニューから、「C# Script」を選択します。
Assetsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「 Grid」にします。
using UnityEngine;
using System.Collections;
public class Grid : MonoBehaviour {
Unity：C#スクリプト(Grid)の編集
___|_0_|_1_|_2_|...0 | o | x | x |...1 | o | x | o |...2 | x | x | o |...
...|...|...|...|...
// Is there a block at (3,4)?if (grid[3,4] != null)
// Do Stuff...
Gridの内容
2次元配列「 × 」がブロック有り、「 O 」がブロック無しで実プログラムではnull判定する。
Girdは、幅10 ｘ 高さ20で生成する。
Girdスクリプトの編集
下記の関数を作成する。Start()とUpdate()は削除
public static Vector2 roundVec2(Vector2 v)
public static bool insideBorder(Vector2 pos)
public static void deleteRow(int y)
public static void decreaseRow(int y)
public static bool isRowFull(int y)
public static void deleteFullRows()
using UnityEngine;
using System.Collections;
public class Grid : MonoBehaviour {
// The Grid itselfpublic static int w = 10;
public static int h = 20;
public static Transform[,] grid = new Transform[w, h];
public static void deleteFullRows() {
for (int y = 0; y < h; ++y) {
if (isRowFull(y)) {
deleteRow(y);
decreaseRowsAbove(y+1);
--y;
}
}
}
Unity：C#スクリプト(Group)の作成
ProjectエリアのCreateのメニューから、「C# Script」を選択します。
Assetsに「C# Script」が作成されるので名前を「NewBehaviourScript」→「 Group」にします。
using UnityEngine;
using System.Collections;
public class Group : MonoBehaviour {
Unity：C#スクリプト(Group)の編集
Groupの内容
ブロック(Group)ごとの振る舞いを実装する。
Spawnerクラスのメソッドを呼ぶ。FindObjectOfType<Spawner>().spawnNext();
Groupスクリプトの編集
下記の変数と関数を作成および編集する。
float lastFall = 0;
bool isValidGridPos()
void updateGrid()
void Update()
void Start()
using UnityEngine;
using System.Collections;
public class Group : MonoBehaviour {
// Time since last gravity tick
float lastFall = 0;
Unity：C#スクリプト(Group)の割り当てAssetsの各ブロック(GroupI～Z)を選択してInspectorを表示する。
Add Componentボタンを押して、Scripts→Groupを選択する。
Unity：ゲーム開始ゲームが動いてくれれば完成です。
スコアを表示したり、次のブロックを表示したりなど拡張するといい。
各ブロックの色を変えてよりカラフルにするのもいいよね。
Playしてゲーム開始
Unity：疑問点
回転の仕組み
Transform Transform オブジェクトの位置、回転、サイズを扱うクラス
キー入力の仕組み
Input.GetKey Unity - 入力情報を取得する
グリッドにブロックの形の格納方法
Groupの子ブロックごとにtransformの値を使ってgridに格納
スコアの実装
GUI Text スコアの表示
次のブロックの表示
次のブロック表示を用意してプログラムを変更する。
ブロックのカラー化
今のblock.pngが枠中が透明なので、別ブロックを用意する。
AsettsのGroupI等の「▲」を押すと分割されるので1個ごと色を変更する。
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:基本操作カメラ、3Dモデル、光源は右クリックで選択、オレンジで色が変わるので
右ボタンを押しながら移動(一旦、移動すれば右ボタンを押さなくてもよい）、
左クリックで確定させる。
F12キーで、カメラや光源が反映された3Dビューの表示が変わる。ESCキーで元の表示に戻る。
カメラ
３Dモデル
光源
３Dカーソル３D空間の場所を示すためのポインタ
Blender:基本操作
拡大・縮小
マウスのホイールで3Dモデルの拡大・縮小
視点の向きの変更
マウスのホイールを押しながらマウス移動
視点の移動
SHIFTキーとマウスのホイールを押しながらマウス移動
前後不覚になった場合
Homeキーを押す、または下側にある「ビュー」メニューから「全てを表示」を
選択すると3Dビューウィンドウに丁度すべてが収まるように視点が移動される。
Blender:箱に色をつける
箱の色を変更する
箱を右クリックで選択、プロパティータの右から
4番目の「マテリアル」ボタンをクリックします。
「ディフューズ」で指定の色にする。
履歴の参照とアンドゥで元に戻す
左側パネルの履歴にて
元に戻す(Ctrl + Z)
やり直す(Shift Ctrl + Z)
Blender:サイコロ作成(UVマッピング)
SpreadBlenderさんが公開している動画を参考に、サイコロを作成します。
https://www.youtube.com/watch?v=IXXN3p8aCIM
Blender:ワークスペースの変更UVマッピングの操作がしやすいように、ワークスペースを「UV Editing」にする。
ワイヤーフレーム表示
右下の○アイコンを押して、「ワイヤーフレーム」に変更する。
オブジェクトモードを編集モード
右下のオブジェクトモードを押して、「編集モード」に変更する。
Blender:ワイヤーフレームと編集モード
Blender:縫い目の作成の準備
選択の解除
「A」キーが選択の解除および選択を行う。
またはメニューの「選択」から「全てを選択(解除)」を行う。
辺選択
頂点選択、辺選択、面選択のアイコンから「辺選択」を選択する。
Blender:縫い目の作成
辺の複数選択
Shiftキーを押しながら、右クリックで辺を7つ選択する。
面全体が選ばれないようにする。辺選択した順番によって展開の形が変わる。
①
②③
④
⑤
⑥
⑦
Blenderの画面から離れると上手く出来ないので、番号の順番を憶えて一気に行う。
Blender:縫い目のマークを付けるパネルのタブを「シェーディング／UV」にして、UVマッピングの「シームを付ける」を押す。
辺が濃いオレンジになる。
全選択をしたいのでAキーを押します。すると辺が赤色になるので再度Aキーを押して全選択にします。
Blender:縫い目の展開
パネルのタブを「シェーディング／UV」にして、UVマッピングの「展開」を押す。
メニューが開くので、先頭の「展開」を選択する。
左画面が、下記の図のように展開される。
「辺選択」から「面選択」に変更して、各面を右クリックすると、どこが面にあたるのかが
左画面に表示される。Aキーを押すと元の全て選択がされる。
Blender:テクスチャ画像の読み込み
画像を開く
メニューの「画像」から「画像を開く」を選択する。
サイコロ.pngを選択
左画面にサイコロ画像が表示される。
サイコロ.pngはGitHubに置きました。
https://github.com/yaju/ShizuDev_UnityAndBlender/tree/master/Session1
Blender:テクスチャ画像の位置合わせ展開範囲を移動と縮小などでサイコロ図に位置を大まかに合わせる
Gキーを押して、マウスで位置を移動させて左クリックで確定する。
Sキーを押して、マウスで縮小させ左クリックで確定させて合わせる。
Blender:テクスチャ画像の位置合わせ(微調整)サイコロ図に位置が図と合うように微調整する。
各頂点を右クリックで選択し、Gキーで移動させて左クリックで確定する。
頂点を右クリックGキー押してマウス移動
Blender:テクスチャ画像の表示
右側の画面にて全選択を解除する。
ワイヤーフレームから、テクスチャに変更する。
Blender:テクスチャの割り付けワークスペースを「Default」に戻す。3Dモデルの表示をテクスチャに変更する。
右パネルをテクスチャを選択する。
タイプを「なし」から「画像または動画」に変更する。
Blender:テクスチャの割り付け
プレビューは、Cubeにしてマテリアルにしておく。
マッピングの座標を「UV」に変更する。
画像アイコンから「サイコロ.png」を選択する。
Cube
Blender:カメラの位置と光源の位置を調整
F12キーを押すとレンダーされたモデルが表示されるが、一部の面が暗いので
カメラの位置と光源の位置を調整する。光源を右クリックして選択して、移動させる。
Blender:サイコロの完成
カメラと光源を調整して、F12キーで表示する。
Blender:三角形に分割
UnityやWebGLでは四角形ポリゴンを表示出来ないため、三角形ポリゴンに分割します。
SceneをCameraからCubeに戻します。
オブジェクトモードを「編集モード」にします。
3Dモデルの表示を「ワイヤーフレーム」にして「面選択」にします。
Aキーで全選択し、Ctrl+Fキーで三角形に分割します。
Blender:JSON(three.js)形式にエクスポート
１ three.js形式エキスポータのダウンロード
(2015/02/08時点の最新 r70)
https://github.com/mrdoob/three.js
２ Blender側にコピーする
three.js-master¥utils¥exporters¥blender¥addons¥io_threeを下記にコピーする
C:¥Program Files¥Blender Foundation¥Blender¥2.72¥scripts¥addons
参照：https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender
※r69の場合は、io_mesh_threeであったが、r70からはio_threeに置き換わっている。
C:¥Program Files¥Blender Foundation¥Blender¥2.7X¥scripts¥addons
Blender:JSON(three.js)形式にエクスポート
３ Blenderで有効にする
ファイル→ユーザー設定→アドオン→ カテゴリーのインポート/エクスポートを選択する。
「Import-Export:Three.js Format」を探してチェックをオンにする。
最後に「ユーザー設定の保存」をしておく。
Blender:JSON(three.js)形式にエクスポート
４ファイル→エキスポート→Three(json) でエクスポート
Export THREEのオプションで、必要に応じてチェックを付ける。
保存先を指定したら、「Export THREE」ボタンを押下する。
※同じ場所にテクスチャで使用した画像があるとエラーになります。
Blender:サイコロを作成(モデリング)
Hollykaz03さんが公開している動画を参考に、サイコロを作成します。
https://www.youtube.com/watch?v=3ae3bjvhjEQ
Blender:サイコロを作成(モデリング)
動画と下記サイトでモデリングによるサイコロを作成する。
blenderでサイコロを作る
http://aadimstx.blogspot.jp/2011/11/blender.html
ごめんなさい。資料が間に合わないので、本番でやりながら作成していきます。
資料は後で作り直して再度公開します。
⇒当日、すでに終了20分前となり次回持ち越しとなりました。
スマホアプリのアイディア
今年は、Shizudev名義でスマホアプリを作成します。
最初は、お金の負担が少ないアンドロイド向けに開発する。
好評なら、iPhoneアプリも開発する。
今は、子供向けかつ教育向けのゲームアプリを考えています。
そのアイディアをみなさんで開発していきたいです。
複数あるといいので、他の方のアイディアも開発していきたいですね。
ご清聴ありがとうございました！