無知の状態からiPhoneアプリ開発に挑んでみる -4ページ目

すこし本格的なゲームアプリ開発（１７）・・パネルを触るーの解説その１

さて、お久しぶりです。

最近引っ越しをしたんで、PCを触れない日が続いてました(ﾉ_-｡)

頭が白紙に戻りましたが、気を取り直したいと思います(・∀・)

では早速ですが、

前回、PlayViewController.hに追加した

　　　　CALayer *movingLayer1;
　　　　CALayer *movingLayer2;

のCALayer型の変数と、

　　　　swapLayers;

メソッドですが、

前の二つの変数は交換対象とする２枚のパネルを参照するために定義してます。
で、メソッドは交換の時のアニメーションを実行するメソッドとして定義しました。

さてここで、ユーザーがパネルを触った時にまず呼び出されるメソッドを実装します。
swapLayersとは別のメソッドでゲームの進行とは別にいつでも呼び出されます。
ここにパネルをくるくる回すコードを実装してます。
具体的にどんなメソッドが呼ばれるのかというと、

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
　・・・
}

です。

なんとなくtouchesBeganという名前から予測できたかもしれないですね。
ではでは。中身の解説
まず、冒頭の

if(isFinished || state != PlayStateChoose){
return;
}

は、さきほども言いましたが、このtouchesBeganはいつでも、
画面をタッチしたら必ず呼ばれてしまいますので、もしパネルを消すアニメーション中の時は
このクルクル回るのが実行されては困る（というより今回はやめとく）ので、ここでハジイてしまいましょう。ヽ(ﾟ◇ﾟ )ﾉ
isFinished　が　True　の時はタイムアップの時でしたね。
PlayStateChooseではない状態（!=がついてるので）つまり、パネルを選択できる状態ではない場合、
このときは、touchesBeganメソッドは即returnが返って終了です(^-^)/

今日は短くてごめんなサイですが、次回はすぐにアップしたいと思います。

モチベーションをUPさせるためにも、応援よろしくお願いしますね(*＾ー＾)ノ

すこし本格的なゲームアプリ開発（１６）・・パネルを触るー

こんにちわ。ご無沙汰ですね(;^_^A

さて今日からは、ゲームの操作のところを作っていきましょう。

今日もコードをざっと載せてみて、とりあえずこんな風に動く！

って確認してから、次回に説明する！というカンジでいきたいと思います。

まず、PlayViewController.hに変数を２つをメソッド１つ追加します。

@interface PlayViewController : UIViewController {

IBOutlet UIImageView *backView;
IBOutlet UIImageView *frontView;
IBOutlet UILabel *scoreLabel;
IBOutlet UILabel *timeLabel;

PlayState state;
BOOL isFinished;

CALayer *movingLayer1;
CALayer *movingLayer2;
}

- (BOOL)swapLayers;

↑赤いところが今回追加したところ。

実際実装するとこんな感じです。

次にPlayViewController.mに以下をまるごと追加します。
追加する場所は@endの手前でいいでしょう（‐＾▽＾‐）

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
if(isFinished || state != PlayStateChoose){
return;
}

UITouch *aTouch = [touches anyObject];
CGPoint pos = [aTouch locationInView:self.view];
pos = [backView.layer convertPoint:pos toLayer:backView.layer.superlayer];

CALayer *layer = [backView.layer hitTest:pos];

if(![layer.name hasPrefix:@"panel"] || movingLayer1 && movingLayer1 == layer){
return;
}

// 2枚目のパネルの選択
if (movingLayer1) {
[movingLayer1 removeAnimationForKey:@"rotation"];
movingLayer2 = layer;

if (![self swapLayers]) {
movingLayer1 = nil;
movingLayer2 = nil;
}
}

// 最初のパネルの選択
if (!movingLayer1) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.duration = 1.0;
animation.repeatCount = HUGE_VALF;
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:M_PI*2];
[layer addAnimation:animation forKey:@"rotation"];
movingLayer1 = layer;
}

}
- (BOOL)swapLayers {
return NO;
}

とりあえず、ここまでコーディングしたら実行してみましょう。
さてどんなんになるかな？？

パネルをクリックすると、くるくる回ります！
ほかのパネルを回すと次はそれが回る！
楽しい楽しいp(^-^)q

右上のパネルをクリックした時↓

左下のパネルをクリックした時↓

三角を押したときはなんか回転の中心がずれてる・・・。
用意した図形がおかしかったのかな？
まいっか(^▽^;)

