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

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

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

1

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

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

プレゼンター自己紹介

2

浅井 維新

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

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

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

@karasuma_usb

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

本日のアジェンダ

3

ウェブテクノロジ社と

と

新しい プレビュー

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

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

4

ウェブテクノロジ社

「SpriteStudio」って？

SpriteStudio リソース

バイナリ形式

XML形式

.ssax

.ssa

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

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

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

6

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

Brew、S!アプリ、i-mode

PlayStation2、PSP、PlayStation3、PS Vita

Nintendo DS、Wii、Nintendo3DS

Xbox360、Windows（XNA）

Android、iOS、WindowsPhone

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

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

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

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

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

7

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

0

20

40

60

80

100

2010 2011 2012

ガラケー

スマホ

専用機

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

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

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

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

8

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

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

習得が「かんたん」

分業体制が構築しやすい

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

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

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

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

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

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

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

9

★Dr.モモの島

（comcept / index / GREE）

★ロストキングダム

（R-Force Entertainment / Mobage）

★Defense Witches

（NEWGATE）

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

（BeeWorks / Success）

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

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

10

『他力本願』

『SpriteStudioPlayer for Unity』の提供

『SSP for HTML5』の開発

↑短くしてみた

↑長い

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

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

SpriteStudioと「HTML5」～ 豆知識編 ～

11

これからはHTML5

HTML5大好き

いやいやうちも

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

← Steve Jobs with Rinko

Larry Page with i-mode →

←Bill Gates with XP Tablet PC

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

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

12

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

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

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

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

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

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 でのみ開発可 似すぎ →

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

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

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

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

SpriteStudio、「世界へ」って？

25

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

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

国産ツールとして

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

SpriteStudio 優待キャンペーン

無料です

95,000円

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

@spritestudio

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

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

『次期SpriteStudio』が、なんと！

『次期SpriteStudio』の価格は、

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

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

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