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


          2010. 5. 28
       uraniwa project
まめフラスコとは?
「まちうけメイカーforフ ラッシュマス コット」
なにができるの?
キャラクターが会話をするFlashファイルを生成するよ
                 こんなの⇒
なにがうれしいの?
作ったFlashファイルは携帯電話でも動くよ
お気に入りのキャラクターが持ち歩けるよ
待ち受け画面に設定するとより伺かっぽいね
やってみるのに必要なもの
つくるため
    環境               素材
PC
           Java     画像   台本   Flashファイル
うごかすため
PC
携帯
     Flash Player

まれによくある誤解への回答:
つくるためにはJava VMが必要ですが、動かすためには要りません。
つまり「Javaアプリが動く携帯」である必要はありません。
動作環境(Flash Lite)について
わたしの携帯電話でも動くの?
Flash Player(Flash Lite1.1以降)が搭載された携帯電話なら
動作します。その率99%!(『ケータイ白書2010』より)
Lite1.1≒通常のPlayerのver.4なのでケータイ以外でも大抵動くよ

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

× よくないところ:
 サイズ制限(100KB)!
 データ保存できない
 最近(今後)どーよ?
実際にやってみよう(1)
薄いラッパですが一応GUIで操作できます。
画像や台本のファイル、立ち位置などを指定して生成ボタンを押すだけです。
まめフラスコは3つのタブから成ります。以下の内容を各タブで指定します。

    メインキャラクターの画像  複数枚指定して表情変えられます
    メインキャラクターの画像の拡大縮小・画質指定
    メインキャラクターの立ち位置      100kB容量制限あるので
                        いろいろ変えられるように
    メインキャラクターの吹き出し位置    してみた。

    サブキャラクターの画像  同上
    サブキャラクターの画像の拡大縮小・画質指定
    サブキャラクターの立ち位置
    サブキャラクターの吹き出し位置

     台本記述ファイル
                              縦×横の大きさ。
     背景画像ファイル     背景も設定できます   PSP用なら480x272pxとか
     吹き出し・吹き出し内テキストの色指定
     生成されるFlashファイルのサイズ指定
実際にやってみよう(2)
Sakura SurfacesタブとUnyu Surfacesタブはほぼ同じ内容で、それぞれ
キャラクターの画像ファイルの指定・立ち位置や吹き出しの指定などをします。

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



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




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



台本ファイル

背景画像ファイル
                Flashサイズ   吹き出し色


                   押すと生成開始




   生成ログ
台本ファイルについて
       ただのテキストファイルです。
       さくらスクリプト+華和梨0.42相当(らしい。さとーさん曰く)
 台本
入力例:
 sentence: 0s[0]今晩は${food}を食べよう1s[10]そうだねそうしよう
 sentence: 0s[4] ネタ尽きた…1s[11]はえーなおい
  
 food: うどん, そば, いぬ, さる, きじ
・ 1回のトークの内容は sentence のどれか(今回はどちらか)がランダムで選ばれる
・ 話主、表情を指定して話す内容を書く
・ ${food} は food のなかからどれか1つがランダムで選ばれる
       出力例:
技術的な話(1)
                              プログラムとしては
                              プログラムとしては
まめフラスコはなにをしているか             ○をつけた2つがメインです
                            ○をつけた2つがメインです
 まめフラスコ内包のベースFlash

          ダミー画像
                       置換            入
                                     力
                       埋込            受
                                     付
                                         台本

   スクリプト解釈&トーク制御用
      Flashプログラム     Flashファイルの解釈・
                          分解・再構築


          出力




                       台本
技術的な話(2)
      これについて。
          主にFlashファイルのバイナリいじり担当
          ・ ベースFlashのパース、ヘッダやタグの内容変更や新規生成
           - 指定された画像ファイルのFlash内部形式への変換と置換
           - 台本ファイルのパースと整形、トーク内容代入文のバイナリの生成
           - キャンバスサイズ変更、ファイルサイズ整合などのためのヘッダ変換
           
           ・ GUIまわり
 Flashのバイナリは1つのヘッダと複数のタグがなります。仕様は公開されています。

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


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

       バージョン情報やファイルサイズなどFlash全体に関する内容
