回数をTimerで設定することができるんですが、これが回数が増えると、大きくズレる。

今までずっと、

var timer1:Timer = new Timer(1000, 1);

と

var timer2:Timer = new Timer(50, 20);

は同じ時間にTIMER_COMPLETEを吐くとばかり思っていたんですが、
実はやってみると、0.5秒くらいtimer2の方が遅い。1秒で0.5秒ずれる、っていうのは相当な誤差です。誤差と言える範囲ではないです。

タイマーをフレーム間隔に近づけると、誤差は少なくなっていく気がしますが、絶対そう！というわけでもないみたいです。あと、回数を増やせば増やすほどずれる、というわけでもない。

0.05秒というのが、30fpsで1フレームあたりの秒数(≒0.033)にちょうど合いにくいのかもしれません。時間ごとに処理したい場合は、Timerを使うよりも、ENTER_FRAMEでgetTimerした方がよいのかもしれません。

Timerのズレ実験 – wonderfl build flash online

正確にはどっかにあるかなーと思って探してみたら、Kayacのブログが出てきたけれど、ファイルをDLできなかったので作ってみたという感じです。

/**
 * 選択中のアイテムをフレームに分配
 */
var _doc = fl.getDocumentDOM();
var _timeline = _doc.getTimeline();
var _lib = _doc.library;

function main(){
     fl.outputPanel.clear();

     var selectedItems = _lib.getSelectedItems();
     var numItem = selectedItems.length;

     if(numItem == 0){
          fl.trace('何も選択されていません');
     }
     else{
          _timeline.convertToKeyframes(0, numItem);
          fl.trace(numItem);
          for(var i = 0; i < numItem; i++){
               var item = selectedItems[i];
               var name = item.name;
               name.match(/[0-9]+/g);
               var num = parseInt(RegExp.lastMatch);
               if(selectedItems.length == 10 && num == 0){
                    num = 10;
               }
               setNumFrame(item, num);
          }
          fl.trace("処理が完了しました");
     }
}

/**
 * 指定したフレームに配置
 */
function setNumFrame(item, frame){
     _timeline.currentFrame = frame - 1;
     _doc.addItem({x:0, y:0},item);
     _doc.selectNone();
     _doc.selectAll();
     var elem = _doc.selection[0];
     var mat = elem.matrix;
     mat.tx = 0;
     mat.ty = 0;
     elem.matrix = mat;
}

main();

使い方

1. 空のムービークリップを作成、編集モードに入る
2. ライブラリのアイテムを選択(ライブラリアイテムは数値があるものとする)
3. コマンドを実行

数値がフレーム番号になります。中を見れば分かるかと思いますが、0～9の時のみ、0番は10フレーム目に置きます(数値を画像にしたとき用)。数字のないものはうまく配置できません。

→上をコピペすれば動くと思いますが一応ファイル

使用の際はバックアップなど行ったほうが良いかと思います。あんまり多いとフリーズするかもしれません。50程度は問題なく動きました。(WinXP+CS5で確認)

参考

• フレームに分配.jsfl | _level0 | Kayac Interactive Designer’s Blog

• Titanium Mobile(公式)
• titanium-mobile-doc-ja(こちらからいろんな記事を見に行くといい感じです。)

JavaはAndroidの方だけなんですが、TitaniumMobileではiOSでもAndroidでも両方書き出せます。また、開発言語がJavaScriptなので、Web系プログラマには取っ付きやすい感じになってると思います。

ただ、このTitaniumMobile、結構癖があるみたいで、同じソースでAndroidアプリもiPhoneアプリもどっちもさくさく作れるぜーとは行かない様子。

というわけで、まだ完成したアプリなど1つもないのですが、詰まった(ている)ところを少しばかりまとめてみる。

試したのはTitaniumMobile1.6.2+TitaniumStudio(Preview)です。

Windowsで実行できない(スペックの問題？)

どう実行しても私の所持しているWindowsマシンでは起動しませんでした。空のプロジェクトを作成したままのものをコンパイルしようが、buildのフォルダ内を消そうが、毎度タスクマネージャでプロセスを切ろうが、エミュレータの起動までは行くんですが、全てタイムアウトでアプリが起動しませんでした。・・・どうにもしようがなかったので、Windowsは諦めてMacにしました。WindowsではiPhoneアプリは作れませんしね！

opacity=1で落ちる

iPhoneでは問題ないんですが、Androidで配置してあるViewのopacityプロパティの値を1にするとエラーでアプリが落ちました。自分の環境だけ・・・？1.0等でも無理みたいで、1.001とかして回避しましたが・・・あんまりよろしくないと思うので、もっとよい回避策があればいいなぁと思うところです。

anchorPointがAndroidで動作しない

iPhoneでは問題なく、使い方が間違ってるのかもしれませんが、アニメーションしたいImageViewにanchorPoint(0.5,1.0);と設定しても、左上基準でアニメーションします(無視されている)。回避策は・・・直接width, left,等をいじれば何とかなる・・・？とりあえずそんなに大事ではないのでスルーしています。が、あとで問題になりそうな。

