iPhoneに雪を降らせよう
前回は、お絵描きプログラミングの応用で、少しずつ動いている画像を何枚も用意して、iPhoneの上でパラパラマンガのアニメーションを実現する方法を解説しました。この方法を応用することで、ほかにもさまざまなアニメーションを楽しむことができます。
だんだんと冬も深まってきたところで、今回は季節を感じられるように、iPhone上に雪を降らせるアニメーションアプリを作ってみましょう。基本的な考え方は前回と同じパラパラマンガですが、今回は1つの絵を少しずつズラしながら再利用することで、雪が降る様子を表現します。
繰り返し雪を降らせるために「タイマー」も使いましょう。タイマーは同じ処理を繰り返し実行してくれるので、アニメーションを作るときにとても便利な機能です。今回は雪の円が描画される場所を移動するためだけにタイマーを使っていますが、背景色を変えたり、キャラクターの画像を入れ替えながら本物のパラパラマンガを作ることもできます。さぁ、チャレンジしてみましょう！
【STEP 1】アプリの基本部分を作ろう
Xcodeで新しいプロジェクトを作ります。メニューから［File］→［New］→［Project］と選択して、「Single View Application」を作成します。［Product Name］には、今回は「Snowfall」などと入力しておきます。最後に、［Language］に「Swift」を選択します。
ウインドウ左のプロジェクトナビゲータから［Main.storyboard］を選択し、ウインドウ右下にあるライブラリ領域の、右から2番目にある［Object Library］をクリック。［Image View］を選択して、中央の画面にドラッグします。貼り付けた［Image View］を選択して、メニューから［Editor］→［Resolve Auto Layout Issues］→［Reset to Suggested Constraints］を実行しておきましょう。画像ビューが常に全体に表示されるようになります。
【STEP 2】雪が降る仕組み
雪が降っているように見せるために、新しいコマの画像を作るとき、ひとつ前のコマで描画した画像を少し下にズラして描画しておきます。こうすることで、直前のコマの雪が下に落ちるように見えるのです。
↓
そして画像の上のほうに、新しい雪をひとつ追加して描きます。これを何度も繰り返し行うことで、上に描いた雪が下に落ちていくアニメーションが完成し、しんしんと雪が降る様子が描けます。
【STEP 3】雪を降らせる処理を実装する
［ViewController.swift］を編集して、viewDidLoad()メソッドを、図のように書き換えてください。このプログラムは、画面の背景色を濃い青色に変更し、0.1秒間隔で実行されるタイマーを開始します。こうして開始されたタイマーは、snowTimer()という名前のメソッドを繰り返し呼び出します。
続いてviewDidLoad()メソッドのすぐ下にsnowTimer()メソッドの実装を図のように書き加えてください。画像を作成する部分や画像ビューに画像をセットする部分は、前回までと同じ流れで実現しています。imageViewの現在の画像を描画するためには、imageViewのimageプロパティに対してdrawAtPoint()メソッドを呼び出します。ここではY方向に10ピクセルずらして描画することで、少し下にずらして前の画像を描画しています。白い円を塗りつぶして描くところも、お絵描きプログラミングの回でやりましたね。新しい円を描画する位置とサイズと透明度を乱数を使って計算することで、雪のぱらつく感じを表現しています。
random()関数で作られる乱数を使ってどのようなX座標が作られるのかは、プレイグラウンドを使うとわかりやすく確認できます。for文を使って50回ほどのループを作り、その中にrandom()関数を呼び出すコードをコピーして貼り付ければ、「(50 times)」と表示された右側に出る「＋」ボタンを押すことでプレイグラウンドがグラフを描いてくれます。このグラフを見れば、バラバラな値によって雪がまばらに描かれるようになっているのがわかりますね。
完成しました。10行ちょっとのコードで雪を降らせる「Snowfall」アプリです。雪を表す白い円の透明度や大きさを少しずつ変えることで、まばらな雪の美しさが表現できていますね！
【まとめ】
今回はスウィフトにタイマーを組み込むことで、完成度の高い作品を作ってみました。皆さんも寒い季節だからこそ、アプリ作成にチャレンジして、プログラミングでホットに楽しんでみてください！
今回のサンプルコードは以下のURLよりダウンロードください。
http://fileup.jp/count.cgi?11223.zip
次回のテーマ
物理エンジンで遊んでみよう（前編）
【冒険記】
最近、ネット上にプログラミングの動画教材が多数出てきて、本が主流だったプログラミングの勉強方法が変わってきています。マウスなどでの操作が多いグラフィカルなソフトの操作は、言葉で説明するよりも、動画で見たほうが一発で理解できることも少なくありませんよね。
【冒険記】
実は私も最近、ネット上のトレーニング動画で講師のお仕事をさせていただきました。「Lynda 沼田」で検索すると、私の出演するスウィフトの基本講座が出てきます。この連載でスウィフトに興味を持ったという方はぜひチェックしてみてください！
Dr.さざめき（aka.沼田哲史）
1978年1月生まれ。某大学でプログラミングを教えつつ、ふらっとヨーロッパ旅行に出かけて美味しいものを食べ歩いたり、時折、iOSプログラミングの本を出したり。Mac歴16年。いつかアメリカ西海岸でお昼から美味しいIPAビールを飲みながらプログラミングするのが夢です。Twitter @sazameki
