『刺青の国』 SpriteStudio と Unity で開く

背徳の宴

#spritestudio #gtmfjp2016 #刺青の国

自己紹介浅井 維新(Asai Yukiyoshi)株式会社ウェブテクノロジ・コム

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

『OPTPiX SpriteStudio』・『～ imesta』等のマーケとセールスを担当。ゲーム業界の顧客は全て窓口担当をしている、が、疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、車の主、暴力団員谷岡に言い渡された示談の条件とは…

OPTPiX SpriteStudio

様々なゲーム開発環境

パズル戦隊デナレンジャー（DeNA, 2015）

追憶の青（GREE, 2016）

FFブレイブエクスヴィアス（エイリム, 2015）

ゴシックは魔法乙女（Cave, 2015）

Cocos2d-x

ラストピリオド（HappyElements, 2016）

ドラゴンファング（トイディア, 2014）

ビーナスイレブンびびっど！（アメージング, 2015）

Unity

LA-MULANA２ （NIGORO, 2016）

GTMF2016

～SpriteStudioとUnityで開く背徳の宴～

・もともと”SUSHI TYPOON” という海外向けのレーベルを日活が立ち上げていた。　➡『片腕マシンガール』『東京残酷警察』『極道兵器』など

　➡色々あって休眠

　➡国際的に商標を取得しているので、　　　　　　　　　　　「勿体ないので使ってしまおう！」

ＳＵＳＨＩＴＹＰＨＯＯＮＧＡＭＥＳとは？　

というわけで、2015年にレーベルを発足させました。

・居酒屋談義から企画が出来上がったタイトル

・色々と世に小さな物議をかもしながらも、

　現在制作中！

　2016年中には発売　

※ちなみにスマホゲーではございません。

　レーベル第一弾：「刺青の国」　

他の都市のキャラを作りたいので、ぜひ、買って下さい！！

　自己紹介　　Whiskerpadsとは？

■従業員1名、

メンバー2名のCGデザイナーユニット

■現在、開始3年目

■メインの業務は、

　UI制作

　FLASH、SpriteStudio、Spineを使用

したゲーム内アニメーション演出・画像作成

　自分でやればいいじゃない！

・まだゲーム業界では、UIの外注システムは確立していない。

　➡大体出向打診が多い。

　➡UIデザイナーは、オペレーターとして求められがち。

・UXを含めたシステムまで考えられる方が、信用が得られる。

　➡UI遷移書は、よく書いている。

よし、企画書を書いてみよう！

俺の野望（仮）　企画概要書

2014・06・06

松田・瀬下

　　

■機種　　　： iphone/Android■ジャンル ：抗争シミレーション■発売時期：2014年度内予定 ■ターゲット：・不良に憧れて短ランや長ランにしたことのある往年の青年層・「マイルドヤンキー」層

※マイルドヤンキーとはマイルドヤンキー は、マーケティングアナリスト原田曜平（博報堂 ブランドデザイン 若者研究所）が、2014年1月に提唱した概念。詳しくはこちら

Rev.002

強化

チーム構成員は「症状」

資金源は「伝染」

外交は「能力」

Plugue.incに当てはめると？

上記のバランスを駆使し、警察権力と戦う。

　IPモノのハードルは、高かった。

・もともと課金アプリではなく、売り切りとして考えていた。

➡課金アイテムを考え、出資金額回収案のつじつまを

あわせるのは大変。

・金額計算を、いくら出しても現実味が無い金額になる。

・売れるかどうかを聞かれてもこまる。　

もう無理。売れるか？より楽しいものを作りたい。

・日本ではタブーだが、海外ではアートとして評価。

・思いを込めて彫る＝ゲーム性にマッチ。

・技術に罪はないので、文化として再評価されてもいいのでは。

・SushiTyphoonブランドにあっていると考えた。

➡出し惜しみ無くNOリミッターで面白いことだけをつぎ込んだ日本初の　 本格的海外征服レーベルが誕生！それが「SUSHI TYPHOON」だ！！（ＨＰより）

　なぜ、和彫り？

・カワイイ女の子を描かせたら、日本は世界一だと思う。

・同じ土俵で戦っても、弱小すぎて目も止めてもらえない。

・刺青の特性として、うしろめたさや背徳感が強調される。

・カワイイの範囲が広い。

・その時期女性向けアプリ企画も作っていた。変化をつけたい。

　なぜ女の子になったのか。

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

confidential⑤本部情報

⑧自分の組情報が見られるウィンドウ

刺青ボタンを押すことで

⑤-1ステータス強化画面へ

進行度によるフレーバーテキスト

パートナーキャラクター進行度によりポーズ変動例）喜び、普通、怒り、やられ

買ってこいと命令する事で

⑤-2アイテム購入使用画面へ

confidential強大な力を持った刺青所持者

刺青全体イメージ メインモチーフ サブモチーフ

破壊 ヤマタノオロチ 雷、雲天候系のモチーフ

炎のエフェクトのイメージ→

confidential⑤-1ステータス強化画面

