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.



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.
- SpriteKitBuat Space Invaders dengan Swift and Sprite Kit: Memperkenalkan Sprite KitJames Tyner
- iOS SDKBuat Game Blackjack di Swift 3 dan SpriteKitJames Tyner
- iOSSpriteKit Dari Scratch: FundamentalsDavis Allie
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.
