改めて注目される2D アニメーションツール SpriteStudio ～国産2Dツールが（舶来ゲームエンジンの力を借りながら）世界へ～

Copyright (c) 2012 Web Technology Corp. All Rights Reserved.

～国産2Dツールが（舶来ゲームエンジンの力を借りながら）世界へ～

1

改めて注目される2D アニメーションツール


プレゼンター自己紹介

2

浅井維新

株式会社ウェブテクノロジ・コムソリューション営業部

業務系PG～SEを10年弱、IT出版系人材紹介会社を経て2010年初春より現職

ゲームも好きだけどコントローラ収集のが好き

@karasuma_usb


本日のアジェンダ

3

ウェブテクノロジ社と

と

新しいプレビュー


ウェブテクノロジ社って？

4

ウェブテクノロジ社

「SpriteStudio」って？

SpriteStudio リソース

バイナリ形式

XML形式

.ssax

.ssa

『超汎用』2Dアニメーション制作ツール


「SpriteStudio」が採用されてきた理由

6

出力データの扱いやすさ（バイナリ形式、XML形式）

Brew、S!アプリ、i-mode

PlayStation2、PSP、PlayStation3、PS Vita

Nintendo DS、Wii、Nintendo3DS

Xbox360、Windows（XNA）

Android、iOS、WindowsPhone

→アニメーションデータの利用先を選ばない

バイナリ形式利用での採用プラットフォーム

XML形式利用での採用プラットフォーム



7

プラットフォームの変遷に強い

0

20

40

60

80

100

2010 2011 2012

ガラケー

スマホ

専用機

ガラケー → スマホ ←→ コンシューマ

（平気！会社の方針がコロコロ変わっても平気！）



8

プラットフォームの変遷に強い

ガラケー → スマホ ←→ コンシューマ

習得が「かんたん」

分業体制が構築しやすい

用途を限定することで憶えることが少なめ

アニメーション制作を自己完結で

（平気！会社の方針がコロコロ変わっても平気！）

（平気！ゆと○世代でも平気！）

（平気！デザイナーと開発の仲が悪くても平気！）


「SpriteStudio」が採用されてきた成果

9

★Dr.モモの島

（comcept / index / GREE）

★ロストキングダム

（R-Force Entertainment / Mobage）

★Defense Witches

（NEWGATE）

★おさわり探偵なめこ栽培キットDeluxe

（BeeWorks / Success）

http://www.youtube.com/watch?v=e7xjGLeNjYQ


「SpriteStudio」の昨年後半～現在のアプローチ

10

『他力本願』

『SpriteStudioPlayer for Unity』の提供

『SSP for HTML5』の開発

↑短くしてみた

↑長い

から『手厚いフォロー』へ


SpriteStudioと「HTML5」～豆知識編～

11

これからはHTML5

HTML5大好き

いやいやうちも

ステークホルダーのみなさん

← Steve Jobs with Rinko

Larry Page with i-mode →

←Bill Gates with XP Tablet PC


SpriteStudioと「HTML5」～実装概要編～

12

アニメーションの実装は<canvas>（定番）

頂点変形・頂点カラーは未対応（WebGL待ち）

アニメーションの実装に CSS（・・・検討中）

SpriteStudioの思想と異なるが対応可能

C:/Users/asai/Documents/HTML_card_20120815/HTML_card/card.html


SpriteStudioと「HTML5」～ TIPS① ～

13

Browser

Score 437 324 275 138 328 376 400

ユーザー「標準」は何かを考えると

iOSは額面通り「324」

Androidは標準ブラウザ「275～212」あたり？

↑WindowPhoneェ・・・

ブラウザ別HTML5対応スコア（HTML5test.com）

SpriteStudioと「HTML5」～ TIPS② ～

デバイス別フレームレート調査結果

Device iPhone 4S

iPhone 3GS

MEDIAS N-01D

INFOBAR A01

Xperia Ray

Arrows X F-10D

Ployer MOMO9

OS iOS 5.1.1

iOS 5.1.1

Android 2.3.4

Android 2.3.4

Android 2.3.3

Android 4.0.3

Android 4.0.3

FPS 60 50 44 47 42 44 11

HTML5はターゲットハードのスペック次第

iOS / Android 両方のユーザーを相手にするなら

ターゲットスペックを「下」に合わせる

Copyright (c) 2012 Web Technology Corp. All Rights Reserved. 14

SpriteStudioと「HTML5」～採用事例編～

