SpriteKitに於いてセーフエリアを見掛け上viewDidLoad内で取得する裏技

iPhone Xが発売[※1]されると共に導入されたノッチは、当初はiPhone Xのみへの対応を考えれば済んだのでしたが、徐々に追加されるノッチ付き端末は、極薄ベゼルが齎らす角丸表示と併せ、iPhoneアプリ作成に於いても充分に考慮せざるを得なくなりました。此れに対応する手法をApple社が開発環境に於いて用意したものがセーフエリアなる概念です。セーフエリアの中にアプリの必要事項を表示させれば、ノッチと角丸の欠け分に掛からずして、アプリ内容が不可視となってユーザーに不便を掛けないようにと配慮された手法です。

セーフエリアの取得

当初はセーフエリア外の余白を零と考えた四角表示領域の従来iPhoneと、iPhone Xのセーフエリア一種類だけと考えれば、iPhone Xか否かで分岐処理をすれば済み、セーフエリアも定数で済んだものが、年毎に追加されるノッチ端末毎にサイズが異なれば、セーフエリア外の余白の値は増えるばかりにて、当然ながら端末毎、其々のセーフエリア数値に対応する必要が出来したのです。此方もApple社が対応するにセーフエリア値取得用に用意したプロパティが「safeAreaInsets」にて以下の如く記述すれば端末から上下左右の余白を取得出来ると言うものでした。

  • self.view.safeAreaInsets.top
  • self.view.safeAreaInsets.right
  • self.view.safeAreaInsets.bottom
  • self.view.safeAreaInsets.left

Apple社の開発者用サイトには「Instance Property」としての当該案内ページ「safeAreaInsets」が用意されています。当該プロパティを用いれば得られた余白の値の余裕分、端末のエッジから離してアプリの内容を表示すれば宜しくなります。また、時計やWi-Fiやバッテリー状況を示すアイコンの乗るステータスバーは、従来のものは従来通り、ノッチ端末に於いてはノッチの左右にiPhoneが自動で良しなに配置してくれます。

ゲーム画面に於けるセーフエリア

Swiftでタプル要素で構成される配列から特定のタプルを削除する

データの保ち方については常に頭を悩ませ、試行錯誤する処です。 今回は手元のプログラムの進捗上、異なる型を一まとめにしたデータ単位を配列にして保たせようと試みました。 異なる型を一まとめにするとなると開発環境はiPhoneアプリを拵える為のプログラム言語 Swift では Tupleタプル が適当と考え採用しました。 クラスから生成した一つ一つのインスタンスのデータを其々タプルにまとめ、 其れ等タプルをまとめて配列で扱おう、と言う目論見です。

Swiftのタプル型

あちこち食堂(仮題)開発途中画面
あちこち食堂(仮題)開発途中画面

動的なデータの保たせ方としてタプルのみで構成された配列を採用したのには、 タプルと言うデータはな不可変長ではありますが、 要素に型を混在させられるので、 型の異なる要素をひとまとめにしたい時は便利である、と言う理由です。 Swiftのタプル型については はじはじアプリ体験記 の以下のリンク先ページが役立つかも知れません。

【Swift】タプルの使い方。タプルの宣言と値の格納、取得方法

Swiftで行列を鑑みた多次元配列を宣言、生成する

プログラムに配列は欠かせず、 iPhoneアプリのゲーム開発に於いても其れは変わらず、 併せてゲーム内のデータ保持に行列を用いたいとなれば必須事項ですが、 型に厳格な言語 Swift 上の話でもあれば、 実行しようと思うもなかなかに難儀で、 エラーを頻発させるも諦める訳にも行かず、 何とか形になった経緯を本記事に記しおくものです。

アプリあちこち食堂(仮題)に於ける多次元配列を可視化した開発画面
アプリあちこち食堂(仮題)に於ける多次元配列を可視化した開発画面

求める2次元配列の形

自らの策定した仕様の要請に依れば手始めに 以下の如き2次元の行列を鑑みた Bool型の2次元配列を生成したくあります。

10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
11111111111111

処が先ず以て、 Xcode は此の宣言さえ許してくれません。 下手に宣言すればビルドは通るものの、 走らせると配列forループでお馴染みのエラー Fatal error: Index out of range が吐き出されて止まってしまいます。

どうもネットを繰るとteratailに以下の様な遣り取りが見付かり…

Xcode開発に於けるfloat型やdouble型の値の余剰

ゲームの代表的存在でもある任天堂社のスーパーマリオブラザーズを始めとして、 特にレトロな2D横スクロールアクションゲームでは無限スクロールは必須の機能です。 本ブログにも横スクロールの実装について記事を幾つか配信しもしました。

2DゲームフレームワークSpriteKit

ゲームうさ犬が行く開発中画面
ゲームうさ犬が行く開発中画面

XcodeでiPhoneアプリでも2Dゲームを開発するに当たって 有用なのがアップル社謹製フレームワーク SpriteKit です。 このフレームワークには様々なゲーム実装に関する機能が搭載されていますが、 座標もその一つです。 SpriteKitの座標に関してはUIViewと座標系が異なるため、 困惑する場合も多いのですが2D画面を構成するには欠かせません。

問題惹起

手元の開発iPhoneゲームで いつものようにSpriteKitの提供する座標系 SKView を用いている途中、気付いた点がありました。

Spritekitを利用したゲームAIの実装改