まだ入れ替えはできないけど、次回はこのコードの説明をサクっとしたいと思います。

その前に自分も理解しないと・・・。

ではまた次回～

ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)

すこし本格的なゲームアプリ開発（１５）・・パネルを置いた説明

こんにちは(^O^)

今日は前回のプログラムの説明をしたいと思います。

難しいことはわからないので、
自分がわかる範囲でわかりやすくをモットーにしていきたいと思います(°∀°)b

では早速、はじめていきましょう。

１ typedef enum{
２       PlayStateChoose, //パネルの選択という状態
３       PlayStateChange //パネルの交換という状態
４ } PlayState;

５ @interface PlayViewController : UIViewController {

６       IBOutlet UIImageView *backView;
７       IBOutlet UIImageView *frontView;
８       IBOutlet UILabel *scoreLabel;
９       IBOutlet UILabel *timeLabel;

１０       PlayState state;
１１       BOOL isFinished;
１２ }

１３ @end

まず、１～４の列挙体の宣言の部分ははなにかというと、
コメントに書いてあるとおり、
PlayStateChoose　はパネルの選択という状態
PlayStateChange　はパネルの交換という状態
で、１０ではそれを使うために、PlayState型の変数stateを用意してます。

必要なときにstateを設定したり、参照したりしましょうね(^O^)

続きまして、BOOL型の変数のisFinishedは、このゲームは時間制限がありますので、
残り時間がなくなったときにここに「時間切れ」をあらわす値をいれてゲームが終了したことがわかるようにします。
時間がなくなったときに「YES」にします。

１ - (void)viewWillAppear:(BOOL)animated{
２       srand((unsigned)time(NULL));
３       state = PlayStateChoose;
４       isFinished = NO;
５       for(int y=0;y<6;y++){
６             for(int x=0;x<6;x++){
７                CALayer *layer = [CALayer layer];
８                layer.bounds = CGRectMake(0,0,42,42);
９                layer.position = CGPointMake(59+(42+1)*x,53+(42+1)*y);

１０                int dice = rand() % 5;
１１                NSString *layerName = [NSString stringWithFormat:@"panel-%d",dice];
１２                NSString *imageName = [layerName stringByAppendingPathExtension:@"png"];
１３                layer.contents = (id)[UIImage imageNamed:imageName].CGImage;
１４                layer.name = layerName;

１５                [backView.layer addSublayer:layer];
１６                }
１７          }
１８ }

さて、次はviewWillAppear:メソッドです。

２　のsrand～っていうのは、他の言語でもよく使われている。乱数を発生させるもの。
現在時間をtime()で取得して、乱数を作っています。毎回パネルをランダムに置くために使います。
３　は、さっき言ってたパネルの状態をあらわ数変数「state」は最初なので、パネルを選択するという状態にしてます。
４　isFinished は当然始めたばかりなので「Flase」です。

５，６は縦方向と横方向にパネルを敷き詰めていく、ループになってます。
７～１５は実際にパネルを置いていってる部分です。
そのうち、７～９はCALayer クラスのlayer メソッドを使って、レイヤを作成していて、
８はその位置と大きさをを設定してます。位置のｘ座標とｙ座標ははあとから設定していくので0にしてます。
パネルの画像は42ピクセルの正方形でしたね。それを設定してます。
９はループの変数ｘ、ｙを使ってlayerのpositionプロパティ（中心の座標）を設定していってます。
１０で０～４の５種類の数字がランダムで生成されるので、
１１では、"panel-1"やら、"panel-4"とかの文字列が作られるので、
１２でpngというのを見ればわかると思いますが、対応する画像ファイル名を生成してます。
１３ではそれをもとにして、UIImage オブジェクトを作って、layerのcontentsに設定しています。
１４で最後にレイヤの名前を設定します。初期ではレイヤの名前が付いていないようなので、ここで設定しています。
あとで、隣どおしが同じパネルかどうかチェックするためにつけてます。
１７はちょっと難しいんですが、backViewはマス目があるビューです。
backViewのlayerに対して、addSublayerメソッドを呼び出し、新しく作成したレイヤを追加することで表示できるようになるみたいです。

なんどかパネルを敷き詰めることが出来ました。
乱数を使ってるんで起動ごとに、パネルの配置がいろいろかわってることがわかると思います。

次回は、パネルを選択したり交換できるようになればいいなと思ってます。

次回もよろしくです。

ランキングに参加しています。下のクリックお願いしますー(*ﾟｰﾟ*)