画面サイズの取得

iPhoneではcurrentWindow.width/heightで画面サイズが取得できるんですが、Androidだと0になります。これをとるには、

var stageWidth = Titanium.Platform.displayCaps.platformWidth;
var stageHeight = Titanium.Platform.displayCaps.platformHeight;

みたいにする必要があるみたいです。

アニメーションすると、当たり判定が元の位置に残る

アニメーション後に、動かしたViewのleft,topまたはcenterを再設定しないと、前の座標で判定されているような変な動きをするみたいです。これはAndroidとiPhone共通だったかな。

その他

少し作っていくと分かるんですが、iPhoneの書き出しは速く、テストもしやすいので、iPhoneアプリのみ開発には結構使えると思うのですが、Androidアプリの方は、「一応書き出せる」という感じかなぁという印象です。結構癖があって(バグが残っている？)、同じソースで動かそうとすると、無理が出てきます。またTitaniumのせいではないのですが、Androidのエミュレータは起動に大分時間がかかるので、ちょっとどうにかしてほしい感じです。Javaだと実機転送すると即座に見れるんですが、Titaniumだとそうもいかないのでトライアンドエラー形式では厳しいです。まあ自分の作り方にも問題があるところではあるんですけど。。

あと、機能上しょうがないところはあると思うんですが、iPhoneではできるけど、AndroidではできないまたはAndroidではできるけど、iPhoneではできないというものがあります。DashboardViewという結構便利そうなクラスがあるんですが、これはiPhoneでしか使えません(実際にはDashboardViewそのものは作成できますが、DashboardViewItemが作れない)。おそらく今後実装されて行くものなのだと期待していますが、差は限りなく少なくなってほしいなぁと思いますね。

これで結構大きな規模のアプリを作った時に、ソースをどうやって書いていくかが気になる。今は行き当たりばったりで書いてるので、ソースがどうにも読みにくい。

Windowごとにソースを分けるのが結構良さそうなので、Windowをまたぐデータの扱い方をどうするのいいのかということや(今はWindowのオブジェクトにくっつけてます)、Viewをグローバル変数としてバコバコ作るより、Windowに変数として突っ込んでおいた方があとで使いやすそう？とかなんかうまい作り方は無いものかと模索中。

フレームワーク的なものも使ってないのでその辺どうなんだろとか、描画系のAPIがないので画像を加工したりとかは無理なのかなと思っていたんですが、こちらのWebViewでCanvasを使って画像を作成するという手法がすごく使えるような気がするので、実験してみたいです。

→Canvasから画像書き出ししてTitaniumに渡す | 2BLOG

Tenorionは正確にはTENORI-ONと書く、ヤマハの電子楽器です。→詳しくはこちら

これをFlashで再現されたのがこのFlashで、SiONというライブラリを使って実装されています。

→SiON Tenorion

面白いですよね。

これを何かと合わせて別のものができないか、と考えたのがこちらになります。

→倉庫番+Tenorion実験(音注意！)

倉庫番 + Tenorion 実験 – wonderfl build flash online

緑が自機。青が箱、黄色がターゲットで箱が重なってる時は薄い青になります。倉庫番のルールはそのままで、緑の人を動かして、青い箱を黄色の所に全て配置すればクリアです。箱の位置によって、音が変わります。全て配置すると・・・？

普段作成するコンテンツがPlayer9ばかりだったもので、Vector型をまともに使うのが初めてで、ちょっと混乱しました。

これで音がうまいこと作られたら楽しいことになりそうです。しかしそうなるとステージを作るのが難しくなるので、両立は難しそうですが。まあ実験でした。

使い方は次のような感じ。

Tweener.addTween(target, {useFrames:true, alpha:1, time:3,　transition:'easeOutQuad'});

useFramesをtrueにすると、timeの値がフレーム数で指定できるようになります(この場合は3フレーム)。また、アニメーションもタイマーではなく、フレームレートによるタイミングで動作します。(古いリビジョンでは動かないとありますが、最新のものは大丈夫そうです)

つまりフレームレートが落ちているときに、タイミングがずれたりしないのです。これがすごく大事。

タイムラインアニメーションとスクリプトによるアニメーションを併用することがわりとあると思いますが、Tweenerは基本的にタイマーで動作するため、フレームレートが落ちたときに、アニメーションがずれてしまうことがあります。このオプションでこのズレを回避できます。

できるだけフレームレートが落ちるような処理を回避して軽く作る、というのが大事と思っていますが、低スペックマシンで再生したときに変な動きをする、あるいはエラーで止まってしまうなんて事が無いように、両方使う場合には使ってみるといいかもしれません。

他のTweenライブラリでこういうフレームレートに応じた処理を入れてるライブラリはあるんだろうか・・・と思ったらBetweenAS3にもあるみたい(_frame)。さすが。