iMedre

SKShapeNode Nedir? SpriteKit Derinlikleri #9

Merhaba bu yazıda Sprite Kit kütüphanesinden SKShapeNode nedir konusunu anlatacağım. Keyifli okumalar.

SKShapeNode

Core Grafik yolu ile tanımlanan bir şekil oluşturan bir düğüm.

Genel Bakış

Grafik yolu, açık veya kapalı alt yolları tanımlayabilen düz çizgiler ve eğrilerden oluşan bir koleksiyondur. Yolun doldurulmuş ve konturlu kısmı için ayrı oluşturma davranışı belirtebilirsiniz. Her parça düz bir renk veya bir doku kullanılarak oluşturulabilir; Daha karmaşık efektler oluşturmanız gerekiyorsa, özel bir gölgelendirici de kullanabilirsiniz.

Şekil düğümleri, basit dokulu sprite kolayca ayrıştırılamaz içerik için yararlıdır. Şekil düğümleri, oyun içeriğinizin üstüne hata ayıklama bilgileri oluşturmak ve görüntülemek için de çok kullanışlıdır. Ancak, SKSpriteNode sınıfı bu sınıftan daha yüksek performans sunar, bu nedenle şekil düğümlerini dikkatlice kullanın.

Liste 1 şekil düğümünün nasıl oluşturulacağına dair bir örneği göstermektedir. Örnek mavi bir iç ve beyaz bir taslak ile bir daire oluşturur. Yol, şekil düğümünün yol özelliğine oluşturulur ve eklenir.

let path = CGMutablePath()
path.addArc(center: CGPoint.zero,
            radius: 15,
            startAngle: 0,
            endAngle: CGFloat.pi * 2,
            clockwise: true)
let ball = SKShapeNode(path: path)
ball.lineWidth = 1
ball.fillColor = .blue
ball.strokeColor = .white
ball.glowWidth = 0.5

Koddan şeklin üç temel öğeye sahip olduğunu görebilirsiniz:

  1. Şeklin içi doldurulur. FillColor özelliği, iç kısmı doldurmak için kullanılan rengi belirtir.
  2. Şeklin ana hatları bir çizgi halinde oluşturulur. StrokeColor ve lineWidth özellikleri, hattın nasıl geçtiğini tanımlar.
  3. Ana hattan bir parlaklık uzanır. GlowWidth ve strokeColor özellikleri parlamayı tanımlar.

Bu öğeleri, rengini [SKColor clearColor] olarak ayarlayarak devre dışı bırakabilirsiniz.

Şekil düğümü, şeklin çerçeveleyiciye nasıl karıştığını kontrol etmenizi sağlayan özellikler sağlar. Bu özellikleri, SKSpriteNode sınıfının özellikleriyle aynı şekilde kullanırsınız.

Noktalardan Shape Nodeları Oluşturma

