リリース済みの『ドラゴンファング』に、 OPTPiX SpriteStudioを後乗せした ...

COPYRIGHT 2014 @ UNITY TECHNOLOGIES

株式会社ウェブテクノロジ・コム　　浅井　維新株式会社トイディア　　松田　崇志　　澤田　雅明

リリース済みの『ドラゴンファング』に、OPTPiX SpriteStudioを後乗せした事例

リリース済みの『ドラゴンファング』に、『OPTPiX SpriteStudio』を後乗せした事例

Unity x Toydea x WebTechnology

プレゼンター紹介

浅井 維新（Asai Yukiyoshi）株式会社ウェブテクノロジ・コム

セールス＆コミュニケーション部

『OPTPiX SpriteStudio』・『OPTPiX imesta』のマーケティングとセールスを担当。

昨年、セガのアーケード筐体 ブラストシティ を自室に搬入（クロネコヤマトが）。

念願のアーケード筐体導入にさぞや家内も大喜び、だと思ったんですがここで皆さんにお伝えしたいのは、いかに合意形成が大事なことなのか、それは会社でも家庭でも同じだということなのです。

本セッションの流れ

❖ OPTPiX SpriteStudio って？

❖ リリース済みの『ドラゴンファング』に　　　　　　　　　　　　　　　

『OPTPiX SpriteStudio』を後載せした事例

❖ OPTPiX SpriteStudio トピックス

❖ まとめ

OPTPiX SpriteStudio って？

➢ 超汎用2Dアニメーションツール

OPTPiX SpriteStudio って？

➢ 開発の背景○ コンソールゲーム開発会社の内製ツールが下地

○ 開発メンバーは主にコンシューマゲーム開発経験者

➢ ツールに込められた想い○ 2Dでの表現力を突き詰めたい

○ アニメーション構築の手間を減らしたい

○ 内製ツールを作る手間をゲーム開発に向けてほしい （建前）

Unity との歩み

Unity Asia BootCamp

Unite 2013 Tokyo

Unite 2014 Tokyo

Unity との歩み

Unity ✖ トイディア ✖ OPTPiX SpriteStudio

ゲーム演出パート強化のSS後載せ事例

株式会社トイディア

既に配信7ヶ月が経過している「ドラファン」の演出部分で、

「OPTPiX SpriteStudio」を後から導入しました。

特にドラマ部分の演出などは表現力が向上。エンジニアのコストを使わない、デザイナーのみでの完結を目指しました。この成果を発表したいと考えています。

本日のテーマ

● 過去の経緯● 導入のメリット● Unityでの問題● バージョンアップによる解決● カメラの問題● プライオリティの問題● まとめ

アジェンダ

【タイトル】 ドラゴンファング

【ジャンル】 本格ダンジョン探索RPG【対応OS】　　　iOS 6.0~ / Android4.0～【価格】 無料　※一部有料アイテムあり

【公式サイト】 http://dragon-fang.com/

「ドラゴンファング」 とは？

・ スマホ版の超本格ローグライクRPGの決定版！

・ Unity + NGUIで開発

おかげさまで120万DL突破!!

せっかくなので宣伝させてくださいｗ

そんなタイトル知らねーよ！って方も多いと思うので…

ぬくもり感あふれる王道RPGとして絶賛進化中！

各社さんのタイトルと続々コラボ開催中！

7月まで毎月あれこれタイトルとコラボ開催！

大人気ドット絵 RPG「勇者と1000の魔王」

GameBank 第一弾３D RPG「オービットサーガ」

３Dの王道RPG ２Dの王道RPG

夢のコラボレーション！

愛のあるコラボ！絶賛・募集中！

お気軽にお声がけください！

今回も、素敵なコラボが実現しました！

Unityを愛する全ての方へ！

ユニティちゃんコラボ決定！

新しいドラマシステムにより滑らかな演出！

ユニティちゃん公式にてシリアル配布予定！http://unity-chan.com/

ドラゴンファングのゲーム内で、シリアルを入力するだけ！

全てのプレーヤーが、ユニティちゃんをGet可能！

そんなリリース済みのゲームの演出部分を、

ガッツリとNGUIからSpriteStudioに変えてしまうという事。

そこに危険は無いのか？

それは暴挙ではないのか？

なにを狙ってそんなコストを出す判断に至ったのか？

■過去の経緯

実は配信前の研究時期から、SpriteStudioを検討していた。

→サンプルデータや、サンプルシーンを複数作り、

　　デザイナーもオペレーションに馴染んだかに見えた。

■過去の経緯

しかし！

■過去の経緯

結果として、導入を断念…

■過去の経緯

　【当時の問題点】

● 負荷問題

● プライオリティなど各種取り回しの悪さ

● Flashでいうムービークリップが無く、非効率

最終的にはUnity+NGUIのみでの必要十分な仕組みを選定してリリース。

■導入のメリットとは？

・デザイナー完結で絵心に溢れたデモが作成可能。

・Flash等の経験があればツール学習コストが低い。

・一枚絵アニメよりテクスチャサイズなどのコストが低く、

　　雰囲気が出せる。

・旧来の作り方では後からドラマ部分拡張の度に、　　エンジニアに相談する所から繰り返す事になるが不要。

これを諦めるのは惜しい…

■改めて問題は？

・負荷が高い。

・カメラが別になり、細かいプライオリティが制御できない。

・アニメーションの再利用などの仕組みが無くて非効率。

これがクリア出来れば・・・ぐぬぬ

運営もある！少人数開発にそんな研究してる余裕は無い！

■バージョンアップによる解決

ウェブテクノロジ様の開発により以下の問題は解決！

残る問題はカメラ&プライオリティのみ!!

・負荷が高い問題

→パフォーマンス向上！v1.2.1と比較して2～3倍程度の改善

　・アニメの汎用性が無い

→インスタンス機能の実装

アニメの複製、再利用、組み合わせアニメが作成可能に

■カメラ問題

ウェブテクノロジ様にご紹介頂いた、

株式会社ガンバレル中藪様のご協力で、

カメラを増やさなくても、NGUIのカメラの中にViewのPrefabをそのまま追加す

れば表示可能な事が判明！

出来た!！

■Unity画面(カメラの共通化)

■プライオリティ問題

・NGUIのプライオリティ制御(Depth)は、Panel、Widgetの2段階

→まずはPanel対応が出来れば十分

→UIPanelのstartingRenderQueueを取ってきて、

　　 SpriteStudio側に動的に上書きしてはどうか？

→RenderQueue書き換えのパッチを作成

出来た!！

■Unity画面(プライオリティ制御)

■パッチ内容(抜粋)// Script_SpriteStudio_DrawManagerView.cs → スプライトスタジオに入れるパッチ・・・public void RefreshQueue() { if (arrayListMeshDraw != null) { arrayListMeshDraw.RenderQueueSet (KindRenderQueueBase, OffsetDrawQueue); }}

// NGUI_RenderQueueManager.cs → 独自制御スクリプト・・・void Update () { if (ssdm.OffsetDrawQueue != panel.startingRenderQueue) { ssdm.OffsetDrawQueue = panel.startingRenderQueue; ssdm.RefreshQueue (); }}

■カラーの動的変更(抜粋)

Color buf_col_dark = new Color(0.0f,0.0f,0.0f,0.6f);

・・・

Script_SpriteStudio_PartsRoot.ColorBlendOverwrite cbo =this.gameObject.GetComponent<Script_SpriteStudio_PartsRoot>().DataGetColorBlendOverwrite();

cbo.SetOverall (Library_SpriteStudio.KindColorOperation.MIX, ref buf_col_dark);

合成方法は、ミックス、加算、乗算、減算とSpriteStudioがサポートしているのがそのまま利用できます。

■まとめ

・NGUIでプロジェクトが既に動いていても、

　実は少しの工夫とパッチで同居が可能になる。

・一度仕組みを作れば、

　プランナーとデザイナーだけでリッチなデモが増やせる。

・SpriteStudioは日々進化しているので、　過去導入を見送った場合も再検討の価値有り！！　（お世辞じゃないｗ）　もう一度言います（お世辞じゃないｗ）

■今後に期待すること

・SpriteStudioだけで、

　パーティクルが使えると表現がリッチにできるのになぁ。

次期バージョンに予定されるらしいですｗ

以上でトイディアからの発表は終わります。

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

