まめフラスコであそぼう。

2010. 5. 28

uraniwa project

まめフラスコとは？

なにができるの？

キャラクターが会話をするFlashファイルを生成するよ

待ち受け画面に設定するとより伺かっぽいね

「まちうけメイカーforフ ラッシュマス コット」

なにがうれしいの？

作ったFlashファイルは携帯電話でも動くよ

こんなの⇒

お気に入りのキャラクターが持ち歩けるよ

やってみるのに必要なもの

Java

Flash Player

つくるため

うごかすため

Flashファイル

環境 素材

画像 台本

PC

PC携帯

つくるためにはJava VMが必要ですが、動かすためには要りません。つまり「Javaアプリが動く携帯」である必要はありません。

まれによくある誤解への回答：

動作環境(Flash Lite)について

わたしの携帯電話でも動くの？

Flash Player(Flash Lite1.1以降）が搭載された携帯電話なら動作します。その率99％！（『ケータイ白書2010』より）Lite1.1≒通常のPlayerのver.4なのでケータイ以外でも大抵動くよ

↓試してみよう○ よいところ：　普及率高い！　起動が早い！　いろんなところで同じように動く！ (PC,各社ケータイ, PSP etc)

× よくないところ：　サイズ制限(100KB)!　データ保存できない　最近（今後）どーよ？

実際にやってみよう(1)薄いラッパですが一応ＧＵＩで操作できます。画像や台本のファイル、立ち位置などを指定して生成ボタンを押すだけです。まめフラスコは3つのタブから成ります。以下の内容を各タブで指定します。

メインキャラクターの画像　

メインキャラクターの立ち位置メインキャラクターの画像の拡大縮小・画質指定

メインキャラクターの吹き出し位置

台本記述ファイル

吹き出し・吹き出し内テキストの色指定背景画像ファイル

生成されるFlashファイルのサイズ指定

サブキャラクターの画像　

サブキャラクターの立ち位置サブキャラクターの画像の拡大縮小・画質指定

サブキャラクターの吹き出し位置

複数枚指定して表情変えられます

100ｋＢ容量制限あるのでいろいろ変えられるようにしてみた。

背景も設定できます

同上

縦×横の大きさ。PSP用なら480ｘ272pxとか

実際にやってみよう(2)

キャラクターの画像ファイルの指定・立ち位置や吹き出しの指定などをします。

Sakura SurfacesタブとUnyu Surfacesタブはほぼ同じ内容で、それぞれ

表情ナンバーごとに画像を指定 画像ファイル名の表示・入力欄

押すとファイル選択ダイアログが出る

画像の画質・倍率・立ち位置・吹き出し位置の指定

① ② ③

実際にやってみよう(3)Script and etc.タブでは、台本ファイル、背景画像ファイル、生成されるFlashファイルのキャンバスサイズや吹き出しと文字の色指定をします。

台本ファイル

背景画像ファイル

生成ログ

Flashサイズ 吹き出し色

押すと生成開始

台本ファイルについて

さくらスクリプト＋華和梨0.42相当（らしい。さとーさん曰く）台本

ただのテキストファイルです。

sentence: \0\s[0]今晩は${food}を食べよう\1\s[10]そうだねそうしようsentence: \0\s[4] ネタ尽きた…\1\s[11]はえーなおい　food: うどん, そば, いぬ, さる, きじ

・ 1回のトークの内容は sentence のどれか（今回はどちらか）がランダムで選ばれる・ 話主、表情を指定して話す内容を書く・ ${food} は food のなかからどれか1つがランダムで選ばれる

入力例：

出力例：

台本

技術的な話(1)まめフラスコはなにをしているか

台本

埋込

置換

出力

入力受付

ダミー画像

まめフラスコ内包のベースFlash

スクリプト解釈＆トーク制御用Flashプログラム Flashファイルの解釈・

分解・再構築

プログラムとしては○をつけた2つがメインです

プログラムとしては○をつけた2つがメインです

技術的な話(2)これについて。

・　ベースFlashのパース、ヘッダやタグの内容変更や新規生成　- 指定された画像ファイルのFlash内部形式への変換と置換　- 台本ファイルのパースと整形、トーク内容代入文のバイナリの生成　- キャンバスサイズ変更、ファイルサイズ整合などのためのヘッダ変換　

・　ＧＵＩまわり

ヘッダタグ タグ タグ タグタグ タグ

主にFlashファイルのバイナリいじり担当

Flashのバイナリは1つのヘッダと複数のタグがなります。仕様は公開されています。

バージョン情報やファイルサイズなどFlash全体に関する内容

タグの内容はさまざま。テキスト、プログラム、画像（ベクタ・ラスタ）、音楽、etc.

一番最後はファイル終端を示すタグ。

Flashファイルの生成について

専用GUIアプリで作るもの：　Adobe Flash CS5（本家）や他社製簡易版　などプログラムで作るもの：　ming, swfmill, flex

まめフラスコではAdobe Flashで作ったベースファイルを、独自ライブラリを使ったプログラムでいじるというハイブリッドな方法をとっています。

技術的な話(3)ひきつづき、これについて。

まめフラスコはJava VM上で動きますが、Jythonで実装しています。

Jythonってなに？

なんでそうしてるの？

Pythonってなに？

Javaによるプログラミング言語Pythonの実装。Javaのライブラリも使える

オブジェクト指向プログラミング言語　Perl, Ruby, PHPあたりに近いいろんなアプリケーションのスクリプト言語として採用(Maya, Shade, Blender, Metasequoia...)ninix(-aya): 伺かのUNIX(というかX Window System)での実装もPythonでされている

Jythonで実装(.py) jythonc⇒ でJavaVM用アーカイブ(.jar) jsmooth⇒ でラップ(.exe) すると

・ exeファイルで撒けるので(最も数的に多いであろう)Windowsユーザに優しい・ jarファイルも同梱すればマルチプラットフォームで動作可能・ (JavaVMは別途用意してもらえれば)配布サイズが1MB程度と小さくてすむ・ Javaの画像関連ライブラリが使える

技術的な話(4)

なにをしてるか

これについて。

Flashファイル実行時のスクリプト解釈とトーク制御

どんなものか

・会話や辞書データからランダムに拾い出したり・スクリプトの指定する画像にキャラクターの表情を変えたり・吹き出しとその中の文字を表示させたり

FlashLite1.1(Flash4相当)はスクリプト環境として非常に貧弱です！・オブジェクト指向？なにそれ・関数がない。サブルーチン呼び出しっぽいことはできるが変数はグローバル・配列がない。eval関数を用いてもどきっぽいことはできるけど重い

food: うどん, そば, いぬ, さる, きじ は、

food_name=”うどんそばいぬさるきじ”food_length=”001004006008010012”のようなかたちで文字列で埋め込んでおいて、必要に応じて切り出している。

ので、例えば

何番目の要素を得るにはどこからどこまで切り出せば良いかの情報

・ 8ビットマイコン時代のBasicプログラミング経験が生きる…かも・ あんまり複雑なことはしんどいです。⇒巷の携帯Flashでワンキーゲームが多い理由

（実際には上の代入文をFlashPlayerが理解できるバイナリにして埋め込み）

できないこと・できてないことについて

■ ユーザからのアクション・入力⇒待受画面ではボタン・方向キー受け取れない⇒データフォルダからでも受け取れる入力に機種・キャリア依存性あり

⇒ユーザからの入力（例：名前や好感度）を次回再生時まで覚えてられない FlashLite2.0以降なら不可能ではないが機種・キャリア依存性あり

[2][4][6][8]でマウスカーソルもどきを移動させて触り反応、とか、したい？

ことあるごとにネットワークつないでデータ送信、反応パラメタ埋め込んだFlashファイルを動的に再生成、とかできなくはないけど…↑の応用でネットワーク更新もどきもできなくはないけど…

制限の主要因：・ Flash Liteのファイルサイズ制限（100KB)・ ActionScript1.0では複雑なことは難しい　・ 細かいところで機種・キャリア依存性がある

