Mac業界の最新動向はもちろん、読者の皆様にいち早くお伝えしたい重要な情報、
日々の取材活動や編集作業を通して感じた雑感などを読みやすいスタイルで提供します。

Mac Fan メールマガジン

掲載日:

第9回 物理エンジンで遊んでみよう(中編)

著者: 沼田哲史

第9回 物理エンジンで遊んでみよう(中編)

「重力」で動きをリアルに表現

前回は、最新のiOSに搭載された物理エンジンの基本的な使い方を解説しました。そこで作ったのは画面のタッチ操作でラベルを移動させるだけの簡単なアプリでしたが、スウィフトで物理エンジンの「スナップ」という機能を使うことで、バネの動きを使った、リアルでわくわくする見た目のアプリに仕上げることができました。こうした物理エンジンを使う最大のメリットは、我々が使うユーザインターフェイスに、自然界に存在するリアルに見える動きを追加できることです。

さて、今回は物理エンジンの1つである、「重力」のサポートを使ってみたいと思います。アプリの中で「何かを触った」「何かが現れた」「何かがなくなった」といったことを表現したいときには、アプリ内で表示している物体に「重力」をつけて、落としたり飛ばしたりすることで、そのことをユーザにわかりやすく伝えられるようになります。それでは、今回は画面をタッチしたときに、重力をつけたラベルを上から表示させるアプリを作りましょう!

【STEP 1】アプリの基本部分を作ろう

Xcodeで新しいプロジェクトを作ります。メニューから[File]→[New]→[Project]と選択して、「Single View Application」を作成します。

[Product Name]には、今回は「My Gravity」と入力しておきます。[Organization Name]には自分の名前を、[Organization Identifier]には「mytest」と入力して、[Language]には[Swift]を選択します。最後に[Next]ボタンを押し、その次の画面で[Create]ボタンを押して、プロジェクトの作成を完了させましょう。

ウィンドウ左のプロジェクトナビゲータから[ViewController.swift]を選択して、このファイルを編集していきます。

【STEP 2】物理エンジンの準備

「class ViewController~」と書かれている行のすぐ下に、3行の変数宣言を追加しましょう。物理エンジン全体を管理するための「アニメ管理」、重力をサポートするための「重力管理」、そして重力を受けた物体を画面端でストップさせるための「衝突管理」の3つの変数です。

これらの変数は、viewDidLoad()メソッドの中で初期化します。まずアニメ管理をself.viewで表されるメイン画面を指定して作成します。そして重力管理と衝突管理を引数なしで作成して、両方ともアニメ管理にaddBehavior()メソッドを使って追加します。衝突管理には、画面全体の大きさを表すself.view.frameを指定して境界線を指定することで、重力を受けた物体がそこでストップするようになります。

【STEP 3】タップでラベルを落とす

[ViewController.swift]の一番下に、タッチに反応するためのtouchesBegan()メソッドを追加します。このメソッドは、タッチされた位置を取得して、その位置にラベルを作成します。そして重力管理と衝突管理の両方にこのラベルをaddItem()メソッドで追加することで、重力と衝突判定が両方とも効き始めます。

シミュレータ上で実行してみると、タッチした位置にラベルが表示され、重力が効いて下に落ちていきます。重力管理によって下への重力が発生し、衝突管理によって画面端で止まります。重力管理は個々のラベルに効いていますので、前に作られたラベルがあとで作られたラベルに押しやられたときにも、重力が働いて下に転がり落ちていきます。

重力は上方向にかけることもできます。重力管理の変数を作ったあとに、gravity Directionプロパティを指定してマイナスの重力を設定することで、上方向に重力がかかるようになります。また重力の数値を大きくすることで、落ちる(飛び上がる?)スピードも速くなっていきます。

重力が上方向に働くようになりました。重力は縦方向にも横方向にも、あるいは斜め方向にも、自由な方向にかけることができます。

touchesBegan()メソッドの先頭にこのような3行のコードを追加することで、画面をタッチするたびに重力方向を切り替えることもできます。

画面をタッチするたびに、新しいラベルが追加されるのと同時に重力方向が切り替わります。ダイナミックに画面が変化するアプリになりました。

【まとめ】

重力をつけることで、物体の動きがいきいきとしたものになり、本当に手で触っているような感覚が出てきます。細長いラベルと四角いラベルを混ぜたりすると、さらにいろんな動きが出て面白くなります。ぜひお試しください!

次回のテーマ

物理エンジンで遊んでみよう(後編)

今回のサンプルデータは以下よりダウンロードください。

●サンプルコードURL●

http://goo.gl/bK2j53

 

【冒険記】

物理エンジンはいろんな場所で使われている技術です。重力などの派手なエフェクトだけでなく、アイテムを選択したときにピクッと動かしたり、使えないボタンを押したときにブルッと震わせたりと、普段何気なく見ているようなところに使われていたりします。

【冒険記】

iPhoneでは、たとえばホームが画面を終わりまでスクロールすると、これ以上スクロールできないということを示すために、軽くバウンドするエフェクトが表示されます。「終わりですよ」というメッセージを伝えようとして、こうした物理的な動きが再現されているのです。

Dr.さざめき(aka.沼田哲史)

1978年1月生まれ。某大学でプログラミングを教えつつ、ふらっとヨーロッパ旅行に出かけて美味しいものを食べ歩いたり、時折、iOSプログラミングの本を出したり。Mac歴16年。いつかアメリカ西海岸でお昼から美味しいIPAビールを飲みながらプログラミングするのが夢です。Twitter @sazameki