20121208 unityhack billboard

19
※講演中、後に、より良い方法を提案頂いたので追記しました ビルボードについて ~関西 Unity 勉強会 & VS ハッカソン倶楽部 合同勉強会~ 2012 12 08 エレベーターアクションチーム 栗坂こなべ(@kurisaka_konabe)

Upload: konabe-kurisaka

Post on 06-Jul-2015

2.222 views

Category:

Documents


0 download

DESCRIPTION

関西Unity勉強会 & VSハッカソン倶楽部 合同勉強会 2012/12/08 資料 ビルボードについて エレベーターアクションチーム 栗坂こなべ(@kurisaka_konabe)

TRANSCRIPT

Page 1: 20121208 unityhack billboard

※講演中、後に、より良い方法を提案頂いたので追記しました

ビルボードについて

~関西 Unity 勉強会 & VS ハッカソン倶楽部 合同勉強会~

2012 年 12 月 08 日

エレベーターアクションチーム

栗坂こなべ(@kurisaka_konabe)

Page 2: 20121208 unityhack billboard

今日のお題

1.拙作エレベーターアクションの作り方

2.ビルボードについて

Page 3: 20121208 unityhack billboard

1.エレベーターアクションの作り方

First Person Controller を使う

Assets→ImportPackage→Character Controller

これだけで FPS が作れる!

WASD キーで移動、スペースで JUMP!

あとは適当に MAP を作るだけ

(スマートに Unity で実演する...しませんでした)

Page 4: 20121208 unityhack billboard

エレベーターの実装

上下に動く床を作る

アニメーション機能 or スクリプトによる制御

今回はスクリプトで実装

Page 5: 20121208 unityhack billboard

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

FPS サンプル エレベーターアクション Web アプリ URL:https://dl.dropbox.com/u/98894748/WebElevator/WebPlayer/WebPlayer.html

※Chrome ユーザーの方は注意

DropBox 上にあると、無限インストール要求に陥ります

url 横の盾マークをクリックして、「読み込む」をクリックしてください

Page 7: 20121208 unityhack billboard

2.ビルボードについて何故エレベーターチームがビルボードについて語るの?

おっぱいチーム発表のゲーム実演をみて閃く!

「ん…この敵ビルボードにでているフチは?

これ、薄くした cube に貼っているな!」

過去にこれについて試行錯誤したことがあるので解説

Page 8: 20121208 unityhack billboard

ビルボードの様々な方式

A) 薄くした cube に貼る(フチが出る)

B) 厚さゼロにした cube に貼る(なんか暗い)※

C) plane に貼る

D) なんかテライン?のやつ(バンナム本の揺れる草)

E) NGUI (有料プラグイン?らしい)

C)の plane でやってみます※講演中に解決案を頂いたので後述

Page 9: 20121208 unityhack billboard

サンプル 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

※追加補足(ビルボードを透過させたい場合)

透過 png をマテリアルにあてて、Shader も透過に設定する

※後述するが、Unlit/Tranparent の方が尚良い

Page 11: 20121208 unityhack billboard

カメラを注視する方法の問題点

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

図解 カメラオブジェクト注視式

(画面端のビルボードに余計なパースが付く!)

ゲーム画面 上からみたとこ

Page 13: 20121208 unityhack billboard

改良版 画面正面を向く

(※講演中にもっといい方法が提案されたので後述します)

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

図解 改良版(画面に対して正面)

ゲーム画面 上からみたとこ

Page 15: 20121208 unityhack billboard

講演中、後に提案頂いた内容

・厚みゼロの cubeオブジェクトだと暗くなる問題

→shader を Unlit/Transparent にすれば暗くならない

・ビルボードに画面正面を向かせるコード→transform.rotation = Camera.main.transform.rotation;

でイケる(黄色本の高橋さん)

以上を踏まえてベストだと思える方法を用意しました

Page 16: 20121208 unityhack billboard

ビルボードはこうするがベスト!(と現時点では思う方法)

厚さゼロの cube を使用、Shader を Unlit/Transparent に

Page 17: 20121208 unityhack billboard

改良コード(該当 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

(時間が余ったので、

エレベーターアクションチームが制作上でハマったところ、失敗談

等を語る...

SVN のトラブルにハマる

3Dモデルのインポートにハマる

発射弾の謎消失にハマる

などなど…)

Page 19: 20121208 unityhack billboard

終わり

ご清聴有難う御座いました