Flashファイルの生成について
   専用GUIアプリで作るもの: Adobe Flash CS5(本家)や他社製簡易版 など
   プログラムで作るもの: ming, swfmill, flex
      まめフラスコではAdobe Flashで作ったベースファイルを、
      独自ライブラリを使ったプログラムでいじるという
      ハイブリッドな方法をとっています。
技術的な話(3)
       ひきつづき、これについて。
         まめフラスコはJava VM上で動きますが、
         Jythonで実装しています。

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

Pythonってなに?
オブジェクト指向プログラミング言語 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” 切り出せば良いかの情報
のようなかたちで文字列で埋め込んでおいて、必要に応じて切り出している。
(実際には上の代入文をFlashPlayerが理解できるバイナリにして埋め込み)
・ 8ビットマイコン時代のBasicプログラミング経験が生きる…かも
・ あんまり複雑なことはしんどいです。⇒巷の携帯Flashでワンキーゲームが多い理由
できないこと・できてないことについて
というかランダムトークするだけしかできていない。

制限の主要因:
 ・ Flash Liteのファイルサイズ制限(100KB)
 ・ ActionScript1.0では複雑なことは難しい 
 ・ 細かいところで機種・キャリア依存性がある
■ ユーザからのアクション・入力
 ⇒待受画面ではボタン・方向キー受け取れない
 ⇒データフォルダからでも受け取れる入力に機種・キャリア依存性あり
  [2][4][6][8]でマウスカーソルもどきを移動させて触り反応、とか、したい?
 ⇒ユーザからの入力(例:名前や好感度)を次回再生時まで覚えてられない
  FlashLite2.0以降なら不可能ではないが機種・キャリア依存性あり
 ことあるごとにネットワークつないでデータ送信、反応パラメタ埋め込んだ
 Flashファイルを動的に再生成、とかできなくはないけど…
 ↑の応用でネットワーク更新もどきもできなくはないけど…
■ .narファイルの読み込み
 ⇒100KBサイズ制限のせいでShellデータ入りきりません
   勝手に自動縮小・低画質化してしまうのも…
 ⇒各栞への対応は無理
   ninix-ayaがちょうどPythonで書かれているけどどう活かせば…
ふゅ~ちゃ~☆わ~く
 ■ 生成UIとかユーザフレンドリーに
  全体的に使いやすくできるところの修正
  台本ファイルの仕様・説明をちゃんとする
  座標を数字で入力させるだけでなくプレビューつけるとか
  設定SAVE/LOADまわり
 ■ こまかな(内部的な)修正
  埋め込んでいるキャラクタ画像をjpgベースからLosslessBitmapへの変更
  吹き出しのとんがり位置のカスタマイズとか
  もうちょっとだけまともなSakuraScript対応(waitとか)
 ■ Flash Liteの機能の活用
 日にち、曜日、時刻、電波状態、電池残量等取得できるので
 トーク内容に反映させられるように
 ■ GoogleAppEngineの活用
 せっかくPythonなので。
 キャラクターなんとか機的な機能も取り込んで一通りブラウザ上でやれるよに
 生成物はQRコードを表示させてケータイに取り込ませるとか
 ■ (オーサリングツールとしての)Adobe Flashからの脱却
  内包するFlashファイルをつくるのを全部プログラミングでやりたい
  

