背景画像の設定と画像の表示。ぱんだの冒険日記!スマートフォン用の表示で見るぱんだの冒険日記!プレイ中のゲーム(ポケモンGO、グラブル)やアプリ開発、日常、気になったことを色々と書いてます。日常はてなブログこの広告は、90日以上更新していないブログに表示しています。背景画像の設定と画像の表示。【スポンサーリンク】TweetiPhoneアプリ開発も今回で6回目。今回の記事では前回のサンプルコードを改造して下記を実装して行く。前回の記事で背景画像のスクロールやフリック入力も実装して行くと書いたが思いの外長くなってしまったので次回に変更しました。楽しみにしてくれていた方申し訳ない。場所に好きな画像を表示z-index(重なり順序)の設定まとめ前回のおさらい前回の記事では新規プロジェクトを作成して「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」の方は縦幅の中央を指定。要するに横の中央、縦の中央ということですなわち画面の中央に配置ということだ。コードがかけたので再度実行してみた。サイズがまだ小さいものの無事に画面の中央にパンダの壁紙画像が来た。お次は画像を画面サイズにフィットさせるコードの記述だ。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に設定する。