2012年8月20日～22日に開催された「CEDEC2012」。そのCEDEC2012で行われた弊社セッションのスライド資料です。 SpriteStudio http://www.webtech.co.jp/spritestudio/

1. 改めて注目される2D アニメーションツール
～国産2Dツールが（舶来ゲームエンジンの力を借りながら）世界へ～
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 1

2. プレゼンター自己紹介
 浅井 維新
 株式会社ウェブテクノロジ・コム
ソリューション営業部
 業務系PG～SEを10年弱、IT出版系人材紹介会社を
経て2010年初春より現職
 ゲームも好きだけどコントローラ収集のが好き
@karasuma_usb
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 2

3. 本日のアジェンダ
 ウェブテクノロジ社と
 と
 新しい プレビュー
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 3

4. ウェブテクノロジ社って？
 ウェブテクノロジ社
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 4

5. 「SpriteStudio」って？
『超汎用』2Dアニメーション制作ツール
リソース SpriteStudio
バイナリ形式
.ssa
XML形式
.ssax

6. 「SpriteStudio」が採用されてきた理由
 出力データの扱いやすさ（バイナリ形式、XML形式）
→アニメーションデータの利用先を選ばない
 バイナリ形式利用での採用プラットフォーム
 Brew、S!アプリ、i-mode
 PlayStation2、PSP、PlayStation3、PS Vita
 Nintendo DS、Wii、Nintendo3DS
 Xbox360、Windows（XNA）
 XML形式利用での採用プラットフォーム
 Android、iOS、WindowsPhone
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 6

7. 「SpriteStudio」が採用されてきた理由
 プラットフォームの変遷に強い
 ガラケー → スマホ ←→ コンシューマ
（平気！ 会社の方針がコロコロ変わっても平気！）
100
80
60 ガラケー
40 スマホ
専用機
20
0
2010 2011 2012
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 7

8. 「SpriteStudio」が採用されてきた理由
 プラットフォームの変遷に強い
 ガラケー → スマホ ←→ コンシューマ
（平気！ 会社の方針がコロコロ変わっても平気！）
 習得が「かんたん」
 用途を限定することで憶えることが少なめ
（平気！ ゆと○世代でも平気！）
 分業体制が構築しやすい
 アニメーション制作を自己完結で
（平気！ デザイナーと開発の仲が悪くても平気！）
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 8

9. 「SpriteStudio」が採用されてきた成果
★Dr.モモの島
（comcept / index / GREE）
★ロストキングダム
（R-Force Entertainment / Mobage）
★Defense Witches
（NEWGATE）
★おさわり探偵 なめこ栽培キットDeluxe
（BeeWorks / Success）
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 9

10. 「SpriteStudio」の昨年後半～現在のアプローチ
 『他力本願』 から『手厚いフォロー』へ
 『SpriteStudioPlayer for Unity』の提供
↑長い
 『SSP for HTML5』の開発
↑短くしてみた
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 10

11. SpriteStudioと「HTML5」～ 豆知識編 ～
 ステークホルダーのみなさん
これからはHTML5
← Steve Jobs with Rinko
HTML5大好き
Larry Page with i-mode →
いやいやうちも
←Bill Gates with XP Tablet PC
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 11

12. SpriteStudioと「HTML5」～ 実装概要編 ～
 アニメーションの実装は<canvas>（定番）
 頂点変形・頂点カラーは未対応（WebGL待ち）
 アニメーションの実装に CSS（・・・検討中）
 SpriteStudioの思想と異なるが対応可能
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 12

13. SpriteStudioと「HTML5」～ TIPS① ～
 ブラウザ別HTML5対応スコア（HTML5test.com）
Browser
Score 437 324 275 138 328 376 400
↑WindowPhoneェ・・・
 ユーザー「標準」は何かを考えると
 iOSは額面通り「324」
 Androidは標準ブラウザ「275～212」あたり？
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 13

14. SpriteStudioと「HTML5」 ～ TIPS② ～
 デバイス別フレームレート調査結果
Device iPhone iPhone MEDIAS INFOBAR Xperia Arrows X Ployer
4S 3GS N-01D A01 Ray F-10D MOMO9
OS iOS iOS Android Android Android Android Android
5.1.1 5.1.1 2.3.4 2.3.4 2.3.3 4.0.3 4.0.3
FPS 60 50 44 47 42 44 11
 HTML5はターゲットハードのスペック次第
 iOS / Android 両方のユーザーを相手にするなら
 ターゲットスペックを「下」に合わせる
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 14