ディープラーンングなどは及びもつかないものの、 iPhoneアプリにゲームとしてユーザーをもてなす以上、 規模は小さいながらもユーザーの入力に対する反応を返すアルゴリズムを用意すべし、 とて此れを ゲームAI として手元の開発ゲーム バルーンズ・オキュパイ への実装の取っ掛かりを記した記事が2017年10月6日に本ブログに配信した以下の記事でした。

Spritekitを利用したゲームAIもどきの実装

ゲームAI擬きの改善

本記事には此の前記事に紹介したコードを今一歩進めた考察を記す処です。 其の要件としては前記事に於いては キャラクターの出現ポイント検出の処理と移動の処理を任意単位時間、2秒に1回 としており、 此れを同時に処理していたのでユーザーの待ち時間が多くてゲームとして成り立たないので 此れを解決したい、と言うものです。 従って任意単位時間の取り扱いについて考える必要があります。 本ブログには此れに関して2017年10月24日に以下の記事を配信しています。

複数の任意時間に於けるコールバックメソッド

ゲーム開発に於いては単位時間の処理が欠かせないものとして iPhoneアプリの製作の際、基本的な統合的開発環境のXcode上での処理について 本ブログに稿をものしたのが以下の2017年3月27日の配信記事でした。

-(void)update:(CFTimeInterval)currentTimeメソッドに於ける任意時間のコールバックメソッド

必須となる複数の単位時間処理

処で斯くも重要な要素たる単位時間処理は 唯に一箇所のみで必要となるに限られるものでもなく 手元の開発ゲーム バルーンズ・オキュパイ でも複数箇所で利用するに如くはない事態が出来しました。 具体的にはキャラクターの移動処理とバルーン陣地の拡大処理が異なる単位時間に処理されるのが其れで 而して一つでは間に合わない様相を呈したのです。

其処で対処として考えたのが…

Spritekitを利用したゲームAIもどきの実装

今流行りのAI、即ち人工知能とタイトルすれば甚だ釣り気味ですが、 ゲーム作成に於いてはコンピュータにプレイヤーの相手をさせる場合、 大にしろ小にしろ孰れ其の為のアルゴリズムを用意しなければなりません。 其れは手元の開発iPhone専用ゲームアプリ バルーンズオキュパイ でも一般です。

略してバルオキュでは プレイヤーが画面上に風船を膨らませて自陣を拡張しているのに対し 此のゲームでは敵キャラクターとなる うさ犬 兄弟の弟、 はなまる が画面上を所狭しとジャンプしまくりプレイヤーが膨張させつつある風船を割って回る、 と言うゲーム内容になっています。 此の際、はなまるはプレイヤー陣地の確定した部分は避けて飛ぶ必要があります。 また膨張中の風船にはなまるが飛び込めば其の風船は割れてプレイヤーの負けが確定しなければなりません。 此の両者の解決を同時に図る上手い方法はないものかと模索して、 どうやら共に衝突判定が使えるだろうと思い付きました。 ゲームAIに衝突事件を組み込んで実装すればはなまるは確定風船を避けつつ時には膨張中の風船を割りに掛かるだろうと言う目論見です。

Hanamaru and uPanda in iPhone Game Balloons Occpy

衝突判定の実装は一般に難しいと言われる処ですが アップル社がXcodeに用意する2Dゲーム開発フレームワークである SpriteKit には最初から其の機能が用意されているので其れを用いることにします。

ゲーム画面を覆うようにforループでNSMutableArrayを生成する

陣取りゲームとして目論む処のゲーム主画面に於いては 陣地の遣り取りの判定のために画面全体を区切る必要があります。 区切った画面各々にプレイヤーの陣地か如何かの判定フラグを持たせ 更には他にも様々に応用して用いる使い勝手の良い 配列 として扱う腹積もりです。 この際ゲーム画面の幅に合わせて区切りを柔軟に保たせるために 可変配列を用いることにします。

可変配列オブジェクト NSMutableArray の概要については iPhoneアプリ開発の虎の巻 のページ NSMutableArray などが参考になるかも知れません。

Scene受け渡し時の画面サイズの初期化

キャラクターが空を飛んでいるのを表現するのに iPhoneの画面を超えて縦横無尽に飛び回る状況を作り出したい為に上方に上限を設けぬ実装を鑑み Spritekitに於ける座標系を考察したのが以下列挙する本ブログの両記事です。

処が此処に問題の内在が発覚しました。 時折デバッグの為に変数を出力して検討するのは誰もが実行する処でしょう。 2017年5月5日記事 SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装 に記したようにゲームに於いてキャラクターが上空に飛翔すればするほど 宇宙空間に近いた表現で空色を濃く染め上げるのに背景色を変化させたのですが 此の時必要なのはキャラクターの縦軸の位置変数であるのは言う迄もありません。 其の変数とした honmaruPosYRatio の算出法は以下コードとなります。

SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装

手元の開発ゲームに於いてキャラクターの縦横無尽に動き回る 背景の空部分の広大な空間を表現するためにグラデーションを用いたく考えました。 青空は単に一様に青いのではなく 青さも位置取りに基づいて薄っすらと変化させたい要請が発生した訳です。

其処でXcodeでグラデーションを描画する実装が必要になり 大凡簡単なものだろうと高を括っていたら案に相違して 其れ程お手軽に実現出来るメソッド等はどうやら用意されていない様です。

SpriteKitに関する情報は余り多くなく 其れでこそ本ブログも幾許かの役立つ情報を提供出来るかも知れない所ですが 残念ながらSpritekitでは現状背景グラデーションに用意されたメソッドは見当たりません。 しかし UIView では幾つか方法がネットに共有されているのを見付けましたので下にリンクを貼り置きましょう。