iMedre

SKSpriteNode Sınıfı Nedir 1 ? Sprite Kit Derinlikleri #7

Merhaba, bu yazıda SKSpriteNode sınıfı nedir konusunu anlatacağım. Keyifli okumalar.

SKSpriteNode

Dikdörtgen bir doku, görüntü veya renk çizen bir düğüm.

Genel Bakış

Spritelar, sahnedeki içeriğin çoğunu oluşturmak için kullanılan temel yapı taşlarıdır. Bu nedenle Sprite’ler, SpriteKit’teki diğer düğüm sınıflarına geçmeden önce yararlıdır. Spritelar, SKSpriteNode nesneleriyle temsil edilir. Bir SKSpriteNode nesnesi, üzerine eşlenen bir dokuya sahip bir dikdörtgen veya renkli, yazdırılmamış bir dikdörtgen olarak çizilebilir. Resimli(Texture) spritelar daha yaygındır, çünkü özel resimleri bir sahneye taşımanın birincil yolunu temsil ederler. Bu özel resim, oyununuzdaki karakterleri, arka plan öğelerini veya kullanıcı arabirimi öğelerini temsil edebilir, ancak temel strateji aynıdır. Bir sanatçı görüntüleri oluşturur ve oyun veya uygulama SKSpriteNode bunları resim olarak yükler. Sonra bu dokularla spritelar yaratır ve onları sahneye eklersiniz.

Resimli SKSpriteNode Oluşturma

Resimli bir hareketli düğüm oluşturmanın en kolay yolu, SpriteKit’in sizin için hem doku hem de hareketli grafik oluşturmasını sağlamaktır. Resmi uygulama paketinde depolar ve ardından çalışma zamanında yüklersiniz. Liste 1 bunu nasıl yapacağınızı gösterir.

let spaceship = SKSpriteNode(imageNamed: "rocket.png")
spaceship.position = CGPoint(x: 100, y: 100)
self.addChild(spaceship)

 

Bu şekilde bir hareketli grafik oluşturduğunuzda, varsayılan olarak birçok varsayılan davranış elde edersiniz:

  • Hareketli düğüm, dokunun boyutuna uyan bir çerçeve ile oluşturulur.
  • Düğüm, konumuna göre ortalanacak şekilde oluşturulur. Düğümün çerçeve özelliği, kapsadığı alanı tanımlayan dikdörtgeni tutar.
  • Doku, çerçeve tamponuna alfa harmanlanmıştır.
  • Bir SKTexture nesnesi oluşturulur ve düğüme eklenir. Bu doku nesnesi, sprite düğümü sahnede olduğunda, göründüğünde ve sahneyi oluşturmak için gerekli olduğunda doku verilerini otomatik olarak yükler. Daha sonra, hareketli grafik sahneden kaldırılırsa veya artık görünmezse, SpriteKit, doku verilerini başka amaçlar için gerekiyorsa silebilir. Bu otomatik bellek yönetimi, oyununuzdaki sanat varlıklarını yönetmek için yapmanız gereken işleri basitleştirir, ancak ortadan kaldırmaz.

SpriteKit bir sprite oluşturulduğunda otomatik olarak sizin için dokular oluşturabilse de, daha karmaşık oyunlarda ve uygulamalarda dokular üzerinde daha fazla kontrole ihtiyacınız vardır. Örneğin, aşağıdakilerden herhangi birini yapmak isteyebilirsiniz:

  • Birden fazla sprite arasında bir doku paylaşın.
  • Oluşturulduktan sonra hareketli grafiğin yerini değiştirin.
  • Bir dizi doku ile hareketli grafikleri canlandırın.
  • Uygulama paketinde doğrudan depolanmayan verilerden dokular oluşturun.
  • Bir düğüm ağacını bir dokuya dönüştürün. Örneğin, oyun seviyesini tamamladıktan sonra oyuncuya göstermek için oyun ekranınızın ekran görüntüsünü almak isteyebilirsiniz.
  • Bir sahne sunmadan önce dokuları belleğe önceden yükleyin.

Tüm bunları, doğrudan doku nesnelerle çalışarak yaparsınız, daha fazla bilgi için, SKTexture sınıfını inceleyebilirsiniz.

