SATCH ARでアニメーション表示をやってみる（その１）
通常、SATCHでこの手のことをやる場合、Mayaや3ds Maxを使ったり、MMDのpmd+vmdデータを使ってBlenderで作ったりしますが、
3DのCGはちょっと苦手という方むけに、パラパラアニメでやってみます。
SATCHというＡＲアプリ作成・運用ツールが扱うオブジェクトは３Ｄが基本なので２Ｄ表現にはあまり適していないのですが、 その辺無理してやってみます。
（MMD+Blenderの組み合わせや、Live2Dを使った説明についてはまた後日）
（MMD+Blenderは止めて、MMDAgentに変更されるかもしれません。juliusと同じようにAndroid NDKでクロスコンパイルする必要があるような気が...）
２Ｄでアニメが描ける方はスクラッチからデータを作れますし、そうじゃない方もアニメーションＧＩＦからデータを作れます。
今回は、既存のアニメーションＧＩＦからデータを起こして作ってみます。
少々手間はかかりますが、考え方は単純です。
ページの下にサンプル
その他、２Ｄデータの作り方
動画データを使ってSATCHのアニメーション表示用２Ｄデータを作成
MMDを使ってSATCHのアニメーション表示用２Ｄデータを作成
SATCHでアニメーション表示用シナリオの雛形を作ってみました
TOP
作り方
データの準備
腕に覚えのある方は、背景を透過したＰＮＧ形式で、データを作成してください。
そうでもない方は、まず適当なアニメーションＧＩＦを探します（著作権なんかにはご注意）。
(
次期バージョンのLive2Dでは独自のアニメーションＧＩＦを作成できるようなるそうです
すみません、GIFアニメは現バージョンでもできました。
次期バージョンに期待していたのはSVG出力の方でした。
）
次に、アニメーションＧＩＦから画像を抽出します。
画像の抽出にはGiamなどが便利です。
Giam
Giamで読み込んだら、「全部選択」してから「選択コマの保存」をします。形式はPNGを使います。
注意
各コマのサイズがそろっていることを確認してください。後でリサイズする際にサイズが不揃いだと再生時にズレがおこります。
各画像のサイズを２の累乗サイズにそろえます。これは後でSATCH Studio Liteを使用するためです。
例えば、128x128とか、256x256など...。
不揃いだけどどうしてもという方は、128x128や256x256の空白画像を用意して、imageMagickなどで位置をあわせて合成するとか...などやればいいんじゃないでしょうか？
次に、各画像の背景を透過にします。アプリは何を使ってもいいですがフリーなら例えばAzPainterなどが便利。
AzPainter
背景を透過PNGにして保存。
SATCH Studio Liteを使ってデータとシナリオを作成
まずはデータ作成。
SATCHでトラキングする際の画像を準備。例えばこれをtracking.jpgとします。これをLiteのフォルダー内のresources\trackerフォルダーに保存。
先に作ったアニメ用画像の最初の１枚を、resources\2dContentsフォルダーに保存。
SATCH Studio Liteを起動します。
設定を開いてアプリIDを記述します。今回はSATCH VIEWREを使ってみますので、SATCH VIEWERのIDにします。
認識対象をクリックし、2Dファイル名をクリックして、リストに追加します。
画像ファイルは「to_1.png」という名前に改名されて保存されます。
これが本番用のシナリオになります。
先に作った背景透過画像のファイル名を「to_2.png」以降の連番にしておきます。
このシナリオフォルダーに「to_x.png」ファイルが保管されているフォルダーを移しておきます。
アニメーション用シナリオをSATCH Studioで作成
SATCH Studioを起動して、Liteで作ったフォルダーのdpdを読み込みます。
「to_x.png」ファイルに赤い印が付いているので、すべてのファイルをincludeしてSave。
to_1.pngファイルはtextture_1としてテクスチャー登録されているので、to_2.png以降のファイルをすべて登録します。
メニュのFile -> Add -> 2D Elements -> Textureを選んで、Nameを「texture_2」以降の連番で各ファイルを読み込んでテクスチャー登録します。
テクスチャー登録が終わったら、Luaコードを編集します。
main(luascript)を開きます。
アニメーションの考え方として、planeメッシュのマテリアルのテクスチャーをrepeatループの中で順次書き換える...ということです。
登録したテクスチャーをLuaコードの中で定義しておきます。
local texture1 = Texture(scene:getObjectByName("texture_1"))
local texture2 = Texture(scene:getObjectByName("texture_2"))
local texture3 = Texture(scene:getObjectByName("texture_3"))
local texture4 = Texture(scene:getObjectByName("texture_4"))
local texture5 = Texture(scene:getObjectByName("texture_5"))
・
・
・
・
カウントチェック用の変数はこんな感じ。
temp_num = 1
次にループしている場所にテクスチャー書き換えコードを記述します。
setTextureToPlane(targets[luaIndex]['plane2d'], targets[luaIndex]['texture'])を探します。
これをコメントアウトして以下のコードを追加。
--setTextureToPlane(targets[luaIndex]['plane2d'], targets[luaIndex]['texture'])
if temp_num == 1 then
setTextureToPlane(targets[luaIndex]['plane2d'], texture1)
end
これは１回だけ呼び出されるコードですので、ループ内の別の場所に書き換えコードを追加します。
以下の場所を探して、elseの上に記述します。
else
-- If any targets aren't detected
書き換えコード。
temp_num = temp_num + 1
if temp_num == 2 then
setTextureToPlane(targets[luaIndex]['plane2d'], texture1)
elseif temp_num == 4 then
setTextureToPlane(targets[luaIndex]['plane2d'], texture2)
elseif temp_num == 6 then
setTextureToPlane(targets[luaIndex]['plane2d'], texture3)
elseif temp_num == 8 then
setTextureToPlane(targets[luaIndex]['plane2d'], texture4)
elseif temp_num == 10 then
・
・
・
・
end
--Xのところは、最後のtemp_numの数値にします。
if temp_num == X then
temp_num = 1
end
最後にシナリオをエクスポートし署名ファイルを更新、ZIP圧縮して完了です。
ZIP圧縮したファイルをWEBサーバーにアップ(scenario.zip)。
SATCH VIEWERでシナリオを起動するには２つのHTMLファイルが必要です。
以下のexample.comは適当に書き替えてください。
●ZIPファイルのPDPを呼び出すHTML(pdp.html)。
これには、satch.jsを使います。
<html lang="ja"> <head> <title>qr reader</title> <meta charset="utf-8" /> </head> <script type="text/javascript" src="satch.js"></script> <body> <object id="satchViewer" type="application/x-satch" data="http://example.com/scenario.zip"> <param name="viewtype" value="vision"> </object> </body> </html>
●SATCH VIEWERのQRリーダーを使う場合、ＱＲコードを表示するHTML(QRdisplay.html)。
<html lang="ja"> <head> <title>qr reader</title> <meta charset="utf-8" /> </head> <script type="text/javascript" src="satch.js"></script> <body> <br> <img src='http://wisteriahill.sakura.ne.jp/QR_CODE/gen_qrcode.php?src=http://example.com/pdp.html'> <br><br><br> <br> </body> </html>
TOP
サンプル
猫の画像をトラックすると、cat girlが踊ったりします（短い動きがループされてるだけですが....）。
動作確認実機：Xperia acro(docomo) + Android 2.3.4
SATCH VIEWERのＱＲリーダーを使う。
こういうアイコン。まだインストールされていない場合は、Google Playから「SATCH VIEWER」で検索。
ＱＲリーダーを起動したら以下のコードを読みます。
VIEWER画面になったら以下のトラッキング画像にカメラを向けます。
トラッキング用の画像
TOP