2011年3月28日月曜日

Titanium mobileのOpenGL ESモジュール!(続報)


Titanium mobileのOpenGL ESモジュールですが、なかなか苦戦をしております。
少しですが進捗したので、githubにpushしました。

ソースは、以下からダウンロードしてください。
git@github.com:atsusy/tiopengles.git

*出来るようになった事
- 3dsファイルを読み込んでモデルを表示
モジュールのload3dsメソッドでパスを指定して読み込みます。
テクスチャは3dsファイルと同じディレクトリに配置しておけば、自動で読み込みます。

- カメラの位置と角度
カメラの位置と角度を設定できるようにしました。

詳しくはexample/app.jsを見て下さい。

どこぞでダウンロードしてきたR2D2を表示し、カメラ操作を(無理矢理ですが)行えるようにしたサンプルとなっています。


Freeな3dsのモデルは探せば結構あるようですので、いろいろ試してみていますが中には正しく読み込めないのもあるようです。(local coordinate system絡み?)

後はアニメーションが出来れば...(遠い目)

2011年3月23日水曜日

Titanium mobileで360度の回転アニメーション


Titanium mobileでは、表示要素のアニメーションをコードで書くことができるのですが、
回転は-180度から180度までしか指定できません。(指定しても反対側に回転してしまう?)

https://appcelerator.lighthouseapp.com/projects/32238/tickets/416-animation-cant-rotate-360-degrees
http://developer.appcelerator.com/question/87441/rotate-360-degrees-does-not-work

でも、どうしてもpodcastの30秒巻き戻しボタンみたいなのをやりたくて、かなり無理矢理ですがやってみました。

まず、通常の画像を用意します。(A.png)


次に、180度回転させた画像を用意します。(B.png)

そして、以下のコード(iOSでしか確認してません)
var rewind = Ti.UI.createImageView({
    left:100,
    top:100,
    width:32,
    height:32,
    image:'A.png'
});

var animateRewinding = function(){
    rewind.image = 'A.png';
    rewind.transform = Ti.UI.create2DMatrix();
 
    var r = Ti.UI.create2DMatrix();
    r = r.rotate(-180);
    rewind.animate({transform:r,duration:500,opacity:0.0}, function(){
         rewind.image = 'B.png';
         var r = Ti.UI.create2DMatrix();
         rewind.animate({duration:0,transform:r}, function(){
               var r = Ti.UI.create2DMatrix();
               r = r.rotate(-180);
               rewind.animate({duration:500,transform:r, opacity:1.0}, function(){
                    animateRewinding();
               });
         });
     });
};

何かすごく嫌な書き方なのですが動くには動きました。
しかし、Retina用の画像も用意するとなれば4種類の画像を用意せねばいけないという...

2011年3月18日金曜日

TOEICを勉強するついでにアプリを作る


唐突ですがTOEICの試験を受けてみることにしました。

主にpodcastを聞いて勉強をしているのですが、ただ聞いていても聞き流すだけになってしまったり、ある単語の意味が分からないために途中から訳が分からなくなる事が多いです。

というわけで、英語の学習用にiPhoneアプリを作っています。(もちろんTitanium mobile!)
完成したら無料で公開しようかなと思っています。

機能はこんな感じです。

*podcastのフィードを登録する
*フィードからコンテンツの一覧を表示する
*一覧から選択してpodcastを再生する
*再生中にテキスト入力を行い、その内容を辞書で検索する(とりあえず英英辞書)
*テキスト入力時にスペルチェックを行い、入力候補を表示し入力しやすくする
*入力したテキストの再生時間を覚えておいて、再生中に表示するようにする(ニコ動の音声版みたいな)
*ユーザ同士で同じコンテンツに登録したテキストを共有できればおもしろいかな

英語だけじゃなくて、それ以外のコンテンツでも使えそうな気がしてきました(podcastラジオにツッコミ入れたりとか)

テキストの共有以外はだいたい出来ているので、あとひと頑張りってとこです。
自身でデザインが出来ないので、無骨なものしか出来ないのが悩みの種です。

2011年3月16日水曜日

Ti.UI.ButtonBarのenabledを設定する


Titanium mobile の ButtonBar ですが、各ボタンのenabledを制御しようとして
以下のコードを試してみましたがうまく行きませんでした。

var operationButtons = [{title:'Back',enabled:false}, {title:'Forward',enabled:false}];
var operationBar = Titanium.UI.createButtonBar({
 labels:operationButtons,
 style:Ti.UI.iPhone.SystemButtonStyle.BAR
});

