gtmf2012　spritestudio と "unity" と "coronasdk" と "ngcore" !...

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

SpriteStudio と Unity と CoronaSDK と ngCore ! ～組み合わせて改善する 2D ワークフローと、

（HTML5と、）次期 SpriteStudio

1


㈱ウェブテクノロジの主力製品

『OPTPiX imesta』

• 減色

• テクスチャコンバート

『SpriteStudio』

• ２Ｄアニメーション作成

• UIパーツ作成

『コミPo！』

• 誰でもマンガが描けるツール

• 企画書作るのに便利

『ライブアニメ』

• 音声入力同期のアニメ作成ツール

• ユーザーサポートやＥラーニング

を「やわらかく」

2

『SpriteStudio』って？？

『SpriteStudio』リソース

ユーザーデータフラグスクリプト etc…

バイナリ形式

XML形式

.ssax .sssx

.ssa .sss

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


『SpriteStudio』って？？


２Ｄ表現

• コマアニメーション

• 補完アニメーション

• パレットアニメーション

キーフレーム方式

• グラフ、チャート

• 親子関係

• ユーザーデータ

擬似３Ｄ表現

• パーツカラー（色演出）

• 頂点変形

• 頂点アルファ

２種類の出力フォーマット

• バイナリ

• XML

4


『SpriteStudio』超汎用の他力本願的成果

iOS

Android

Windows Phone（！）

プラットフォーム別採用実績

5

フィーチャーフォン

PlayStation2、PlayStation3

PSP、PS Vita

ニンテンドーDS、ニンテンドー3DS

Wii


『SpriteStudio』超汎用なのでネイティブ開発！

Dr★モモの島 comcept / Index / GREE

6


『SpriteStudio』超汎用なのでコンシューマから移植！

おさわり探偵小沢里奈 Beework / SUCCESS

7


『SpriteStudio』超汎用なので『CoronaSDK』！

Defense Witches NEWGATE

8

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

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

『CoronaSDK』って？？

Adobe社でFLASHを開発していたメンバー制作の、 iOS / Android / AmazonKindle / Nookアプリ開発用フレームワーク

Luaスクリプトで開発。ActionScript2.0に似ている

Objective-C / Java は不要

2Dタイプのアプリであればプロトタイピング～実制作がかなり簡単

物理エンジン、ネットワーク、UI、サウンド、動画、 HTML表示等のAPIを実装

2Dオブジェクトを大量表示しても60fps維持 ※iPad2上の「DefenceWitches」で計測


SpriteStudio → CoronaSDK → マルチ

XML → Lua

変換の段階で

補間計算結果をSpriteSheet化

コンバータ自体は

NEWGATE様のご好意で

弊社サイトにて提供中


『SpriteStudio』超汎用なので『ngCore』！

ロスト・キングダム R-FORCE ENTERTAINMENT INC. / mobage

11


『ngCore』って？？

米ngmoco社が開発したインタプリタ型ゲームエンジン

Javascriptだけで iOS / Android のアプリを開発可能

DeNAプラットフォームのメジャータイトルで採用

ネイティブと同等の2Dパフォーマンス、シンプルなAPI群

ライブアップデートをサポート


『SpriteStudio』超汎用の他力本願的成果（つづき）

iOS

Android

ゲームエンジン・フレームワーク別採用実績

プラットフォーム別採用実績（なんか減ってる）

13

CoronaSDK

ngCore

enchant.js

Unity3D


そして大完成

14

そして大制作


SpriteStudio → Unity → マルチパブリッシュ

•ドラッグ＆ドロップ •カスタムアセット化 •プレハブは自動作成 •１ｱﾆﾒ＝１ｵﾌﾞｼﾞｪｸﾄ •１ドローコール •当たり判定継承

15

超簡単！

http://www.asahi-net.or.jp/~uj9s-stu/stg/WebPlayer.html


無料です。

16

なんと・・・


SpriteStudio → HTML5

どうせなら最近話題のHTML5にも、と対応コンバータを用意

17

描画はCanvasを利用（CSS/jQueryは対応予定）

アニメーションデータはJavascript配列（json対応予定）

ブラウザ依存（一部機能はWebGL待ち）

フレームレートも端末に依存する

弊社単独ではどーにもできないかも・・・

とは言え、いくつか問題点

SpriteStudio → HTML5

SpriteStudio リソースバイナリ形式

ファイルリスト

.ssf

.ssa


Ssa to HTML5

HTML

+

JS


そして気になる『次期SpriteStudio』

Ver.5


SpriteStudio現行・次期版比較イメージ

2D表現・コマ方式

・キーフレーム方式・パレットアニメーション

・パーツの親子関係

擬似3D表現・頂点カラー・頂点変形

出力フォーマット・独自バイナリ

・XML

出力コンバータ Windows / iOS /

Unity3D / CoronaSDK

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

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

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

・独自バイナリ・XML

出力フォーマット

プラグイン Win / iOS / Android

Unity3D / CoronaSDK HTML5 / andMore…

入力フォーマット

プラグイン：FLASH（”.XFL”）

次期SpriteStudio（Win/Mac用）現行SpriteStudio（Win用）

20


次期SpriteStudio実装イメージ

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

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

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

・独自バイナリ / XML

出力フォーマット

Win / iOS / Android Unity3D / CoronaSDK HTML5 / andMore…

入力フォーマット

FLASH（”.XFL”）

動作環境OS Windows / Macintosh

21

Windows と Macintosh 両対応

FLASH のインポート

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

UV（テクスチャアニメーション）

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

→ 機能追加に伴いUIの改良

コンバータのプラグイン化

SDK公開

で、いつ出るのよ？

2012年8月までにはプレビュー版を公開

旧バージョンの販売とサポートは継続

次期SpriteStudioの発売開始は2013年初頭

・・・を目標

→乗り換えについては『かなり優待』します

秘密のスクリーンショット（2012/7/某日時点）


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

for Designers for Programmers for All Developers

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

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

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

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

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

iOS

enchant.js

mobage

HTML5

Android

CoronaSDK

GREE

Unity3D

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

SpriteStudio Twitter：@spritestudio

ご清聴ありがとうございました＆お問い合せください

gtmf2012 spritestudio と "unity" と "coronasdk" と "ngcore" !...

Technology

gtmf2012　spritestudio と "unity" と "coronasdk" と "ngcore" !...