Hello there 👋
I've noticed a different behavior between iOS 15 and iOS 16 using CIFilter and SpriteKit.
Here is a sample code where I want to display a text and apply a blurry effect on the same text in the back of it.
Here is the expected behavior (iOS 15):
And the broken behavior on iOS 16:
It looks like the text is rotated around the x-axis and way too deep.
Here is the sample code:
import UIKit
import SpriteKit
class ViewController: UIViewController {
var skView: SKView?
var scene: SKScene?
override func viewDidLoad() {
super.viewDidLoad()
skView = SKView(frame: view.frame)
scene = SKScene(size: skView?.bounds.size ?? .zero)
scene?.backgroundColor = UIColor.red
view.addSubview(skView!)
skView!.presentScene(scene)
let neonNode = SKNode()
let glowNode = SKEffectNode()
glowNode.shouldEnableEffects = true
glowNode.shouldRasterize = true
let blurFilter = CIFilter(name: "CIGaussianBlur")
blurFilter?.setValue(20, forKey: kCIInputRadiusKey)
glowNode.filter = blurFilter
glowNode.blendMode = .alpha
let labelNode = SKLabelNode(text: "MOJO")
labelNode.fontName = "HelveticaNeue-Medium"
labelNode.fontSize = 60
let labelNodeCopy = labelNode.copy() as! SKLabelNode
glowNode.addChild(labelNode)
neonNode.addChild(glowNode)
neonNode.addChild(labelNodeCopy)
neonNode.position = CGPoint(x: 200, y: 200)
scene?.addChild(neonNode)
}
}
Post
Replies
Boosts
Views
Activity
Hello there 👋
While running the following ViewController.swift on iOS 16, I realized that the y axis of v_tex_coord inside the SKShader has been inverted. The same code display a red bar at the top of the screen for iOS 15.5. This red bar is displayed at the bottom of the screen for iOS 16.
Here is some images to show you the difference:
iOS 15
iOS 16
Can you help me with this please?
Thanks a lot 🙏
import UIKit
import SpriteKit
class ViewController: UIViewController {
var skView: SKView?
var scene: SKScene?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
skView = SKView(frame: view.frame)
scene = SKScene(size: skView?.bounds.size ?? .zero)
scene?.backgroundColor = UIColor.red
view.addSubview(skView!)
skView!.presentScene(scene)
// Media
let mediaNode = SKSpriteNode(imageNamed: "archi1")
mediaNode.size = skView?.bounds.size ?? .zero
mediaNode.position = skView?.center ?? .zero
// Effect
let effectNode = SKEffectNode()
effectNode.shader = SKShader(source:
"""
void main() {
vec2 uv = v_tex_coord;
vec4 texel = texture2D(u_texture, uv);
vec4 color = texel;
vec4 outColor = texel;
// from top to bottom
if (uv.y > .8 / 2. + .5) { // bg color
color = i_color;
}
outColor = mix(texel, color, .6);
gl_FragColor = outColor;
}
"""
, uniforms: [
SKUniform(name: "i_color", vectorFloat4: vector_float4(1, 0, 0, 0))
])
scene?.addChild(effectNode)
effectNode.addChild(mediaNode)
}
}