刺青カスタマイズ

カリスマ性

初期紋様

危険度

初期設定

都制覇紋様

各市を象徴する核となる紋様最初からある。（多摩は最初から居住区につよい。）

カリスマ性を表す紋様群レベルを上げると各紋様が進化する（段階は要相談）

危険度を表す紋様群レベルを上げると各紋様が増えたり進化する。（段階は要相談）

クリア特典のプレゼントをもらっている場合に増える（段階は難易度×6人分段階）

各都を制覇を表す紋様（段階は23段階）

各市（多摩、立川、武蔵野、八王子、調布、町田）別に、モチーフ変動、中心から伸びていく市の花や木、都の形状、守護神、女神等を使用した刺青デザインをする。

貧

困 居

住

区

ハ

イク

ラ

緑

地

商

業

区

寺

社

EASY

NORMAL HA

RD

EXHARD

武

力政

治

力

経

済

力

統

率

力

謀

略

23区

　キャラ性・世界観を仕上げる。

地価と人口、面積から身長と胸囲を割り出す計算式

ここまで、開発をどうするか決めてない状況・・・

ここで宣伝・・・

　別の企画も平行することに・・・

きゅんPON！/無料でイケメンボイス

＆スチルGET！

©Alphapolis Co., Ltd.

iphone/Androidで配信中！

ガラガラを回して、ボイスとスチルを集める無料広告アプリ

こちらはCocos2D-x/Flash(LWFS)で作ってます。

宣伝広告・販売

　ウチには、プログラマーがいない

Whiskerpads

ラムダ・プランニング

日活

原案・世界観監修・デザイン・サウンド・ボイス

プログラミング・ゲームバランス

　遠隔開発としてスタートする。

・マルチで出そうと決まったのでＵｎｉｔｙで使えるツール

・動きのあるＵＩが作れるかなと思った。

・ちょうど他案件で、PSDtoSSの便利さを知った。

・ 遠隔なので、データを切り分けできると思っていた。

・Ｕｎｉｔｙのアニメーションツールは、避けたい。

　SpriteStudioを使おうと思った。

導入ハードルも、インディーライセンスで低い！

・ＳｐｒｉｔｅＳｔｕｄｉｏは、フォント対応していない。

　➡Nullを置き、NGUIでフォントを表示する。

　➡カメラの切り分け・カメラの奥にフォント出したいときは、　　 Ｕｎｉｔｙ上でSceneを組みなおす。

➡デザイナーがＵｎｉｔｙを触り、ＰＧがＳｐｒｉｔｅＳｔｕｄｉｏを 触ることに・・・　棲み分け失敗・・・

　色々と難航する。

フォント対応、早急にお願いします。

・それでもＰＳＤtoSSは、デザイナーにとっては神。

・デザイン内部で棲み分けができる。

　もう、後戻りはできない。

松田

瀬下

画面デザイン・背景・アニメーション調整

キャラデザイン・アニメーション作成

ＰＳＤレイヤーに適当に動き指示をして

瀬下に渡すと、ＳＳＰＪになって出てきます。

最初は、PGさんが、やってくれます。スクリプトを仕込んで配置します。

※この時点で、はみ出たりずれたりしています。

SpriteStudioのNullをいじりながら再コンバートしたりして調整

PSDを作成

アニメーションを作成

コンバート

フォント配置

フォント位置調整

PSDが画面指示書に！

　あとは、画像を作るだけ。

・刺青の歴史を紐解いたり、和柄の意味をしらべたりして

画面構成をする。

・もともとアプリ向けに横持ち、左中心だったものを右に変更。　

➡タッチパネルにない、ロールオーバー機能がある。　

　　これが地味に大変。

とか言いつつ、進行中です。

次は、詳細手順を説明します。

　UIレイアウトを、SSPJファイルに。

・ＵＩレイアウトは、PSDでできる！

・加工してSpriteStudioに変換

・アニメーションをSpriteStudio上で作成

UIレイアウトは、PSDで来る！

※テキストデータはSSPJでは配置できないのでNGUI上で配置しています。

・画面全体の完成がイメージできる状態にする。

➡イメージ図であり、実装データにもなる(！)

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

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

・ゲージの内容を整理

・レイヤーが多い部分を統合

・透過パーツが正しく表示されるように加工

整理

追加

・選択枠パーツ、非選択時のボタン　等々

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

ここまでできたらPSDtoSSで書き出します！

書き出す前に…

・素材の座標に注意

・画像を実装サイズに

・レイヤー名が

　被らないように！

PSDtoSSで書き出し、変換

書き出しデータを

以下のデータに変換します。

・プロジェクトデータ(SSPJ)

・アニメーションデータ(SSAE)

・セルマップ(SSCE)

・テクスチャ(PNG)

SSPJを開くと…

PSDそのままの配置！

　アニメーションデータの作成

素材を各アニメーションデータに分割。

①まとまりごとのウィンドウ

②画面In,Outアニメーション用

③ボタン類

④バリエーションのある装飾　文字等