Bir SKShapeNode nesnesi, bir yolu açıklayan bir dizi nokta ile başlatılabilir. Init (splinePoints: count 🙂 yöntemi, init tarafından oluşturulan düz çizgiler serisinden ziyade bir eğri oluşturmak için bu noktalar arasında yumuşak bir şekilde enterpolasyon yapabilir (puan: sayım :). Liste 2, iki başlatıcıyla aynı nokta dizisini kullanarak iki şekil düğümünün nasıl oluşturulacağını gösterir.

var points = [CGPoint(x: 0, y: 0),               
              CGPoint(x: 100, y: 100),               
              CGPoint(x: 200, y: -50),               
              CGPoint(x: 300, y: 30),               
              CGPoint(x: 400, y: 20)]         
let linearShapeNode = SKShapeNode(points: &points,                                   
                                  count: points.count)          
let splineShapeNode = SKShapeNode(splinePoints: &points,                                   
                                  count: points.count)

Şekil 1, mavi renkte linearShapeNode ve kırmızı renkte splineShapeNode değerini göstermektedir.

Gölgelendiricilerin Shape Nodelara Uygulanması

Strokun görünümünü değiştirmek için bir şekil düğümünün strokeShader ve fillShader özelliklerini kullanabilir ve bir SKShader nesnesi içine gömülmüş özel bir OpenGL ES parçası gölgelendiricisi ile doldurabilirsiniz. Özel gölgelendiriciler, kesikli ve kademeli vuruşlardan, dama tahtası ve rastgele gürültü gibi özel dolgulara kadar neredeyse sınırsız olanaklar sunar.

Çizgi Gölgelendiricileri

Bir şekil düğümünün strokeShader uygulamasına uygulanan özel gölgelendiriciler, kontur gölgelendiricilerinin işlevlerini genişleten iki ek simge içerir (önceden tanımlanmış özel gölgelendirici simgelerinin tam listesi için bkz. SKShader):

Sembol Tanımı Tip Açıklama
float u_path_length; Sabit Yolun toplam uzunluğu.
float v_path_distance; Değişken Yol boyunca yoldaki mesafe.

 

Yol boyunca mesafeyi yolun toplam uzunluğuna bölerek, her bir noktanın normalleştirilmiş konumunu (yani 0 ile 1 arasında) bir şekil düğümünün yolu boyunca alabilir ve bunu her bir pikselin rengini strok boyunca oluşturmak için kullanabilirsiniz. Aşağıdaki kod, bunu yapmak için özel bir GLSL gölgelendiricisi nasıl oluşturabileceğinizi gösterir:

let gradientShader = SKShader(source: "void main() {" +
    "float normalisedPosition = v_path_distance / u_path_length;" +
    "gl_FragColor = vec4(normalisedPosition, normalisedPosition, 0.0, 1.0);" +
    "}")
let squareShapeNode = SKShapeNode(rectOf: CGSize(width: 610, height: 200),
                                  cornerRadius: 25)
squareShapeNode.fillColor = .clear
squareShapeNode.lineWidth = 20
squareShapeNode.strokeShader = gradientShader

 

Bu kod tarafından oluşturulan şekil düğümü şöyle görünür:

Alternatif olarak, her iki sembolü de tamsayılara uygulayarak ve modulo işlecini kullanarak, aşağıdaki kod kesikli bir çizgi oluşturan bir gölgelendiriciyle aynı şekil düğümünü gösterir:

let dashedShader = SKShader(source: "void main() {" +
    "int stripe = int(u_path_length) / 150;" +
    "int h = int(v_path_distance) / stripe % 2;" +
    "gl_FragColor = float4(h);" +
    "}")

 

Bu kod tarafından oluşturulan şekil düğümü şöyle görünür:

Gölgeleri Doldurma

Varolan bir fillTexture görünümünü değiştirmek veya yeni bir yordamsal doku oluşturmak için şekil düğümünün gölgelendirici özelliğini kullanabilirsiniz. Shader’lar, bir SKShader nesnesi içine gömülmüş özel bir OpenGL ES parçası gölgelendiricisi ile bir şekil düğümüne geçirilir.

Aşağıdaki kod, basit bir dama tahtası dokusuyla bir şekil düğümünü oluşturan ve dolduran özel bir gölgelendiriciyi gösterir. Gölgelendirici içinde, h ve v değişkenleri kendi başlarına yatay ve dikey çizgiler oluşturur. Münhasır veya operatör, ^, bu şeritlerdeki dama tahtası desenini oluşturur.

let checkerboardShader = SKShader(source: "void main() {" +
    "int size = 20;" +
    "int h = int(v_tex_coord.x * u_texture_size.x) / size % 2;" +
    "int v = int(v_tex_coord.y * u_texture_size.y) / size % 2;" +
    "gl_FragColor = float4(v ^ h, v ^ h, v ^ h, 1.0);" +
    "}")
   
let size = CGSize(width: 610, height: 200)
   
checkerboardShader.uniforms = [
    SKUniform(name: "u_texture_size",
              vectorFloat2: vector_float2(Float(size.width), Float(size.height)))
]
   
let squareShapeNode = SKShapeNode(rectOf: size,
                                  cornerRadius: 25)
squareShapeNode.fillShader = checkerboardShade

 

Bu kod tarafından oluşturulan şekil düğümü şöyle görünür:

 

Erdem Özgür

Yorum Ekle

Bizleri Sosyal Medyadan Takip Edebilirsiniz

Utanmana gerek yok, bizimle iletişim kurabilirsin. İnsanlarla tanışmayı ve yeni arkadaşlar edinmeyi seviyoruz.