2012/9/15に開催された「パンダの会 その七」でのプレゼン資料です。

1. Unityでつくる
はじめてのPONG
2012/9/15 パンダの会 その七
HTML5-West.jp kadoppe
1

2. 自己紹介
• 名前：門脇 恒平 (28) @kadoppe
• 職業：エンジニア
Rails, (Java¦Coffee)Script, Objective-C
• 肩書き：
HTML5-West.jpコアメンバー/ShareWis Inc. CTO
• 趣味：ポッドキャスト/ Ust配信
2

3. 本日の資料
• プレゼンスライド
• SlideShare: http://www.slideshare.net/kadoppe
• プロジェクト
• http://kadoppe.com/downloads/pong.zip
3

4. Chapter 1:
Unityとはなんぞや。
4

5. 5

6. Unityとは？
• 3Dゲーム開発ツール
• スローガン：「ゲーム開発を民主化する！」
シンプルで
高度な知識が必要
わかりやすい
民主化
多額の出費 お手頃価格
6

7. Unityの２つの側面
• 3Dゲーム統合開発環境
• 3Dコンテンツをインタラクティブに編集
• Windows, Mac OS Xで動作
• ゲームエンジン
• マルチプラットフォーム
• Windows, Mac OS X, Webブラウザ, iOS, Android
7

8. プログラミング言語
JavaScript or C#
Web屋さんだったらJavaScriptがオススメ？
8

9. 気になるお値段
無印 Pro
Unity
無料 ￥127,500
(Win, Mac, Web)
+ iOS ￥34,500 ￥127,500
+ Android ￥34,500 ￥127,500
趣味で使う分には無料で十分！
9

10. サンプルゲーム
10

11. Chapter 2:
Unityでつくる
はじめてのPONG
11

12. ライブコーディング
といってもコーディングは少ないです
12

13. 何をつくろうか考えた
ゲームをほとんどつくったことがない。
シンプルなゲームしか多分つくれない。
シンプル＋ゲーム = PONG !?
13

14. これからつくるもの
• PONG（ポン）
• 1972年に登場したシンプルな卓球ゲーム
出典：http://www.justpushstart.com/2012/02/atari-wants-you-to-make-pong-for-ios/
出典：http://gigazine.net/news/20061023_plasma_pong/
14

15. 開発手順
• 目標：PONG（一人遊び用）の完成
• Step 1：設計
• Step 2：パーツの配置
• Step 3：カメラと光源の設定
• Step 4：ボールを動かす
• Step 5：ラケットを動かす
• Step 6：ゴールの検出
• Step 7：Web用に書き出す
15

16. 準備：Unityの画面レイアウト
インスペクタ
オブジェクトの
様々な値を設定
ヒエラルキー プロジェクト
ゲームの世界に配置されている ゲームに必要な
オブジェクトの階層構造を表示 ファイルを管理・表示
16

17. Step 1
設計
壁
ボール ラケット
ゴール ゴール
ラケット
壁
17

18. Step 2
パーツの配置
• あらかじめ用意されている基本的な形状を利用
• 位置・角度・大きさを指定していく
Sphere (球体) 直方体 (Cube)
Cube・Sphereを使ってパーツをどんどん配置
18

19. Step 3
カメラと光源の設定
• なんだか暗い
• アングルもよくない
カメラ（プレイヤーの視点）の移動
Directional Light（線光源）の配置
19

20. Step 4
ボールを動かす
• 手順１：ボールに物理特性を設定する
• 手順２：ボールに初速を加える
• 手順３：ボールが跳ね返るようにする
20

21. Step 4 手順１：ボールに物理特性を設定する
• 物体に何かしらの運動をさせたい時は物理特性が必要
ボールに物理特性「Rigidbody（剛体）」を設定
21

22. Step 4 手順２：ボールに初速を加える
• ボールは力を与えないと動かない
• スクリプトからボールに対してさまざなま作用を与え
ることが可能
rigidbody.AddForce( // 力を加えるメソッド
(transform.forward + transform.right) * 10, // 力の向きと強さ
ForceMode.VelocityChange // 力の与え方
);
JavaScriptでボールに初速を与えてみる
22

23. Step 4 手順３：ボールが跳ね返るようにする
• ボールが跳ね返らない
ぺた・・
ボールや壁に跳ね返るような「Material（材質）」を設定
23

24. Step 5
ラケットを動かす
• カーソルキー入力でラケットに力を与える
rigidbody.AddForce(
transform.right * Input.GetAxisRaw(“Horizontal”) * 1000.0,
ForceMode.Impulse
);
ラケットに物理特性「Rigidbody（剛体）」を設定
JavaScriptでキー入力をもとにラケットに力を与えてみる
24

25. Step 6
ゴールの検出
• ボールとゴールの衝突→ゴール
• せめてボールを中央に戻したい
function OnCollisionEnter(info : Collision) {
// ボールが何かとぶつかった時の処理
}
ボールと壁の衝突を検出
衝突検出後、ボールを中央にワープさせる
25

26. Step 6
Web用に書き出す
• ２通りの出力方法
• どちらもブラウザにプラグインが必要
Unity Flash
26

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

28. さらに学びたい方へ
• はじめての 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

29. まとめ
• 3Dゲーム開発ツール「Unity」
• 使いやすい3Dコンテンツエディタ
• マルチプラットフォーム
• PONG（のようなもの）を実際につくってみた
29

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