はじめてのiOSアプリ開発

スプライトのキャラクタ画像を風船の画像に変更してみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スプライトの画像を宇宙船の画像から、風船の画像に変更する方法を説明します。iPhoneアプリに画像を用意するときに注意が必要な点についても説明します。
講師:
07:13

字幕

このレッスンでは 宇宙船の画像を風船の画像に 変更する方法について 説明したいと思います 現在 この様に 宇宙船の画像が表示されています この宇宙船の画像が どのようなプログラムで 表示されているのか 確認しておきたいと思います 一旦 Xcode に戻ります 今回見ていただくのは 「 GameScene.m 」と言う ファイルになります 「 GameScene 」と言うのは その名前の通り ゲームの画面 ゲームのプレイ画面を 表すクラスになっています このゲームの中で どのようなことをするのかということは ほとんど「 GameScene.m 」の中に 記述していくことになります 特に今回見ていただきたいのは 「 touchesBegan 」と書かれた ユーザーが画面をタッチした時に 呼び出されるメソッドの中身になります ここで for 文が 1つ書かれています 更にその中を見ますと 「 SKSpriteNode *sprite = [SKSpriteNode sprideNodeWithImageNamed 」と書かれた メソッド呼び出しがあって ここに「 spaceship 」と言う名前の 引数が書かれているのがわかります まず「 sprite (スプライト) 」という 用語を覚えていただきたいですけれど 2D のゲームの画面において 画面に表示されている 画像1つ1つのことを 「 sprite 」と言います この「 sprite 」を 画像イメージを基にして作成する それがこのプログラムの中に 書かれていることです ここの「 spaceship 」と書いて 表示している 画像なんですけれども この画像を格納しておくための場所が Xcode の中では 「 Images.xcassets 」と 書かれた場所になります こちらを見ていただきますと 「 spaceship 」と書かれた所に 「 1x 」「 2x 」「 3x 」とそれぞれ 画像が3つ登録できるようになっています ここに現在 宇宙船の画像が 登録されているのが分かります 今回はここに風船の画像を追加して それを「 GameScene.m 」の中で 使っていくという プログラムを書きたいと思います 実際にやってみましょう 「 Images.xcassets 」と言う ファイルを選択して この「 Spaceship 」の下辺り この辺りを右クリックします 右クリックが無い場合には コントロールキーを押しながら クリックでも構いません すると 一番上に 「 New Image Set 」という メニュー項目が出てきますので この「 New Image Set 」を 新しく作成します すると 新しい画像が 登録できる場所が用意されます そして「 Image 」と言う名前の所を 「 Image 」ではなくて 「 Balloon 」と書き換えます こうすることで画像を登録する場所が 風船のために用意できたことになります 次に風船の画像を登録していきましょう 登録する風船の画像は3つあります 「 1x 」と書かれた所と 「 2x 」と書かれた所と 「 3x 」と書かれた所 「 1x 」は昔ながらの ちょっとドットの荒い iPnone のための画像 「 2x 」は Retina ディスプレイに 対応したもの 更に「 3x 」はより高精細な iPhone 6+ のための画像になります 元の画像を解像度が2倍になったら 当然2倍のピクセル数で 用意しなければいけないし 更に高精細になったら 3倍のものを用意するので この様に2倍の大きさの画像と 3倍の大きさの画像を同時に登録すると よりきれいな画像をiPhone 6 や iPhone 6+ のユーザーにも 楽しんでもらえます 今回はこれに対して この様な画像を用意しました 「バルーン画像」という フォルダの中に入っています こちらは皆さんにも ダウンロード可能なフォルダの中に 3つとも入れてお渡ししたいと思いますので そこから見つけてください バルーン画像は3つあります まず 1倍の画像です 1倍の画像が 「 balloon.png 」という画像です 2倍の画像が「 balloon@2x.png 」 3倍の画像が 「 balloon@3x.png 」になります この様に2倍の画像には 「@2x 」という名前を後ろにつけます そして3倍のものは 「@3x 」とつけます このように3種類の画像を同時に用意したら これを まるっと選択して そして この画像を一気に Xcode の「 Balloon 」の上に ドラッグ & ドロップで追加します これは3つ一気に追加できますので こうしてドラッグ & ドロップで追加すると バルーンの画像が登録できました 最後 「 GameScene.m 」に戻ります この「 GameScene 」の中で 先ほど「 Spaceship 」と 書かれていた場所に 今 登録したばかりの画像の名前 「 Balloon 」と書くと 画像の置き換えができました 一度実行して確かめておきましょう アプリケーションが起動しました このアプリケーションに対して 画面をクリックすると この様に風船が くるくると回りながら 宇宙船の代わりに使われるように なったことが分かります 今 風船の画像が かなり小さいのですけども すこし後ろの方に戻って見ますと 「 sprite 」の設定が書いてあります 「 sprite 」を X 方向のサイズも Y 方向のサイズも 2分の1にして使うという設定が デフォルトで書かれています 今回は X 方向のスケールも Y 方向のスケールも 両方ともそのままの大きさで 使いたいと思いますので この2行を消しておきます そうしてアプリケーションを もう一度実行しますと 風船の画像が元々用意してある 風船の画像の大きさが そのままで使われるようになります このレッスンでは宇宙船の画像を 風船の画像に変更する方法について 説明しました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。