unityを使用したスマートフォン開発事例...
DESCRIPTION
「ダイキンCGユーザー事例セミナー2012 秋」でのUnityを用いたスマートフォン開発事例紹介の資料です。TRANSCRIPT
![Page 1: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/1.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
Unityを使用した スマートフォンゲーム開発事例
ギルティドラゴンのアートワーク
![Page 2: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/2.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
株式会社サイバーコネクトツー
アーティスト 杉上 哲也
テクニカルアーティスト 松尾 隆志
![Page 3: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/3.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
株式会社サイバーコネクトツー
福岡県福岡市博多区博多駅前1丁目
東京都品川区大井1丁目
平成8年2月16日
173名
40,000,000円
家庭用ゲームソフト企画・開発
商号
本社
東京スタジオ
設立日
従業員数
資本金
事業内容
❖ 会社概要
page.3
![Page 4: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/4.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ アジェンダ
page.4
14:40 ▼
14:45 はじめに (5分)
14:45 ▼
14:50 ギルティドラゴンの開発概要 (5分)
14:50 ▼
15:25 ギルティドラゴンのアートワーク (35分)
15:35 ▼
15:40 おわりに (5分)
15:25 ▼
15:35 開発上の問題点と解決方法 (10分)
![Page 5: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/5.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
ギルティドラゴンの 開発概要
page.5
![Page 6: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/6.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.6
![Page 7: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/7.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ ギルティドラゴンで目指したこと
page.7
1 スマートフォンの常識を超える 圧倒的なビジュアル
2 iPhone4レベルの スペックで快適に動く軽さ
3 手軽で病みつきになるゲーム性
4 MMOライクな キャラクタカスタマイズ
5 iOS/Android同時リリース
![Page 8: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/8.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 初期の企画
当初はインフィニティブレード系のハイエンドを想定
ヘビーユーザー向けになりすぎてしまう
page.8
![Page 9: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/9.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 最終的な企画
ストレスの溜まらないゲームとして調整
page.9
![Page 10: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/10.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 最終的な企画
page.10
MMOライクなキャラクタカスタマイズ
![Page 11: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/11.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ Unityを選んだ理由
page.11
1 短期開発でクオリティも出したい
2 絵を出すまでが簡単
3 モバイルへの対応
自分たちの持ち味(CC2らしさ)を Unityでどうやって活かすか
![Page 12: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/12.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 開発の流れ
page.12
2011年 11月
2012年 2月 10月
運営 開発 検証
3ヶ月
10月 9日 : Ver1.0.0 配信開始
10月22日 : iOS Ver1.0.1 配信開始 Android Ver1.0.2 配信開始
・・・
7月
3ヶ月
調整期間
5ヶ月
![Page 13: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/13.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 開発環境
開発機材
プログラマはMacベースで開発
アーティストはWindowsベースで開発
Unity 3.5.6
常に最新のバージョンにて開発
3dsMax 2011
キャラクタ、背景、UI、アニメーション作成 など
SmartSVN
コード、リソースはSubversionで管理
page.13
![Page 14: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/14.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ プロジェクト構成
プロデューサー/ディレクター : 1名
アートディレクター : 1名
ゲームデザイナー : 1名
アーティスト : 3~6名 (時期により変動) 管理の1名が固定、残りの人数は変動
モデル/デザインの多くは外部会社様に委託
クライアントプログラム : 2~4名 (時期により変動)
サーバープログラム : 2~3名 (時期により変動)
テクニカルアーティスト : 1名
サウンド : 1名
page.14
計12~18名
![Page 15: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/15.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
ギルティドラゴンの アートワーク
![Page 16: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/16.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
y Unit
背景モデル
キャラモデル
モーション
カメラ
エフェクト
シェーダー
組み上げ
❖ アートワーク概要
page.16
3dsMax
キャラモデル
背景モデル
デモ
![Page 17: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/17.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ キャラクタモデル:概要
キャラメイクを行うため分割で作成
顔、髪、上半身、下半身、追加パーツ
page.17
![Page 18: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/18.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.18
髪パーツ
500~2000 ポリゴン
上半身パーツ
1500~2000 ポリゴン
顔パーツ
500~1000 ポリゴン
下半身パーツ
1500~2000 ポリゴン
モデル全体で 3500~7000 ポリゴン
各パーツごとに 256 px×256 px
のテクスチャ 1枚
パーツ概要
+武器パーツ
1000 ポリゴン以内
+追加パーツ
500~2000 ポリゴン
![Page 19: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/19.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.19
髪パーツ : 約70個
髪色違いを含む
顔パーツ : 約70個
眼の色違いを含む
上半身パーツ : 約20個
男女合計
下半身パーツ : 約20個
男女合計
武器パーツ : 約60個
男女兼用
追加パーツ : 約10個
男女兼用
※ 個数はローンチ時のものです
![Page 20: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/20.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ キャラクタモデル:揺れもの
揺れもの
Unityで設定
CharacterJoint
ボックス型のコライダ
カプセル型のコライダ
モデルのボーンに設定
設定
シンプルな構造
破綻しないように
page.20
![Page 21: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/21.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ キャラクタシェーダー:概要
ランプシェードとリムライトの組み合わせ
4パターン作成
page.21
![Page 22: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/22.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ キャラクタシェーダー:作成フロー
アーティスト側で大まかに作ったものを最適化
1つのシェーダーをUnityのインスペクタ上で調整
プログラム側でシチュエーションに合わせて適用
page.22
![Page 23: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/23.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ エフェクト:エフェクト概要
Shuriken
Unityのパーティクル システム
アニメーション
3dsMaxから モーションデータを出力
スクリプトでの拡張
メッシュの3軸スケール
メッシュのビルボード対応
page.23
![Page 24: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/24.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.24
エフェクト例
![Page 25: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/25.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.25
エフェクト例
![Page 26: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/26.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.26
エフェクト例
![Page 27: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/27.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.27
エフェクト例
![Page 28: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/28.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 背景:バトル用背景概要
バトル用の背景
1種類×4パターン
闘技場
昼、夕、夜、雷雲
page.28
![Page 29: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/29.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.29
約 7500 ポリゴン
テクスチャ 4枚
ライトマップ 1枚
(512 px×512 px)
バトル用背景
![Page 30: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/30.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.30
バトル用背景
![Page 31: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/31.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 背景:冒険用背景概要
冒険用の背景
4種類×3パターン
街、草原、森林、荒野
昼、夕、夜
page.31
![Page 32: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/32.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.32
約 1500 ポリゴン
テクスチャ 1枚
(2048 px×1024 px)
冒険用背景
![Page 33: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/33.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.33
冒険用背景
![Page 34: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/34.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ キャラクタアニメーション:概要
まずは3dsMax上でのアニマティクス
目指すべきクオリティラインの設定を行う
ほとんどの動きを決定する
3dsMax上で作成したアニメーションをUnityへ
アニメーションをカットごとに出力
ボーンのみのデータ
page.34
![Page 35: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/35.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.35
3dsMax アニマティクス例
![Page 36: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/36.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.36
3dsMax アニマティクス例
![Page 37: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/37.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ カメラアニメーション:概要
カメラアニメーションをFBXで出力
通常FBXではカメラアニメーションは出力できない
ボックスにアニメーションを移して出力
社内で専用のスクリプトを作成
ボタンひとつでカメラアニメーションを出力できる
3dsMax(出力用)、Unity(入力用)の2種類
page.37
![Page 38: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/38.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ Unity上での組み立て
インスペクタ上で組み立て
Unityのインスペクタ上で設定
モーション、モデル、エフェクト、 トレイルなどを登録
アニメーション時に呼び出す
確認用シーンで再生、確認
page.38
![Page 39: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/39.jpg)
(C) .hack Conglomerate (C) 2012 NBGI page.39
バトル例
![Page 40: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/40.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
開発上の 問題点と解決方法
![Page 41: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/41.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 開発における問題点
page.41
1 カメラアニメーションのインポート
2 外部データ(AssetBundle)の作成方法
3 描画負荷
4 解像度
5 iOS/Android固有の問題
![Page 42: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/42.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ カメラアニメーションのインポート
2種類のツールを作成
3dsMaxでワンボタンで出力するツール
Unityでのインポート時に設定するツール
ダミーのボックスを利用
キーフレームアニメーション、パース、クリッピング情報を ダミーに格納しておく
page.42
カメラアニメーションを簡単にFBXとして 出力してUnityに読み込みたい! PROBLEM
問題
![Page 43: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/43.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 外部データの作成方法
ツールを作成
シンプルなエクスポーター
選択したフォルダ内や ファイルをエクスポートする
カードやモデルの 外部データ化に利用
page.43
Unity上で外部データ(AssetBundle)を 簡単にエクスポートできない! PROBLEM
問題
![Page 44: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/44.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 描画負荷
こまめなリダクション作業
各端末で繰り返しチェック
モバイルシェーダーの利用
シェーダーの軽量化
モデルやテクスチャの軽量化
コリジョンの設定を変える
page.44
ハイクオリティな表現は描画負荷が大きい! PROBLEM
問題
端末 チェック
リダクション
ビルド
![Page 45: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/45.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 解像度
iPhone4基準で 色と解像度を決定
960px×640px を基準に
拡縮処理と黒ベタでの 塗りつぶしで対応
page.45
iOSとAndroidは解像度が違う! PROBLEM
問題
960×640 800×480
![Page 46: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/46.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ iOS/Android固有の問題
端末ごとのチェックが必要
iOS/Android端末ごとの個別のチェック
GPUごとのチェックが必要
表示が崩れる、クラッシュする など
こまめな端末チェックが重要!
page.46
iOSとAndroid同時リリース!? PROBLEM
問題
![Page 47: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/47.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
おわりに
![Page 48: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/48.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ まとめ
初めてのスマートフォン開発でも 自分たちの持ち味を活かすことに成功!
3dsMaxを利用したワークフローをスマートフォンへ
反省点
Androidへの対応
早い段階からのチェックや検証
内部データ(アプリ内)と外部データ(AssetBundle)
外部データの読み込みに時間がかかる
内部データと外部データのバランス
page.48
![Page 49: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/49.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
❖ 感謝
Unity様には色々とご相談に乗っていただき、 ギルティドラゴンの助けとなりました
Facebookのグループ 「Unityユーザー助け合い所」はとても参考に なりました http://www.facebook.com/groups/unityuserj/
この場を借りてお礼申し上げます
page.49
![Page 51: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/51.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
なお、本講演の内容に関する記事が
月刊 CGWORLD 12月号 (2012年11月9日 発売)
に掲載されております!
![Page 52: Unityを使用したスマートフォン開発事例 ~ギルティドラゴンのアートワーク~](https://reader033.vdocuments.site/reader033/viewer/2022052506/557d7065d8b42a30708b4dee/html5/thumbnails/52.jpg)
(C) .hack Conglomerate (C) 2012 NBGI
ご清聴ありがとうございました