映画会社 日活 のゲームレーベル SUSHI-TYPHOON-GAMES 第一弾、『刺青の国』をテーマに、”刺青”のワークフロー、OPTPiX SpriteStudio を使ったアニメーション素材の制作工程からUnityへの連携事例をご紹介いたします。

1. 『刺青の国』
SpriteStudio と Unity で開く
背徳の宴
#spritestudio #gtmfjp2016 #刺青の国

2. 自己紹介
浅井 維新(Asai Yukiyoshi)
株式会社ウェブテクノロジ・コム
セールス＆コミュニケーション部
『OPTPiX SpriteStudio』・『～ imesta』等のマーケと
セールスを担当。ゲーム業界の顧客は全て窓口担
当をしている、が、疲れからか、不幸にも黒塗りの高
級車に追突してしまう。後輩をかばいすべての責任
を負った三浦に対し、車の主、暴力団員谷岡に言い
渡された示談の条件とは…

3. OPTPiX SpriteStudio

4. 様々なゲーム開発環境

5. パズル戦隊デナレンジャー
（DeNA, 2015）
追憶の青
（GREE, 2016）
FFブレイブエクスヴィアス
（エイリム, 2015）
ゴシックは魔法乙女
（Cave, 2015）
Cocos2d-x

6. ラストピリオド
（HappyElements, 2016）
ドラゴンファング
（トイディア, 2014）
ビーナスイレブンびびっど！
（アメージング, 2015）
Unity
LA-MULANA２
（NIGORO, 2016）

8. GTMF2016
～SpriteStudioとUnityで開く背徳の宴～

10. ・もともと”SUSHI TYPOON” という海外向けのレーベルを
日活が立ち上げていた。
➡『片腕マシンガール』『東京残酷警察』『極道兵器』など
➡色々あって休眠
➡国際的に商標を取得しているので、
「勿体ないので使ってしまおう！」
ＳＵＳＨＩＴＹＰＨＯＯＮＧＡＭＥＳとは？
というわけで、2015年にレーベルを発足させました。

11. ・居酒屋談義から企画が出来上がったタイトル
・色々と世に小さな物議をかもしながらも、
現在制作中！
2016年中には発売
※ちなみにスマホゲーではございません。
レーベル第一弾：「刺青の国」
他の都市のキャラを作りたいので、ぜひ、買って下さい！！

12. 自己紹介 Whiskerpadsとは？
■従業員1名、
メンバー2名のCGデザイナーユニット
■現在、開始3年目
■メインの業務は、
UI制作
FLASH、SpriteStudio、Spineを使用
したゲーム内アニメーション演出・画像作成

13. 自分でやればいいじゃない！
・まだゲーム業界では、UIの外注システムは確立していない。
➡大体出向打診が多い。
➡UIデザイナーは、オペレーターとして求められがち。
・UXを含めたシステムまで考えられる方が、信用が得られる。
➡UI遷移書は、よく書いている。
よし、企画書を書いてみよう！

14. 俺の野望（仮） 企画概要書
2014・06・06
松田・瀬下
■機種 ：iphone/Android
■ジャンル ：抗争シミレーション
■発売時期：2014年度内予定
■ターゲット：
・不良に憧れて短ランや長ランに
したことのある往年の青年層
・「マイルドヤンキー」層
※マイルドヤンキーとは
マイルドヤンキー は、
マーケティングアナリスト原田曜平
（博報堂 ブランドデザイン 若者研究
所）が、2014年1月に提唱した概念。
詳しくはこちら
Rev.002

15. 強化
チーム構成員は
「症状」
資金源は
「伝染」
外交は
「能力」
Plugue.inc
に当てはめると？
上記のバランスを
駆使し、
警察権力と戦う。

16. IPモノのハードルは、高かった。
・もともと課金アプリではなく、売り切りとして考えていた。
➡課金アイテムを考え、出資金額回収案のつじつまを
あわせるのは大変。
・金額計算を、いくら出しても現実味が無い金額になる。
・売れるかどうかを聞かれてもこまる。
もう無理。売れるか？より楽しいものを作りたい。

