memo.393

メモ記事を書いてましたが先週やっとiPhoneアプリとしてリリースしました。

support site
itunesStore

初めてFlash:Air for iOS(AIR3.3SDK)で作ってみたよ。
3DエンジンにはAlternativa3D（8.17.0)を使用したよ。

もろもろ苦戦したことは以前公開したStage3D勉強会#2の資料に書いたので興味ある方は読んでみてください。

■実装以外でのゲーム性について
▼気持ちよさの工夫
BGMのBPMに連動するような動きを意識
→風を連続で取ったときの効果音がBPMと連動するようにスピードを調整
→風車の首を降り始めは曲調が変わるタイミング
→あと風車が首を振るときのスピードもBPMと連動するような

▼飽きさせない工夫
上昇気流だけを取り続けて飛ばれるとゲームオーバーになりにくいが緊張感なくなりゲームが単調になる
追い風も取らせて緊張感のあるゲーム展開にしたい
→上昇気流だけを取りつづけた場合は無理ゲーになるような設定に。
　(風車の背がどんどん伸びていく）
→2種類のコンボ要素の追加
　(コンボを続けると風車の背が伸びにくくなるようにしている）
※「上昇気流を取る→風車がのびる」という部分がルール的には判りにくくなってしまったのでヒントの項目に記載したけど理解できてない人も多いかも。。

▼操作性について
iPhoneアプリというと傾きセンサーだけど今回は無しで。
プレイヤーが学習してやりこみ性あるゲームにしたかった。
傾きセンサーでは細かいコントロールができないので運要素が増えてしまう
個人的に思うようにコントロールできないのは嫌い、というのが一番の理由
あと電車でプレイしてる姿も少し恥かしくなるしね。

8月中は無料で9月から170円になりますので是非試してみてくださいまし。

※Flash製なので簡単にWEBおためしプレイ版も用意できますよ。
>FlashPlayer11.0
(音鳴ります)

aneを使ってAir for iOS(AIR3.3SDK)でスクリーンショットを撮るお話。

ありそうでなかった、というかあったけどもうまく動かなかったので作ってみたらちょっとハマりました。

まず、タイトルどおりのaneのコードが公開されてました。
abhisek-mishra / ScreenShot

が、実装してみても想定通りに動作しない。。
Objective-C部分のコードを見てみると、UIGetScreenImage()というapple非公開APIを使用してる。
非公開APIを使うとリジェクト対象だそうでこれは使えないと。

とりあえず下の記事を参考にスタンダードな実装に変更してみる。
iPhoneアプリから画面のキャプチャー画像を取得する2つの方法

aneファイルをビルドしなおして再テスト。
が、画像はカメラロールに保存されたのは真っ白の画像。。

ちなみにObjective-CでiOSプロジェクトを作って、Xib上に適当にボタンとか画像とか配置した状態で上記の方法を実行すればスクリーンショットは問題なく取れるから根本的に間違ってるわけではなさげ。

肝はFlashの描画領域がどこにあるのか、ということ。
上記の記事のコードだと、

[app.keyWindow.layer renderInContext:UIGraphicsGetCurrentContext()];

UIWindowのkeyWindowのレイヤーをキャプチャしてるのだからFlashで言えばStage上のメインタイムラインをキャプチャしてるようなものなはずだから良さげな感じだけども結果は前述したとおりに真っ白。

で、結論。
上記の方法は使えないみたい。
app.xmlでのrenderMode要素をdirectを指定する場合はObjective-C側ではOpenGLESでのスクリーンショットを撮るような処理をしないといけないっぽい。
具体的なコードはここに書かれてるものを参考にしました。
GLPaint save image

このコードで取得したUIImageをキャプチャすることでとスクリーンショットを撮ることができました。

では、renderModeをcpu指定にすれば最初のコードでもスクリーンショットは撮れるのではないか？と思いましたが結果は否。
renderMode:cpuでは、上述のどちらのコードでもスクリーンショットを撮ることはできませんでした。
謎。。。
まぁrenderModeをcpuにする理由なんてない気もするのでまぁいいか。

各コードの詳細はQuiitaにあげてあります。
Qiita:AIR for iOSでスクリーンショットをカメラロールに保存するANEを作ってみたけど真っ白な画面しか取れない
(コメント欄で自己解決してます)

p.s.
ちなみに今回スクリーンショットを撮るのが最終目的ではなく、iOS5からのネイティブなTwitterAPIを使ってのスクリーンショットつきのTweet機能を実装したかったのでした。
これも無事にうまく実装できたので、また後で記事を書きます。

前の記事の続き、
FlashBuilder4.5のActionScriptモバイルプロジェクトでの設定のお話。

まず横向き固定にする方向は、hoge-app.xmlに

<!-- hoge-app.xml内のinitialWindow要素に指定 -->
<aspectRatio>landscape</aspectRatio> 

を設定するだけでOK。
これでデバッグプレビューすると確かに横向きでプレビューされる。
が、stage.stageWidthは320、stage.stageHeightは480と変更されていない。
(ちなみにFlexモバイルプロジェクトの場合はstage.stageWidthは480、stage.stageHeightは320となり問題ないようす)

ではどうしたらいいか、
結論としては、ドキュメントクラスのコンストラクタに以下の一行を追加
stage.setAspectRatio(StageAspectRatio.PORTRAIT);

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.PORTRAIT);
trace(stage.stageWidth, stage.stageHeight); //出力：480,320

解せないのが、なぜPORTRAITなのか。
通常はPORTRAITは縦、LANDSCAPEは横をあらわすので、stage.setAspectRatio(StageAspectRatio.LANDSCAPE);と設定すればいいと思ったのだけど、これだとstage.stageWidthは320、stage.stageHeightは480のままとなった。

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
trace(stage.stageWidth, stage.stageHeight); //出力：320,480

解せぬ。

※2011.8.15追記
上記設定だと実機転送した際に横方向にはならない様子。。。
やはりsetAspectRatio()にはStageAspectRatio.LANDSCAPEを設定しないと横向き固定にはなりませんでした。
上に書いたLANDSCAPE設定での懸念されるステージサイズは、
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
となっているようで実機起動上では特に問題なさげ。
ステージサイズがちゃんと取れないのはデバッグプレビューだけでのバグってことなのか！？

※2011.8.18追記
コメント欄にて教えていただきました。
stage.setOrientation(StageOrientation.DEFAULT)を設定することで想定したstageサイズを取得することができました。

//前提で、hoge-app.xmlに<aspectRatio>landscape</aspectRatio>と設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
trace(stage.stageWidth, stage.stageHeight); //出力：320,480
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
stage.setOrientation(StageOrientation.DEFAULT)；
trace(stage.stageWidth, stage.stageHeight); //出力：480,320

だいぶはまってネットに情報が見当たらなかったのでメモ。

FlashBuilder4.5でiPhone、Androind等のアプリを作るため、以下2つのプロジェクトが用意されました。

1. Flexモバイルプロジェクト
2. ActionScriptモバイルプロジェクト

1.はMXMLベースのプロジェクトで2はASだけで作れるプロジェクト。
ボクはMXMLはさっぱりなのでASだけで作れる2.を選択。
普通のFlashコンテンツを作ると同様にドキュメントクラスからゴリゴリ書いていけばOKですが、
iOS用の書き出しをした際にステージサイズの参照値おかしなことになりました。

こちらの想定は、シミュレートデバイスが、iPhone3GSなら320 × 480、
iPhone4設定なら、640 × 960となってほしいところですが、
stage.stageWidth,stage.stageHeightのtrace結果は常に、500, 375

なんぞこれ、と思えどステージサイズの設定する箇所は見当たらず。
ためしにapp.xmlのwidthとheightに直接値(320 480)を入れてみるも変化無し。
さらにドキュメントクラスにSWFのembedタグを書いてみるも変化無し。

FlashBuilderのHelpを観てみるとこんなページに行き着きました。
http://www.randytroppmann.com/2011/04/12/pure-as3-workflow-with-flex-builder-4-5/

そこに書かれていた見慣れぬ1行を追加してみると。。。

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

これを入れることでstage.stageWidth,stageHeightが想定通りの値となりました。
(シミュレートデバイスを変えることにより値も変化する)
とりあえず、よくわからんけど、上記一行は必須らしい。

P.S.
Retina対応もできるらしいけど、3G/3GSとRetinaの混合設定がよくわからん。。
highを書くだけで、Objective-Cみたいに自動でいい感じに変換してくれるのか、それとも2種類の画角を分けて作らないのいけないのか。。
Retinaの実機がないから検証できんのよね。。

簡単にできたようで出来てなくてちょっとはまったのでメモ

基本的にはメソッドが用意されます。

//setThumbImage
//使用例
//speedLevelSliderというUISliderが宣言してあって、Resourceに"sliderThumb.pngがあるとして
//sliderThumb.pngはwidth:100px,height:100pxとする
//通常状態
[speedLevelSlider setThumbImage:[UIImage imageNamed:@"sliderThumb.png"] forState:UIControlStateNormal];
//つまみをタッチ状態も登録しておかないとデフォルトが表示されちゃう
[speedLevelSlider setThumbImage:[UIImage imageNamed:@"sliderThumb2.png"] forState:UIControlStateHighlighted];

これだけで指定した画像につまみが変更される。
が、UISliderをInterfaceBuilderで配置した場合にはこれだけではうまくいかない場合がある。
デフォルトのUISliderのheightは23になるのだけど、自分で用意したつまみ画像の高さが23を超える場合は、はみ出した部分はタッチ領域にならない。
上記の例だとつまみの高さは100pxなので見た目はでかいつまみになっているけど、実機でタッチできる領域は中心の23px分しか反応しないことになる。
InterfaceBuilder上からheightを修正してあげればいいかと思うと、Hの領域だけグレイアウトされていて修正ができない.

なのでframeプロパティを修正して描画領域を書き換えてあげないといけないのでした。

//変更前
//Sliderのx,y座標やwidthはInterfaceBuilderから確認
speedLevelSlider.frame = CGRectMake( 10, 200, 200, 23);
//変更後
//(実際は左上基準なので、つまみが大きくなった分、ｙ座標も修正する必要あります）
speedLevelSlider.frame = CGRectMake( 10, 200, 200, 100);

/////////////////////////////////////////////////////////////////////////////////////////////////////////
というようなことが下記のブログには、しっかり書かれていましたのですが、、
スライダーバー（UISlider）のカスタマイズ的:いまログ
細かいところが理解できずに結構はまってしまった。。。

・xibファイルとは、
XML Interface Builderの略。
その名の通り、xml形式のファイル。
これをxcodeから開くとInterfaceBuilder(アプリケーション：以下IB)が立ち上がってビジュアル的にxmlの中身を編集できる。
(ということだと思う)

・Flashでいったらxibファイルって何にあたるの？
とTwitterでつぶやいたら、
エライ人から「FLEXでいうところのMXMLみたいなもの」と教えてもらった。
なるほど、FLEXでもMXMLも表示オブジェクトの配置情報を持っているし、MXMLを使わなくてもASで表示オブジェクトの配置することもできる。
（でもMXMLも使い方をよくわかってない)