Resimli Sprite Node’u Özelleştirme

Dört ayrı oluşturma aşamasını bağımsız olarak yapılandırmak için her sprite düğümünün özelliklerini kullanabilirsiniz:

  • Bir sprite düğümünün çerçevesini, dokudaki farklı bir nokta konumuna getirecek şekilde taşıyın. Sprite Düğümünün Çerçevesini Taşımak için Bağlantı Noktasını Kullanma.
  • Bir sprite düğümünü yeniden boyutlandırın. Sprite boyutunun doku boyutuna uymadığında, dokunun hareketli grafiğe nasıl uygulandığını siz kontrol edersiniz. Sprite Düğümünü Yeniden Boyutlandırma.
  • Hareketli grafiğe uygulandığında hareketli grafik düğümünü renklendirin. Sprite Düğümünün Renklendirilmesi.
  • İçeriğini çerçeveleyicininkiyle birleştirmek için hareketli düğümdeki diğer karışım modlarını kullanın. Özel karışım modları, aydınlatma ve diğer özel efektler için kullanışlıdır. Sprite’ı Çerçeve Tamponuna Karıştırma.

Çoğu zaman, bu dört adımı (konumlandırma, boyutlandırma, renklendirme ve karıştırma) gerçekleştirmek için bir sprite düğümünü yapılandırmak, dokusunu oluşturmak için kullanılan resme dayalıdır. Bu, özellik değerlerini nadiren resimden ayrı olarak ayarladığınız anlamına gelir. Oyununuzun spriteları sanat eserine uygun olacak şekilde yapılandırdığından emin olmak için sanatçıyla birlikte çalışıyorsunuz.

İzleyebileceğiniz olası stratejilerden bazıları şunlardır:

  • Projenizde sabit kodlanmış değerlerle hareketli düğümleri oluşturun. Bu en hızlı yaklaşımdır, ancak uzun vadede en az arzu edilen şeydir, çünkü bu, sanat varlıklarının her değiştiğinde kodun değiştirilmesi gerektiği anlamına gelir.
  • Sprite’ın özellik değerlerini hassas bir şekilde ayarlamanıza olanak tanıyan SpriteKit kullanarak kendi araçlarınızı oluşturun. Bir sprite düğümü istediğiniz gibi yapılandırıldığında, hareketli grafiğe bir arşive kaydedin. Oyununuz, çalışma zamanında sprite oluşturmak için arşivi kullanıyor.
  • Yapılandırma verilerini, uygulama paketinizde saklanan bir özellik listesinde depolayın. Hareketli düğüm yüklendiğinde, özellik listesini yükleyin ve düğümü yapılandırmak için değerlerini kullanın. Sanatçınız daha sonra doğru değerleri sağlayabilir ve kodunuzda değişiklik yapılmasını gerektirmeden bunları değiştirebilir.

Bir Sprite’ın Dokusunu Değiştirme

Hareketli bir doku özelliği, mevcut dokusuna işaret eder. Yeni bir dokuya işaret etmek için bu özelliği değiştirebilirsiniz. Bir dahaki sefere sahne yeni bir çerçeve oluşturduğunda, yeni bir doku ile ortaya çıkıyor. Dokuyu her değiştirdiğinizde, yeni dokuyla tutarlı olması için boyut, anchorPoint ve centerRect gibi diğer hareketli özellikleri de değiştirmeniz gerekebilir. Genellikle, tüm resimlerin tutarlı olduğundan emin olmak daha iyidir, böylece aynı değerler tüm dokular için kullanılabilir. Yani, dokular tutarlı bir boyut ve bağlanttı noktası yerleşimi olmalıdır, böylece oyununuzun dokudan başka bir şey güncellemesi gerekmez.

Animasyon genel bir görev olduğundan, hareketli grafiğin bir dizi dokusunu canlandırmak için eylemleri kullanabilirsiniz. Aşağıdaki kod, hareketli grafiğin animasyonunu oluşturmak için oluşturulmuş bir çerçeve dizisinin nasıl kullanılacağını gösterir.

let walkAnimation = SKAction.animate(with: monsterWalkTextures,
                                     timePerFrame: 0.1)

