Dasar-dasar SpriteKit: Sprite

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam seri ini, kita belajar bagaimana menggunakan SpriteKit untuk membangun game 2D untuk iOS. Dalam posting ini, kita akan melanjutkan penjelajahan kita terhadap node SpriteKit, dan belajar tentang jenis node khusus yang disebut "sprite" -an SKSpriteNode.

Untuk mengikuti tutorial ini, cukup download the accompanying GitHub repo. Ini memiliki folder bernama ExampleProject Starter. Buka project di folder itu di Xcode, dan Anda ready to go!

Sprite Nodes

Sebuah SKSpriteNode digambar baik sebagai persegi panjang dengan tekstur yang dipetakan ke atasnya, atau sebagai persegi panjang berwarna takbertekstur. Membuat SKSpriteNode dengan tekstur yang dipetakan ke atasnya yang paling umum, karena ini adalah bagaimana Anda membawa karya seni permainan Anda ke kehidupan.

Tambahkan berikut ke metode didMove(to:) dalam GameScene.swift.

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    addChild(redSprite)
}

Disini kita menggunakan convenience intiailizer init(color:size:) yang akan menggambar sprite persegi panjang dengan warna dan ukuran yang Anda gunakan sebagai parameter. Jika Anda menguji proyek sekarang, Anda akan melihat setengah dari tampilan kotak merah.

Anda mungkin bertanya-tanya mengapa hanya setengah dari sprite yang muncul karena kita sudah menentukan bahwa asal SKNode berada pada (0,0). Ini karena bingkai SKSpriteNode dan karena itu teksturnya berpusat pada posisinya. Untuk mengubah perilaku ini, Anda dapat mengubah properti anchorPoint sprite, yang menentukan titik di mana bingkai diposisikan. Diagram di bawah ini menunjukkan bagaimana anchorPoint bekerja.

Diagram showing the anchorPoint property within a coordinate system

anchorPoint ditentukan dalam sistem koordinat unit, yang menempatkan (0,0) di kiri bawah dan (1,1) di sudut kanan atas bingkai. Default untuk SKSpriteNode adalah (0.5.0.5).

Lanjutkan dan ubah properti anchorPoint menjadi (0,0) dan perhatikan perbedaannya.

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    redSprite.anchorPoint = CGPoint(x: 0, y:0)
    addChild(redSprite)
}

Sekarang, jika Anda menguji, Anda akan melihat bahwa sprite berbaris sempurna dengan bagian kiri bawah pada tampilan.

Sekarang mari kita pindahkan ke pusat pada tampilan dengan mengubah posisi properti. Ganti didMove(to:) function Anda dengan berikut ini:

override func didMove(to view: SKView) {
    let startGameLabel = SKLabelNode(text: "Start Game")
    startGameLabel.name = "startgame"
    startGameLabel.position = CGPoint(x: size.width/2, y: size.height/2)
    addChild(startGameLabel)
        
        
    let redSprite = SKSpriteNode(color: .red, size: CGSize(width: 200, height: 200))
    redSprite.anchorPoint = CGPoint(x: 0, y:0)
    redSprite.position = CGPoint(x: size.width/2 - 100, y: size.height - 210)
    addChild(redSprite)
}

Perhatikan bagaimana kita harus mengurangi nilai x dan y untuk memusatkan sprite. Jika kita telah meninggalkan anchorPoint pada bawaannya maka akan dipusatkan pada sumbu x. Penting untuk diingat bahwa ketika Anda mengubah titik anchor, Anda mungkin harus melakukan beberapa penyesuaian pada posisi Anda.

Sprite bertekstur (Textured Sprites)

Kotak merah itu bagus untuk latihan dengan posisi, tapi biasanya Anda ingin tekstur sprite Anda dengan karya seni untuk permainan Anda.

Mari buat SKSpriteNode bertekstur. Tambahkan kode berikut di bagian bawah metode didMove(to:).

override func didMove(to view: SKView) {

    ...
        
    let player = SKSpriteNode(imageNamed: "player")
    player.position = CGPoint(x: size.width/2 , y: 300)
    addChild(player)
}

Disini kita menggunakan convenience initializer init(imageNamed:), yang mengambil sebagai parameter nama gambar tanpa ekstensi. Ini adalah cara termudah untuk membuat sprite bertekstur karena menciptakan tekstur untuk Anda dari gambar yang Anda lewati.

Cara lain untuk membuat SKSpriteNode bertekstur adalah membuat SKTexture sebelumnya, dan gunakan salah satu intializer yang mengambil tekstur sebagai parameter.

Mari buat beberapa SKSpriteNode lagi dan ganti beberapa propertinya. Sekali lagi, tambahkan ini ke bagian bawah didMove(to:) function.

override func didMove(to view: SKView) {
    
    ...
    
    let enemy1 = SKSpriteNode(imageNamed: "enemy1")
    enemy1.position = CGPoint(x: 100 , y: 300)
    enemy1.xScale = 2
    addChild(enemy1)
        
        
    let enemy2 = SKSpriteNode(imageNamed: "enemy2")
    enemy2.position = CGPoint(x: size.width - 100 , y: 300)
    enemy2.zRotation = 3.14 * 90 / 180
    addChild(enemy2)
}

