【アプリ開発】初心者のiPhoneアプリ開発入門 その6 背景画像の設定と画像の表示。z-index（重なり順序）を使いこなそう
【スポンサーリンク】
iPhoneアプリ開発も今回で6回目。
意外と早いもの。
今回の記事では前回のサンプルコードを改造して下記を実装して行く。
- 背景画像を設定
- 自分の好きな場所に好きな画像を配置
- 重なり順序の設定
前回の記事で背景画像のスクロールやフリック入力も実装して行くと書いたが
思いの外長くなってしまったので次回に変更しました。楽しみにしてくれていた方申し訳ない。（いるかわからないけど…）
目次：
前回のおさらい
前回の記事では新規プロジェクトを作成して「Game」の「Spritekit」を使って宇宙船の画像をパンダに変更した。
詳しくは下記の記事を参照
今回のコーディングは上記の物を使用する。
背景画像を設定してみた
まずは背景画像の設定から。
ちなみにiPhoneはiPhoneでも機種（5Sとか6とか6PLUS）によって画面サイズが異なるが一旦はそれを気にせず適当なiPhone用の壁紙をネットから拾ってきた。
画像はもちろんパンダ。
背景画像の追加
これを前回のパンダ画像を追加したようにAssets.xcassetsに追加して行く。
背景画像を設定するコードを追加
前回のコードの最後の所に背景画像を設定するコードを書いてみた。
流れとしては背景画像を読み込んでbackgroundという変数に入れ、サイズは自身を指定して、addChildで描画。
実行結果
かわいいパンダが横長になった・・・・
サイズ指定と配置指定が悪かった様だ。
配置は指定せずにサイズは自身を指定したから当たり前か…
まずは、画像が左下に寄っているのでそれを中央に持ってくることに。
先程のコードの「self.size」の部分を削除して、座標を指定するコードを書いた。
「CGPointMake」を使い画像を配置する(x,y)座標を指定。「frame.size.width*0.5」と言うのは画面サイズの横幅の中央で、「frame.size.height*0.5」の方は縦幅の中央を指定。要するに横の中央、縦の中央ということですなわち画面の中央に配置ということだ。
コードがかけたので再度実行してみた。
サイズがまだ小さいものの無事に画面の中央にパンダの壁紙画像が来た。
お次は画像を画面サイズにフィットさせるコードの記述だ。
GameViewController.swiftを開き「skView.presentScene(scene)」の前に「scene.size = skView.frame.size」を追加した。
このコードの意味はネットで拾ってきた物なのでまだ理解出来ていないが、とりあえず表示する際のスケーリングを無くすことが出来る魔法のコードらしい。
コードを書き終わったので再度実行。
素晴らしい
これで無事に背景画像を設定する事が出来た。
任意の場所に好きな画像を表示
これは既に上記の背景画像の設定でやっていることだが、一応念のためもう一度おさらい程度に。
ネットで適当なフリー素材アイコンをダウンロードしてくる。
今回はぱんだではなく葉っぱを選んでみた。
今まで書いてきたコードを真似してこんな感じでコードを書く。
本来であればleafIconの画像サイズとか座標を指定してaddChildすれば良いだけのはずだが、今回は先程書いた背景画像を設定するコードが悪さをしているらしく、葉っぱアイコンが背景に後ろに隠れてしまうという問題が起きた。（人によっては問題なく表示出来る場合もある）
なので一旦は53行目の所でbackgroundのaddChildをコメントアウトして背景画像を描画をやめて、アイコンだけを表示してみた。
実行結果が下記になる。
アイコンの表示は無事に成功したみたいだ。
sizeやpositionの値を変更すれば自由な座標に自由なサイズでアイコンを描画出来るはずなので気になる人はためしてみるといいかも。
z-index（重なり順序）の設定
まず、重なり順序って何？と思う人も少なくないはず。
重なり順序とは画像や文字を画面に配置して行く際にどれを上に重ねるかというものだ。例えば先程の葉っぱのアイコンを表示した際に重なり順序を設定していなかったので背景画像の後ろに葉っぱがいってしまい、葉っぱが見えないという現象が起きてしまった。これを回避するために予め順番を設定しておく必要がある。
z-indexの設定はシンプルでzPositionというのを使う。
試しに背景のzPositionを設定してみよう。
addChildを行う前の所でzPositionの値を100と設定してみよう。
そして下記が実行結果。
一見背景しか見えないが、実は後ろに葉っぱのアイコンやHello,Worldの文字が隠れている。
そして次はHello,Worldの文字列のzPositionを200に設定する。
コードが下記。
かけたら実行する。
と、このようにzPositionで指定した値が大きいほど前に表示されるようになる。
この流れで葉っぱのアイコンはzPositionを300と設定すると……
素晴らしい
これで背景画像を設定して、文字を表示、アイコンの表示が完成
zPositionの値は人それぞれではあるが、ある程度ルール付けしておいたほうが後々画像や文字をペタペタ貼り付けていく際に管理が楽になる。
そしてzPositionの値を1,2,3ではなく100,200,300の様な大きい値にしている理由としては、例えば3つのアイコンのzPositionを1,2,3と設定していて1と2の間に何かを挟みたいとなった場合に詰んでしまうからである。なのである程度間を空けて設定しておくことをおすすめする。
まとめ
今回は下記の項目を実装した
- 背景画像の設定
- 任意の場所に画像を表示
- 重なり順序zPositionの設定
次回こそは縦スクロールとスワイプの実装だ…………！
