Spritekitに於ける座標系 – Acenumber Technical Issues

開発iPhoneゲームの目論見には主人公キャラクター ほんまる が飛翔する限りゲームは続行し、力尽きて落下して地面に着地すればゲームオーバーとしたくあります。加うるに飛翔に関しては下限は地面であるのは当然ながら上方には制限を設けたくありません。ほんまるは羽搏く力の続く限り何処迄も天空高く舞い上がれる様にしたいのでした。此れ等方針をプレイヤーに把握願うためにまとめれば以下の如き要件として良いでしょう。

うさ犬が基本的に中央に描画される様にしたい
地面に近づいたらうさ犬は中央から外れて落下した分下に描画される
うさ犬は何処迄も天空高く舞い上がれる様にしたい

上記2番目の要件を換言すれば基本的に画面中央に位置を占めるほんまるは上方に向かい限りは中央に位置し続けますが下方に落ちる際に地面は一定の高さを保たせたいためほんまるは或る閾値を超えたら中央位置から外れ下方に位置を移行せしめなければならない、となるでしょう。斯うした方がゲーム操作にダイナミズムが出るだろう判断もあります。

斯くして Spritekit に於いて座標系を把握、操作する必要が起こります。

日付：2014年4月8日
開発機：MacBook Air（11-inch, Mid 2013）
MacOSバージョン：OS X 10.9.2
Xcodeバージョン：5.1
言語：Objective-C
主関連アプリ：うさ犬が行く

SpriteKitのSceneに代替される ViewController の実装を先ずは以下に記し置きましょう。

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.frame = CGRectMake(0, 50, self.view.frame.size.width, self.view.frame.size.height - 50);（※1）
  // Configure the view.
  SKView * skView = (SKView *)self.view;（※2）
  // Create and configure the scene.
  // SKScene * scene = [UIGMyScene sceneWithSize:skView.bounds.size];
  SKScene *scene = [UIGMyScene sceneWithSize:CGSizeMake(500, 10000)];（※3）

（※4）
  // scene.frame = CGRectMake(0, 0, 320, 568);
  // scene.anchorPoint = CGPointMake(0.5f, 50.0/568.0);

（※1）は広告表示の分Viewの下部に余白を設けています。孰れ此の問題は コンテナ（Container）ViewController の問題へと発展、解決しますが当時は未だ力技のマジックナンバーで糊塗しており此のような状態も混乱に拍車を掛けました。（※2）はSpriteKitのViewを親ViewControllerに読み込ませる通常の事前処理です。（※3）はコメントアウトした上行のシーンを更に縦に大きく取ってうさ犬が何処迄も天高く舞い上がれる余裕を取るためにマジックナンバーですが大きな値を直接指定しています。（※4）以降は特に下行のscene.anchorPointは其の子nodeの基準となるもので此処ではコメントアウトしてありますがスプライトを親シーンの座標系に適合するのに大きな役割を果たし得ます。ブログ @kitano_ow 's blog の2014年1月3日の記事が参考になります。スプライトのプロパティとして sprite.anchorPoint の性質の把握するに便利なサンプルを記します。

【Xcode5】Xcodeの使い方 SpriteKit 編 Vol5 〜座標に関して〜

中央：CGPointMake(0.5f,0.5f)：初期値
左下：CGPointMake(0.0f,0.0f)
右上：CGPointMake(1.0f,1.0f)
右下：CGPointMake(1.0f,0.0f)
左上：CGPointMake(0.0f,1.0f)

アンカーポイントプロパティを以てスプライトの基準位置を正規化して把握し得る以上のサンプルとさて手元の開発ゲームの背景たるSceneに適合するには Scene上にスプライト（Node）を配置する際のpositionの基準位置が初期値としては CGPointMake(0.5f, 0.5f) となっているのでしたから此れを広告表示を含めた下中央に変更する場合は以下となります。

scene.anchorPoint = CGPointMake(0.5f, 50.0/568.0);

此のアンカーポイントを設定したシーンも実際にiPhone画面に表示するには scene.scaleMode なるスケールモードプロパティを設定する必要があります。以て作成したサイズのsceneをフレーム内に如何表示するか決定するのでした。下にプロパティの値を列挙しましょう。

Sprite Kit iPhone 2Dゲームプログラミング

スケールモードプロパティに関しては本邦に上梓数少ないSpriteKit本の Sprite Kit iPhone 2Dゲームプログラミング（STUDIO SHIN著）等にも記述があり唯理屈は分かるものの実際に開発アプリに適合してみないと分からない部分もあります。手元の開発アプリでは最後者の SKSceneScaleModeResizeFill 値が上手くトリミングしてくれるなど最も想定に近い仕様となっており他の値は縦横比が変わったり余白が出来たりで望むものではありませんでした。

[skView presentScene:scene];

以上を以て下に50pxの余白を持ったsceneが作成され上のコードを記述すれば SpriteKitを用いた目論見のゲーム画面が表示されるでしょう。更に詳細については次稿 Spritekitに於ける座標系補遺に譲りたく思います。

1件のコメント