まめフラスコで遊ぼう

  • 1.
    まめフラスコであそぼう。 2010. 5. 28 uraniwa project
  • 2.
    まめフラスコとは? 「まちうけメイカーforフ ラッシュマス コット」 なにができるの? キャラクターが会話をするFlashファイルを生成するよ こんなの⇒ なにがうれしいの? 作ったFlashファイルは携帯電話でも動くよ お気に入りのキャラクターが持ち歩けるよ 待ち受け画面に設定するとより伺かっぽいね
  • 3.
    やってみるのに必要なもの つくるため 環境 素材 PC Java 画像 台本 Flashファイル うごかすため PC 携帯 Flash Player まれによくある誤解への回答: つくるためにはJava VMが必要ですが、動かすためには要りません。 つまり「Javaアプリが動く携帯」である必要はありません。
  • 4.
    動作環境(Flash Lite)について わたしの携帯電話でも動くの? Flash Player(FlashLite1.1以降)が搭載された携帯電話なら 動作します。その率99%!(『ケータイ白書2010』より) Lite1.1≒通常のPlayerのver.4なのでケータイ以外でも大抵動くよ ○ よいところ: ↓試してみよう  普及率高い!  起動が早い!  いろんなところで同じように動く! (PC,各社ケータイ, PSP etc) × よくないところ:  サイズ制限(100KB)!  データ保存できない  最近(今後)どーよ?
  • 5.
    実際にやってみよう(1) 薄いラッパですが一応GUIで操作できます。 画像や台本のファイル、立ち位置などを指定して生成ボタンを押すだけです。 まめフラスコは3つのタブから成ります。以下の内容を各タブで指定します。 メインキャラクターの画像  複数枚指定して表情変えられます メインキャラクターの画像の拡大縮小・画質指定 メインキャラクターの立ち位置 100kB容量制限あるので いろいろ変えられるように メインキャラクターの吹き出し位置 してみた。 サブキャラクターの画像  同上 サブキャラクターの画像の拡大縮小・画質指定 サブキャラクターの立ち位置 サブキャラクターの吹き出し位置 台本記述ファイル 縦×横の大きさ。 背景画像ファイル 背景も設定できます PSP用なら480x272pxとか 吹き出し・吹き出し内テキストの色指定 生成されるFlashファイルのサイズ指定
  • 6.
    実際にやってみよう(2) Sakura SurfacesタブとUnyu Surfacesタブはほぼ同じ内容で、それぞれ キャラクターの画像ファイルの指定・立ち位置や吹き出しの指定などをします。 ① ② ③ 押すとファイル選択ダイアログが出る 表情ナンバーごとに 画像を指定 画像ファイル名の表示・入力欄 画像の画質・倍率・立ち位置・吹き出し位置の指定
  • 7.
  • 8.
    台本ファイルについて ただのテキストファイルです。 さくらスクリプト+華和梨0.42相当(らしい。さとーさん曰く) 台本 入力例: sentence: 0s[0]今晩は${food}を食べよう1s[10]そうだねそうしよう sentence: 0s[4] ネタ尽きた…1s[11]はえーなおい   food: うどん, そば, いぬ, さる, きじ ・ 1回のトークの内容は sentence のどれか(今回はどちらか)がランダムで選ばれる ・ 話主、表情を指定して話す内容を書く ・ ${food} は food のなかからどれか1つがランダムで選ばれる 出力例:
  • 9.
    技術的な話(1) プログラムとしては プログラムとしては まめフラスコはなにをしているか ○をつけた2つがメインです ○をつけた2つがメインです まめフラスコ内包のベースFlash ダミー画像 置換 入 力 埋込 受 付 台本 スクリプト解釈&トーク制御用 Flashプログラム Flashファイルの解釈・ 分解・再構築 出力 台本
  • 10.
    技術的な話(2) これについて。 主にFlashファイルのバイナリいじり担当 ・ ベースFlashのパース、ヘッダやタグの内容変更や新規生成  - 指定された画像ファイルのFlash内部形式への変換と置換  - 台本ファイルのパースと整形、トーク内容代入文のバイナリの生成  - キャンバスサイズ変更、ファイルサイズ整合などのためのヘッダ変換   ・ GUIまわり Flashのバイナリは1つのヘッダと複数のタグがなります。仕様は公開されています。 一番最後はファイル ヘッダ タグ タグ タグ タグ タグタグ 終端を示すタグ。 タグの内容はさまざま。テキスト、プログラム、画像(ベクタ・ラスタ)、音楽、etc. バージョン情報やファイルサイズなどFlash全体に関する内容 Flashファイルの生成について 専用GUIアプリで作るもの: Adobe Flash CS5(本家)や他社製簡易版 など プログラムで作るもの: ming, swfmill, flex まめフラスコではAdobe Flashで作ったベースファイルを、 独自ライブラリを使ったプログラムでいじるという ハイブリッドな方法をとっています。
  • 11.
    技術的な話(3) ひきつづき、これについて。 まめフラスコはJava VM上で動きますが、 Jythonで実装しています。 Jythonってなに? Javaによるプログラミング言語Pythonの実装。Javaのライブラリも使える Pythonってなに? オブジェクト指向プログラミング言語 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の画像関連ライブラリが使える
  • 12.
    技術的な話(4) これについて。 なにをしてるか Flashファイル実行時のスクリプト解釈とトーク制御 ・会話や辞書データからランダムに拾い出したり ・スクリプトの指定する画像にキャラクターの表情を変えたり ・吹き出しとその中の文字を表示させたり どんなものか FlashLite1.1(Flash4相当)はスクリプト環境として非常に貧弱です! ・オブジェクト指向?なにそれ ・関数がない。サブルーチン呼び出しっぽいことはできるが変数はグローバル ・配列がない。eval関数を用いてもどきっぽいことはできるけど重い ので、例えば food: うどん, そば, いぬ, さる, きじ は、 food_name=”うどんそばいぬさるきじ” 何番目の要素を得るにはどこからどこまで food_length=”001004006008010012” 切り出せば良いかの情報 のようなかたちで文字列で埋め込んでおいて、必要に応じて切り出している。 (実際には上の代入文をFlashPlayerが理解できるバイナリにして埋め込み) ・ 8ビットマイコン時代のBasicプログラミング経験が生きる…かも ・ あんまり複雑なことはしんどいです。⇒巷の携帯Flashでワンキーゲームが多い理由
  • 13.
    できないこと・できてないことについて というかランダムトークするだけしかできていない。 制限の主要因: ・ FlashLiteのファイルサイズ制限(100KB) ・ ActionScript1.0では複雑なことは難しい  ・ 細かいところで機種・キャリア依存性がある ■ ユーザからのアクション・入力 ⇒待受画面ではボタン・方向キー受け取れない ⇒データフォルダからでも受け取れる入力に機種・キャリア依存性あり [2][4][6][8]でマウスカーソルもどきを移動させて触り反応、とか、したい? ⇒ユーザからの入力(例:名前や好感度)を次回再生時まで覚えてられない FlashLite2.0以降なら不可能ではないが機種・キャリア依存性あり ことあるごとにネットワークつないでデータ送信、反応パラメタ埋め込んだ Flashファイルを動的に再生成、とかできなくはないけど… ↑の応用でネットワーク更新もどきもできなくはないけど… ■ .narファイルの読み込み ⇒100KBサイズ制限のせいでShellデータ入りきりません   勝手に自動縮小・低画質化してしまうのも… ⇒各栞への対応は無理   ninix-ayaがちょうどPythonで書かれているけどどう活かせば…
  • 14.
    ふゅ~ちゃ~☆わ~く ■ 生成UIとかユーザフレンドリーに  全体的に使いやすくできるところの修正  台本ファイルの仕様・説明をちゃんとする  座標を数字で入力させるだけでなくプレビューつけるとか  設定SAVE/LOADまわり ■ こまかな(内部的な)修正  埋め込んでいるキャラクタ画像をjpgベースからLosslessBitmapへの変更  吹き出しのとんがり位置のカスタマイズとか  もうちょっとだけまともなSakuraScript対応(waitとか) ■ Flash Liteの機能の活用  日にち、曜日、時刻、電波状態、電池残量等取得できるので  トーク内容に反映させられるように ■ GoogleAppEngineの活用  せっかくPythonなので。  キャラクターなんとか機的な機能も取り込んで一通りブラウザ上でやれるよに  生成物はQRコードを表示させてケータイに取り込ませるとか ■ (オーサリングツールとしての)Adobe Flashからの脱却  内包するFlashファイルをつくるのを全部プログラミングでやりたい