node.run(walkAnimation)

SpriteKit, hareketli grafiğin animasyonunu gerçekleştirmenizi veya değiştirmenizi sağlayan sıhhi tesisat sağlar. Animasyon sisteminizde belirli bir tasarım yüklemez. Bu, bir hareketli grafiğin hangi tür animasyonlara ihtiyaç duyabileceğini belirlemeniz ve daha sonra çalışma zamanında bu animasyonlar arasında geçiş yapmak için kendi animasyon sisteminizi tasarlamanız gerektiği anlamına gelir. Örneğin, bir canavar yürüyüş, dövüş, boşta ve ölüm animasyonu sekanslarına sahip olabilir ve bu diziler arasında ne zaman geçeceğine karar vermek size bağlıdır.

Sprite Düğümünün Çerçevesini Taşımak için Bağlantı Noktasını Kullanma

Varsayılan olarak, hareketli düğümün çerçevesi – ve dolayısıyla dokusu – kendi konumuna göre ortalanır. Bununla birlikte, dokunun farklı bir bölümünün düğümün konumunda görünmesini isteyebilirsiniz. Genellikle dokuda betimlenen oyun elemanı doku görüntüsünde ortalanmadığında bunu yaparsınız.

Bir hareketli düğümün anchorPoint özelliği, çerçevedeki hangi noktanın konumuna yerleştirildiğini belirler. Bağlantı noktaları, aşağıdaki çizimde gösterilen birim koordinat sisteminde belirtilmiştir. Ünite koordinat sistemi, menşei çerçevenin sol alt köşesine ve (1,1) çerçevenin sağ üst köşesine yerleştirir. Bir hareketli grafiğin çapa noktası, çerçevenin merkezine karşılık gelen varsayılan değerlerdir (0.5,0.5).

Çerçeveyi taşıyor olsanız da, bunu yaparsınız çünkü dokumanın karşılık gelen kısmının konum üzerinde ortalanmasını istersiniz. Aşağıdaki şekil bir çift doku görüntüsünü göstermektedir. İlk olarak, varsayılan bağlantı noktası, dokuyu konum üzerinde ortalar. İkincisi, bunun yerine görüntünün üstünde bir nokta seçilir. Düğüm döndürüldüğünde, doku görüntüsünün bu nokta etrafında döndüğünü görebilirsiniz.

Aşağıdaki kod, bağlantı noktasını roketin burun konisine nasıl yerleştirileceğini gösterir. Genellikle, sprite düğümü başlatıldığında bağlantı noktasını ayarlarsınız, çünkü resme karşılık gelir. Ancak, bu özelliği istediğiniz zaman ayarlayabilirsiniz. Çerçeve hemen güncellenir ve sahneye yerleştirilen düğüm ekranda bir sonraki düğüme güncellenir.

rocket.anchorPoint = CGPoint(x: 0.5, y: 1.0)

Sprite Düğümünü Yeniden Boyutlandırma