var operationButtons = [{title:'Back',enabled:false}, {title:'Forward',enabled:false}];
var operationBar = Titanium.UI.createButtonBar({
 labels:operationButtons,
 style:Ti.UI.iPhone.SystemButtonStyle.BAR
});
operationBar.labels = operationButtons; // labelsプロパティを再設定してみる

var operationButtons = [{title:'Back',enabled:false}, {title:'Forward',enabled:false}];
var operationBar = Titanium.UI.createButtonBar({
 labels:operationButtons,
 style:Ti.UI.iPhone.SystemButtonStyle.BAR
});
// windowオープン後にenabledプロパティを変えてみる
window.addEventListener('open', function(e){
 operationButtons[0].enabled = false;
});

格闘した結果、以下のコードだとうまくいきます。

var operationButtons = [{title:'Back',enabled:false}, {title:'Forward',enabled:false}];
var operationBar = Titanium.UI.createButtonBar({
 labels:operationButtons,
 style:Ti.UI.iPhone.SystemButtonStyle.BAR
});

// windowオープン後にlabelsプロパティを再設定してみる
window.addEventListener('open', function(e){
 operationBar.labels = operationButtons;
});

ま、そういうことです。(どういうこと??)

2011年3月10日木曜日

Xcode 4になってArchiveが変わってしまったようだ


Xcode 4がリリースされましたね。とりあえずダウンロードしてみました。
確認していると、気になった点がありました。

アプリをアーカイブする機能(メニュー:Product-Archive)があるのですが、
アーカイブした結果がXcode 3とかなり異なっています。

何が困るかって、Titanium mobileでDistributionの際にbuilder.pyでアーカイブ処理を行っているのです。(もちろん Xcode 3の仕様で)
Titanium mobile は SDK 1.6.1で対応済みです(2011/3/20追記)
そのため、Xcode 4のOrganizer-Archivesに出てきません。

リリースノートとか見れば、仕様が記述されているかもしれないのですが、
探すのが面倒だったのでとりあえず比較してみました。

(1) 保存先のディレクトリ
Xcode 3:
/Users/<ユーザ名>/Library/MobileDevice/Archived Applications/
Xcode 4:
/Users/<ユーザ名>/Library/Developer/Xcode/Archives/<日付>/

(2) アーカイブの内容
Xcode 3:
<保存先のディレクトリ>/
        ArchiveInfo.plist
        .app
        .app.dSYM

Xcode 4:
<保存先のディレクトリ>/
         <アプリの名前> <日付>.xcarchive/
                dSYM/
                        .app.dSYM
                Info.plist
                Products/
                        .app

(3) Info.plistの内容
Xcode 4:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
 <key>ApplicationProperties</key>
 <dict>
  <key>ApplicationPath</key>
  <string>Applications/アプリ名.app</string>
  <key>CFBundleIdentifier</key>
  <string>アプリのID</string>
  <key>IconPaths</key>
  <array>
   <string>Applications/アプリ名.app/Icon.png</string>
  </array>
 </dict>
 <key>ArchiveVersion</key>
 <real>1</real>
 <key>CreationDate</key>
 <date>2011-03-10T07:09:28Z</date>
 <key>Name</key>
 <string>アプリ名</string>
 <key>SchemeName</key>
 <string>アプリ名</string>
</dict>
</plist>

一応、Xcode4のアーカイブの仕様にしたがってbuilder.pyを修正してみたところ、うまくいったのですが... まあ、そのうち対応版がリリースされるのを待った方が良さそうですね。

Titanium mobileのOpenGL ESモジュール!(を実験中)


Titanium mobileでARマーカーを検出できるようになると、必然的にマーカーの上に3Dなオブジェクトを乗せたくなります。

そこで、Titanium mobileでOpenGL ESを扱えるようなモジュールを作ってみようかと思っています。

とりあえず途上ですが(まだ作業2日目)、少し動いたので公開します。
git@github.com:atsusy/tiopengles.git から cloneしてください。

*はじめに
- iOSのモジュールです。Androidでは使用できません。
- OpenCVを使用しています。
- シミュレータでも動作します。(まだデバイスでの動作が確認できてません)
- 現時点では、SDKバージョン1.6.0以上としています。
- 最終的に使えるものになるかどうか不明です...

