Unity x
KLab x
OPTPiX SpriteStudio
デザインとコードの２面Tips！
プレゼンター紹介
浅井 維新（Asai Yukiyoshi）
株式会社ウェブテクノロジ・コム
セールス＆コミュニケーション部
ゲーム開発関連ツール『OPTPiX SpriteStudio』・『OPTPiX imesta 7』の
マーケティングとセールスを担当。
2014年は正月早々、出先で愛車KR250Sが故障
BitSummit会場で愛用のコンデジ『RICOH R10』を紛失
その他の前厄ラッシュに若干鬱気味、なので優しくしてください。
本日のアジェンダ
■"OPTPiX SpriteStudio"リリースから１年
■Klab様からのTips
■"OPTPiX SpriteStudio ver.5.3"プレビュー
OPTPiX SpriteStudio
リリースから１年
OPTPiX SpriteStudioのUpdate Topic
Unity対応のUpdate Topic
Ver.5.0.x
IK操作追加
アニメーションの連番画像出力
Ver.1.20 ～ 1.26
Unity側のUpdateに同期
Ver.5.1
スプライトシート出力
バイナリ形式の出力機能追加
Ver.1.27b1 ～ 1.27f1
SubAnimationsプロパティ追加
ForceShow() / ResetForceShow()追加
ForceAlpha() / ResetForceAlpha()追加
Ver.5.1.x
”TexturePacker To SS”リリース
OPTPiX SpriteStudio SDKをGitHubで公開
Ver.1.28b1 ～ 1.29b1
当たり判定パーツにScale/Rotate追加
Unity上での再現性向上
Ver.5.2
アニメーションのリサイズ機能
編集時のパーツロック機能追加
Unity × KLab × OPTPiX SpriteStudio
デザインとコードの２面Tips！
KLab株式会社
本日のテーマ
まもなく公開予定の「かぶりん！」のアニ
メーション制作で「OPTPiX SpriteStudio」
を導入しました。今回はエンジニア、クリ
エーターの両方の視点から振り返ってみた結
果を発表したいと思います。
アジェンダ
● スクリプトでのアニメーションの制御
● SSPlayerの改造
● Unityに入れ込んでからぶつかった、ドロー
コール問題及び回避した手段
● SpriteStudioをFlashクリエイターが使って悩
んだこと・つまづいたこと
村上
雅裕
KLab株式会社
スタジオ5
開発統括 兼 プロジェクトマネー
ジャー
かぶりん！とは？
タイトル：かぶりん！
ジャンル：ぶん投げRPG
対応OS：iOS6.0〜、Android4.0〜
価格：無料
※一部有料アイテムあり
公式サイト：http://www.kaburin.com/
iOS版近日公開予定！！
なぜSpriteStudioを選んだのか？
案件開始当時（2013年5月頃）Unity 2Dの機能が無かったため、別途2Dアニ
メーションを制作／再生／制御できるツールが必要だった。当時候補とし
て検討したのは以下の2つ。
•
•
SpriteStudio
SmoothMoves
関節アニメーションなどやりたいことはどちらでもできそう。
最終的にはアニメーション制作のしやすさ（オーサリング
ツールの使いやすさ）からSpriteStudioを選定。
実際のワークフロー
クリエーターの作業
1. SpriteStudioでアニメーションを制作する
2. SpriteStudioからUnity用にアニメーションデータをエクスポート
し、Unityプロジェクト内にD&Dする
3. Git (Github) でCommit / Push / Pull Request
4. Pull Requestを確認し、ブランチをマージ
5. XXAnimationPlayer的なスクリプト（※後述）を作成
エンジニアの作業
アジェンダ
● スクリプトでのアニメーションの制御
● SSPlayerの改造
● Unityに入れ込んでからぶつかった、ドロー
コール問題及び回避した手段
● SpriteStudioをFlashクリエイターが使って悩
んだこと・つまづいたこと
アニメーションの再生
public SsAnimation IdlingAnimation;
private SsSprite sprite;
void Awake() {
sprite = gameObject.GetComponent<SsSprite>();
}
// Awake時に参照を取得する
// 待機アニメーションを再生する
public void PlayIdlingAnimation() {
sprite.Animation = IdlingAnimation; // 待機アニメーションを設定
sprite.PlayCount = 0; // 再生回数を設定（0はループ）
sprite.Play(); // アニメーションの再生
}
アニメーションの停止／再開
// アニメーションを停止する
public void PauseAnimation() {
sprite.Pause();
}
// アニメーションを再開する
public void ResumeAnimation() {
sprite.Play();
}
※再度 sprite.Play() すればレジュームになる
アニメーションの再生速度の変更
// アニメーションの再生速度を倍率で指定する
sprite.Speed = 0.5f;
※ただし混乱を招かないよう再生速度の調整は極力アニメーショ
ン制作時に設定（スクリプト側ではあまり変更しない）
アニメーション再生の終了通知
public void PlayAttackAnimation() {
sprite.Animation = AttackAnimation;
sprite.PlayCount = 1;
sprite.AnimationFinished = PlayIdlingAnimation;
sprite.Play();
}
攻撃アニメーション終了後に待機
アニメーションを再生する
public void PlayIdlingAnimation(SsSprite sprite) {
// 待機アニメーションを再生
}
他にもXX演出アニメーション終了後にXXシーンに遷移のような使い方もできます
アニメーション周りのスクリプトを振
り返ってみたが、だいたいこのくら
いのシンプルなパターンをつなぎ合
わせることで、アニメーション制御
ができる。
アジェンダ
● スクリプトでのアニメーションの制御
● SSPlayerの改造
● Unityに入れ込んでからぶつかった、ドロー
コール問題及び回避した手段
● SpriteStudioをFlashクリエイターが使って悩
んだこと・つまづいたこと
なぜ必要になったのか？
ゲーム時間を止めるときにTime.timeScaleを使用するが、
Time.timeScaleを0に設定するとSpriteStudioのアニメーションも停止
してしまう。
public void Pause() {
Time.timeScale = 0f;
}
public void Resume() {
Time.timeScale = 1f;
}
例えばこんな場面
解決策
SsSpriteをTime.deltaTimeだけでなく、
Time.fixedDeltaTimeベースでも動作可能にす
るように切り替えるメソッドを追加。これに
よってTime.timeScaleを0に設定した場合でも
SpriteStudioで作ったアニメーションを再生す
ることができる。
エンジニア視点でのまとめ
● クリエーターにSpriteStudio、Unity、Git (Github) を使って
もらうことでスムーズなワークフローを確立することができ
た
● SpriteStudioのアニメーション制御は非常にシンプルなコー
ドをつなぎ合わせるだけOK
● SSPlayerの機能が不足している場合は、ソースは公開され
ているので独自に機能追加すればいい
> ※また、旧アセット・新アセットともに、現時点の段階でもソースコード
> 自体の改変は自由ですので、適宜Unity側で使いやすいよう手をいれて
> くださって結構でございます
柴田 典政
KLab株式会社
スタジオ5
デザイナー
アジェンダ
● スクリプトでのアニメーションの制御
● SSPlayerの改造
● Unityに入れ込んでからぶつかった、ドロー
コール問題及び回避した手段
● SpriteStudioをFlashクリエイターが使って悩
んだこと・つまづいたこと
問題にぶつかるまでのあらすじ
「かぶりん」のコンセプト上、「わらわら感」を出す為に、どうしても大多数の
キャラクターを表示する必要があった。
Unityで開発するにあたって、どうしても大多数オブジェクトだとドローコールがふえてしまう。
同素材のアニメーションなら、複数配置してもドローコールが増えないというSpriteStudioを試してみ
る。
種類ごとにしかドローコールが増えない！
これは行けるのではと思い設計してみた。
この時は、まさかこんなことになるなんて、思いもしなかった。
入れ込む前の想定
【各素材想定】
【想定コール数】
プレイヤー：1
（サブ＊10体）4
種：4
オブジェクト
数：84
総コール数：12
敵キャラクター：1
（サブ＊10体）4
種：4
ドロ－コール問題とはなん
だったんだ？と余裕こいて
いましたが・・・
土台：1
背景：1
完全実装後
ページへ
現実世界
【実
際】
約100
ドローコール：
※ただ配置しただけで、この状態なのでどうしたもんかと
【原因】
どうやら、アニメーションを大量に配置すると、各素材が干渉しあって、ドローコールが肥大化
するようだった。
干渉とは？
ウェブテクノロジ・コムに問い合わせてみた
【回答】
同一Ｚ平面上に複数 の メッシュを重ねている場合、例えば違うマテリアル
を持った２つ以上のスプライトを同じＺ座標に置くと、パーツ(１サブメッ
シュ)単位で 他のアニメのパーツが挟まったりし、結果としてマテリアルの
切り替え が
必要以上に発生するので、ドローコールの増加につながる事があります。
また、1つのキャラクター内に、アルファブレンドとそうでない物が混在し
ている場合でも増加する場合があります。
同Z軸にアニメーションを配置しない
カラーバランス機能を使った
アニメーションを使わない
解決方法
アニメーションが出来るだけ
干渉しあわない様に設計す
る。
■主に行った事として
1：使用するレイヤーの整理
2：干渉の回避
１．使用セルの整理
設計上、どうしても干渉してしまう箇所の
干渉アニメーション素材数を減らす。
別セルアニメーション素材のセル画像を纏める。
詳細図
※個別に使用していた『かぶりん』『敵側の雑魚』セルを1枚のセル
に集約
■ BEFOR ■
■ AFTER ■
A
B
D
C
5
干渉セル素材x
P
L
A
Y
E
R
ABCD・・
・
干渉セル素材x
P
L
A
Y
E
R
2
※『敵側の雑魚』セルも同様に、セル画像を集約
２．干渉の回避
設計上、干渉してしまうアニメーション素材数を減ら
す。
各エリアを決めて、エリア毎に使用するアニメーション
を想定・制限しながら、干渉する素材数を尐なくする。
Z軸で大きく3エリアに区分
各エリアの干渉素材
エリア：A
干渉素材x2
エリア：B
干渉素材x2+α
エリア：C
干渉素材x2
ABCD
PLAYER
ABCD
ENEMY
ABCD
ABCD
エフェクト素材等
※画像2を参照
完全実装後
初期想定時での配置
ドローコール：
7
※画像1を参照
UI等も込みの配置
ドローコール：
16
グラフィッカ―がSpriteStudioで
アニメーションを制作してみて
■良かった点■
・制作フローが単純なので、直ぐにアニメーションを作れる
※画像「切り取る＞配置する＞パーツを移動や回転などをする」・・・それだけ
・各ステータス（座標や変更データ）が視覚的に分かり、各項目をコピーペース
ト出来るので、同様の「動き」「座標」等を入力せずに制作が出来る
・物足りない場合に、自身でパーツを追加加工出来るので、自由に制作すること
が出来る
■悪かった点■
・現在は直っていますが、素材画像をフォルダに纏めたプロジェクトにて、出力
した場合に、ディレクトリ構成を維持した出力が出来なかった。
正解の出力ファイルが分からず、Unityにインポートしても生成されず、エラー
を出す。
・ショートカットキー等の基本操作マニュアルが無かった為、知らない機能など
があった。
・アニメーションファイル内に、更にファイル名をつける為、エクスポートされ
た素材名が長くなる。
例：A_efe_gachaAuto_star00_star00
アニメーションファイル名
内部ファイル名※デフォルト名は「anime_1」
まとめ
「かぶりん」のゲーム設計においては、アニメーション素材
によって引き起こる干渉を、技術的に回避するのではな
く、使用する方法や制限をすることで、クリエイティブ側
で回避することが出来ました。
技術面で問題にぶつかったから、開発側に頼るだけでなく、
クリエイティブ側でも考えれば、このような回避方法を見
つけることが出来るので、もっと開発側に踏み込んで行っ
てみましょう。
朝日
秀樹
KLab株式会社
クリエイティブ部１G
アニメーショングループ
グループリーダー
はじめに
アニメーション制作ツールを
Flashに近い形の制作環境に整えてくださった
ウェブテクノロジ・コム様には
Flashと共に心中するんじゃないかと思っていた中
また制作の場をいただけたことに
大いなる感謝を申し上げます。
感謝した所で、この後はほとんど愚痴です。
アジェンダ
● スクリプトでのアニメーションの制御
● SSPlayerの改造
● Unityに入れ込んでからぶつかった、ドロー
コール問題及び回避した手段
● SpriteStudioをFlashクリエイターが使って悩
んだこと・つまづいたこと
つまづきポイント１
・ムービークリップ的なことができない
ムービークリップ的なものが無くて困ること
⇒アニメーションの複製が手軽にできない
ムービークリップ ： アニメーションを内包した１つのオブジェクト
例えば、
星がキラキラ光るアニメーションを複数配置したい場合
Flashの場合
SpriteStudioの場合
SpriteStudioのタイムライン
複数置いた時の
SpriteStudioのタイムライン
SpriteStudioのタイムライン
キーフレームの数が増大し、調整に時間がかかる
解決方法
別アニメーションとして制作して
Unity上で組み込んで確認
or
Flashでモックアニメーションを制作してから
SpriteStudioでの制作に入る
つまづきポイント２
・イージングを一括で設定できない
イーズインやイーズアウトなどの
動きに抑揚を付ける場合
FlashとSpriteStudioでは多尐やり方が変わります
Flashの場合
Flashのイージング設定画面
１つの動きに対して一括で設定します
Flashの場合
Flashのイージング設定画面
小分けに設定もできます
SpriteStudioの場合
SpriteStudioのイージング設定画面
１つのプロパティの動きに対して１つずつ設定します
Flashではできないこと
SpriteStudioのイージング設定画面
カーブ設定画面で座標をずらせる！
Flashではできないこと
Flashのイージング設定画面
起点を超えたカーブもつくれる！
つまづきポイント３
・ムービーの確認がしづらい
前述した通り、ループアニメーション等は
組み込むまで確認もできないので
モックでFlashをつかってアニメーションを組んだりして
います
その際
全員に『こういうアニメーションになるよ』と共有して
おくと
組み込み時のパーツ配置ミスやタイミングのズレを
アニメーション制作者の時間を取らずに
やってもらえます
解決方法
コンテ段階でモックを制作し、全体に共有する
つまづきポイント４
・スクリプト制御ができない
Flashでは条件分岐やボタンでのスキップを
内部に組み込むことができましたが
SpriteStudioはアニメーションツールに特化しているので
アプリ内ではそれができません
開発者さんとの連携を強めるほかないので
よりフットワークの軽い動きをする必要があります
しかし
複雑でないものは自身で配置して確かめるのが
一番手っ取り早い上に精度も上げられます
解決方法
自身で組込みまでやる
つまづきポイント４
・その他Unity由来の規制
重くなる原因（ドローコール増加等）を避けなければい
けない
⇒テクスチャ追加
⇒セルマップ追加
⇒カラーブレンド（ミックス以外）
⇒etc..
解決方法
諦める
まとめ
色々言いましたが
ムービークリップ的なことができるよう、祈っています
以上で、ＫＬａｂからの発表は終わりです。
ご清聴ありがとうございました。
OPTPiX SpriteStudio Ver.5.3
その前に。
OPTPiX SpriteStudio
2013年度事例紹介
『拡散性ミリオンアーサー』
スクウェア・エニックス / ビサイド
エフェクトアニメーション、演出全般、イベントバナー
※当初から移植を意識してSpriteStudioを採用
『サムライソウルイクサ』
CJインターネットジャパン / ナウプロダクション
エフェクトアニメーション、演出全般
※EzGUI+SpriteStudio
OPTPiX SpriteStudio
2013年度事例紹介
『メルクストーリア』
Happy Elements
キャラクターアニメーション、エフェクト全般
※大量のキャラクターが動き回る！
『PocoTown』（ビヨンド株式会社）
キャラクターアニメーション、エフェクト全般
※サーバーサイドでアトラスを再構成
OPTPiX SpriteStudio Ver.5.3
改めて。
OPTPiX SpriteStudio Ver.5.3
インスタンスモードの追加
アニメーション自
体をパーツとして
シーンを作成する
新モード。
配置したパーツは
互いに影響を
及ぼさない
OPTPiX SpriteStudio Ver.5.3.x
（？）
動画出力機能の拡張
OPTPiX SpriteStudioで制作した
アニメーションを動画で共有
OPTPiX SpriteStudio Ver.5.3.x
（？）
Photoshop連携機能の拡張
Photoshopなどの外部ドロワーとの
行き来をかんたんに
OPTPiX SpriteStudio for Indie
『Unity 無料版』のライセンス許諾条件を
満たしている方々であれば、
『OPTPiX SpriteStudio for Indie』も同じく、
無料です。
https://act.webtech.co.jp/ja/indies/sstudio/sstudio/
ご清聴ありがとうございました
Unity x
KLab x
OPTPiX SpriteStudio
© Copyright 2024 Paperzz
