[objective-c]ゲームでよくある画面をタッチした部分にエフェクトを表示するやつやってみる #iOS

タイトルにある通り、画面をタッチするとキラキラしたりマークが出たりするあれをやりたいなぁと思って調べた内容をメモです。

どうやら、

touchesBegan:withEvent:
touchesMoved:withEvent:
touchesEnded:withEvent:

あたりを使うのが良さそうです。

まずはtouchesBegan:
ViewController.mに以下を記述。


-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];
}

これで画面にタッチしたタイミングでpointにタッチ座標が代入されます。
あとはこの座標を使ってアニメーションなど自由に料理できてしまうと。


-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];

//imageViewを生成
    UIImageView *img = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];

//画像を設定
    img.image = [UIImage imageNamed:@"マーク画像.png"];

//タッチポイントに画像を描画
    img.center = point;
    [self.view addSubview:img];

//0.3秒かけて透明化するアニメーション
    [UIView animateWithDuration:0.3 animations:^{
        img.alpha = 0;
    }completion:^(BOOL finished){
        [img removeFromSuperview];
    }];
}

これでタッチしたところにマークが出て、0.3秒かけて薄くなりながら消えていくはずです。
・・・・・・あれ？何も見えないぞ。

なるほど、画面をタッチすると同時に描画→アニメーションしてるから指を離した時点で既に消えてるのか。

じゃあ、画面から指を離したタイミングで描画した方が良さそうですね。
ここで使うのがtouchesEnded:
同じくViewController.mに以下を記述。


-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];

//imageViewを生成
    UIImageView *img = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];

//画像を設定
    img.image = [UIImage imageNamed:@"マーク画像.png"];

//せっかくだから半分のサイズに縮小
    img.transform = CGAffineTransformMakeScale(0.5, 0.5);

//タッチポイントに画像を描画
    img.center = point;
    [self.view addSubview:img];

//0.3秒かけて元のサイズに拡大しながら透明化するアニメーション
    [UIView animateWithDuration:0.3 animations:^{
        img.transform = CGAffineTransformIdentity;
        img.alpha = 0;
    }completion:^(BOOL finished){
        [img removeFromSuperview];
    }];
}

これでよりふわっと感が出て、ちゃんと指を離したタイミングで描画されるから目視可能です。
もう先ほどのtouchesBegan:はお役御免です。

あと欲を言うと、画面にタッチしながら指を動かした時にも何かエフェクトが欲しいですよね。。。
そこで使うのがtouchesMoved:
またしてもViewController.mに以下を記述。


-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.view];

//imageViewを生成
    UIImageView *img = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];

//画像を設定
    img.image = [UIImage imageNamed:@"マーク画像.png"];

//タッチポイントに画像を描画
    img.center = point;
    [self.view addSubview:img];

//0.2秒かけて縮小しながら透明化するアニメーション
    [UIView animateWithDuration:0.2 animations:^{
        img.transform = CGAffineTransformMakeScale(0.01, 0.01);
        img.alpha = 0;
    }completion:^(BOOL finished){
        [img removeFromSuperview];
    }];
}

縮小アニメーションすることで「ついてきている感」が出ますね。

ちなみに、画面をタップしたまま指をガーっとやった場合、概ね0.015秒〜0.050秒くらいの間隔でtouchesMoved:が呼ばれているっぽいです。
ログで見ただけなので確証はありませんが。。。すいません。

ともあれ、これでなんとかゲームでよくある画面をタッチした部分にエフェクトを表示するやつっぽい事は出来ました。

あとはこのViewControllerを継承して画面作っていけばOKですね。