*動かし方(Macの場合です、すいません)
~/.profileに、以下を追記して下さい。
alias titanium='/Library/Application\ Support/Titanium/mobilesdk/osx/1.6.0/titanium.py'

チェックアウトしたディレクトリで
titanium run
でシミュレーターが起動し、実行されます。


*今できること
example/app.js をご参考ください。

- プロジェクションの設定(zNear, zFar, fieldOfView[画角])
- 照明の設定(ambient, specular, diffuse, position, direction)
- モデルを読み込む(インタフェースのみで実装は立方体のモデルを固定で定義)
- モデルの移動と回転

*これからやりたいこと
- 3dsフォーマットのモデルデータを読み込む(頂点、法線、テクスチャ)
- カメラの設定(位置と向き)
- カメラ、照明、モデルのアニメーション


******つづきはこちら******

2011年3月7日月曜日

Titanium mobileのARマーカー検出モジュール!


*** iOS 4.3 で動作するようになりました、githubから最新をpullしてください ***

Titanium mobileで ARマーカーを検出するモジュールを作りました。

っても、いろんな記事を大いに参考にさせていただきました。
よって、こっ恥ずかしいのですが、公開します。

git@github.com:atsusy/tiarmarker.git からcloneしてください。

*はじめに
- iOSのモジュールです。Androidでは使用できません。
- OpenCVを使用しています。
- シミュレータでは動きません。デバイスでしか動きません。(iPhone 3G/3GS/4 で動作確認)
- 現時点では、SDKバージョン1.6.0以上としています。

*ARマーカーって?
AR(Augmented Reality) [拡張現実] の実現手法の一つです。
マーカーという定型のマークをカメラで認識し、位置や姿勢、コードを検出します。

A-Z と 0-9 を ARマーカーにするとこんな感じです。文字でなくてもいいです。
最終的には4x4の16bitのコードとして認識します。


マーカーにアプリケーションで物体等をオーバーレイしたりすると、
カメラを通してARを体験することができるというものです。

やったことないんですが、ラブプラスなんかでも使われてるんですね。

*インストール方法
事前に、サンプル動作用にTitanium mobile SDK 1.6.0のプロジェクトを作成しておいて下さい。

cloneしたソースのディレクトリで、
./build.py
を実行し、モジュールをビルドします。
ビルドが完了すると、com.armarkerti-iphone-0.1.zip というファイルが出来上がっているはずです。

com.armarkerti-iphone-0.1.zipを、サンプル動作用に作成したプロジェクトのディレクトリにコピーして下さい。

モジュールのインストールは以上です。

*サンプルの実行
example/app.jsを、サンプル動作用に作成したプロジェクトのResourceディレクトリにコピーして下さい(プロジェクトが作成したapp.jsを上書きします)

tiapp.xmlを編集し、modulesタグ内に、ARマーカー検出モジュールを使用する事を宣言して下さい。
<modules>
   <module version="0.1">com.armarkerti</module>
 </modules>

後は、プロビジョニングファイルを用意してデバイス上で実行して下さい。

起動するとカメラの入力映像が表示されますので、example/marker.pngを印刷するか、PCに表示してください。

"A"のマーク(左上)をカメラで見て、その上に"a"という文字がマーカーに合わせて表示されれば正しく動作しています。

*ビューをオーバーレイさせるには
まずは、example/app.jsを参考にして下さい。

1) com.armarker.ti : createCameraView() で、カメラの映像を表示するビュー(cameraView)を生成する
2) オーバーレイしたいビューを作成する
その際、center:{x:0, y:0}, visible:false としておく
3) オーバーレイしたいビューをcameraViewにaddする
4) cameraViewのdetectedイベントで、検出したマーカーすべての コード(code)/中心位置(moment)/射影行列(transform)にアクセスできるので、目的のマーカーがあるかチェック

オーバーレイしたいビューを animate({transform:マーカーへの射影行列の3DMatrix, duration:0}) すると、マーカー上にビューがオーバレイ表示される。目的のマーカーが存在しない場合は、オーバーレイしたいビューのvisibleをfalseにする。

*足りないところ
- フレームレートが低い!(3GSとかで動くのかな?)
- 検出精度がまだまだ!(認識してくれない事がまああります)
- create3DMatrixの初期値に、m11-m44のディクショナリを渡したい(試したけど無理だった)
- 3Dオブジェクトをオーバーレイさせたい!

*参考にした記事
OpenCVで遊ぼう!
iPhoneでOpenCVを使う方法