OPTPiX SpriteStudio トピックス

➢ SS5Player for Unity○ https://www.assetstore.unity3d.com/jp/#!/content/22916

OPTPiX SpriteStudio トピックス

OPTPiX SpriteStudioのUpdate Topic Unity対応のUpdate Topic

Ver.5.1.x　”TexturePacker To SS”リリース　OPTPiX SpriteStudio SDKをGitHubで公開

SSPlayer for Unity【開発終了】　Ver.1.28b1 ～ 1.29f4　当たり判定パーツに Scale/Rotate追加　Unity上での再現性向上

Ver.5.2　アニメーションのリサイズ機能　編集時のパーツロック機能追加

SS5Player for Unity【公開】　Ver.0.9　OPTPiX SpriteStudio専用Playerとして新規開発

Ver.5.3　インスタンス機能

SS5Player for Unity　Ver.1.0 ～ 1.1　インスタンス機能に対応

Ver.5.3.5　重複・無変化キー削除機能　参照セル（アトラス）一括変更　アトリビュートの一括変更

SS5Player for Unity　Ver.1.1.12 ～ 1.2.3　壮絶な量の機能改良とバグ修正

OPTPiX SpriteStudio トピックス

➢ SS5Player for Unity○ https://github.com/SpriteStudio

OPTPiX SpriteStudio トピックス

➢ SpriteStudio3rdPartyTools○ https://github.com/SpriteStudio3rdParty

OPTPiX SpriteStudio トピックス

OPTPiX SpriteStudioのUpdate Topic Unity対応のUpdate Topic

Ver.5.1.x　”TexturePacker To SS”リリース　OPTPiX SpriteStudio SDKをGitHubで公開

SSPlayer for Unity【開発終了】　Ver.1.28b1 ～ 1.29f4　当たり判定パーツに Scale/Rotate追加　Unity上での再現性向上

Ver.5.2　アニメーションのリサイズ機能　編集時のパーツロック機能追加

SS5Player for Unity【公開】　Ver.0.9　OPTPiX SpriteStudio専用Playerとして新規開発

Ver.5.3　インスタンス機能

SS5Player for Unity　Ver.1.0 ～ 1.1　インスタンス機能に対応

Ver.5.3.5　重複・無変化キー削除機能　参照セル（アトラス）一括変更　アトリビュートの一括変更

SS5Player for Unity　Ver.1.1.12 ～ 1.2.3　壮絶な量の機能改良とバグ修正

OPTPiX SpriteStudio 5.5➢ Photoshop連携

○ 先行リリースした"PSDtoSS"との連携を強化

■ 変換後にSpriteStudio側で原点を更新した場合のふるまいを修正

■ 制作工程の大幅な時間短縮

OPTPiX SpriteStudio 5.5➢ 動画出力

○ 無圧縮".avi"○ アニメーション".gif"

■ OPTPiXの減色機能を移植

■ twitter / pixiv / 各種SNS他、動画共有サイトへの投稿に

● アニメーションデータのAssetStore出品に！

OPTPiX SpriteStudio 5.5➢ エフェクト機能

○ 2Dパーティクル

■ パーティクルの粒子自体にSpriteStudioのアニメーションを利用可

■ 発生点（エミッタ）を他のアニメーションに接続可

● つまりキャラクターとエフェクトを同時に編集可

注意点：

リリースのタイミングでは、"SS5 SDK"上での再現を保証

つまり、Unity上で使えるのは少し先（夏？）

まとめ

❖ SS5Player for Unity➢ 最新Ver.1.2.3 で、2倍、いやさ3倍の速度アップ

❖ SS5Converter for Unity2D➢ Mechanimでステート管理とモーションブレンド！

❖ OPTPiX SpriteStudio Ver.5.5➢ Photoshop連携と動画出力とパーティクル！2015年5月中旬リリース（・・・予定）

ご存じですか、フリー版

➢ OPTPiX SpriteStudio for Indie○ 商用利用可能

○ Unityの無償版の利用規約と、ほぼいっしょ

○ http://www.webtech.co.jp/spritestudio/indie/index.html

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

リリース済みの『ドラゴンファング』に、『OPTPiX SpriteStudio』を後乗せした事例

Unity x Toydea x WebTechnology