■　.narファイルの読み込み

というかランダムトークするだけしかできていない。

⇒100KBサイズ制限のせいでShellデータ入りきりません　 勝手に自動縮小・低画質化してしまうのも…⇒各栞への対応は無理　 ninix-ayaがちょうどPythonで書かれているけどどう活かせば…

ふゅ～ちゃ～☆わ～く■ 生成UIとかユーザフレンドリーに　全体的に使いやすくできるところの修正　台本ファイルの仕様・説明をちゃんとする　座標を数字で入力させるだけでなくプレビューつけるとか　設定SAVE/LOADまわり

■ GoogleAppEngineの活用　せっかくPythonなので。　キャラクターなんとか機的な機能も取り込んで一通りブラウザ上でやれるよに　生成物はQRコードを表示させてケータイに取り込ませるとか

■ こまかな（内部的な）修正　埋め込んでいるキャラクタ画像をjpgベースからLosslessBitmapへの変更　吹き出しのとんがり位置のカスタマイズとか　もうちょっとだけまともなSakuraScript対応(waitとか）

■ （オーサリングツールとしての）Adobe Flashからの脱却　内包するFlashファイルをつくるのを全部プログラミングでやりたい　

■ Flash Liteの機能の活用　日にち、曜日、時刻、電波状態、電池残量等取得できるので　トーク内容に反映させられるように