Hareketli düğümün çerçeve özelliğinin boyutu, diğer üç özelliğin değerleri tarafından belirlenir:

  • Hareketli düğümün boyut özelliği, temel (boyutlandırılmamış) boyutuna sahiptir. Bir sprite init (imageNamed 🙂 kullanılarak başlatıldığında, bu özelliğin değeri, sağlanan görüntünün boyutuna eşit olacak şekilde başlatılır.
  • Taban boyutu daha sonra SKNode sınıfından miras alınan sprite’ın xScale ve yScale özellikleri tarafından ölçeklendirilir.

Örneğin, hareketli düğümün taban boyutu 32 x 32 pikselse ve xScale değeri 1.0 ve yScale 2.0 değeri varsa, çerçevesinin boyutu 32 x 64 pikseldir.

Bir hareketli düğümün çerçevesi, dokusundan daha büyük olduğunda, doku çerçevesini kapsayacak şekilde uzatılır. Normal olarak, doku aşağıdaki şekilde gösterildiği gibi çerçeve boyunca eşit olarak gerilir.

Bununla birlikte, bazen düğmeler veya sağlık göstergeleri gibi kullanıcı arabirimi öğeleri oluşturmak için hareketli düğümleri kullanmak istersiniz. Çoğu zaman, bu elemanlar, uzatılmaması gereken uç kapaklar gibi sabit boyutlu elemanlar içerir. Bu durumda, gerilmeden dokusunun bir kısmını kullanın ve ardından çerçevenin geri kalan kısmı boyunca dokunun kalan kısmını gerdirin.

Grafiğin birim koordinatlarında belirtilen hareketli grafiğin centerRect özelliği, ölçekleme davranışını denetler. Varsayılan değer, tüm dokuyu kapsayan bir dikdörtgendir, bu yüzden tüm doku çerçeve boyunca gerilir. Yalnızca dokumanın bir bölümünü kapsayan bir dikdörtgen belirtirseniz, 3 x 3 ızgara oluşturursunuz. Kılavuzdaki her kutu kendi ölçeklendirme davranışına sahiptir:

  • Dokümanın dört köşesindeki dokunun bölümleri, herhangi bir ölçeklendirme yapılmaksızın çizilir.
  • Kılavuzun merkezi, her iki boyutta ölçeklendirilmiştir.
  • Üst ve alt orta kısımlar sadece yatay olarak ölçeklenir.
  • Sol ve sağ orta kısımlar sadece dikey olarak ölçeklendirilmiştir.
  • Aşağıdaki şekil, bir kullanıcı arayüzü düğmesi çizmek için kullanabileceğiniz bir dokuyu yakından görüntülemektedir. Tam doku 28 x 28 pikseldir. Köşe parçaları 12 x 12 piksel ve merkez 4 X 4 pikseldir.

Aşağıdaki kod, bu düğme hareketinin nasıl başlatılacağını gösterir. CenterRect özelliği, doku tasarımına göre hesaplanır.

let button = SKSpriteNode(imageNamed: "stretchable_button.png")
button.centerRect = CGRect(x: 12.0/28.0,
                           y: 12.0/28.0,
                           width: 4.0/28.0,
                           height: 4.0/28.0)

Aşağıdaki şekil, düğmelerin farklı boyutlarda çekildiği durumlarda bile köşelerin aynı kaldığını göstermektedir.

Sprite Düğümünü Renklendirmek

Bir sprite düğümüne uygulanan dokuyu renklendirmek için color ve colorBlendFactor özelliklerini kullanabilirsiniz. Renk harmanlama faktörü varsayılan olarak 0,0 değerine ayarlanır, bu da dokumanın değiştirilmeden kullanılması gerektiğini belirtir. Bu sayı arttıkça, daha fazla doku rengi, harmanlanmış renk ile değiştirilir. Örneğin, oyununuzdaki bir canavar zarar gördüğünde, karaktere kırmızı renk tonu eklemek isteyebilirsiniz. Aşağıdaki kod, hareketli grafiğe nasıl renk uygulayacağınızı gösterir.

monsterSprite.color = .red
monsterSprite.colorBlendFactor = 0.5

 

Eylemleri kullanarak renk ve renk karışımı faktörlerini de canlandırabilirsiniz. Aşağıdaki kod, hareketli grafiğin nasıl kısaca renklendirileceğini ve daha sonra normale döndürüleceğini gösterir.

let pulsedRed = SKAction.sequence([
    SKAction.colorize(with: .red, colorBlendFactor: 1.0, duration: 0.15),
    SKAction.wait(forDuration: 0.1),
    SKAction.colorize(withColorBlendFactor: 0.0, duration: 0.15)])
spaceship.run(pulsedRed)

Aydınlatma ile çalışma

Aydınlatma ve gölge dökümü ve alma gibi efektleri uygulamak için hareketli grafit ışıklandırma özelliklerini, lightingBitMask, shadowCastBitMask ve shadowedBitMask kullanabilirsiniz. Bunlar 3D aydınlatmayı simüle etmek için normal haritalama ile birlikte kullanılabilir.

Aşağıdaki şekil, arka plan olarak etki eden normal bir haritalandırılmış sprite düğümünü ve iki gölge döküm sprite nodunu (her biri bir tavşan dokusu) göstermektedir.

SKLightNode nesnesinin categoryBitMask, arka planın aydınlatma bit maskesini ve iki tavşanın aydınlatma ve gölge bit maskeleriyle eşleşir:

// Create the background sprite node
let background = SKSpriteNode(texture: noiseTexture,
                              normalMap: noiseTexture.generatingNormalMap())
background.position = spriteKitViewController.center
background.lightingBitMask = 0b0001
scene.addChild(background)
     
let x: CGFloat = 150
let y = spriteKitViewController.scene.size.width - 150
     
// Create a light
let lightNode = SKLightNode()
lightNode.position = CGPoint(x: scene.size.width / 2, y: y)
lightNode.categoryBitMask = 0b0001
lightNode.lightColor = .white
scene.addChild(lightNode)
     
// Create two rabbit sprite nodes and assign them with both a lighting and a shadow cast bit mask.
for position in [CGPoint(x: x, y: y), CGPoint(x: y, y: y)] {
                    let rabbit = SKSpriteNode(imageNamed: "rabbit")
                    rabbit.position = position
                    spriteKitViewController.scene.addChild(rabbit)
                    rabbit.lightingBitMask = 0b0001
                    rabbit.shadowCastBitMask = 0b0001
}

Ortaya çıkan sahnede, arka plan üzerinde gölgeler döken iki tavşan gösteriliyor (ışık beyaz bir daire şeklinde işleniyor). Gürültü dokusu normal haritalamadan 3 boyutlu bir görünüm kazanır:

Sprite Düğümlere Gölgelendiricilerin Uygulanması

Bir skrite düğümünün gölgelendirici özelliğini, bir SKShader nesnesi içine gömülmüş özel bir OpenGL ES parçası gölgelendiricisi ile bir yapının görünümünü değiştirmek için kullanabilirsiniz. Özel gölgelendiriciler, rasgele gürültü gibi görüntülerin üretilmesi için doku ve renk işlemlerinin dokulara eklenmesinden neredeyse sınırsız olanaklar sunar.

Aşağıdaki kod, alfa veya saydamlık etkilenmeden çıkarken, bir doku rengini dönüştüren küçük bir özel gölgelendirici gösterir:

let negativeShader = SKShader(source: "void main() { " +
    "    gl_FragColor = vec4(1.0 - SKDefaultShading().rgb, SKDefaultShading().a); " +
    "}")
rocket.shader = negativeShader

Aşağıdaki şekil gölgelendiricinin etkisini göstermektedir. Soldaki orijinal görüntü, renkleri gölgelendirici tarafından ters çevrilmiştir:

 

Çerçeve Tamponu İçine Hareketli Görüntü Karıştırma

Oluşturmanın son aşaması, hareketli grafiğin hedef çerçeve arabelleğine harmanlanmasıdır. Varsayılan davranış, dokuyu hedef piksellerle harmanlamak için dokunun alfa değerlerini kullanır. Ancak, bir sahneyi başka özel efektler eklemek istediğinizde diğer karışım modlarını kullanabilirsiniz.

HarmanMode özelliğini kullanarak hareketli grafiğin harmanlama davranışını kontrol edersiniz. Örneğin, bir katkı harmanlama modu, ateş veya aydınlatma gibi efektler için çoklu spritleri bir araya getirmek için yararlıdır. Aşağıdaki kod, farklı karışım modlarının etkisini göstermek için çemberdeki üç örtüşen hareketli grafik düğümünün nasıl konumlandırılacağını gösterir:

let blendMode = SKBlendMode.alpha
let imageNames = ["redCircle", "greenCircle", "blueCircle"]

for (index, imageName) in imageNames.enumerated() {
    let node = SKSpriteNode(imageNamed: imageName)
    
    node.alpha = 0.5
    node.blendMode = blendMode
    
    let angle = (CGFloat.pi * 2) / CGFloat(colors.count) * CGFloat(index)
    
    let positionX = 320 + sin(angle) * radius / 2
    let positionY = 320 + cos(angle) * radius / 2
    
    node.position = CGPoint(x: positionX, y: positionY)
    
    scene.addChild(node)
}

Alfa varsayılan karışım moduyla, üç daire şöyle görünür:

Ancak, bir harmanlama moduyla, renk değerleri bir araya getirilerek, aşağıdaki gibi görünen bir sahne oluşturulur:

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.