0
    前回は、ようやくゲームに画像を使えるようになりました

    ただし、キリンさんとライオンさんは、
    勝っても負けてもおんなじ顔をしています
    それじゃぁゲームとして面白くないですよね〜
    (他にもちょっと問題がありますが...)

    ということで、ゲームの状況によって画像を入れ替える
    記述をしていきます

    [今回の内容]
    ■勝ったときと負けたときの画像を準備する
    ■Xcodeへの画像の取り込み
    ■UIImageをつくる
    ■キリンさんが勝ったときに画像を入れ替える
    ■キリンさんが負けたときも画像を入れ替える
    ■ゲームスタート時の画像に戻す

    ■勝ったときと負けたときの画像を準備する

    まずは、画像を準備しますが、必要な画像は、

    ・キリンさんが勝ったときの顔と負けたときの顔
    ・ライオンさんが勝ったときの顔と負けたときの顔

    の4種類を、縦横40ピクセルと縦横80ピクセルの8枚
    ファイル形式は、透明処理のPNGです

    今回も画像を用意していますので、ご自由にお使いください

    kirinLose   kirinLose@2x   kirinWin   kirinWin@2x

    lionLose   lionLose@2x   lionWin   lionWin@2x

    ファイル名は、
    左上から順番に、
    ---------------------------------------
    kirinLose
    kirinLose@2x
    kirinWin
    kirinWin@2x
    lionLose
    lionLose@2x
    lionWin
    lionWin@2x
    ---------------------------------------
    としてください


    ■Xcodeへの画像の取り込み

    それでは、画像の準備ができたら、
    プロジェクトに取り込みましょう

    やることは前回とほとんど同じです

    前回準備したプロジェクトの[images]フォルダに画像を移します

    images

    で、すでにXcodeには[images]フォルダを取り込んでいますので、
    今回は新しく作った画像だけ移動します

    新しい画像だけ選択して、Xcodeの[images]フォルダへ
    ドラッグ&ドロップしましょう

    move

    取り込みについての確認画面が出るので[Finish]ボタンを押して...

    finish

    できました!

    確認

    それでは、プログラムへ移ります


    ■UIImageをつくる

    TestGameViewController.h
    新しいUIImageを4つ追加します

    UIImage *kirinImg, *kirinWImg, *kirinLImg, *lionImg, *lionWImg, *lionLImg;

    .h

    それから、TestGameViewController.m に移動して、
    - (void) loadView の中に UIImage の内容を記述しますが、
    前回は、UIImageで画像を指定してすぐに、UIimageViewに貼り付けました
    ですが、今回は画像をすぐに使わないので、UIImageに画像を指定するだけにしておきます

    kirinIV = [[UIImageView alloc] initWithFrame:CGRectMake(60.0, 220.0, 40.0, 40.0)];
    NSString *fileName= [[NSBundle mainBundle] pathForResource:@"kirin" ofType:@"png"];
    kirinImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    kirinIV.image = kirinImg;
    [self.view addSubview:kirinIV];
       
    lionIV = [[UIImageView alloc] initWithFrame:CGRectMake(140.0, 0.0, 40.0, 40.0)];
    fileName= [[NSBundle mainBundle] pathForResource:@"lion" ofType:@"png"];
    lionImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    lionIV.image = lionImg;
    [self.view addSubview:lionIV];

    fileName= [[NSBundle mainBundle] pathForResource:@"kirinWin" ofType:@"png"];
    kirinWImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    fileName= [[NSBundle mainBundle] pathForResource:@"kirinLose" ofType:@"png"];
    kirinLImg = [[UIImage alloc] initWithContentsOfFile:fileName];
       
    fileName= [[NSBundle mainBundle] pathForResource:@"lionWin" ofType:@"png"];
    lionWImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    fileName= [[NSBundle mainBundle] pathForResource:@"lionLose" ofType:@"png"];
    lionLImg = [[UIImage alloc] initWithContentsOfFile:fileName];


    赤い部分で、UIImageに画像をもたせる二行の処理を4回繰り返しています
    1行目で、ファイル名を指定して
    2行目で、UIImageにファイルの画像をもたせる

    .m

    そして、deallocもやっておきましょうね

    - (void)dealloc
    {
        [kirinImg release];
        [lionImg release];
        [kirinWImg release];
        [kirinLImg release];
        [lionWImg release];
        [lionLImg release];
       
        [resultLB release];
        [scoreLB release];
        [scoreIV release];
       
        [finishBT release];
        [startBT release];
        [moveRBT release];
        [moveLBT release];
       
        [tree1IV release];
        [tree2IV release];
        [apple1IV release];
        [apple2IV release];
       
        [lionIV release];
        [kirinIV release];
        [greenIV release];
       
        [super dealloc];
    }

    dealloc


    ■キリンさんが勝ったときに画像を入れ替える

    UIImageの準備ができたところで、
    はじめに、キリンさんが勝ったときに画像を入れ替えて見ましょう

    キリンさんが勝ったときの記述は...

    ...あ、ここですね
    リンゴの数が10個になって@"You Win!!"と表示するところですね

    if(moveLFlag == TRUE){
         CGRect frame = kirinIV.frame;
         frame.origin.x -= 1.0;
         if(frame.origin.x <= 40.0){
              frame.origin.x = 40.0;
              if(apple1IV.hidden == FALSE){
                   apple1IV.hidden = TRUE;
                   score++;
                   if(score == 10){
                        finishBT.hidden = FALSE;
                        startFlag = FALSE;
                        resultLB.text = @"You Win!!";
                        resultLB.hidden = FALSE;
                        kirinIV.image = kirinWImg;
                        lionIV.image = lionLImg;
                   }
                   scoreLB.text = [NSString stringWithFormat:@"%d ", score];
                   if(apple2IV.hidden == TRUE) apple2IV.hidden = FALSE;
              }
         }
         [kirinIV setFrame:frame];
               
         //NSLog(@"MOVE(L):%.1f", frame.origin.x);
               
         CGPoint center = kirinIV.center;
         kirinX = center.x;
         kirinY = center.y;
    }
           
    if(moveRFlag == TRUE){
         CGRect frame = kirinIV.frame;
         frame.origin.x += 1.0;
         if(frame.origin.x >= 240.0){
              frame.origin.x = 240.0;
              if(apple2IV.hidden == FALSE){
                   apple2IV.hidden = TRUE;
                   score++;
                   if(score == 10){
                        finishBT.hidden = FALSE;
                        startFlag = FALSE;
                        resultLB.text = @"You Win!!";
                        resultLB.hidden = FALSE;
                        kirinIV.image = kirinWImg;
                        lionIV.image = lionLImg;
                    }
                    scoreLB.text = [NSString stringWithFormat:@"%d ", score];
                    if(apple1IV.hidden == TRUE) apple1IV.hidden = FALSE;
               }
          }
          [kirinIV setFrame:frame];
             
          //NSLog(@"MOVE(R):%.1f", frame.origin.x);
               
          CGPoint center = kirinIV.center;
          kirinX = center.x;
          kirinY = center.y;
    }

    あっさり二行追加するだけですね
    キリンさんが勝ったときに
    キリンさんのImageView(kirinIV)の画像を kirinWImg にして
    ライオンさんのImageView(lionIV)の画像を lionLImg にするだけです
    簡単です

    You Win


    ■キリンさんが負けたときも画像を入れ替える

    ということで、次はキリンさんが負けたときですが、
    これもやることは同じですね

    負けたところは...
    ココ、ココ、//Atari って書いてたとこです

    //Atari
    float kyori = (kirinX-lionX)*(kirinX-lionX) + (kirinY-lionY)*(kirinY-lionY);
    if(kyori < 40.0*40.0){
         //kirinIV.backgroundColor = [UIColor redColor];
               
         finishBT.hidden = FALSE;
         startFlag = FALSE;
         resultLB.text = @"You Lose...";
         resultLB.hidden = FALSE;
         kirinIV.image = kirinLImg;
         lionIV.image = lionWImg;
    }

    ここも二行追加するだけですね
    キリンさんが負けたときに
    キリンさんのImageView(kirinIV)の画像を kirinLImg にして
    ライオンさんのImageView(lionIV)の画像を lionWImg にするだけです

    そうそう!
    ここでは、キリンさんが負けたときに真っ赤な鮮け...
    キリンさんが真っ赤に染まっていましたが、
    かわいそうなので色を赤くするところは消しておきましょう

    You Lose

    それでは...

    あ、もう一ヶ所ありました、
    ゲームをスタート画面に戻すところです


    ■ゲームスタート時の画像に戻す

    フィニッシュボタンを押したときに、
    キリンさんとライオンさんの画像を通常のものに戻さないといけません

    ということで、- (void) finish_touchUp:(id)sender の中を

    - (void) finish_touchUp:(id)sender
    {   
        finishBT.hidden = TRUE;
        resultLB.hidden = TRUE;
        startBT.hidden = FALSE;
       
        score = 0;
        scoreLB.text = [NSString stringWithFormat:@"%d ", score];
       
        //kirinIV.backgroundColor = [UIColor yellowColor];
        kirinIV.image = kirinImg;
        lionIV.image = lionImg;
       
        kirinIV.frame = CGRectMake(60.0, 220.0, 40.0, 40.0);
        lionIV.frame = CGRectMake(140.0, 0.0, 40.0, 40.0);
       
        apple1IV.hidden = FALSE;
        apple2IV.hidden = FALSE;
    }

    のように変更します
    赤い二行で、キリンさんとライオンさんを通常の画像に戻しています
    通常の画像は、前回作っている[kirinImg]と[lionImg]です

    そして、赤いキリンさんを黄色に戻す一行は消しておきます

    初期化

    ...

    さてさて、お待たせしました[Run]しましょう!

    キリンさんが勝ったときと

    win

    ライオンさんが勝ったとき

    lose

    それぞれ素敵な笑顔がはじけていますね

    png_alpha

    そして無事にスタート画面にもどることができました

    あとは、リンゴや木などの画像を用意して
    同じようにImageViewに貼り付けることができます

    ...

    さあ、もうゲームも完成ですか?

    いや、まだ?

    う〜ん、音ですか?
    ここまできたので、音も出しましょうかね?

    次もがんばります!





     

    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    Calendar
    S M T W T F S
        123
    45678910
    11121314151617
    18192021222324
    25262728   
    << February 2018 >>
    My Apps
    有料アプリ

    無料アプリ

    Selected entries
    Categories
    AdSense
    Sponsored Links
    Archives
    Recent comment
    Links
    Profile
    Search this site.
    Others
    Mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM