情報処理学会 インタラクション 2014
IPSJ Interaction 2014

A2-4
2014/2/27

Android 端末上で動作する状態遷移図に基づく対話型アニメーション作成環境
周 而晶1

岡本 秀輔2

新堀 道信1

鎌田 賢3

米倉 達広3

概要：対話型アニメーションは，ユーザからの入力に応じて内部状態を変化させ，表示内容を変えるアニメーションであり，コンピュータゲームもその一種である．状態遷移図を用いてアニメーションの動作を表現できることに着目して，Islay と呼ばれる対話型アニメーションの作成ツールが開発され，ユーザがGUI エディタで状態遷移図を描くことにより，対話型アニメーションを簡単に作成できるようになっている．本研究では，タブレット端末の特徴であるマルチタッチ操作の利点を生かすように，Android 端末上で動作する対話型アニメーション作成環境の開発を行う．
キーワード：Android，対話型アニメーション，状態遷移図，Islay

Interactive Animation Authoring Platform Based on
State-transition Diagrams Runs on Android DevicesErjing Zhou1

Shusuke Okamoto2 Michitoshi Niibori1Tatsuhiro Yonekura3

Masaru Kamada3

Abstract: Interactive animations refer to animations that make internal state transitions and change theirappearances according to the input from users, which may become a kind of definition of computer games.
Based on the fact that the behavior of interactive animations can be defined by state-transition diagram, aninteractive animation authoring tool called Islay has been developed. Islay allows users to create interactive
animation simply by drawing state-transition diagrams on a GUI-based editor. Up to now Islay mainly runson the PC, and we cannot use it on the portable devices that become popular recently. Therefore, in thisresearch, a new version of Islay that runs on Android devices was developed, with the further purpose ofmaking multi-touch event available as user input to the interactive animation created by Islay.
Keywords: Android, interactive animation, state-transition diagram, Islay

1. はじめにアニメーションは，連続に変化する画像によって情報を
1

2

3

茨城大学大学院 理工学研究科情報工学専攻
Graduate School of Science and Engineering, Ibaraki University
Hitachi, Ibaraki 316-8511, Japan
成蹊大学 理工学部情報科学科
Faculty of Science and Technology, Seikei University
Musashino, Tokyo 180-8633, Japan
茨城大学 工学部情報工学科
Department of Computer and Information Sciences, Ibaraki
UniversityHitachi, Ibaraki 316-8511, Japan© 2014 Information Processing Society of Japan

動的に表現する手段であり，マルチメディアコンテンツの重要な構成要素となっている．対話型アニメーションは，ユーザの入力に応じて内部状態を変化させ，表示内容を変えるアニメーションである．コンピュータゲームも対話型アニメーションの一種と言える．
現在，様々なツールで対話型アニメーションの作成が可能になっている．代表例は Adobe 社の Flash Professional[1]である．しかし，このようなツールを利用して対話型アニメーションを作成するためには，プログラミング言語を含め専門的な知識が必要になり，一般のユーザにとっては困224

図 1 Islay エディタ

難である．
ゲームを含めた対話型アニメーションは有限状態機械として定義できる．状態遷移図を用いてアニメーションの動作を表現できることに着目して，Islay（アイラ）と呼ばれ12xpm iasl4_xpm {"48 48 9 1",34567891011121314151617181920212223242526
27----中略---};
obj o0 {"iasl3_xpm","iasl4_xpm"};
trans dgm0 {s0 (0, rand) {default :s1;}
s1 (0, move(10,0)) {bump : s2;
default :s1;}
s2 (1, move(-10,0)) {bump : s1;
default :s2;}};group main {fork(o0, dgm0, s0);};
iasl_interval(100);
iasl_area(480, 200);
iasl_color(51, 204, 204);

画像データ

画像指定

状態遷移

グループ
システム
パラメータ

る対話型アニメーションの作成ツールが開発された [2][3]．

Islay では，GUI 環境で状態遷移図を作成することにより，

図 2 アニメーション定義ファイルの例

アニメーションに登場するキャラクタの動作を記述する．
状態遷移図は直観的に理解しやすいため，小学生でも Islayでゲームを作りながら，情報工学の基本である有限状態機械の概念を習得できる．
これまで複数のプラットフォーム上で動作する Islay アニメーションの作成及び実行環境が開発されていたが，スマートフォンやタブレット端末にはまだ対応していない．
一方，タブレット端末は，電子教科書やアクティブラーニン
グのために，教育現場に導入されつつある．そこで，本研

