Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Memposisikan Indikator di Layar untuk Menunjuk ke Target di Luar Layar

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Shylchemist (you can also view the original English article)

Dalam permainan gulir 2D (dan beberapa game 3D), Anda harus sering menunjukkan kepada pemain lokasi target di luar layar, apakah itu musuh, sekutu, atau tujuan game. Banyak permainan menggunakan panah yang mengapung dekat ke tepi layar untuk menunjukkan ke arah mana target terletak. Dalam tutorial ini, saya akan menjelaskan metode yang menggunakan aljabar sederhana untuk menemukan di mana harus menempatkan panah indikator seperti itu.


Formulir Mencegah Lereng

Positioning off-screen indicators Game UI

Bentuk mencegat lereng adalah cara untuk menggambarkan garis lurus dalam 2D dengan aljabar linier. Ini menggunakan kemiringan, yang biasanya menggunakan simbol m, yang menentukan kecuraman garis, dan offset atau intercept, yang menggunakan simbol b, yang menentukan di mana garis melintasi sumbu y.

\[y = mx + b\]

Berkat hubungan ini, jika kita memiliki satu nilai, kita dapat menggunakan persamaan umum untuk dengan mudah menghitung nilai lainnya, baik secara konsep maupun matematis.

Karena kita menemukan posisi relatif terhadap layar - permukaan datar - kita melakukan semua perhitungan dalam 2D, bahkan jika permainan dalam 3D.

Tip: Jika Anda bekerja dalam 3D, Anda harus mengubah lokasi dunia ke lokasi layar objek 3D Anda. Sebagian besar mesin utama memiliki fungsi untuk melakukan ini; lihat dokumentasi mesin Anda untuk lebih lanjut.

Jika kita dapat menemukan garis di layar yang menjelaskan ke arah mana objek yang kita targetkan berada, kita dapat menentukan titik di mana ia melintasi setiap tepi yang diberikan, dan kemudian menggunakan sedikit trial and error untuk mengetahui di sisi mana layar itu akan berada. melekat.


Membuat Asumsi

Positioning off-screen indicators Game UI

Jika kita membayangkan bahwa layar kita berada pada kisi, dan bahwa titik asal (0, 0) tepat di tengah layar, maka mudah untuk menghitung nilai-nilai yang menggambarkan garis.

Karena garis akan melewati pusat, kita tahu bahwa intercept kita, b, harus nol. Dan jika kisi ditempatkan seperti ini, kita dapat dengan mudah menghitung kemiringan, m: itu hanyalah target y/x. (Pada gambar di atas, target kita adalah kursor mouse.)

Setelah kita memiliki kemiringan, kita dapat menggunakan substitusi untuk menghitung di mana garis akan melintasi batas layar. Sebagai contoh, jika kita ingin menemukan nilai-y pada titik di mana garis melintasi tepi layar, maka kita menggunakan bentuk asli y = mx, di mana x diatur ke tepi layar. Jika kita ingin menemukan di mana ia melintasi bagian atas atau bawah layar, kita membagi kedua sisi dengan m sehingga persamaannya menjadi: x = y/m - maka kami hanya mengatur y ke tepi layar.

Sementara kisi ditempatkan dengan cara ini, tepi layar akan menjadi setengah lebar layar, negatif untuk kiri dan positif untuk kanan. Untuk sumbu vertikal, dengan cara yang sama, tepi layar setengah tingginya, tetapi apakah naik positif atau negatif mungkin bervariasi di antara mesin.

Jadi, game 800x600px akan memiliki tepian layarnya pada x = -400pxx = +400pxy = -300px, and y = +300px.


Ruang Koordinasi

Di atas akan baik-baik saja jika asal untuk sistem koordinat adalah pusat layar, tapi itu jarang terjadi. Sebagian besar mesin memiliki asal di kiri atas, atau sudut kiri bawah.

Sebelum kita melakukan perhitungan, kita perlu menggeser ruang koordinat kita sehingga semua nilai kita relatif ke tengah layar, daripada asal default yang digunakan mesin kita.

Positioning off-screen indicators Game UI

Pergeseran Ruang Koordinat. Poin tidak diukur.

Kompleks suara? Tidak juga. Kita hanya perlu mencari tahu seberapa banyak kita ingin memindahkan ruang koordinat, dan mengurangi itu dari posisi target. Jadi jika kita ingin memindahkan grid kita ke atas setengah lebar layar, kita kurangi setengah lebar layar dari nilai y target.


Inilah yang Saya siapkan Sebelumnya

Positioning off-screen indicators Game UI

Pada contoh di atas, ukuran layar adalah 800x600px, dengan ruang koordinat digeser sehingga (0, 0) berada di tengah monitor. Target di luar layar adalah pada (800, 400) menggunakan ruang koordinat yang sama.

