20121208 unityhack billboard
DESCRIPTION
関西Unity勉強会 & VSハッカソン倶楽部 合同勉強会 2012/12/08 資料 ビルボードについて エレベーターアクションチーム 栗坂こなべ(@kurisaka_konabe)TRANSCRIPT
![Page 1: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/1.jpg)
※講演中、後に、より良い方法を提案頂いたので追記しました
ビルボードについて
~関西 Unity 勉強会 & VS ハッカソン倶楽部 合同勉強会~
2012 年 12 月 08 日
エレベーターアクションチーム
栗坂こなべ(@kurisaka_konabe)
![Page 2: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/2.jpg)
今日のお題
1.拙作エレベーターアクションの作り方
2.ビルボードについて
![Page 3: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/3.jpg)
1.エレベーターアクションの作り方
First Person Controller を使う
Assets→ImportPackage→Character Controller
これだけで FPS が作れる!
WASD キーで移動、スペースで JUMP!
あとは適当に MAP を作るだけ
(スマートに Unity で実演する...しませんでした)
![Page 4: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/4.jpg)
エレベーターの実装
上下に動く床を作る
アニメーション機能 or スクリプトによる制御
今回はスクリプトで実装
![Page 5: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/5.jpg)
UpDownFloor.js
var amplitude : int;
var speed : float;
private var startY : float;
function Start(){
startY = transform.position.y;
}
function Update () {
transform.position.y = startY +
(Mathf.Sin(Time.time * speed) * amplitude);
}
![Page 6: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/6.jpg)
FPS サンプル エレベーターアクション Web アプリ URL:https://dl.dropbox.com/u/98894748/WebElevator/WebPlayer/WebPlayer.html
※Chrome ユーザーの方は注意
DropBox 上にあると、無限インストール要求に陥ります
url 横の盾マークをクリックして、「読み込む」をクリックしてください
![Page 7: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/7.jpg)
2.ビルボードについて何故エレベーターチームがビルボードについて語るの?
おっぱいチーム発表のゲーム実演をみて閃く!
「ん…この敵ビルボードにでているフチは?
これ、薄くした cube に貼っているな!」
過去にこれについて試行錯誤したことがあるので解説
![Page 8: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/8.jpg)
ビルボードの様々な方式
A) 薄くした cube に貼る(フチが出る)
B) 厚さゼロにした cube に貼る(なんか暗い)※
C) plane に貼る
D) なんかテライン?のやつ(バンナム本の揺れる草)
E) NGUI (有料プラグイン?らしい)
C)の plane でやってみます※講演中に解決案を頂いたので後述
![Page 9: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/9.jpg)
サンプル Web アプリ URL:https://dl.dropbox.com/u/98894748/WebBill/WebPlayer/WebPlayer.html
cube 方式の問題点、plane の場合等…薀蓄を語る(cube の Scale Z を 0.1 にするとフチが出る、0 にすると何処から見ても暗くなる、
カメラ注視方式だと画面端に来ると斜めになる問題等を実演し、語る)
![Page 10: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/10.jpg)
※追加補足(ビルボードを透過させたい場合)
透過 png をマテリアルにあてて、Shader も透過に設定する
※後述するが、Unlit/Tranparent の方が尚良い
![Page 11: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/11.jpg)
カメラを注視する方法の問題点
BillboardForPlane.jsvar m_camera : Camera;
function Update() {
// カメラを注視する
transform.LookAt(m_camera.transform);
// 寝ている planeオブジェクトを起こす
transform.rotation *= Quaternion.Euler(90, 0, 0);
}
![Page 12: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/12.jpg)
図解 カメラオブジェクト注視式
(画面端のビルボードに余計なパースが付く!)
ゲーム画面 上からみたとこ
![Page 13: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/13.jpg)
改良版 画面正面を向く
(※講演中にもっといい方法が提案されたので後述します)
var m_camera : Camera;
function Update() {
//transform.LookAt(m_camera.transform);
// 画面正面を向く処理
transform.LookAt(
transform.position + m_camera.transform.rotation * Vector3.back);
)
// 寝ている planeオブジェクトを起こす
transform.rotation *= Quaternion.Euler(90, 0, 0);
}
![Page 14: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/14.jpg)
図解 改良版(画面に対して正面)
ゲーム画面 上からみたとこ
![Page 15: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/15.jpg)
講演中、後に提案頂いた内容
・厚みゼロの cubeオブジェクトだと暗くなる問題
→shader を Unlit/Transparent にすれば暗くならない
・ビルボードに画面正面を向かせるコード→transform.rotation = Camera.main.transform.rotation;
でイケる(黄色本の高橋さん)
以上を踏まえてベストだと思える方法を用意しました
↓
![Page 16: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/16.jpg)
ビルボードはこうするがベスト!(と現時点では思う方法)
厚さゼロの cube を使用、Shader を Unlit/Transparent に
↓
![Page 17: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/17.jpg)
改良コード(該当 cube に適用)
// public メンバ変数m_camera は不要なので廃止
function Update () {
transform.rotation = Camera.main.transform.rotation;
transform.rotation *= Quaternion.Euler(180, 180, 0); // 向き調整
// cube ではなく、plane に適用するなら (90, 180, 0)
}
※もっといい方法をご存知の方がいらっしゃれば@kurisaka_konabe まで
![Page 18: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/18.jpg)
(時間が余ったので、
エレベーターアクションチームが制作上でハマったところ、失敗談
等を語る...
SVN のトラブルにハマる
3Dモデルのインポートにハマる
発射弾の謎消失にハマる
などなど…)
![Page 19: 20121208 unityhack billboard](https://reader036.vdocuments.site/reader036/viewer/2022062514/5599b2891a28abe30b8b458c/html5/thumbnails/19.jpg)
終わり
ご清聴有難う御座いました