【#TechBuzz】第13回Unity開発技術勉強会 週末プログラミングで作るカジュアルゲーム　～シューティング編～／Unity 4 の最適化とか http://atnd.org/events/36077 の発表資料です。

1. 【#TechBuzz】
第13回Unity開発技術勉強会
>> 0 >> 1 >> 2 >> 3 >> 4 >>

2. 週末プログラミング
で作る
カジュアルゲーム
10 シューティング編
のひな
>> 0 >> 1 >> 2 >> 3 >> 4 >>

3. >> 0 >> 1 >> 2 >> 3 >> 4 >>

4. PICTURE
START
>> 0 >> 1 >> 2 >> 3 >> 4 >>

5. >> 0 >> 1 >> 2 >> 3 >> 4 >>

6. 8
>> 0 >> 1 >> 2 >> 3 >> 4 >>

7. 7
>> 0 >> 1 >> 2 >> 3 >> 4 >>

8. 6
>> 0 >> 1 >> 2 >> 3 >> 4 >>

9. 5
>> 0 >> 1 >> 2 >> 3 >> 4 >>

10. 4
>> 0 >> 1 >> 2 >> 3 >> 4 >>

11. 3
>> 0 >> 1 >> 2 >> 3 >> 4 >>

12. 2
>> 0 >> 1 >> 2 >> 3 >> 4 >>

13. >> 0 >> 1 >> 2 >> 3 >> 4 >>

