0
    大変お待たせしました!
    ようやく復活です

    [今回の内容]
    ■UIImageViewを作る(復習を兼ねて)
    ■細かい色の指定
    ■UIImageViewのアニメーション(復習を兼ねて)

    え〜なんでしたっけ?なにをするんでしたっけ?

    そうそう、平和な大地に産まれたキリンさん
    そのキリンさんに危険が迫って...

    と、いうところでしたね

    キリンさんに危険!といえば
    もちろんライオンさんですね(?)

    今回は、今までの復習という形になります

    流れとしては、
    1)ライオンさんの UIImageView をつくる
    2)初期化、座標・サイズを指定
    3)UIImageView に色をつける
    4)Viewに貼り付ける
    5)deallocも忘れずに
    6)ライオンさんをアニメーションさせる
    となります

    ■UIImageViewを作る(復習を兼ねて)

    もう、見なくてもできるかもしれませんが、
    早速、記述していきましょう

    では、TestGameViewController.h から
    ライオンさんの UIImageView を作りましょう
    UIImageView *greenIV, *kirinIV, *lionIV;
       
    UIButton *moveLBT, *moveRBT;
       
    BOOL moveLFlag, moveRFlag;

    .h

    次に、TestGameViewController.m に移動して、
    - (void)loadView の中で、初期化〜Viewに貼り付けるまで
    greenIV = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
    greenIV.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenIV];
       
    kirinIV = [[UIImageView alloc] initWithFrame:CGRectMake(140.0, 220.0, 40.0, 40.0)];
    kirinIV.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:kirinIV];
       
    lionIV = [[UIImageView alloc] initWithFrame:CGRectMake(140.0, 0.0, 40.0, 40.0)];
    lionIV.backgroundColor = [UIColor colorWithRed:0.9 green:0.7 blue:0.5 alpha:1.0];
    [self.view addSubview:lionIV];

    ライオンさんの座標は一番上の真ん中に、
    大きさはキリンさんと同じ大きさにしています

    initialize

    そして、dealloc ですね

    - (void)dealloc
    {
        [moveRBT release];
        [moveLBT release];
       
        [lionIV release];
        [kirinIV release];
        [greenIV release];
       
        [super dealloc];
    }

    dealloc

    とりあえず、ここで[Run]しましょう
    lion

    ライオンさんが、画面の一番上に出てきましたか?

    さて、「ライオンさんは何色でしょう?」

    ■細かい色の指定

    サラリと流していましたが、
    今回のライオンさんの色の指定が今までと異なります
    というのも、今まで使った色は
    白、茶色、緑、黄色、黒、といった「○色」と指定できるものでした
    whiteColor、brownColor... といった具合に

    とはいえ、世の中すべての色が「○色!」と言い切れる色ばかりではありません
    今回ライオンさんは、茶色では背景の色と同化してしまうので、
    ちょっと「薄めの茶色」を作っています
    もう一度、色指定のところを確認してみましょう
    lionIV = [[UIImageView alloc] initWithFrame:CGRectMake(140.0, 0.0, 40.0, 40.0)];
    lionIV.backgroundColor = [UIColor colorWithRed:0.9 green:0.7 blue:0.5 alpha:1.0];
    [self.view addSubview:lionIV];

    よく見るとわかりますが、
    colorWithRedgreenblue、alphaと4つの数字が指定されています
    最初の3つは、順番に「」、「」、「」と並んでいます
    この3つの数字の組み合わせによっていろいろな色を作り出すことができます
    数値の範囲は、0.0 〜 1.0 をとります
    すべてを0.0 にすると「黒」
    すべてを1.0 にすると「白」になり、
    Red のところを1.0、その他を0.0にすると「赤」
    Green のところを1.0、その他を0.0にすると「緑」
    Blue のところを1.0、その他を0.0にすると「青」になります

    RedとGreen を1.0、Blueを0.0にすると何色になるでしょうか?
    (答えは最後に書いておきます...)

    で、今回指定している数値では「薄い茶色」になります

    そして、最後の Alpha ですが、これは「透明度」です
    数値の範囲は、同じく 0.0 〜 1.0 をとり、
    1.0 は不透明、
    0.0 で透明になって見えなくなります

    今回は、はっきり見える不透明な 1.0 を指定して、
    ライオンさんのできあがり

    いろいろ数値を変えて、楽しんでみてください

    ...

    ■UIImageViewのアニメーション(復習を兼ねて)

    それでは最後に、ライオンさんをアニメーションさせてみましょう
    - (void)drawFrame の中に記述します
    - (void)drawFrame
    {
        if(moveLFlag == TRUE){
            CGRect frame = kirinIV.frame;
            frame.origin.x -= 1.0;
            [kirinIV setFrame:frame];
           
            NSLog(@"MOVE(L):%.1f", frame.origin.x);
        }
       
        if(moveRFlag == TRUE){
            CGRect frame = kirinIV.frame;
            frame.origin.x += 1.0;
            [kirinIV setFrame:frame];
           
            NSLog(@"MOVE(R):%.1f", frame.origin.x);
        }
       
        CGRect frame = lionIV.frame;
        frame.origin.y += 1.0;
        [lionIV setFrame:frame];
       
        NSLog(@"LION:%.1f", frame.origin.y);
    }

    ライオンさんは、キリンさんに突撃し攻撃してくる危険な存在なので、
    ほったらかしていても勝手に動いてきます

    ということで、ボタンでの移動に関係なくY方向の上から下に向かって
    1ピクセルずつ移動させる記述をしています

    animation

    それでは、[Run]!

    ライオンさんがやってきた〜!
    逃げて逃げて〜!!

    lion_animation

    どうですか?
    ライオンさんはちゃんと襲ってきましたか?
    それをボタンを使ってよけることができましたか?

    ...

    しかし、ラインさんは一度攻撃を仕掛けると、
    そのまま下に消えてしまって宇宙空間をさまよってしまいます

    次回は、「平和な時間はそう長くは続かない」
    ということで、再びライオンさんからの攻撃がはじまるように
    プログラムしていきたいと思います


    (答)RedとGreen を1.0、Blueを0.0にすると「黄色」になります


    コメント
    コメントする








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

    Calendar
    S M T W T F S
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
    << July 2019 >>
    My Apps
    有料アプリ

    無料アプリ

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