図 3Islay プレーヤ

究では，従来の Islay に基づいて，タブレット端末の特徴であるマルチタッチ操作の利点を生かしながら，Android[4]行中に発生するイベントを条件として指定する．キャラク

端末上で動作する対話型アニメーションの作成環境の開発

タのアクションとして，キャラクタ自体の移動や他のキャを行う．

ラクタの生成などの動作を指定できる．また，遷移条件と2. PC 向け Islay の概要
2.1 アニメーションの作成

なるイベントには，ユーザからの外部入力やキャラクタ同士の衝突などの内部イベントを指定できる．それによって，ユーザとのインタラクションが取れるような対話型ア

アニメーションの作成に使われるのは図 1 のようなグニメーションを実現できる．Islay エディタで作成したアラフィカルエディタであり，マウス操作だけで対話型アニニメーションはアニメーション定義ファイルとして保存さメーションを作成できる．状態を表す丸（○）と遷移を表れる．ファイルの中身は，図 2 に例示されるような独自形

す矢印（→）を図面上に追加し，状態遷移図を描くことに式のスクリプト言語で記述される．

よって，アニメーションに登場するキャラクタの振る舞いを定義する．各キャラクタは 1 つの状態遷移図に対応し，2.2 アニメーションの実行グループにより管理されている．複数のキャラクタを同じアニメーション定義ファイルをアニメーションとして実グループに入れることで，同時に登場させることができる．

行するには，Islay プレーヤが必要になる．図 1 に示す状

状態遷移図の各状態には，キャラクタの表示画像及びアク態遷移図で表現されたアニメーションを実行する Islay プションを指定し，状態間の遷移には，アニメーションの実レーヤの画面は図 3 のようになる．図 4 は，その処理の流© 2014 Information Processing Society of Japan

225スクリプト
読み込み
アニメーション
開始
メインループ
キャラクタ
生成

状態更新ループ
状態遷移アクション実行

図 5 Android 向け Islay エディタ UI のモックアップ

キャラクタ破棄

アニメーション
終了

図 4

Islay プレーヤ内部処理の流れれを示す．Islay プレーヤは，まずスクリプトファイルを読み込み，アニメーションを開始する．次にキャラクタを生成し，状態更新ループに入る．状態更新ループでは，一定の時間間隔毎に各キャラクタの遷移条件を調べ，その条件が当てはまるなら状態を更新する．最後にすべてのキャラ

図 6 Android 端末上でのアニメーション実行画面

クタを破棄し，アニメーションを終了する．

3. Android 向け Islay

ユーザインターフェイスのモックアップを示す．
状態を表す丸（○）に対するマウスのシングルクリック

本研究で開発するシステムの全体は，Android アプリは，そのままタッチで置き換え，右クリックは長押しで置ケーションとして実装され，アニメーションの作成及び実き換えた．遷移を表す矢印（→）をマウスカーソルで選択行に使われるエディタとプレーヤから構成されている．従することに比べて，タッチで選択することは難しい．その来の PC 上で動作する Islay の基本仕様を継承し，マルチため，1 本目の指で遷移元の状態をタッチしながら，2 本目タッチを含めたタッチジェスチャに対応するように設計さの指で遷移先の状態をタッチして遷移を選択するように改れている．これにより，Android 端末のタッチスクリーン良した．該当する遷移が複数あるときには，2 本目の指をの特性を生かしたマルチタッチ操作による対話型アニメー動かすことによって，その方向の遷移を選べるようにした．

ションの作成と実行が可能になる．

4. 実装

4.2 プレーヤ
エディタで生成したアニメーション定義ファイルをプ

現段階では，プレーヤ機能の実装が完成されており，既レーヤが読み込んで，スクリプトの内容に対して構文解析存のアニメーション定義ファイルの実行が可能になっていを行う．その後，アニメーションの構成要素を抽出し，アる．また，エディタの開発は詳細設計まで完成し，実装にニメーションを実行する．また，アニメーションの実行中着手している．

でユーザからのタッチなどのイベントを取得し，アニメーションの遷移条件に反映させる．アニメーション実行中の4.1 エディタ
エディタは Android 端末上で動作し，ハードウェア環境画面を図 6 に示す．

4.2.1 構文解析の実現方法

は PC と異なり，マウスによる操作は実現できない．その本 研 究 で は ，Java の 正 規 表 現 パ ッ ケ ー ジ

ため，マウスの代わりに，タッチジェスチャを使ってもエ(java.util.regex[5]) の ク ラ ス を 利 用 し て ，Islay エ

ディタの操作ができるように，エディタの操作方法やユーディタで作成したアニメーション定義ファイルの構文解析ザインターフェイスの構成に対し再設計を行った．図 5 にを実現している．図 2 に示されている 5 種類のセクション© 2014 Information Processing Society of Japan

226

以外のクラスはそれぞれ図 2 に示すアニメーション定義

fork(o2,dgm2,s0);fork(o0,dgm0,s0);fork(o1,dgm1,s1);

ファイルの各セクション及びセクションの中身に対応し，構文解析による取得したアニメーションの構成要素をパラ...

アニメーション
定義ファイル...

フィールドから直接または間接に参照できる．IslayStage

メータとしてコンストラクタに渡して，インスタンス化さ要素3：Matcher.group(3)れている．クラスのフィールドには Java の HashMap を利用し，同じクラスのインスタンスを複数個格納している．

要素2：Matcher.group(2)アニメーションに登場するキャラクタはそれぞれ Islay-

要素1：Matcher.group(1)Transition クラスのインスタンスであり，メインループで正規表現

fork\(([^,\)]+),([^,\)]+),([^,\)]+)\);

その中にある transit メソッドが周期的に呼び出される．

transit メソッドでは，すべてのキャラクタインスタンスに
図 7

正規表現によるアニメーション要素抽出の例

対して doAction メソッドと doTrans メソッドの呼び出しを行い，さらに，doAction メソッドで現在状態のインスタンスの actionExec メソッドを呼び出している．これによIslayStage

り，各状態で指定されたアクションの実行及び条件判定を... ...

◆transit()元に他の状態への遷移が実現されている．

5. おわりにIslayTransition◆doAction()◆doTrans()

本研究では，Android 端末上で動作する状態遷移図に基づく対話型アニメーション作成環境の設計を行い，アニメーションを実行する部分の実装まで完成した．これによIslayState
IslayAction◆actionExec()

り，Islay エディタで作成したアニメーションを Android端末上で実行できるようになった．今後の課題としては，IslayCondition

設計仕様通りにエディタ部分の実装を完成し，システム全体の有効性の評価を行う予定である．
IslayObject

IslayGroup

IslayEvent

IslayInfo

参考文献
[1]
図 8

プレーヤクラスの構成[2]

それぞれに対して，予め用意した正規表現のパターンを用いて，ファイル全体レベルとセクションレベルに分けて，アニメーションの構成要素になるテキストとマッチングを[3]行う．
マッチされた各要素は正規表現のグループ分けによって区切られ，Matcher インスタンスの group() メソッドを呼[4][5]

び出すことで，グループの中身を取得する [6]．セクション
レベルでのマッチングの一例を図 7 に示す．パターンマッ
チングにより抽出したアニメーションの構成要素は，後述[6]Adobe Flash Professional CC, http://www.adobe.com/jp/products/flash.html (最終アクセス: 2013/10/24).
岡本秀輔, 鎌田賢, 中尾隆司: 状態遷移図にもとづく対話型アニメーション作成ツールの提案, 情報処理学会論文誌:
プログラミング, Vol.46, No.SIG 1(PRO 24), pp.19-27,(2005/01).
中川昌幸, 岡本秀輔, 鎌田賢, 米倉達広: 状態遷移図に基づいた Flash Animation 記述環境, インタラクション 2006,
インタラクティブ発表, (2006/03).
Android, http://www.android.com/ (最 終 ア ク セ ス:
2013/10/24).
java.util.regex,
http://developer.android.com/reference/java/util/regex/package-summary.html(最終アクセス: 2013/10/24).
Java 正 規 表 現 の 使 い 方, http://www.javadrive.jp/regex/ (最終アクセス: 2013/10/24).のプレーヤクラスのインスタンスとして生成される．

4.2.2 プレーヤの内部仕様
プレーヤ全体はオブジェクト指向モデルに従って設計されており，クラスの構成は図 8 のようになっている．図に示されたクラスの包含関係は内部にあるクラスがその外部のクラスのフィールドとしてインスタンス化されていることを表し，各クラスはそれぞれ独立している．
プレーヤの基盤となるのは IslayStage クラスであり，他のプレーヤクラスのインスタンスがすべてこのクラスの© 2014 Information Processing Society of Japan

227