Change before you have to.

androidアプリ開発、iosアプリ開発、rails、deep learning .etc.を使った社会実験。

ゲーム中のプレーヤー表示②:動かす

 

前回までのあらすじ

iOS Developer登録(申請篇、アクティベート篇、完結篇)

開発環境の整備

オブジェクト指向とは?

いざプログラミング!

iOSアプリで部品を作る

iOSアプリケーションのアニメーションまとめ

iOSアプリケーションのレイヤーまとめ

ゲームのデザインについて

主人公決定

ゲーム中のプレーヤーの表示① 

 

前回、画面の中で主人公の少女が翼を羽ばたくドラゴンに乗っている様子を

animationImagesに配列を格納してアニメーションで表現しました。

 

今回はその主人公が画面内を縦横無尽に羽ばたけるようにします。

具体的には画面をタッチしたら主人公がその位置に応じて動くようにします。

ソースコード的には主人公 が描画されるUIImageViewに対し

画面タッチで呼び出されるメソッドで位置を変化させます(リアルタイムで)。

 

ちなみに前回のソースコード

主人公を表示するためのUIImageView(のuiv変数)をグローバルに宣言しましたが、

その理由が上記の通り他の(画面タッチで呼び出される)メソッドで使用するためです。

 

前回のソースコード 

  

CGRect rect = CGRectMake(0, 0, 70, 70);//大きさ

uiv = (UIImageView *)[[UIImageView alloc]initWithFrame:rect];

NSArray *imgArray = [[NSArray alloc] initWithObjects:

                             [UIImage imageNamed:@"player.png"],

                             [UIImage imageNamed:@"player2.png"],

                             [UIImage imageNamed:@"player3.png"],

                             nil];

((UIImageView *)uiv).animationImages = imgArray;//uivオブジェクトに、配列に格納した画像集合をセット

((UIImageView *)uiv).animationRepeatCount = 0;//リピート回数(ゼロなので永遠にリピート)

((UIImageView *)uiv).animationDuration = 1.0f; // アニメーション全体で1秒(=各間隔は0.33秒)

[((UIImageView *)uiv) startAnimating]; // アニメーション開始

[self.view addSubview:uiv];//viewに主人公のイメージ(uiv)を貼付ける    

    

 

 

このコードの最後に

  

uiv.userInteractionEnabled = YES;

UIPanGestureRecognizer *flick_frame = 

 [[UIPanGestureRecognizer alloc]

 initWithTarget:self 

 action:@selector(onFlickedFrame:)];

[uiv addGestureRecognizer:flick_frame];

 

を追加するとuiv変数をタッチすると

onFlickedFrameというメソッドが呼ばれます。

 

onFlickedFrameメソッドの中身は以下のようにしてみました。

  

- (void)onFlickedFrame:(UIPanGestureRecognizer*)gr {

    CGPoint point = [gr translationInView:uiv];//uivの位置を取得する

    //フリックによって動いた位置を取得する

    CGPoint movedPoint = CGPointMake(uiv.center.x + point.x, uiv.center.y + point.y);

    uiv.center = movedPoint;//uivの位置をセット

    NSLog(@"uiv.x=%f, uiv.y=%f",//一応コンソールで確認

          uiv.center.x,

          uiv.center.y);

    [gr setTranslation:CGPointZero inView:uiv];//よくわからないおまじない。

}

 

 やっていることは

最初にuivの位置を取得し、

フリックによって動いた後の位置を計算(単なるベクトルの足し算)して

表示位置を実際にセットします。

フリックした時にこれらが実行されます。

 

 最後の

[gr setTranslation:CGPointZero inView:uiv];//よくわからないおまじない。

は多分何かを初期化しているようです。

※すみません、勉強不足でよくわかりません。

 

 

 

実行結果は以下の通りです。

 

 

 

 

滑らかに動いてますね。よかった。。

 

 

次回は生きてたらビームとかを出してみようと思います。

 

続きます。