しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

【SpriteKit】SKSpriteNodeの背景に繰り返し画像を使う

SpriteKitで繰り返し画像を背景に使う方法です。

f:id:llcc:20170804002213p:plain

元の画像素材は下のようなものです。
今回はこれを画面全体に繰り返し配置しました。

f:id:llcc:20170804002648p:plain

実際のコードは下の通りです。
まずはCoreGraphicsを使って、画面と同じサイズの繰り返し画像を生成。それをSKSpriteNodeの背景画像に設定しました。

UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
if let image = UIImage(named: "test"), let cgImage = image.cgImage {
    context?.draw(cgImage, in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height), byTiling: true)
    
    if let image = UIGraphicsGetImageFromCurrentImageContext() {
        let texture = SKTexture(image: image)
        let tatami = SKSpriteNode(texture: texture)
        addChild(tatami)
    }
}
UIGraphicsEndImageContext()

CoreGraphics部分について少し補足します。

下のコードでは、繰り返し画像を生成しています。 CGContextのdrawメソッドのbyTilingをtrueにすることで、繰り返し画像を生成しています。

UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
if let image = UIImage(named: "test"), let cgImage = image.cgImage {
    context?.draw(cgImage, in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height), byTiling: true)
    if let image = UIGraphicsGetImageFromCurrentImageContext() {
        // ...省略
    }
}
UIGraphicsEndImageContext()

drawメソッドのbyTilingをfalseにすると、下のように繰り返しなしの画像になります。

f:id:llcc:20170804003624p:plain

CoreGraphicsを使わない方法も検討したのですが、こちらはあまりうまくいきませんでした。
SKSpriteNodeの初期化時に画像名を渡したのですが、これは繰り返しなしの画像が表示されました。

let tatami = SKSpriteNode(imageNamed: "tatami")
addChild(tatami)

f:id:llcc:20170804003924p:plain

SKSpriteNodeのサイズを画面いっぱいにする方法も試したのですが、中の画像が引き伸ばされるだけでした。

let tatami = SKSpriteNode(imageNamed: "tatami")
tatami.size = self.size
addChild(tatami)

f:id:llcc:20170804004101p:plain

UIImageをUIColorに変換する方法も試したのですが、これだと画面に何も表示されませんでした。

SKSpriteNode(color: UIColor(patternImage: UIImage(named: "test")!), size: size)

良い方法見つかるまでは、CoreGraphicsを使っていこうと思います。