2012/9/15 パンダの会 その七HTML5-West.jp kadoppe

UnityでつくるはじめてのPONG

1

自己紹介•名前：門脇 恒平 (28) @kadoppe

•職業：エンジニアRails, (Java|Coffee)Script, Objective-C

•肩書き：HTML5-West.jpコアメンバー/ShareWis Inc. CTO

•趣味：ポッドキャスト/ Ust配信

2

本日の資料

•プレゼンスライド

• SlideShare: http://www.slideshare.net/kadoppe

•プロジェクト

• http://kadoppe.com/downloads/pong.zip

3

Chapter 1:

Unityとはなんぞや。

4

5

Unityとは？•3Dゲーム開発ツール

•スローガン：「ゲーム開発を民主化する！」

6

高度な知識が必要

多額の出費

シンプルでわかりやすい

お手頃価格

民主化

Unityの２つの側面• 3Dゲーム統合開発環境

• 3Dコンテンツをインタラクティブに編集

•Windows, Mac OS Xで動作

•ゲームエンジン

•マルチプラットフォーム

•Windows, Mac OS X, Webブラウザ, iOS, Android

7

プログラミング言語

8

JavaScript C#or

Web屋さんだったらJavaScriptがオススメ？

気になるお値段

9

無印 ProUnity

(Win, Mac, Web)無料 ￥127,500

+ iOS ￥34,500 ￥127,500

+ Android ￥34,500 ￥127,500

趣味で使う分には無料で十分！

サンプルゲーム

10

Chapter 2:

UnityでつくるはじめてのPONG

11

ライブコーディング

12

といってもコーディングは少ないです

何をつくろうか考えた

13

ゲームをほとんどつくったことがない。

シンプルなゲームしか多分つくれない。

シンプル＋ゲーム = PONG !?

これからつくるもの•PONG（ポン）

• 1972年に登場したシンプルな卓球ゲーム

14

出典：http://gigazine.net/news/20061023_plasma_pong/出典：http://www.justpushstart.com/2012/02/atari-wants-you-to-make-pong-for-ios/

開発手順• 目標：PONG（一人遊び用）の完成

• Step 1：設計

• Step 2：パーツの配置

• Step 3：カメラと光源の設定

• Step 4：ボールを動かす

• Step 5：ラケットを動かす

• Step 6：ゴールの検出

• Step 7：Web用に書き出す15

準備：Unityの画面レイアウト

16

インスペクタオブジェクトの様々な値を設定

ヒエラルキーゲームの世界に配置されているオブジェクトの階層構造を表示

プロジェクトゲームに必要な

ファイルを管理・表示

設計

17

Step 1

壁

壁

ゴール ゴールボール

ラケット

ラケット

パーツの配置

18

Step 2

•あらかじめ用意されている基本的な形状を利用

•位置・角度・大きさを指定していく

Sphere (球体) 直方体 (Cube)

Cube・Sphereを使ってパーツをどんどん配置

カメラと光源の設定

19

Step 3

•なんだか暗い

•アングルもよくない

カメラ（プレイヤーの視点）の移動

Directional Light（線光源）の配置

ボールを動かす

20

Step 4

•手順１：ボールに物理特性を設定する

•手順２：ボールに初速を加える

•手順３：ボールが跳ね返るようにする

手順１：ボールに物理特性を設定する

21

Step 4

•物体に何かしらの運動をさせたい時は物理特性が必要

ボールに物理特性「Rigidbody（剛体）」を設定

手順２：ボールに初速を加える

22

Step 4

•ボールは力を与えないと動かない

•スクリプトからボールに対してさまざなま作用を与えることが可能

JavaScriptでボールに初速を与えてみる

rigidbody.AddForce( // 力を加えるメソッド (transform.forward + transform.right) * 10, // 力の向きと強さ ForceMode.VelocityChange // 力の与え方 );

手順３：ボールが跳ね返るようにする

23

Step 4

•ボールが跳ね返らない

ボールや壁に跳ね返るような「Material（材質）」を設定

ぺた・・

ラケットを動かす

24

Step 5

•カーソルキー入力でラケットに力を与える

JavaScriptでキー入力をもとにラケットに力を与えてみる

rigidbody.AddForce( transform.right * Input.GetAxisRaw(“Horizontal”) * 1000.0, ForceMode.Impulse );

ラケットに物理特性「Rigidbody（剛体）」を設定

•ボールとゴールの衝突→ゴール

•せめてボールを中央に戻したい

ゴールの検出

25

Step 6

ボールと壁の衝突を検出衝突検出後、ボールを中央にワープさせる

function OnCollisionEnter(info : Collision) { // ボールが何かとぶつかった時の処理}

•２通りの出力方法

•どちらもブラウザにプラグインが必要

Web用に書き出す

26

Step 6

Unity Flash

完成！

27

暗く・見づらい 見やすい・動く ブラウザで！

さらに学びたい方へ

•はじめての Unity | Developer [UNITY]http://japan.unity3d.com/developer/document/tutorial/my-first-unity/

• [書籍] Unity入門

•Unityユーザー助け合い所 https://www.facebook.com/groups/unityuserj/?bookmark_t=group

28

まとめ• 3Dゲーム開発ツール「Unity」

•使いやすい3Dコンテンツエディタ

•マルチプラットフォーム

• PONG（のようなもの）を実際につくってみた

29

おしまい！

30

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