ちょっと調べてみようと思ったらかなり分かりやすい素敵記事発見。

iPhone:Xib/Nib ファイル(その1)：「支出管理」サポート
iPhone:Xib/Nib ファイル(その2) ：「支出管理」サポート

xibファイルは、UIApplicationかUIViewControllerのサブクラスによってロードされるものなのね。
どのクラスにも設定できちゃうから、この辺りの仕組みがよくわからなかった。
ありがたやありがたや。

.h/.mファイルの切り替え
cmd + option + 上キー（交互に切り替わる)

Objective-CはASと違ってデリゲートとという機能がある。
デリゲートとは別に色んなクラスが通知するイベントを一括で管理してくれるクラスがあるみたい。
それが、NSNotificationCenterクラス。

手順としては、
1.NSNotificationCenterのインスタンスを生成
2.通知の登録(インスタンスに通知先、リスナー関数、通知の種類、通知の送信元)
3.通知の開始
4.(通知の終了)
5:(通知の登録解除)

例)

//playerはMPMusicPlayerControllerのインスタンス

//通知センタのインスタンを取得	
NSNotificationCenter* noteCenter = [NSNotificationCenter defaultCenter];
//addObserver:通知先
//selector:リスナー関数
//name:通知してほしい通知の種類？
//object:通知の送信元	
[noteCenter 
addObserver:self 
selector:@selector(hoge:)
name:MPMusicPlayerControllerNowPlayingItemDidChangeNotification 
object:player];
//通知開始を指示
[player beginGeneratingPlaybackNotifications];