Disini kita buat dua SKSpriteNode, enemy1 dan enemy2. Kami mengatur xScale pada enemy1 ke 2 dan mengubah zRotation pada enemy2 untuk memutarnya dengan 90 derajat. (Properti zRotation memberinya nilai dalam radian, dan nilai positif menunjukkan rotasi berlawanan arah jarum jam.)

Kami telah bereksperimen dengan mengubah beberapa properti pada sprite. Lihatlah dokumentasi untuk SKNodes dan SKSpriteNodes dan coba ubah beberapa properti lainnya untuk melihat efek yang dimilikinya.

Sprite nodes bagus untuk dasar persegi panjang dan tekstur, namun terkadang bentuk yang lebih kompleks akan dibutuhkan. SKShapeNode telah Anda bahas dalam kasus-kasus tersebut. Kita akan melihat node bentuk berikutnya.

Bentuk Node

Node lain yang berguna adalah SKShapeNode. Node ini membuat bentuk yang didefinisikan oleh Core Graphics path. SKShapeNode berguna untuk konten yang tidak mudah direalisasikan dengan SKSpriteNode. Kelas ini lebih banyak memori dan memiliki kinerja lebih rendah daripada menggunakan SKSpriteNode, jadi Anda harus mencoba menggunakannya secara hemat.

Untuk menetapkan bentuk ke SKShapeNode, Anda dapat mengatur CGPath ke properti node's path. Namun, ada beberapa initializer yang menawarkan bentuk yang telah ditentukan seperti persegi panjang(rectangles), lingkaran(circles), dan elips(ellipses). Mari buat lingkaran menggunakan convenience initializer init(circleOfRadius:).

Kemudian, tambahkan yang berikut ke bagian bawah metode didMove(to:).

override func didMove(to view: SKView) {
        
    ...
        
    let circle = SKShapeNode(circleOfRadius: 50)
    circle.strokeColor = SKColor.green
    circle.fillColor = SKColor.blue
    circle.lineWidth = 8
    circle.position = CGPoint(x: size.width/2, y: 400)
    addChild(circle)
}

Kami mengubah beberapa properti pada bentuk node, memposisikannya, dan menambahkannya ke tempat tampilan. Sangat mudah untuk menggunakan initializer bentuk standar. Namun, menciptakan CGPath yang rumit secara manual membutuhkan banyak waktu dan bukan untuk menjadi lemah karena biasanya melibatkan beberapa matematika kompleks.

Untungnya, ada alat yang memungkinkan Anda menggambar bentuk secara visual dan mengekspor CGPath mereka sebagai kode Swift. Periksa PaintCode jika Anda ingin mempelajari lebih lanjut.

Sprite Nodes dan Shape Node akan mencakup sebagian besar kasus, namun terkadang Anda mungkin ingin menampilkan video di aplikasi Anda. The SKVideoNode, yang akan kita lihat berikutnya, sudahkah Anda tutup.

Video Nodes

Node terakhir yang akan kita lihat adalah SKVideoNode. Sesuai namanya, node ini memungkinkan Anda memutar video dalam game Anda.

Ada beberapa cara berbeda untuk membuat SKVideoNode. Seseorang menggunakan instance dari AVPlayer, yang lain hanya menggunakan nama file video yang disimpan dalam paket aplikasi, dan cara ketiga adalah dengan menggunakan URL.

Satu hal yang perlu diingat adalah bahwa properti size video awalnya akan sama dengan ukuran video target. Anda bisa mengubah properti size ini, dan video akan diregangkan ke ukuran yang baru.

Hal lain yang harus diperhatikan adalah bahwa metode SKVideoNode hanya menawarkan metode play() dan pause(). Jika Anda ingin lebih mengontrol video Anda, Anda akan menginisialisasi SKVideoNode dengan AVPlayer yang ada dan menggunakannya untuk mengontrol video Anda.

Mari kita gunakan metode paling sederhana untuk membuat SKVideoNode. Tambahkan berikut ke bagian bawah metode didMove(to:).

override func didMove(to view: SKView) {
        
    ...

    let video = SKVideoNode(fileNamed: "video.mov")
    video.position = CGPoint(x: size.width/2,y: 600)
    addChild(video)
    video.play()
}

Disini kami menggunakan intinilizer init(fileNamed:) untuk membuat video. Anda lewati nama video beserta ekstensi. Saya belum menyertakan video beserta kode sumber project, namun jika Anda ingin melihat karya ini, Anda dapat menambahkan video bernama "video.mov" ke project Anda.

Kesimpulan

Ini melengkapi penelitian kami tentang nodes. Setelah membaca posting ini dan yang sebelumnya, Anda harus memiliki pemahaman yang baik tentang SKNode dan subkelasnya. Pada bagian selanjutnya dari seri ini, kita akan melihat SKActions dan menggunakan fisika dalam permainan kita. Terima kasih telah membaca, dan saya akan melihat Anda di sana!

Sementara itu, lihat beberapa kursus dan tutorial hebat lainnya untuk membuat aplikasi iOS dengan Swift dan SpriteKit.

Juga, periksa kursus SpriteKit kami! Ini akan membawa Anda melewati semua langkah membangun game SpriteKit pertama Anda untuk iOS, bahkan jika Anda belum pernah coding dengan SpriteKit sebelumnya.