14. (=・ω・）ノ＜はじめるよ∼
>> 0 >> 1 >> 2 >> 3 >> 4 >>

15. じこしょうかい(｀・ω・´)
名前：饒平名秀成（のひな）
職種：おもにエンジニア
– 2009.10 ~ 2013.02
– KLab株式会社
– 2013.03 ~
– 移動体付随情報表示装置株式会社(予定)
>> 0 >> 1 >> 2 >> 3 >> 4 >>

16. 今日話すこと
• 開発事例
– シューティングゲームのはなし
• Shooting Star Shooter
• Bonsai Shooting
今回も初学者∼中級者向け
細かな開発Tipsまとめ
>> 0 >> 1 >> 2 >> 3 >> 4 >>

17. こんせぷと
• 前回のレーシングゲームの開発の合間に開発
– モデリングデータなどの素材の制作待ち期間にて。。。
• デザイナに頼らず、開発者ひとりで制作できるもの
• 片手間で開発できるボリューム感
• でも、それっぽく見えるようにする！(｀･ω･´)ゞ
>> 0 >> 1 >> 2 >> 3 >> 4 >>

18. 制作期間
• 各アプリ夜間/週末の制作で、それぞれ２週間程度
– 今回のプレゼンは２週間で制作するための手抜きポ
イントのまとめとなります。
>> 0 >> 1 >> 2 >> 3 >> 4 >>

19. まず、
>> 0 >> 1 >> 2 >> 3 >> 4 >>

20. >> 0 >> 1 >> 2 >> 3 >> 4 >>

21. 最初の子
>> 0 >> 1 >> 2 >> 3 >> 4 >>

22. Shooting Star Shooter
• 画面に現れるキューブを
撃ち落としていくゲーム
• タップをするだけ、カジ
ュアルシューティング♪
>> 0 >> 1 >> 2 >> 3 >> 4 >>

23. ゲームの基本ルール
• 画面内に現れるオブジェクトをタップして弾を撃つこと
で、ターゲットを破壊する
• 射出される弾はBulletSetting画面で設定した弾が飛ぶ
– タップとフリックで、それぞれ２種類のパターン
• 制限時間内にターゲットを撃ち落とした数に応じてスコ
アを決定
>> 0 >> 1 >> 2 >> 3 >> 4 >>

24. 手抜きポイント①
• 一切モデリングしない！
– 利用するモデルデータはすべてプリミテ
ィブのCube
>> 0 >> 1 >> 2 >> 3 >> 4 >>

25. 手抜きポイント②
• テクスチャも描かない！
– ペイントソフトのフィルタ機能を使う
• 今回はGimpを利用
– Photoshopを持っていなかったので
>> 0 >> 1 >> 2 >> 3 >> 4 >>

26. 手抜きポイント②
• テクスチャも描かない！
– テクスチャの作り方
• まず256×256の画像を用意する
• これを下塗り用のフィルタでなんか
テキトーに塗りつぶす
• 以上！
>> 0 >> 1 >> 2 >> 3 >> 4 >>

27. 手抜きポイント②
• テクスチャも描かない！
– 実際にゲームで利用したテクスチャはこ
の３つだけ
>> 0 >> 1 >> 2 >> 3 >> 4 >>

28. 手抜きポイント②
• テクスチャも描かない！
– テクスチャの使い方
• Cubeオブジェクトに独自のマテリア
ルを作成する
• シェーダを設定
– 今回はSelf-Illumin/Difuseを利用
• 先ほどの画像の中から好きなものを
選んで貼り付ける
• MainColorの設定をテキトーにいじる
>> 0 >> 1 >> 2 >> 3 >> 4 >>

29. 手抜きポイント②
• テクスチャも描かない！
– 作成結果
>> 0 >> 1 >> 2 >> 3 >> 4 >>

30. 手抜きポイント③
• 演出も手を抜く！
– オブジェクトの演出は基本的に以下の２つ
のみ
• Trail Renderer
• Glow image effect
– TrailはUnityデフォルトのものよりもunity
tool studioさんのCurve Trail($50)を利用し
たほうが綺麗になる
• デフォルトのものだと移動速度が速い
場合にカクつく
>> 0 >> 1 >> 2 >> 3 >> 4 >>

31. 手抜きポイント③
• 演出も手を抜く！
– 衝突時のエフェクトもありものを持ってき
て使うだけ
• 爆発物は(個人的に)定番のこれ
– Unity TechnologiesのDetonator
Explosion Framework(Free!)
• 爆発物の表現はだいたいこれを使って
おけばおｋ！
>> 0 >> 1 >> 2 >> 3 >> 4 >>

32. 手抜きポイント④
• GUIはすべてフォント！
– 絵とか使わない！描かない！！
– フォントはgau+さんのOver Driveを使用
• ちなみに、前回のレーシングゲームもこ
のフォント
• フレーム等のアトラスもすべてありもの
– 今回はNGUIのデフォルトで入っているSciFi
Atlasを利用
>> 0 >> 1 >> 2 >> 3 >> 4 >>

33. エレメントの移動の仕方
• 基本パターンは以下
– 動かない
– 直線的に飛ぶ
– 揺れながら飛ぶ(Sin曲線)
– ターゲットに近づく
– ターゲットから離れる
– ターゲットのまわりを周回する
• これらのパターンに移動速度や回転速度のパラメータを付随させる
>> 0 >> 1 >> 2 >> 3 >> 4 >>

34. エレメントの移動の仕方
• 動作パターンの組み合わせで挙動を表現
>> 0 >> 1 >> 2 >> 3 >> 4 >>

35. 弾の挙動
• プレイヤーが操作した位置にあるエレメン
トをターゲットとする
• タップかフリックかに応じて射出する弾を
選定
• 選定した弾の情報に応じて挙動を変更
>> 0 >> 1 >> 2 >> 3 >> 4 >>

36. 弾の挙動
• 入力の判定方法
– まず考えられる方法
Vector2 tapPosition = Input.GetTouch(0).position;
Ray ray = Camera.mainCamera.ScreenPointToRay(tapPosition);
RaycastHit hit;
if(Physics.Raycast(ray, out hit, Mathf.Infinity)){
return hit.collider.gameObject;
}
– 要は入力した座標を取得して、その下にオブジェクトが存在しているか
どうかを判定する
>> 0 >> 1 >> 2 >> 3 >> 4 >>

37. 弾の挙動
• 入力の判定方法
– この方法が「あり」かどうか
• 「あり」な場合もある
• ちゃんと入力した”ピッタリの”座標化にオブジェクトが存在してい
た場合
– 「だめ」な場合
• オブジェクトが入力した位置から1ピクセルでもズレているとアウ
ト
– かなりシビアな判定をかけるため、実際問題誤差はかなり大きい
– 特にカメラからの距離があり、描画サイズが小さい場合に顕著
>> 0 >> 1 >> 2 >> 3 >> 4 >>

38. 弾の挙動
• 入力の判定方法
– なので、厳密な判定が取れなかった場合はある程度の誤差も認める
foreach(GameObject target inGameObject.FindGameObjectsWithTag("Element")){
Vector2 screenPosition =
Camera.mainCamera.WorldToScreenPoint(target.transform.position);
if((tapPosition - screenPosition).magnitude <= 50f){
return target;
}
}
– 入力した座標とオブジェクトの座標の誤差が一定範囲内であれば判定
を認める
>> 0 >> 1 >> 2 >> 3 >> 4 >>

39. 弾の挙動
• どの弾で撃つか
– タップかフリックかの判定
if(Input.GetTouch(0).phase ==TouchPhase.Began){
type = BULLET_TYPE.TAP;
}else if(Input.GetTouch(0).phase ==TouchPhase.Moved){
type = BULLET_TYPE.FLICK;
}
– タッチパネルの入力フェーズがBegan(触り始め)かMoved(移動中)かで
判定する
>> 0 >> 1 >> 2 >> 3 >> 4 >>

40. 弾の挙動
• 弾の動き方
– 基本的にはエレメントの挙動と同じ
• 直線的に飛ぶか、揺れながら飛ぶか、回転しながら飛ぶか、など
– ただし、移動方向はプレイヤーの入力に合わせて設定する
• ターゲットを標的として飛ぶようにする
• 弾の設定に応じてホーミングするかどうかも設定
– 特殊な弾は個別にコーディング
• 一定距離進んでから散弾する、ターゲットを破壊すると自動で次の
ターゲットを目掛けて飛ぶ、など
>> 0 >> 1 >> 2 >> 3 >> 4 >>

41. ゲームの動作画面
※細かな挙動は実際に遊んで確認してみてください
>> 0 >> 1 >> 2 >> 3 >> 4 >>

42. 次は
>> 0 >> 1 >> 2 >> 3 >> 4 >>

43. >> 0 >> 1 >> 2 >> 3 >> 4 >>

44. この子
>> 0 >> 1 >> 2 >> 3 >> 4 >>

45. Bonsai Shooting
• 盆栽をひっぱたいて枝
の伸び方を調整するゲ
ーム
• もはやシューティングゲ
ームなのか、さては
て…
>> 0 >> 1 >> 2 >> 3 >> 4 >>

46. ゲームの基本ルール
• ゲームを始めると植物が成長を始める
• 成長し切ると枝先が発光するので、それを時間内にタッ
プする
• タップした枝はさらに成長する
• ゲーム終了時点での植物の成長度合いがゲームのスコア
となる
>> 0 >> 1 >> 2 >> 3 >> 4 >>

47. 手抜きポイント①
• ここでもモデリングしない
– モデルデータはすべて自動生成
• アルゴリズムは後述
>> 0 >> 1 >> 2 >> 3 >> 4 >>

48. 手抜きポイント②
• やっぱりテクスチャも描かない
– Shooting Star Shooterと同じ方法でテクスチャ画像の生成をする
• 以下が植物の幹のテクスチャ
>> 0 >> 1 >> 2 >> 3 >> 4 >>

49. 手抜きポイント②
• やっぱりテクスチャも描かない
– 背景に流れているテクスチャは、
Shooting Star ShooterでCubeオブジェ
クトに利用したテクスチャとまったく同
じものを再利用
– MADFINGERさんが提供している
ShadowGunのサンプルレベルに同封さ
れている”MADFINGER/Environment/Scroll 2
Layers Multiplicative - Skybox”というシェ
ーダをSkyboxのマテリアルに利用
>> 0 >> 1 >> 2 >> 3 >> 4 >>

50. 手抜きポイント③
• GUIもすべてフォント
– 衡山毛筆(こうざんもうひつ)フォントと
いう行書体フォントがロイヤリティフリ
ーで利用できるため、そちらを利用
>> 0 >> 1 >> 2 >> 3 >> 4 >>

51. 手抜きポイント④
• 植物の葉・花弁の表現はパーティ
クル
– 各植物に対し、色や動き方のパラメータ
を調整し、それっぽく見えるようにする
>> 0 >> 1 >> 2 >> 3 >> 4 >>

52. 手抜きポイント⑤
• タップ時の演出も手を抜く
– こちらも定番のDetonator Explosion
Framework
– 色とパラメータのみ調整し利用
• 尚、入力判定はShooting Star Shooterと同じ方
法をとる
>> 0 >> 1 >> 2 >> 3 >> 4 >>

53. 手抜きポイント⑥
• BGMは雅楽
– 古典音楽は基本的に著作権フリー
– メインのBGMは「越天楽」という曲を
利用している
• SE音源なども著作権フリーの音
※山形県尾花沢市HPより
源を利用
>> 0 >> 1 >> 2 >> 3 >> 4 >>

54. 植物生成アルゴリズム
• 基本的にはL-Systemを簡易的に
模擬したかたち
– 「L-system（エルシステム、Lindenmayer
system）は形式文法の一種で、植物の成長プロ
セスを初めとした様々な自然物の構造を記述・
表現できるアルゴリズムである」
※Wikipediaより
– 自動生成系のアルゴリズムでは定番
>> 0 >> 1 >> 2 >> 3 >> 4 >>

55. 植物生成アルゴリズム
• 具体的な作り方
– モデルデータはTrailで表現する
• メッシュデータのないゲームオブジ
ェクトにTrailを貼り付け、オブジェ
クトを移動させることで、幹や枝の
表現をする
• この方法だとメッシュをTrail
Renderer側で自動生成してくれるの
で楽。
>> 0 >> 1 >> 2 >> 3 >> 4 >>

56. 植物生成アルゴリズム
• 具体的な作り方
– 植物生成の流れ
• 枝の伸びる方向・長さを指定し、そこに向かっ
て伸ばす
• 枝が伸びきったら、これ以上成長させるかどう
かの判定
– 成長させる場合は再度伸びる方向・長さを設定し、成
長
» このとき、ランダムで分岐をかけ、必要であれば
子オブジェクトとして新しい枝を枝分かれさせる
– 成長させない場合はこれで終了
>> 0 >> 1 >> 2 >> 3 >> 4 >>

57. 植物生成アルゴリズム
• 具体的な作り方
– 前述のアルゴリズムをベースに各パター
ンの植物に対して以下のパラメータを定
義
• 最大の枝分かれ回数
• 伸びる方向の傾向(どれだけ天を目指すか)
• 成長速度
• 枝分かれする確率
• 成長度合いの減衰率
– など
>> 0 >> 1 >> 2 >> 3 >> 4 >>

58. ゲームの動作画面
※細かな挙動は実際に遊んで確認してみてください
>> 0 >> 1 >> 2 >> 3 >> 4 >>

59. とまぁ、
>> 0 >> 1 >> 2 >> 3 >> 4 >>

60. こんな感で。
>> 0 >> 1 >> 2 >> 3 >> 4 >>

61. 今回もざっくり詰め合わせでした。
>> 0 >> 1 >> 2 >> 3 >> 4 >>

62. 以上です！
>> 0 >> 1 >> 2 >> 3 >> 4 >>