17. ・日本ではタブーだが、海外ではアートとして評価。
・思いを込めて彫る＝ゲーム性にマッチ。
・技術に罪はないので、文化として再評価されてもいいのでは。
・SushiTyphoonブランドにあっていると考えた。
➡出し惜しみ無くNOリミッターで面白いことだけをつぎ込んだ日本初の
本格的海外征服レーベルが誕生！それが「SUSHI TYPHOON」だ！！
（ＨＰより）
なぜ、和彫り？

18. ・カワイイ女の子を描かせたら、日本は世界一だと思う。
・同じ土俵で戦っても、弱小すぎて目も止めてもらえない。
・刺青の特性として、うしろめたさや背徳感が強調される。
・カワイイの範囲が広い。
・その時期女性向けアプリ企画も作っていた。変化をつけたい。
なぜ女の子になったのか。

19. 設定を詰めていく。 刺青モチーフ

20. confidential⑤本部情報
⑧自分の組情報が見られるウィンドウ
刺青ボタンを押すことで
⑤-1
ステータス強化画面へ
進行度による
フレーバーテキスト
パートナーキャラクター
進行度によりポーズ変動
例）喜び、普通、怒り、やられ
買ってこいと命令する事で
⑤-2
アイテム購入使用画面へ

21. confidential強大な力を持った刺青所持者
刺青全体イメージ メインモチーフ サブモチーフ
破壊 ヤマタノオロチ 雷、雲
天候系のモチーフ
炎のエフェクトのイメージ→

22. confidential⑤-1ステータス強化画面
刺青カスタマイズ
カリスマ性
初期紋様
危険度
初期設定
都制覇紋様
各市を象徴する核となる紋様
最初からある。
（多摩は最初から居住区につよい。）
カリスマ性を表す紋様群
レベルを上げると各紋様が進化する
（段階は要相談）
危険度を表す紋様群
レベルを上げると各紋様が増えたり進化する。
（段階は要相談）
クリア特典のプレゼントをもらっている場合に増える
（段階は難易度×6人分段階）
各都を制覇を表す紋様
（段階は23段階）
各市（多摩、立川、武蔵野、八王子、調布、町田）別に、モチーフ変動、
中心から伸びていく市の花や木、都の形状、守護神、女神等を使用した刺青デザインをする。
貧
困 居
住
区
ハ
イク
ラ
緑
地
商
業
区
寺
社
EA
SY
NO
RM
AL HA
RD
EX
HA
RD
武
力
政
治
力
経
済
力
統
率
力
謀
略
23区

23. キャラ性・世界観を仕上げる。
地価と人口、面積から身長と胸囲を割り出す計算式
ここまで、開発をどうするか決めてない状況・・・

24. ここで宣伝・・・
別の企画も平行することに・・・
きゅんPON！/無料でイケメンボイス
＆スチルGET！
©Alphapolis Co., Ltd.
iphone/Android
で配信中！
ガラガラを回して、
ボイスとスチルを集める
無料広告アプリ
こちらはCocos2D-x/Flash
(LWFS)で
作ってます。

25. 宣伝広告・販売
ウチには、プログラマーがいない
Whiskerpads
ラムダ・
プランニング
日活
原案・世界観監修・デザイン・サウンド・ボイス
プログラミング・ゲームバランス
遠隔開発としてスタートする。

26. ・マルチで出そうと決まったのでＵｎｉｔｙで使えるツール
・動きのあるＵＩが作れるかなと思った。
・ちょうど他案件で、PSDtoSSの便利さを知った。
・ 遠隔なので、データを切り分けできると思っていた。
・Ｕｎｉｔｙのアニメーションツールは、避けたい。
SpriteStudioを使おうと思った。
導入ハードルも、インディーライセンスで低い！

27. ・ＳｐｒｉｔｅＳｔｕｄｉｏは、フォント対応していない。
➡Nullを置き、NGUIでフォントを表示する。
➡カメラの切り分け・カメラの奥にフォント出したいときは、
Ｕｎｉｔｙ上でSceneを組みなおす。
➡デザイナーがＵｎｉｔｙを触り、ＰＧがＳｐｒｉｔｅＳｔｕｄｉｏを
触ることに・・・ 棲み分け失敗・・・
色々と難航する。
フォント対応、早急にお願いします。