　➡Ｐｒｅｆａｂが、アニメーションごとに作られるから。

　➡画面In,Outアニメーションで扱いやすくする。

　➡表示のON,OFFがある。

　➡Ｕｎｉｔｙ上で個別に使用する場合がある。

　①まとまりごとのウィンドウ

何故、アニメーションごとに分けるのか？

変化するものは、SSAEに！

　①まとまりごとのウィンドウ

以下は全てnullになっています。

・テキスト用のNULL

・ボタン用のNULL

・ゲージ用のNULL

・バリエーションのある

　装飾文字用のNULL

　①まとまりごとのウィンドウ

ゲージは土台を残して

こんなかんじ。

NGUIの苦労話は、また別の機会に。

②画面In,Outアニメーション

nullだけのアニメーションデータ！

　②画面In,Outアニメーション

nullのアニメーション、各パーツを作成

SSPJ

Unity

nullへ、Prefabを関連付け

　Invalid　 選択不可能

　Normal　 通常状態(アニメーション有)

　OnCursor　 オンカーソル(アニメーション有)

　Select　 選択時(アニメーション有)

　③ボタン類

　④バリエーションのある装飾文字

同一座標に出る装飾文字は、同じＳＳＡＥでまとめる。

ＩＤを統一することを忘れずに。

　最後に書面をまとめます。

null名称各種nullの名称と

機能を記載

最後に書面をまとめます。

共有することでGD→PG間がスムーズに！

null名称 ウィンドウの説明 遷移イメージ

　SSPJ+PSDtoSSでＵＩを作ると…

・ＵＩレイアウトは、PSDでできる！

・加工してSpriteStudioに変換

・アニメーションをSpriteStudio上で作成

イメージがそのまま使える！

座標指定がいらない！

ＮＧＵＩとＵｎｉｔｙアニメーションに比べ作成が容易！

　自己紹介　LambdaPlanningとは？

■ゲーム業界では珍しい、「プランナー専門」の会社として立ち上げ

■現在従業員20名ほど　うちプランナー10名、プログラム４名

■設立12年　何とか生き残ってます

■主なお仕事：　　・企画提案

　　・仕様書作成

　　・レベルデザイン

　　・シナリオ／スクリプト　などなど・・・

　宣伝

AppleStoreで絶賛配信中！

　お話しの内容

NGUIとSS5PUの併用時の注意点について

察　し　て　下　さ　い

　なぜプログラマーが来ないの？

　問題点の基本

「表示処理」「スプライトやテクスチャアトラスの管理方法」

がそれぞれ独自に存在していること。

NGUIもSS5PUも、

NGUIとSS5PUで担当する役割を分けること。

　解決方法の基本

NGUIは

「UIを作成することを目的にした」アセット。

SS5PUは　

「SpriteStudio5のデータを表示することを目的にした」アセット。

役割はきちんと分け、混用には注意しましょう。

　混用すると

例：NGUIでUIを作っているのに、　　その中の「OK」「NG」ボタンだけSS5PUで表示させたい……など。

都合よくSS5PUのオブジェクトを混用しようとすると、しなくて良い苦労をする羽目に。

　更なる問題

根本的に

「SS5PUで描いている画面に、NGUIのオブジェクトをはさみこみたい」

とか逆の場合などに起こります。

SS5PUとNGUIを扱う際に、さまざまな要因からプライオリティの競合が起こってしまう。

各画面機能ごとにPhotoshopのレイヤーフォルダのように考えて、

　どうしてもやらなきゃいけない場合

・NGUIの下にくるSS5オブジェクト群・NGUI・NGUIの上にくるSS5オブジェクト群

などのように描画カメラを分けるのが良いでしょう。

　それでも起きてしまう問題

1. メニューの土台 A2. テキスト A3. 装飾要素 A4. メニューの土台 B5. テキスト B6. 装飾要素 B

としたいのに・・・

1. メニューの土台　A,B2. テキスト　A,B3. 装飾要素　A,B

　　　　になってしまう・・・

１.SS5PUでメニューの土台を描画2. NGUIでテキストを描画3. SS5PUで装飾要素を描画

というセットをA,B2つ複数重ねて表示したい場合

　こういう時は・・・

「画面設計」、「何をどのアセットで表示するか？」などを根本設計から考え直すことを推奨します。

「強引にやればできる」ことも結構ありますが、

「セットパスコール（ドローコールやテクスチャ転送枚数）的にも良くない」ために、

「動いたとしても、実用できない」（メモリや実行速度で難が出る）ことにつながることが多いので、考え直した方が良いです。

　結論

「NGUI＋SS5PU」の組み合わせに限らず、「なんでもかんでも都合の良い」ことはありえない。

きちんと、使用するアセット（NGUIやSS5PUなど）の「役割分担を考えて」使用しましょう。

OPTPiX SpriteStudio

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

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

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

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

様々なゲーム開発環境

SpriteStudio5 Player for GP-3

WebTechnology ブースのご案内

『刺青の国』 SpriteStudio と Unity で開く

背徳の宴

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