ドムドムその7:ImageViewを動かしてみよう

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > ドムドムその7:ImageViewを動かしてみよう

2009/10/12 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

ムドム営業再開だよ~っと。

さて、そういうわけでございまして。
中途半端にWebを投げ出し。中途半端に投げ出していたiPhoneアプリ開発を拾う図です。

自分パス。壁打ち。
投げ出した勢いが強い程拾う時のダメージもひとしおでございますね。

さて、ドムドムはどこまで行っていたかと言うと、
前回加速度センサーを組み込む所まで行っていました。
ドムドムその6:3軸加速度センサーを組み込もう

ご自宅の家具の傾き、測ってみましたか?
全部傾いているという衝撃の事実が浮き彫りになった私のような人。
挙手。

それはともかく。
今回は加速度センサーで計測された加速度を、ボールに伝える部分を作ってみようと思います。

コード自体は簡単なので、まずはサラサラと写してみてください。

domdomViewController.h
ドムドムその7:ImageViewを動かしてみよう
<クリックで拡大>

2種類×2個の変数と、メソッドを宣言します。

// 速度を格納しておくための変数
double vx, vy;
// 位置を格納しておくための変数
double posX, posY;

// ボールを動かすメソッド
-(void)moveBall;

ここで少しだけ解説をしておきますと、
アニメーションの中で自然にモノを動かすためのやり方。実は決まっています。
(決まってないかもしれませんが、私はだいたいコレを使います)

・加速度
・速度
・位置

3つの変数を使います。

ボールが転がっていく場合を考えてみましょうか。

ボールの最初の位置はposX,posYの座標を使って書くと、

posX = 0;
posY = 0;

こんな感じですね。0,0の位置にいる、ということです。
わかりにくい場合は後ろにメートルとか付けてみてください。

このボールを100,100の位置まで転がしていくとしましょうか。
メートルを付けて考えると、校庭を対角線上に転がっていったくらいになります。

posX = 100;
posY = 100;

これでOKです。
が、コレを1コマでアニメにすると、瞬間移動になってしまいます。
いきなり0から100まで動いてしまうわけですから。

ですので、何コマかにわけてちょっとずつ動かしていきます。
コレが速度です。

速度はvx,vyを使って書くことにしましょう。velocityのことです。

vx = 5;
vy = 5;

posX = posX + vx;
posY = posY + vy;

こんな感じですね。
1コマあたりにX方向に5、Y方向に5進むよってことです。
0から100まで動かすのであれば20コマ必要になります。
速度が上がればコマ数は少なくなるし、速度が下がればより多くコマが必要になります。

コレで良さそうな気もするのですが、実はコレではスムーズなアニメーションには足りません。
何が足りないかって言うと、速度が常に一定なんです。
スタートダッシュからゴールまでずっと同じスピード。
アニメで見るとボールがベルトコンベアに乗って運ばれているような感じになります。

ですので、最後の要素が加速度になります。
ax,ayと書きましょうか。accelerationですし。
このプログラムではaccelX,accelYと書いてしまいましたが。。。とりあえず気にせず。

加速度は速度を増やしたり減らしたりします。
vxをいきなり5にするのではなく、vxに1ずつ足していくようなイメージです。
その「1ずつ」がaxに格納しておく数字です。

ax = 1;
ay = 1;

vx = vx + ax;
vy = vy + ay;

加速度を速度に足しまくれば当然速度は超速くなりますし、
逆に加速度分を引いていけば速度は遅くなって最終的にはマイナス(逆方向)になります。

まさしくアクセルとブレーキです。

ブレーキは一度に速度を0kmにするわけではなく、
一定に踏んでいると一定に速度を削っていきます。

なんでこんな面倒くさい書き方をしているかと言うと、

「加速度が一定なのに速度が変化」したり
「加速度が変化させると速度が急激に変化」したり

当たり前のことなんですけど、
慣れないとこのvx,vyとax,ayの関係がピンとこないんです。最初は全然。

でもコレアニメーション作るためにとっても重要な考え方ですので、
少しずつ慣れていってください。

ではでは、続きにいきましょう。

domdomViewController.m
ドムドムその7:ImageViewを動かしてみよう
<クリックで拡大>

viewDidLoadの中で各数値の初期化をしちゃいましょう。

// 位置は画面の中央
posX = 160;
posY = 240;
// 速度はゼロ
vx = 0;
vy = 0;
// 加速度もゼロ
accelX = 0.0;
accelY = 0.0;
accelZ = 0.0;

// ボールの中心座標を修正するメソッドCGPointMakeを使って最初の位置を設定
ball.center = CGPointMake(posX, posY);

domdomViewController.m
ドムドムその7:ImageViewを動かしてみよう
<クリックで拡大>

加速度センサーの中でmoveBallというメソッドを実行するよう設定します。

domdomViewController.m
ドムドムその7:ImageViewを動かしてみよう
<クリックで拡大>

moveBallメソッドの中身です。
今回の場合加速度は加速度センサーが教えてくれるので、

・速度に加速度をプラス
・位置に速度をプラス
・CGPointMakeでボールの中心座標を修正

こういう流れで処理すればOKです。
posX,posYの段階では、単に「ここの位置に次は動くのよ」という計算上の数字を格納しただけですので、最後にCGPointMakeで実際のボールの位置をずらしておくことを忘れないでください。

さて!
では「ビルドして進行」してみましょう!

ドムドムその7:ImageViewを動かしてみよう

ほーら。
ボールがするするとー。

画面から出ていったー!

いえいえいえいえ。出ていって正解なんです。止まれない子なんです。

まだ「壁で跳ね返る」という部分を入れていませんので、
ボールは指示された通り「加速度」と「速度」から「位置」を割り出してどこまでも動いていくんです。

今回は
「何秒ボールを画面から逃さないでいられるかゲーム」
ということで。

直情型のボールと秋の夜長をお楽しみください。

関連する記事:


Advertisement