アプリ制作記６ ゲーム画面の背景

リバーシのゲーム画面の背景となる画像を置くところを作ります。

画面にノードを貼りまくる

ナビゲータエリアのGameScene.sksから、必要なノードとなるSKSpriteNodeを画面上にドラッグします。下図で行くと、以下のノードを貼り付けています。

①は全体の背景となるノード

②はリバーシのボードの枠となるノード

③はリバーシのボードとなるノード

④はボタン領域（待ったボタンと投了ボタンを今の段階では想定中）

⑤の黒ノードは駒と時計のノード、それに対応するラベル

リバーシのボードとフレームのノードを分けたのは、のちのち座標計算が楽になるかなあ〜と思ったからです。ボードのノードの外に枠が一体型でついていると、左端からフレーム分を考慮した座標だけ引いてから、計算みたいなことにならないようにするためです。

ノードに設定を割り付ける

ユーティリティエリアのNameに各ノードを示す名前を指定しておきます。名前が重複しないように注意です。

また、最初から最後まで画像を変更させる必要がないものはTextureにpng画像を指定しておきます。今回でいうと、背景、ボード、フレーム、白黒の駒、時計の画像は固定なのでTextureに画像を割つけています。逆に、ボタンはコード内で割り付ける必要があるので、ここではわざわざ指定していません。

画像を対応づけた後は、ノードの大きさが画像に依存して変化してしまうので、ユーティリティエリアのPositionとSizeを変更して想定通りの大きさになるように設定しています。背景は750*1334のサイズに合わせています。

設定した後で、ノードの前後関係が入れ替わっていて、表示したい画像が他の画像の下に隠れてみえないよ〜という場合は、上図左のノードの行をドラッグで上下に入れ替えると背面/前面の変更ができます。

背景画像のように、全ての画像の下側に表示したい場合は図中のように、BackGroundのノードを一番上までひっぱってあげれば最背面に表示されます。

ウンウン、画像が貼られるだけでなんとなくゲーム画面っぽくなってきてテンションあがってきますやん。