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

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

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

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

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

[XCODE] UIViewの背景をグラデーションにする方法（YoheiM.NET：2013年4月1日）
iOSでUIViewの背景をグラデーションにする方法（colo-ri.jp：2011年11月）

前者では２つの方法が紹介されており流行りの言葉で表現すれば デザインツールファースト とも言うべきグラデーション画像を背景に置く方法ともう一つは プログラミングファースト とも言うべきCGContextなどを利用して描画内容を作成する方法が共有されています。また後者では前者のプログラミングファーストに傾いた方法が紹介されており前者と共にプログラムを用いた方法では QuartzCore フレームワークの読み込みが必須となる様です。後者の黒から濃灰色へのグラデーション実装を下に引用します。尚、デザインツールファースト的方法は表現したい空間が大き過ぎるため画像の用意が現実的ではなく此の方法も今回は見送っています。

#import <QuartzCore/QuartzCore.h>

- (void)viewDidLoad {
	[super viewDidLoad];
	// 背景色をグラデーションに
	CAGradientLayer *gradient = [CAGradientLayer layer];
	gradient.frame = self.view.bounds;
	gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor darkGrayColor] CGColor], nil];
	[self.view.layer insertSublayer:gradient atIndex:0];
}

キャラクターの背景のグラデーション

上のコードを参考に記述し手元の環境でも勿論上手くグラデーションは表現できたのですが Spritekit例にはなく今回はグラデーションさせたい範囲も極めて広い、と言うか無限に変化させたく考えましたので採用は見送りました。斯様にして独自の実装を考案しなければならなくる状況が出来しました。

今回の背景グラデーションの独自実装に於ける基本的な考え方はキャラクターの縦位置を取得してupdateメソッドで逐一背景色に影響を及ぼすと言うものですので厳密にはグラデーションとは言えないかも知れません。しかしキャラクターの上下の移動に伴いシームレスに背景色が変化する実装となっています。

具体的にはSpritekitの -(void)update:(CFTimeInterval)currentTime メソッドを用いてリアルタイムに背景色を変化させます。其の為に当該メソッドでコールバックが必要になりますが此の事案を本ブログの2017年3月27日の記事として配信してもありますので下にリンクを貼り置きます。

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

上記リンクの方法を利用するなどして任意単位時間毎にキャラクターうさ犬のポジションを拾い拾ったポジションから背景色を算出して其れに基づき背景色を変化させます。此の考え方の元、首尾良く運んだ実装コードが以下になります。

- (void)updateWithTimeSinceLastUpdate:(CFTimeInterval)timeSinceLast {
	self.lastSpawnTimeInterval += timeSinceLast;
	if (self.lastSpawnTimeInterval &gt; 1) {
		self.lastSpawnTimeInterval = 0;
		/* 空の色 */
		float honmaruPosYRatio = flyingHonmaru.position.y / spaceHeight;
		float skyColorR = 169 * (1 - honmaruPosYRatio);
		float skyColorG = 191 * (1 - honmaruPosYRatio);
		float skyColorB = 255 * (1 - honmaruPosYRatio * 2/3);
		self.backgroundColor = RGBA(skyColorR, skyColorG, skyColorB, 1);
	}
}

コード中の flyingHonmaru はキャラクターのスプライトノードとなっており変数 spaceHeight で空の最大値を与えています。高さが高くなるほど背景は暗くなっていき何時かは宇宙空間に達すると言う勘定です。

若しお手持ちのiPhoneが有って本記事の実装に興味のある向きはうさ犬が行くをダウンロードの上、タップすれば羽搏き上昇するうさ犬を必要以上に上昇させて確認して見るのも一興かと思います。

Going USAINU（邦題：うさ犬が行く）

無料：カテゴリ: ゲーム： 4+ 評価
バージョン: 3.21
リリース： 2015年9月14日
更新： 2022年3月7日
サイズ : 19.7 MB
互換性： iOS 14.4 以降のiPhone、iPod touch に対応。および、macOS 11.0以降とApple M1 チップを搭載したMac に対応。