『テぺっと』

企画・開発はビサイド

Amebaプラットフォーム

フレームワークは『enchant.js』

キャラクタアニメーションにSpriteStudio

SpriteStudio側のフォロー

60fpsのアニメーションを一括変換

中間ファイルは60fpsで維持→HTML5は30fps変換

60fpsのアニメリソースさえあれば、 HTML5以外でも再利用可能という思想

アニメーションのFPSレートは”15fps”

15 Copyright (c) 2012 Web Technology Corp. All Rights Reserved.

SpriteStudio自体を今後を考えるに

16

Macintoshユーザーの急増

iOSアプリはMacintoshでしか開発できない

MacintoshならAndroidアプリも開発できる

Win & Mac で開発可 →

← Mac でのみ開発可似すぎ →



SpriteStudio自体を今後を考えるに

17

７年ちょっとという歳月で、建て増しするにも限界

↑なんか玄関が２つ。

風呂場が外。↑

使い勝手の悪い収納↓

←バルコニーの外に

更にバルコニー？

VRAM:256MB

遠藤義輝

ＭＳＸとの出会いがプログラマー人生の

スタート。コンシューマゲームの開発を

経て現職。

念願が叶ってツール制作の現場に

Ｔｗｉｔｔｅｒ：＠ｔｅｒｋｏｖ１７０

次期

（仮）

次期

（仮）

要望・不具合対応の反応が早くなる

少ない操作で目的を実現

軽くてスッキリ、気分がいい

次期SpriteStudio

（仮）

次期SpriteStudio実装イメージ

2D・3D表現統合・キーフレーム方式

・頂点カラー・頂点変形・UVアニメーション

・インバースキネマティクス

出力フォーマット

独自バイナリ / XML / HTML5 / Unity / iOS / Android /

CoronaSDK/ Win / etc…

入力フォーマット

現SSモーション (“.SSAX”) FLASH（”.XFL”）

TexturePacker(“.XML”)

FLASH のインポート

3D座標系への対応

UVアニメーション

IK（インバースキネマティクス）

TexturePacker データのインポート

画像差し替え機能の強化

UI素材向け機能

現行SSとは上位互換（Ver.4）

次期

（仮）

次期SpriteStudio ロードマップ

2012/08：CEDEC2012

2012/11：Closed β

2012/12：First Ver. Fix

2013/01：Ver.1.x

2012/11末：Closed β開始（Ver.4互換性担保）

2012/12 ：正式版リリース

2013/01～：追加機能順次アップデート

FLASH読み込み / IK / インスタンス機能 / etc...

次期

（仮）

次期SpriteStudio は何で作ってるの？

Air

Qt

Mono

Silverlight

C++ Builder XE2

wxWidgets

HTML5(冗談抜きです)

大前提：Win/Mac 両方で動かしたい！

次期

（仮）

次期SpriteStudio は何で作ってるの？

株式会社ウェブテクノロジ

R&D 1部橋本孔明

第23回エンバカデロ・デベロッパーキャンプ

C++Builderテクニカルセッション

「FireMonkeyクロス開発テクニカルエッセンス –

アニメーションデータ作成ツール開発事例から」

参考URL：

http://www.embarcadero.com/jp/developer-camp-japan#b4


SpriteStudio、「世界へ」って？

25

英語版、各国語版を順次リリース（2013年～）

Macintosh版・Windows版アップデート同期

国産ツールとして

Unity、CoronaSDKのユーザーにメリットを

SpriteStudio 優待キャンペーン

無料です

95,000円

http://www.webtech.co.jp/spritestudio

@spritestudio


今、現行バージョンのSpriteStudio Ver.4を購入すると

『次期SpriteStudio』が、なんと！

『次期SpriteStudio』の価格は、


SpriteStudioは、各プラットフォーム・ゲームエンジンに対応しています

for Designers for Programmers for All Developers

•ドラッグ＆ドロップなど直感的な操作で、アニメーションデータの作成が可能に

•タイムチャートとグラフでアニメーションデータを視覚的に管理

•動きを付ける作業をデザイナに任せることにより、負担が軽減

•SDKを使って、アニメーションデータのコンバータにも簡単に作成可能

•SpriteStudioが、アニメーションの開発効率を向上させる！

iOS

PS Vita

mobage

HTML5

Android

Nintendo 3DS

GREE

GameFlamework

http://www.webtech.co.jp/spritestudio

SpriteStudio Twitter：@spritestudio

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