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
主関連アプリ:うさ犬が行く

前者では2つの方法が紹介されており流行りの言葉で表現すれば デザインツールファースト とも言うべきグラデーション画像を背景に置く方法ともう一つは プログラミングファースト とも言うべき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 > 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が有って 本記事の実装に興味のある向きは うさ犬が行く をダウンロードの上、タップすれば羽搏き上昇するうさ犬を必要以上に上昇させて確認して見るのも一興かと思います。

うさ犬が行く
無料:カテゴリ: ゲーム:4+ 評価
バージョン: 1.0(リリース: 2015年10月16日)
サイズ : 19.7 MB
互換性: iOS 7.1 以降。iPhone、iPad、および iPod touch に対応。
スポンサーリンク