15. SpriteStudioと「HTML5」 ～ 採用事例編 ～
 『テぺっと』
 企画・開発はビサイド
 Amebaプラットフォーム
 フレームワークは『enchant.js』
 キャラクタアニメーションにSpriteStudio
 アニメーションのFPSレートは”15fps”
 SpriteStudio側のフォロー
 60fpsのアニメーションを一括変換
 中間ファイルは60fpsで維持→HTML5は30fps変換
 60fpsのアニメリソースさえあれば、
HTML5以外でも再利用可能という思想
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 15

16. SpriteStudio自体を今後を考えるに
 Macintoshユーザーの急増
 iOSアプリはMacintoshでしか開発できない
 MacintoshならAndroidアプリも開発できる
Win & Mac で開発可 →
← Mac でのみ開発可
似すぎ →
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 16

17. SpriteStudio自体を今後を考えるに
 ７年ちょっとという歳月で、建て増しするにも限界
風呂場が外。↑
↑なんか玄関が２つ。
使い勝手の悪い収納↓
←バルコニーの外に
更にバルコニー？
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 17

18. 遠藤義輝
ＭＳＸとの出会いがプログラマー人生の
スタート。コンシューマゲームの開発を
経て現職。
念願が叶ってツール制作の現場に
VRAM:256MB
Ｔｗｉｔｔｅｒ：＠ｔｅｒｋｏｖ１７０

19. 次期
（仮）

20. 次期SpriteStudio
次期 要望・不具合対応の反応が早くなる

 少ない操作で目的を実現
 軽くてスッキリ、気分がいい （仮）

21. 次期SpriteStudio実装イメージ
入力フォーマット
現SSモーション (“.SSAX”)  3D座標系への対応
FLASH（”.XFL”）
TexturePacker(“.XML”)  UVアニメーション
 IK（インバースキネマティクス）
2D・3D表現統合  TexturePacker データのインポート
・キーフレーム方式
・頂点カラー ・頂点変形  画像差し替え機能の強化
・UVアニメーション
・インバースキネマティクス  UI素材向け機能
出力フォーマット
 FLASH のインポート
（仮）
 現行SSとは上位互換（Ver.4）
独自バイナリ / XML /
HTML5 / Unity /
iOS / Android /
CoronaSDK/ Win / etc…

22. 次期SpriteStudio ロードマップ
次期 2012/08：CEDEC2012 2012/12：First Ver. Fix
2012/11：Closed β 2013/01：Ver.1.x
 2012/11末：Closed β開始（Ver.4互換性担保）
 2012/12 ：正式版リリース （仮）
 2013/01～：追加機能順次アップデート
FLASH読み込み / IK / インスタンス機能 / etc...

23. 次期SpriteStudio は何で作ってるの？
大前提：Win/Mac 両方で動かしたい！
次期  Air
 Qt
 Mono
 Silverlight
 C++ Builder XE2 （仮）
 wxWidgets
 HTML5(冗談抜きです)

24. 次期SpriteStudio は何で作ってるの？
第23回 エンバカデロ・デベロッパーキャンプ
次期
C++Builderテクニカルセッション
「FireMonkeyクロス開発テクニカルエッセンス –
アニメーションデータ作成ツール開発事例から」
株式会社ウェブテクノロジ
R&D 1部 橋本孔明
（仮）
参考URL：
http://www.embarcadero.com/jp/developer-camp-japan#b4

25. SpriteStudio、「世界へ」って？
 国産ツールとして
 Unity、CoronaSDKのユーザーにメリットを
 英語版、各国語版を順次リリース（2013年～）
 Macintosh版・Windows版アップデート同期
Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 25

26. SpriteStudio 優待キャンペーン
『次期SpriteStudio』の価格は、 95,000円
今、現行バージョンのSpriteStudio Ver.4を購入すると
『次期SpriteStudio』が、なんと！ 無料です
http://www.webtech.co.jp/spritestudio
@spritestudio
Copyright (c) 2012 Web Technology Corp. All Rights Reserved.

27. ご清聴ありがとうございました
SpriteStudioは、各プラットフォーム・ゲームエンジンに対応しています
iOS
GameFlamework PS Vita
GREE mobage
Nintendo 3DS HTML5
Android
for Designers for Programmers for All Developers
•ドラッグ＆ドロップなど直感的な操作で、 •動きを付ける作業をデザイナに任せる •SpriteStudioが、アニメーションの
アニメーションデータの作成が可能に ことにより、負担が軽減 開発効率を向上させる！
•タイムチャートとグラフでアニメーション •SDKを使って、アニメーションデータの
データを視覚的に管理 コンバータにも簡単に作成可能
http://www.webtech.co.jp/spritestudio
SpriteStudio Twitter：@spritestudio
Copyright (c) 2012 Web Technology Corp. All Rights Reserved.