Karena koordinat y target adalah positif (dan, di mesin ini, sumbu y menunjuk ke atas), kita tahu itu tidak akan berada di tepi bawah layar, jadi kita awalnya menemukan posisinya di sepanjang tepi atas layar, yaitu (600, 300).

Secara matematis kita dapat mengatakan bahwa titik ini masih di luar layar karena koordinat x-nya (600) lebih besar dari setengah lebar (800/2 = 400), jadi kami kemudian mencari posisi di sisi layar.

Sekali lagi, kita hanya perlu memeriksa satu sisi layar, karena jika koordinat x kita positif maka titik harus berada di sisi kanan layar. (Jika negatif, itu harus di sebelah kiri.)

Setelah menemukan titik di sisi kanan layar - (400, 200) - kita tahu bahwa itu harus benar, karena kita telah mengesampingkan setiap sisi layar melalui proses eliminasi.


Tambahkan Dasbor Kecil Trigonometri

Selain memposisikan indikator, Anda mungkin ingin memutarnya juga untuk efek ekstra, terutama jika itu adalah panah. Ada fungsi praktis yang merupakan bagian dari sebagian besar kelas matematika yang memecahkan masalah ini dengan mudah: atan2().

Fungsi atan2() mengambil dua parameter: koordinat x dan koordinat y. Ini mengembalikan sudut yang menunjukkan arah dari (0, 0) ke (x, y).

Ada beberapa hal yang perlu diingat dengan atan2() yang dapat bervariasi antara bahasa dan mesin. Pertama, argumen sering atan2(y, x), sedangkan sebagian besar fungsi matematika lainnya mengambil koordinat x terlebih dahulu. Juga, rotasi sering dikembalikan dalam radian, bukan derajat.

Tips: Saya tidak akan membahas perbedaan antara radian dan derajat, kecuali untuk mengatakan bahwa mengubah dari satu ke yang lain itu mudah: Anda hanya menggandakan radian dengan (180/Pi) untuk mengubahnya menjadi derajat, dan kalikan dengan (Pi/180) jika Anda ingin mengubahnya kembali.


Cek Terakhir

Ada satu hal terakhir yang perlu kita periksa sebelum membuat indikator off screen, dan itu adalah apakah target kita benar-benar off screen, karena tidak masuk akal untuk menunjuk ke arah target kita jika kita sudah bisa melihat target kita. Sekali lagi, kita akan menggunakan matematika yang cukup sederhana untuk menyelesaikannya.

Karena layar kita adalah persegi panjang yang tidak diputar, kita tidak perlu melakukan apa pun dengan sudut, kita hanya perlu memeriksa apakah titik target kita lebih rendah dari atas, lebih tinggi dari bawah, ke kiri dari tepi kanan, dan ke kanan dari tepi kiri layar.

Dengan menggunakan nilai dummy di atas, kita menemukan bahwa target ada di layar. Nilai-nilai ini dapat berasal dari mana saja yang menyimpan informasi tentang objek yang Anda lacak.

Perhatikan bahwa kode di atas mengasumsikan kita berada dalam ruang koordinat di mana (0, 0) berada di sudut layar, seperti kebanyakan mesin akan memiliki secara default. Oleh karena itu, langkah ini harus dilakukan sebelum menggeser ruang koordinat ke pusat seperti yang kita lakukan saat menghitung posisi indikator.


Menyatukan Semuanya

Berikut ini adalah demo cepat untuk menunjukkan konsep-konsep ini dalam aksi (lihat kode di GitHub):

Mari kita telusuri kode:

  • Pertama, kita memeriksa apakah targetnya benar-benar di luar layar; jika di layar kita sudah tahu di mana harus meletakkan kursor, jika kita ingin melakukannya.
  • Kita mengubah ruang koordinat sehingga asal berada di tengah layar.
  • Melihat posisi mouse, kita dapat dengan mudah mengetahui apakah itu ada di bagian atas atau bawah layar.
  • Dengan menggunakan informasi itu, dan substitusi aljabar, kita menghitung di mana titik itu akan berada di bagian atas atau bawah layar.
  • Kita melihat titik yang baru saja dihitung, dan memeriksa apakah itu benar-benar posisi di layar, atau apakah itu terlalu jauh ke kiri atau kanan.
  • Jika titik di luar layar, kita menghitung titik baru di sisi layar, bukan bagian atas atau bawah.
  • Kita sekarang harus memiliki titik yang tepat di ruang koordinat yang salah, jadi kita melakukan kebalikan dari apa yang dilakukan pada langkah pertama untuk membawanya kembali ke sistem koordinat yang benar.

Kesimpulan

Itu dia: potongan kode yang berguna untuk ditambahkan ke interface pengguna game Anda. Sekarang Anda bisa mengarahkan pemain ke arah target, pertimbangkan bagaimana Anda bisa menampilkan jarak juga.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.