gtmf 2016:『刺青の国』 ~spritestudioとunityで開く背徳の宴~...
TRANSCRIPT
![Page 1: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/1.jpg)
『刺青の国』 SpriteStudio と Unity で開く
背徳の宴
#spritestudio #gtmfjp2016 #刺青の国
![Page 2: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/2.jpg)
自己紹介浅井 維新(Asai Yukiyoshi)株式会社ウェブテクノロジ・コム
セールス&コミュニケーション部
『OPTPiX SpriteStudio』・『~ imesta』等のマーケとセールスを担当。ゲーム業界の顧客は全て窓口担当をしている、が、疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、車の主、暴力団員谷岡に言い渡された示談の条件とは…
![Page 3: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/3.jpg)
OPTPiX SpriteStudio
![Page 4: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/4.jpg)
様々なゲーム開発環境
![Page 5: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/5.jpg)
パズル戦隊デナレンジャー(DeNA, 2015)
追憶の青(GREE, 2016)
FFブレイブエクスヴィアス(エイリム, 2015)
ゴシックは魔法乙女(Cave, 2015)
Cocos2d-x
![Page 6: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/6.jpg)
ラストピリオド(HappyElements, 2016)
ドラゴンファング(トイディア, 2014)
ビーナスイレブンびびっど!(アメージング, 2015)
Unity
LA-MULANA2 (NIGORO, 2016)
![Page 7: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/7.jpg)
![Page 8: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/8.jpg)
GTMF2016
~SpriteStudioとUnityで開く背徳の宴~
![Page 9: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/9.jpg)
![Page 10: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/10.jpg)
・もともと”SUSHI TYPOON” という海外向けのレーベルを日活が立ち上げていた。 ➡『片腕マシンガール』『東京残酷警察』『極道兵器』など
➡色々あって休眠
➡国際的に商標を取得しているので、 「勿体ないので使ってしまおう!」
SUSHITYPHOONGAMESとは?
というわけで、2015年にレーベルを発足させました。
![Page 11: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/11.jpg)
・居酒屋談義から企画が出来上がったタイトル
・色々と世に小さな物議をかもしながらも、
現在制作中!
2016年中には発売
※ちなみにスマホゲーではございません。
レーベル第一弾:「刺青の国」
他の都市のキャラを作りたいので、ぜひ、買って下さい!!
![Page 12: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/12.jpg)
自己紹介 Whiskerpadsとは?
■従業員1名、
メンバー2名のCGデザイナーユニット
■現在、開始3年目
■メインの業務は、
UI制作
FLASH、SpriteStudio、Spineを使用
したゲーム内アニメーション演出・画像作成
![Page 13: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/13.jpg)
自分でやればいいじゃない!
・まだゲーム業界では、UIの外注システムは確立していない。
➡大体出向打診が多い。
➡UIデザイナーは、オペレーターとして求められがち。
・UXを含めたシステムまで考えられる方が、信用が得られる。
➡UI遷移書は、よく書いている。
よし、企画書を書いてみよう!
![Page 14: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/14.jpg)
俺の野望(仮) 企画概要書
2014・06・06
松田・瀬下
■機種 : iphone/Android■ジャンル :抗争シミレーション■発売時期:2014年度内予定 ■ターゲット:・不良に憧れて短ランや長ランにしたことのある往年の青年層・「マイルドヤンキー」層
※マイルドヤンキーとはマイルドヤンキー は、マーケティングアナリスト原田曜平(博報堂 ブランドデザイン 若者研究所)が、2014年1月に提唱した概念。詳しくはこちら
Rev.002
![Page 15: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/15.jpg)
強化
チーム構成員は「症状」
資金源は「伝染」
外交は「能力」
Plugue.incに当てはめると?
上記のバランスを駆使し、警察権力と戦う。
![Page 16: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/16.jpg)
IPモノのハードルは、高かった。
・もともと課金アプリではなく、売り切りとして考えていた。
➡課金アイテムを考え、出資金額回収案のつじつまを
あわせるのは大変。
・金額計算を、いくら出しても現実味が無い金額になる。
・売れるかどうかを聞かれてもこまる。
もう無理。売れるか?より楽しいものを作りたい。
![Page 17: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/17.jpg)
・日本ではタブーだが、海外ではアートとして評価。
・思いを込めて彫る=ゲーム性にマッチ。
・技術に罪はないので、文化として再評価されてもいいのでは。
・SushiTyphoonブランドにあっていると考えた。
➡出し惜しみ無くNOリミッターで面白いことだけをつぎ込んだ日本初の 本格的海外征服レーベルが誕生!それが「SUSHI TYPHOON」だ!!(HPより)
なぜ、和彫り?
![Page 18: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/18.jpg)
・カワイイ女の子を描かせたら、日本は世界一だと思う。
・同じ土俵で戦っても、弱小すぎて目も止めてもらえない。
・刺青の特性として、うしろめたさや背徳感が強調される。
・カワイイの範囲が広い。
・その時期女性向けアプリ企画も作っていた。変化をつけたい。
なぜ女の子になったのか。
![Page 19: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/19.jpg)
設定を詰めていく。 刺青モチーフ
![Page 20: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/20.jpg)
confidential⑤本部情報
⑧自分の組情報が見られるウィンドウ
刺青ボタンを押すことで
⑤-1ステータス強化画面へ
進行度によるフレーバーテキスト
パートナーキャラクター進行度によりポーズ変動例)喜び、普通、怒り、やられ
買ってこいと命令する事で
⑤-2アイテム購入使用画面へ
![Page 21: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/21.jpg)
confidential強大な力を持った刺青所持者
刺青全体イメージ メインモチーフ サブモチーフ
破壊 ヤマタノオロチ 雷、雲天候系のモチーフ
炎のエフェクトのイメージ→
![Page 22: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/22.jpg)
confidential⑤-1ステータス強化画面
刺青カスタマイズ
カリスマ性
初期紋様
危険度
初期設定
都制覇紋様
各市を象徴する核となる紋様最初からある。(多摩は最初から居住区につよい。)
カリスマ性を表す紋様群レベルを上げると各紋様が進化する(段階は要相談)
危険度を表す紋様群レベルを上げると各紋様が増えたり進化する。(段階は要相談)
クリア特典のプレゼントをもらっている場合に増える(段階は難易度×6人分段階)
各都を制覇を表す紋様(段階は23段階)
各市(多摩、立川、武蔵野、八王子、調布、町田)別に、モチーフ変動、中心から伸びていく市の花や木、都の形状、守護神、女神等を使用した刺青デザインをする。
貧
困 居
住
区
ハ
イク
ラ
緑
地
商
業
区
寺
社
EASY
NORMAL HA
RD
EXHARD
武
力政
治
力
経
済
力
統
率
力
謀
略
23区
![Page 23: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/23.jpg)
キャラ性・世界観を仕上げる。
地価と人口、面積から身長と胸囲を割り出す計算式
ここまで、開発をどうするか決めてない状況・・・
![Page 24: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/24.jpg)
ここで宣伝・・・
別の企画も平行することに・・・
きゅんPON!/無料でイケメンボイス
&スチルGET!
©Alphapolis Co., Ltd.
iphone/Androidで配信中!
ガラガラを回して、ボイスとスチルを集める無料広告アプリ
こちらはCocos2D-x/Flash(LWFS)で作ってます。
![Page 25: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/25.jpg)
宣伝広告・販売
ウチには、プログラマーがいない
Whiskerpads
ラムダ・プランニング
日活
原案・世界観監修・デザイン・サウンド・ボイス
プログラミング・ゲームバランス
遠隔開発としてスタートする。
![Page 26: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/26.jpg)
・マルチで出そうと決まったのでUnityで使えるツール
・動きのあるUIが作れるかなと思った。
・ちょうど他案件で、PSDtoSSの便利さを知った。
・ 遠隔なので、データを切り分けできると思っていた。
・Unityのアニメーションツールは、避けたい。
SpriteStudioを使おうと思った。
導入ハードルも、インディーライセンスで低い!
![Page 27: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/27.jpg)
・SpriteStudioは、フォント対応していない。
➡Nullを置き、NGUIでフォントを表示する。
➡カメラの切り分け・カメラの奥にフォント出したいときは、 Unity上でSceneを組みなおす。
➡デザイナーがUnityを触り、PGがSpriteStudioを 触ることに・・・ 棲み分け失敗・・・
色々と難航する。
フォント対応、早急にお願いします。
![Page 28: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/28.jpg)
・それでもPSDtoSSは、デザイナーにとっては神。
・デザイン内部で棲み分けができる。
もう、後戻りはできない。
松田
瀬下
画面デザイン・背景・アニメーション調整
キャラデザイン・アニメーション作成
![Page 29: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/29.jpg)
PSDレイヤーに適当に動き指示をして
瀬下に渡すと、SSPJになって出てきます。
最初は、PGさんが、やってくれます。スクリプトを仕込んで配置します。
※この時点で、はみ出たりずれたりしています。
SpriteStudioのNullをいじりながら再コンバートしたりして調整
PSDを作成
アニメーションを作成
コンバート
フォント配置
フォント位置調整
PSDが画面指示書に!
![Page 30: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/30.jpg)
あとは、画像を作るだけ。
・刺青の歴史を紐解いたり、和柄の意味をしらべたりして
画面構成をする。
・もともとアプリ向けに横持ち、左中心だったものを右に変更。
➡タッチパネルにない、ロールオーバー機能がある。
これが地味に大変。
とか言いつつ、進行中です。
次は、詳細手順を説明します。
![Page 31: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/31.jpg)
UIレイアウトを、SSPJファイルに。
・UIレイアウトは、PSDでできる!
・加工してSpriteStudioに変換
・アニメーションをSpriteStudio上で作成
![Page 32: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/32.jpg)
UIレイアウトは、PSDで来る!
※テキストデータはSSPJでは配置できないのでNGUI上で配置しています。
・画面全体の完成がイメージできる状態にする。
➡イメージ図であり、実装データにもなる(!)
![Page 33: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/33.jpg)
レイアウト素材を加工する
![Page 34: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/34.jpg)
レイアウト素材を加工する
・ゲージの内容を整理
・レイヤーが多い部分を統合
・透過パーツが正しく表示されるように加工
整理
追加
・選択枠パーツ、非選択時のボタン 等々
![Page 35: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/35.jpg)
レイアウト素材を加工する
ここまでできたらPSDtoSSで書き出します!
書き出す前に…
・素材の座標に注意
・画像を実装サイズに
・レイヤー名が
被らないように!
![Page 36: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/36.jpg)
PSDtoSSで書き出し、変換
書き出しデータを
以下のデータに変換します。
・プロジェクトデータ(SSPJ)
・アニメーションデータ(SSAE)
・セルマップ(SSCE)
・テクスチャ(PNG)
![Page 37: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/37.jpg)
SSPJを開くと…
PSDそのままの配置!
![Page 38: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/38.jpg)
アニメーションデータの作成
素材を各アニメーションデータに分割。
①まとまりごとのウィンドウ
②画面In,Outアニメーション用
③ボタン類
④バリエーションのある装飾 文字等
![Page 39: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/39.jpg)
➡Prefabが、アニメーションごとに作られるから。
➡画面In,Outアニメーションで扱いやすくする。
➡表示のON,OFFがある。
➡Unity上で個別に使用する場合がある。
①まとまりごとのウィンドウ
何故、アニメーションごとに分けるのか?
変化するものは、SSAEに!
![Page 40: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/40.jpg)
①まとまりごとのウィンドウ
以下は全てnullになっています。
・テキスト用のNULL
・ボタン用のNULL
・ゲージ用のNULL
・バリエーションのある
装飾文字用のNULL
![Page 41: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/41.jpg)
①まとまりごとのウィンドウ
ゲージは土台を残して
こんなかんじ。
NGUIの苦労話は、また別の機会に。
![Page 42: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/42.jpg)
②画面In,Outアニメーション
nullだけのアニメーションデータ!
![Page 43: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/43.jpg)
②画面In,Outアニメーション
nullのアニメーション、各パーツを作成
SSPJ
Unity
nullへ、Prefabを関連付け
![Page 44: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/44.jpg)
Invalid 選択不可能
Normal 通常状態(アニメーション有)
OnCursor オンカーソル(アニメーション有)
Select 選択時(アニメーション有)
③ボタン類
![Page 45: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/45.jpg)
④バリエーションのある装飾文字
同一座標に出る装飾文字は、同じSSAEでまとめる。
IDを統一することを忘れずに。
![Page 46: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/46.jpg)
最後に書面をまとめます。
null名称各種nullの名称と
機能を記載
![Page 47: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/47.jpg)
最後に書面をまとめます。
共有することでGD→PG間がスムーズに!
null名称 ウィンドウの説明 遷移イメージ
![Page 48: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/48.jpg)
SSPJ+PSDtoSSでUIを作ると…
・UIレイアウトは、PSDでできる!
・加工してSpriteStudioに変換
・アニメーションをSpriteStudio上で作成
イメージがそのまま使える!
座標指定がいらない!
NGUIとUnityアニメーションに比べ作成が容易!
![Page 49: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/49.jpg)
自己紹介 LambdaPlanningとは?
■ゲーム業界では珍しい、「プランナー専門」の会社として立ち上げ
■現在従業員20名ほど うちプランナー10名、プログラム4名
■設立12年 何とか生き残ってます
■主なお仕事: ・企画提案
・仕様書作成
・レベルデザイン
・シナリオ/スクリプト などなど・・・
![Page 50: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/50.jpg)
宣伝
AppleStoreで絶賛配信中!
![Page 51: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/51.jpg)
お話しの内容
NGUIとSS5PUの併用時の注意点について
![Page 52: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/52.jpg)
察 し て 下 さ い
なぜプログラマーが来ないの?
![Page 53: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/53.jpg)
問題点の基本
「表示処理」「スプライトやテクスチャアトラスの管理方法」
がそれぞれ独自に存在していること。
NGUIもSS5PUも、
![Page 54: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/54.jpg)
NGUIとSS5PUで担当する役割を分けること。
解決方法の基本
NGUIは
「UIを作成することを目的にした」アセット。
SS5PUは
「SpriteStudio5のデータを表示することを目的にした」アセット。
役割はきちんと分け、混用には注意しましょう。
![Page 55: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/55.jpg)
混用すると
例:NGUIでUIを作っているのに、 その中の「OK」「NG」ボタンだけSS5PUで表示させたい……など。
都合よくSS5PUのオブジェクトを混用しようとすると、しなくて良い苦労をする羽目に。
![Page 56: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/56.jpg)
更なる問題
根本的に
「SS5PUで描いている画面に、NGUIのオブジェクトをはさみこみたい」
とか逆の場合などに起こります。
SS5PUとNGUIを扱う際に、さまざまな要因からプライオリティの競合が起こってしまう。
![Page 57: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/57.jpg)
各画面機能ごとにPhotoshopのレイヤーフォルダのように考えて、
どうしてもやらなきゃいけない場合
・NGUIの下にくるSS5オブジェクト群・NGUI・NGUIの上にくるSS5オブジェクト群
などのように描画カメラを分けるのが良いでしょう。
![Page 58: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/58.jpg)
それでも起きてしまう問題
1. メニューの土台 A2. テキスト A3. 装飾要素 A4. メニューの土台 B5. テキスト B6. 装飾要素 B
としたいのに・・・
1. メニューの土台 A,B2. テキスト A,B3. 装飾要素 A,B
になってしまう・・・
1.SS5PUでメニューの土台を描画2. NGUIでテキストを描画3. SS5PUで装飾要素を描画
というセットをA,B2つ複数重ねて表示したい場合
![Page 59: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/59.jpg)
こういう時は・・・
「画面設計」、「何をどのアセットで表示するか?」などを根本設計から考え直すことを推奨します。
「強引にやればできる」ことも結構ありますが、
「セットパスコール(ドローコールやテクスチャ転送枚数)的にも良くない」ために、
「動いたとしても、実用できない」(メモリや実行速度で難が出る)ことにつながることが多いので、考え直した方が良いです。
![Page 60: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/60.jpg)
結論
「NGUI+SS5PU」の組み合わせに限らず、「なんでもかんでも都合の良い」ことはありえない。
きちんと、使用するアセット(NGUIやSS5PUなど)の「役割分担を考えて」使用しましょう。
![Page 61: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/61.jpg)
OPTPiX SpriteStudio
![Page 62: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/62.jpg)
今年前半から本日時点までのVer.UPについて
2016/2:SpriteStudio5 Player for Unity Ver.1.3 ・大幅なパフォーマンス改善
2016/1:Ver.5.6(+Ver.5.6.1:バグFix) ・エディタとしての完成度向上
2016/7:SpriteStudio5 Player for Unity / UnrealEngine ・本体のVer.UPに合わせて エフェクトの再現性を強化
2016/7:Ver.5.7 ・『エフェクト機能の大幅な改良』 >ゲームエンジンをターゲットに計算 仕様を変更 ・『自動バックアップ』 の追加 >待望! ・『互換性』設定の追加 >”GameMaker:Studio”、 ”RPGツクールMV”
![Page 64: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/64.jpg)
Ver.5.7 『自動バックアップ』
![Page 65: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/65.jpg)
Ver.5.7 『互換性』(RPGツクールMV & GameMakerStudio)
![Page 66: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/66.jpg)
様々なゲーム開発環境
![Page 67: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/67.jpg)
SpriteStudio5 Player for GP-3
![Page 68: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/68.jpg)
WebTechnology ブースのご案内
![Page 69: GTMF 2016:『刺青の国』 ~SpriteStudioとUnityで開く背徳の宴~ 株式会社ウェブテクノロジ](https://reader033.vdocuments.net/reader033/viewer/2022051101/5870c0601a28ab0b4a8b6f5f/html5/thumbnails/69.jpg)
『刺青の国』 SpriteStudio と Unity で開く
背徳の宴
ご静聴ありがとうございました