0
    今回は、アニメーション機能を追加して、
    このプロジェクトもいよいよゲームっぽくなっていきます

    [今回の内容]
    ■アニメーションに向けての前準備
    ■アニメーションに向けての「ホント」の前準備

    しかし、残念なお知らせが...
    実は...
    前回の内容にちょっと修正がありました
    すこし時間をください

    え〜、まず TestGameViewController.h を選択しまして、
    以下の2行を消去してください...
    (前回の記事は、2011/9/23に修正しています)

    - (void) moveL_touchDown:(id)sender; //<--消す
    - (void) moveR_touchDown:(id)sender; //<--消す

    revise

    以上で、修正終わりです... これって必要ないんですね... 知らなかった

    ...

    ■アニメーションに向けての前準備

    さぁ! 気を取り直して、アニメーションに進みましょう

    アニメーションに関しての記述は、
    [openGL ES Application]プロジェクトを参考に記述しています

    と言っても、openGL という技術は使っていません...
    openGL を使うと高度なアプリをつくることができますが、
    今回はそのプロジェクトの中のアニメーションの部分のみを抜き出して使用しています
    (openGL については後日機会があれば、といって語るほどの技術はもってませんけどね... )
    openGL

    ...

    さてさて、アニメーションを行う際に
    Framework というものの中のひとつを使用する必要があるのです

    Framework というものは、なんと言いますか、
    例えば今回のように、「アニメーションを使いたいなぁ〜」といったときに
    アニメーションに関するものを、親切に前もって準備してくれている
    ファイルなんですね(説明へた...)

    で今回は、その Framework の中の「QuartzCore」なるものを
    プロジェクトに追加します

    では、左上の[TestGame]をクリックして、
    すぐ右にでた[TARGET]の下の[TestGame]をクリック、
    で、そのまた右に出た上の[Build Phases]をクリック、
    そして、下に出た[Link Binary With Libraries (3 items)]をクリック
    ん〜でもって、下に出た[+]をクリックします
    framework

    この [Link Binary With Libraries (3 items)] って中に「QuartzCore」を追加します

    では、新しく開いたウィンドウから [QuartzCore.framework]を探し出して、
    選択してから [Add] してください
    Framework

    すると、左側のファイルが並んでいるところに
    [QuartzCore.framework]が追加されています

    で、ファイルが並んでいる中に折角「Frameworks」ってフォルダがあるので、
    [QuartzCore.framework]をドラッグして、そのフォルダの中に入れてください
    move

    ほいでもって、このままほったらかしてても使えないので、
    TestGameViewController.m を開いてインポートして使えるようにします
    上の方に、一行追加...

    #import <QuartzCore/QuartzCore.h>

    #import "TestGameViewController.h"

    import

    よし!これでアニメーション完璧!!

    ... ではなくて、ここまでは前準備の前の準備が終了ということで、

    ここからホントの前準備に進みます


    ■アニメーションに向けての「ホント」の前準備

    まず、TestGameViewController.h を開きましょう

    そして、赤い部分を追加します

    @interface TestGameViewController : UIViewController
    {
        BOOL animating;
        NSInteger animationFrameInterval;
        CADisplayLink *displayLink;
       
       
        UIImageView *greenIV, *kirinIV;
       
        UIButton *moveLBT, *moveRBT;
       
        BOOL moveLFlag, moveRFlag;
    }

    @property (readonly, nonatomic, getter=isAnimating) BOOL animating;
    @property (nonatomic) NSInteger animationFrameInterval;

    - (void)startAnimation;
    - (void)stopAnimation;


    @end

    .h


    次に、TestGameViewController.m へ移動して、
    上の方に赤い部分を追加します
    #import <QuartzCore/QuartzCore.h>

    #import "TestGameViewController.h"

    @interface TestGameViewController ()
    @property (nonatomic, assign) CADisplayLink *displayLink;
    @end

    @implementation TestGameViewController

    @synthesize animating;
    @synthesize displayLink;

    それから、- (void)loadView の中に赤い部分を追加
    [super loadView];

    animating = FALSE;
    animationFrameInterval = 1;
    self.displayLink = nil;


    UIView *view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    そして、最後にたっぷり長いですが、
    - (void) moveR_touchDown:(id)sendeer の } の下に、以下を全部追加します
    - (void)drawFrame
    {
        NSLog(@"Animation");
    }
    - (void)viewWillAppear:(BOOL)animated
    {
        [self startAnimation];
       
        [super viewWillAppear:animated];
    }
    - (void)viewWillDisappear:(BOOL)animated
    {
        [self stopAnimation];
       
        [super viewWillDisappear:animated];
    }
    - (NSInteger)animationFrameInterval
    {
        return animationFrameInterval;
    }
    - (void)setAnimationFrameInterval:(NSInteger)frameInterval
    {
        if (frameInterval >= 1) {
            animationFrameInterval = frameInterval;
           
            if (animating) {
                [self stopAnimation];
                [self startAnimation];
            }
        }
    }
    - (void)startAnimation
    {
        if (!animating) {
            CADisplayLink *aDisplayLink = [[UIScreen mainScreen] displayLinkWithTarget:self selector:@selector(drawFrame)];
            [aDisplayLink setFrameInterval:animationFrameInterval];
            [aDisplayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
            self.displayLink = aDisplayLink;
           
            animating = TRUE;
        }
    }
    - (void)stopAnimation
    {
        if (animating) {
            [self.displayLink invalidate];
            self.displayLink = nil;
            animating = FALSE;
        }
    }

    もうこれ、長いのでコピー&ペーストで...

    .m

    ふぅっ!... 終わりましたよ... お疲れ様でした

    それでは、[Run]しましょうか?

    アニメーションが完成です!!

    ...

    どこが?

    ...

    ですね、それらしきことは何もしてないですもんね

    でも、気づいている方もいると思いますが、
    プログラムの右下を見てください
    ずっと何か動いてますよ

    [All Output] のとこ

    ず〜と下の方にいくと

    Animation

    って出まくってますよね

    これがアニメーションなんです
    Animation が出続けていたら成功です

    ...

    では、なんで Animation って出てるの?
    そうですね、ここに出るってことは、NSLog の影がどこかにあるはずです

    NSLog(@"Animation");

    って、きっとどこかに...

    ハイ!ありました
    最後に追加した、長〜い記述の一番はじめに

    - (void)drawFrame
    {
        NSLog(@"Animation");
    }

    がありました

    ということは、アニメーションの正体は

    - (void)drawFrame

    なんですね
    - (void)drawFrame の中に書かれたものが、ず〜と繰り返し処理されていく
    ということなのです

    Animation

    あ、今まだ Animation 流れてますか

    この流れを止めるときは、[Run]の右にある[Stop]を押してください

    ...

    さて、Animation が流れ続けても、まったく面白くありませんので、
    何か動かしてみましょう!

    キリンさんは今後のことがあるので、とりあえず...
    - (void)drawFrame の中身を以下のように変更しましょう

    - (void)drawFrame
    {
        CGRect frame = greenIV.frame;
        frame.origin.y += 1.0;
        [greenIV setFrame:frame];
    }

    draw

    そして、[Run]!

    うぉ!?

    き、き、木が動き出した〜〜〜!!

    おばけの木だぁぁぁ〜〜〜!!!!

    といってる間に、どこかに走り去ってしまいました...
    move_tree


    どうですか?動いたでしょ?

    感動ですね?(... そうでもない?)

    ...

    ということで、アニメーションの準備が完了しました

    次回は、キリンさんとボタンとアニメーションを連動させたいと思います

    それではまた!

    ...

    おばけの木をとめるときは、[Stop]を押してください

    もう一度 [Run]すれば、木はもとの位置にもどります

    また、走り出しますけどね...


    [最後に変更した3行の説明]
    内容は、キリンさんを移動させるときと同じ記述
    1行目:木(greenIV)の座標とサイズを取得し、frameという名のものに代入
    2行目:取得した frame の中のY座標を1ピクセルプラスして変更
    3行目:Y座標を変更した frame をあらためて木(greenIV)にセットする

    ※木は縦方向に移動させるのでY座標を変更します

    ...

    UIImageView や UIButton 、UILabel(ラベル) などを
    細かく設定するのに便利な一冊




    コメント
    コメントする








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

    Calendar
    S M T W T F S
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
    << August 2019 >>
    My Apps
    有料アプリ

    無料アプリ

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