28. ・それでもＰＳＤtoSSは、デザイナーにとっては神。
・デザイン内部で棲み分けができる。
もう、後戻りはできない。
松田
瀬下
画面デザイン・背景・アニメーション調整
キャラデザイン・アニメーション作成

29. ＰＳＤレイヤーに適当に
動き指示をして
瀬下に渡すと、ＳＳＰＪに
なって出てきます。
最初は、PGさんが、やってくれます。
スクリプトを仕込んで配置します。
※この時点で、はみ出たり
ずれたりしています。
SpriteStudioのNullをいじりながら
再コンバートしたりして調整
PSDを作成
アニメーションを作成
コンバート
フォント配置
フォント位置調整
PSDが
画面指示書
に！

30. あとは、画像を作るだけ。
・刺青の歴史を紐解いたり、和柄の意味をしらべたりして
画面構成をする。
・もともとアプリ向けに横持ち、左中心だったものを右に変更。
➡タッチパネルにない、ロールオーバー機能がある。
これが地味に大変。
とか言いつつ、進行中です。
次は、詳細手順を
説明します。

31. UIレイアウトを、SSPJファイルに。
・ＵＩレイアウトは、PSDでできる！
・加工してSpriteStudioに変換
・アニメーションをSpriteStudio上で作成

32. UIレイアウトは、PSDで来る！
※テキストデータはSSPJでは
配置できないのでNGUI上で
配置しています。
・画面全体の完成が
イメージできる状態にする。
➡イメージ図であり、実装データにもなる(！)

33. レイアウト素材を加工する

34. レイアウト素材を加工する
・ゲージの内容を整理
・レイヤーが多い部分を統合
・透過パーツが正しく表示されるように加工
整理
追加
・選択枠パーツ、非選択時のボタン 等々

35. レイアウト素材を加工する
ここまでできたらPSDtoSSで書き出します！
書き出す前に…
・素材の座標に注意
・画像を実装サイズに
・レイヤー名が
被らないように！

36. PSDtoSSで書き出し、変換
書き出しデータを
以下のデータに変換します。
・プロジェクトデータ(SSPJ)
・アニメーションデータ(SSAE)
・セルマップ(SSCE)
・テクスチャ(PNG)

37. SSPJを開くと…
PSDそのままの配置！

38. アニメーションデータの作成
素材を各アニメーションデータに分割。
①まとまりごとのウィンドウ
②画面In,Outアニメーション用
③ボタン類
④バリエーションのある装飾
文字等

39. ➡Ｐｒｅｆａｂが、アニメーションごとに作られるから。
➡画面In,Outアニメーションで扱いやすくする。
➡表示のON,OFFがある。
➡Ｕｎｉｔｙ上で個別に使用する場合がある。
①まとまりごとのウィンドウ
何故、アニメーションごとに分けるのか？
変化するものは、SSAEに！

40. ①まとまりごとのウィンドウ
以下は全てnullになっています。
・テキスト用のNULL
・ボタン用のNULL
・ゲージ用のNULL
・バリエーションのある
装飾文字用のNULL

41. ①まとまりごとのウィンドウ
ゲージは土台を残して
こんなかんじ。
NGUIの苦労話は、
また別の機会に。

42. ②画面In,Outアニメーション
nullだけの
アニメーションデータ！

43. ②画面In,Outアニメーション
nullのアニメーション、各パーツを作成
SSPJ
Unity
nullへ、Prefabを関連付け

44. Invalid 選択不可能
Normal 通常状態(アニメーション有)
OnCursor オンカーソル(アニメーション有)
Select 選択時(アニメーション有)
③ボタン類

45. ④バリエーションのある装飾文字
同一座標に出る装飾文字は、同じＳＳＡＥでまとめる。
ＩＤを統一することを忘
れずに。

46. 最後に書面をまとめます。
null名称
各種nullの名称と
機能を記載

47. 最後に書面をまとめます。
共有することで
GD→PG間が
スムーズに！
null名称 ウィンドウの説明 遷移イメージ

48. SSPJ+PSDtoSSでＵＩを作ると…
・ＵＩレイアウトは、PSDでできる！
・加工してSpriteStudioに変換
・アニメーションをSpriteStudio上で作成
イメージがそのまま使える！
座標指定がいらない！
ＮＧＵＩとＵｎｉｔｙアニメーションに比べ作成が容易！

49. 自己紹介 LambdaPlanningとは？
■ゲーム業界では珍しい、「プランナー専門」の会社として立ち上げ
■現在従業員20名ほど うちプランナー10名、プログラム４名
■設立12年 何とか生き残ってます
■主なお仕事：
・企画提案
・仕様書作成
・レベルデザイン
・シナリオ／スクリプト などなど・・・

50. 宣伝
AppleStoreで絶賛配信中！

51. お話しの内容
NGUIとSS5PUの併用時の注意点について

52. 察 し て 下 さ い
なぜプログラマーが来ないの？

53. 問題点の基本
「表示処理」
「スプライトやテクスチャアトラスの管理方法」
がそれぞれ独自に存在していること。
NGUIもSS5PUも、

54. NGUIとSS5PUで担当する役割を分けること。
解決方法の基本
NGUIは
「UIを作成することを目的にした」アセット。
SS5PUは
「SpriteStudio5のデータを表示することを目的にした」アセット。
役割はきちんと分け、混用には注意しましょう。

55. 混用すると
例：NGUIでUIを作っているのに、
その中の「OK」「NG」ボタンだけSS5PUで表示させたい……など。
都合よくSS5PUのオブジェクトを混用しようとすると、
しなくて良い苦労をする羽目に。

56. 更なる問題
根本的に
「SS5PUで描いている画面に、NGUIのオブジェクトを
はさみこみたい」
とか逆の場合などに起こります。
SS5PUとNGUIを扱う際に、さまざまな要因から
プライオリティの競合が起こってしまう。

57. 各画面機能ごとにPhotoshopのレイヤーフォルダのように考えて、
どうしてもやらなきゃいけない場合
・NGUIの下にくるSS5オブジェクト群
・NGUI
・NGUIの上にくるSS5オブジェクト群
などのように描画カメラを分けるのが良いでしょう。

58. それでも起きてしまう問題
1. メニューの土台 A
2. テキスト A
3. 装飾要素 A
4. メニューの土台 B
5. テキスト B
6. 装飾要素 B
としたいのに・・・
1. メニューの土台 A,B
2. テキスト A,B
3. 装飾要素 A,B
になってしまう・・・
１.SS5PUでメニューの土台を描画
2. NGUIでテキストを描画
3. SS5PUで装飾要素を描画
というセットをA,B2つ複数重ねて表示したい場合

59. こういう時は・・・
「画面設計」、「何をどのアセットで表示するか？」
などを根本設計から考え直すことを推奨します。
「強引にやればできる」ことも結構ありますが、
「セットパスコール（ドローコールやテクスチャ転送枚数）的にも良くない」
ために、
「動いたとしても、実用できない」（メモリや実行速度で難が出る）
ことにつながることが多いので、考え直した方が良いです。

60. 結論
「NGUI＋SS5PU」の組み合わせに限らず、
「なんでもかんでも都合の良い」ことはありえない。
きちんと、使用するアセット（NGUIやSS5PUなど）の
「役割分担を考えて」使用しましょう。

61. OPTPiX SpriteStudio

62. 今年前半から本日時点までの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”

63. Ver.5.7 『エフェクト機能の大幅な改良』

64. Ver.5.7 『自動バックアップ』

65. Ver.5.7 『互換性』（RPGツクールMV & GameMakerStudio)

66. 様々なゲーム開発環境

67. SpriteStudio5 Player for GP-3

68. WebTechnology ブースのご案内

69. 『刺青の国』
SpriteStudio と Unity で開く
背徳の宴
ご静聴ありがとうございました