nameはnilにすると全ての種類のイベントが取得対象になる。
(そもそも通知の送信元がどのようなイベントを発信してるかを把握してる必要あり？)
(ドキュメントみれば書いてあるのかな？）
objectはnilにすると、全ての送信元からイベントを受け取る。

あとNSNotificationCenterはシングルトンになるので、インスタンス変数の保持はしなくてもいいみたい。

Objective-CにはASにはない機能でカテゴリという概念がある。
これはクラスファイルにメソッドを追加することができる機能。

通常クラスを拡張するにはそのクラスを継承したサブクラスを定義すればいいと思う。
でも根本的に弄りたくなった場合、元のクラスを書き換えちゃうということもできる。
(ASだと、Flash8でAS2のときは直接編集できたけど、AS3ではSWCになってるから無理ぽ）
でも書き換えちゃうと何か不具合がおきたときとかバックアップとってないと元に戻すのが大変。

というわけでカテゴリという概念は、元クラスを簡易的に拡張できるという概念。
ただし追加できるのはメソッドだけ。
変数は追加できない。
手順は拡張用のクラス（？）ファイルを作ってそこで定義する。

例）UIViewを拡張する、UIViewExファイルを生成する場合
//ヘッダーファイル

#import <UIKit/UIKit.h>
//ここでの()の中の名前は任意(ファイル名と同じでなくてよい)
@interface UIView (AnimationExtension) 
//メソッドの定義
//ここに追加したいメソッドを書く
-(void) hoge;
@end

//実行ファイル

#import "UIViewExtention.h"
@implementation UIView(AnimationExtension)
//メソッドの実装
    //ここで定義したメソッドを実装する
 -(void) hoge{
    //処理
}
@end

書き方で注意するのは、ヘッダーファイルでのinterfaceのくだり。
変数は定義できないので、｛｝は書く必要なし。

これを反映されるには、反映させたいクラスファイルにて

#import "UIViewExtention.h"

を記述すればよい。
これが記述されたクラス内では、UIViewインスタンスにUIViewExで追加したメソッドが普通に使えるようになる。

//例

-(void) init{
//imageViewはUIImageVIewクラスのインスタンス
//(UIImageViewのスーパークラスはUIImageなのでhogeメソッドが使える)
[imageView hoge];
}

まずはObjective-CというかC言語での乱数の発生させる方法。
使える関数は2種類
まず
int rand(void);
という関数でint型の乱数を返すことができる。
このときに返る値は、0～馬鹿でかい数という感じ。
馬鹿でかい数はコンパイラによって変わるらしい。
(ASのMath.random()のように、0～1未満というわけでない)

int i;
i = rand();
printf(%d,i);//0から馬鹿でかい数の間の間

ただ、このままだと乱数は実行するたびに常に同じ値を返すことになるので、初期化処理という行為が必要になる。
そこで使うのがsrand();
void srand(unsigned int 初期値);

使い方としては、rand()関数を実行する前にsrand()関数を実行することで初期化すればよし。
初期値には、絶対にかぶらない値を日付データから取ればよし。

//time(NULL)で現在の時刻が1970年1月1日午前0時0分0秒からの通算秒数で得られる。
srand(time(NULL));
rand();

以上が、C言語での設定方法

Objective-Cではsrandは以下のようにするらしい。

//NSDateインスタンスを作って、本日の日付けを秒数に換算してる
srand([[NSDate date] timeIntervalSinceReferenceDate]);
rand()

※C言語のやり方でも問題なさげ。