Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Cara Mendeteksi Ketika Objek Telah Dilingkari Oleh sebuah Gerakan

by
Difficulty:IntermediateLength:LongLanguages:

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

Anda tidak pernah terlalu tua untuk sebuah permainan Spot the Difference (Tempat Perbedaan) - Saya ingat bermain sebagai anak-anak, dan sekarang saya menemukan istri saya masih memainkannya sesekali! Dalam tutorial ini, kita akan melihat bagaimana mendeteksi ketika sebuah lingkaran telah ditarik di sekitar objek, dengan algoritma yang dapat digunakan dengan mouse, stylus, atau input layar sentuh.


Catatan: Meskipun demo dan source code dari tutorial ini menggunakan Flash dan AS3, Anda harus dapat menggunakan teknik dan konsep yang sama di hampir semua lingkungan pengembangan game.


Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita kerjakan. Layar dibagi menjadi dua gambar, yang hampir identik tetapi tidak terlalu identik. Coba temukan enam perbedaan, dan lingkari titik di gambar kiri. Semoga berhasil!

Catatan: Anda tidak harus menggambar lingkaran yang sempurna! Anda hanya perlu menggambar lingkaran kasar atau melingkar di setiap perbedaan.

Tidak memiliki Flash? Lihatlah demo video ini:


Langkah 1: Gerakan Melingkari

Kami akan menggunakan beberapa perhitungan vektor dalam algoritma. Seperti biasa, lebih baik memahami matematika yang mendasari sebelum menerapkannya, jadi inilah penyegaran singkat matematika vektor.

Vector definition

Gambar di atas menunjukkan vektor A dipecah menjadi komponen horisontal dan vertikal (Ax dan Ay, masing-masing).

Sekarang mari kita lihat operasi dari dot product (perkalian titik), diilustrasikan pada gambar di bawah ini. Pertama, Anda akan melihat operasi dot product antara vektor A dan B.

Vector math

Untuk menemukan sudut yang diapit di antara dua vektor, kita dapat memanfaatkan dot product ini.

| A | dan | B | menunjukkan besaran vektor A dan B, jadi diberikan | A | dan | B | dan A dot B, yang tersisa tidak diketahui adalah theta. Dengan sedikit aljabar (ditunjukkan dalam gambar), persamaan final dihasilkan, yang dapat kita gunakan untuk menemukan theta.

Untuk informasi lebih lanjut tentang vektor dot product, lihat halaman Wolfram berikut.

Operasi lain yang bermanfaat adalah cross product (perkalian silang). Lihat operasi di bawah ini:

Cross vector

Operasi ini berguna untuk menemukan apakah sudut yang diapit searah jarum jam atau berlawanan arah jarum jam relatif terhadap vektor tertentu.

Biar saya jelaskan lebih lanjut. Untuk kasus diagram di atas, rotasi dari A ke B searah jarum jam, jadi A cross B negatif. Rotasi B ke A berlawanan arah jarum jam, jadi B cross A positif. Perhatikan bahwa operasi ini urutan yang sensitif. A cross B akan menghasilkan hasil yang berbeda dari B cross A.

Bukan itu saja. Itu terjadi bahwa di banyak ruang koordinasi platform pengembangan permainan, sumbu y terbalik (y meningkat saat kita bergerak ke bawah). Jadi analisis kami terbalik, dan A cross B akan positif sementara B cross A negatif.

cukup revisinya. Mari menuju ke algoritma kami.


Langkah 2: Interaksi Melingkari

Pemain harus melingkari detail yang benar pada gambar. Sekarang bagaimana kita melakukannya? Sebelum menjawab pertanyaan ini, kita harus menghitung sudut antara dua vektor. Seperti yang Anda ingat saat ini, kita dapat menggunakan dot product untuk ini, jadi kami akan menerapkan persamaan itu di sini.

Berikut ini demo untuk menggambarkan apa yang kami lakukan. Seret salah satu panah ke sekitar untuk melihat umpan balik.

Mari kita lihat bagaimana ini bekerja. Dalam kode di bawah, saya hanya menginisialisasi vektor dan pengatur waktu, dan menaruh beberapa panah interaktif di layar.

Setiap 50 milidetik, fungsi di bawah ini dijalankan, dan digunakan untuk memperbarui umpan balik dari grafis dan teks:

Anda akan melihat bahwa besarnya untuk v1 dan v2 adalah 1 unit dalam skenario ini (lihat baris 52 dan 53 yang disorot di atas), jadi saya melewatkan kebutuhan untuk menghitung besaran vektor untuk saat ini.

Jika Anda ingin melihat source code secara lengkap, periksa Demo1.as dalam unduhan source code.


Langkah 3: Mendeteksi Lingkaran Penuh

Ok, sekarang setelah kita memahami ide dasarnya, sekarang kita akan menggunakannya untuk memeriksa apakah pemain berhasil melingkari suatu titik.

Calculate the angles

Saya harap diagram tersebut berbicara untuk dirinya sendiri. Awal interaksi adalah ketika tombol mouse ditekan, dan akhir dari interaksi adalah ketika tombol mouse dilepaskan.

Pada setiap interval (katakanlah dari 0,01 detik) selama interaksi, kami akan menghitung sudut yang diapit di antara vektor saat ini dan sebelumnya. Vektor ini dibangun dari lokasi penanda (di mana perbedaannya adalah) menuju lokasi mouse pada saat itu. Tambahkan semua sudut ini (t1, t2, t3 dalam kasus ini) dan jika sudut yang dibuat adalah 360 derajat pada akhir interaksi, maka pemain telah menggambar lingkaran.

Tentu saja, Anda dapat menyesuaikan definisi lingkaran penuh menjadi 300-340 derajat, memberikan ruang untuk kesalahan pemain saat melakukan gerakan mouse.

Berikut adalah demo untuk ide ini. Seret gerakan melingkar di sekitar penanda merah di tengah. Anda dapat memindahkan posisi penanda merah menggunakan tombol keyboard W, A, S, D.


Langkah 4: Implementasi

Mari kita periksa penerapannya untuk demo. Kami hanya akan melihat perhitungan penting di sini.

Lihat kode yang disorot di bawah ini dan cocokkan dengan persamaan matematis pada Langkah 1. Anda akan melihat bahwa nilai untuk arccos terkadang menghasilkan Not a Number (NaN) jika Anda melewati baris 92. Juga, constants_value kadang-kadang melebihi 1 karena ketidakakuratan pembulatan sehingga kita perlu secara manual membawanya kembali ke maksimum 1. Setiap nomor input untuk arccos lebih dari 1 akan menghasilkan NaN.

Source code lengkap untuk ini dapat ditemukan di Demo2.as


Langkah 5: Kekurangan

Satu masalah yang mungkin Anda lihat adalah bahwa selama saya menggambar lingkaran besar yang melapisi kanvas, spidol akan dianggap dilingkari. Saya tidak perlu perlu tahu di mana penanda itu.

Nah, untuk mengatasi masalah ini, kita bisa memeriksa kedekatan dari gerak melingkar. Jika lingkaran ditarik dalam batas-batas rentang tertentu (nilai yang berada di bawah kendali Anda), hanya kemudian dianggap sukses.

Lihat kode di bawah ini. Jika pengguna pernah melebihi MIN_DIST (dengan nilai 60 dalam kasus ini), maka itu dianggap tebakan acak.

Sekali lagi, coba lingkari penanda. Jika menurut Anda MIN_DIST agak tidak memiliki kesalahan, itu selalu dapat disesuaikan agar sesuai dengan gambar.


Langkah 6: Bentuk yang Berbeda

Bagaimana jika "perbedaan" itu bukan lingkaran yang pasti? Beberapa kemungkin berbentuk persegi panjang, atau segitiga, atau bentuk lainnya.
Dalam kasus ini, setidaknya hanya menggunakan satu penanda, kita dapat memasang beberapa:

Circling multiple cirlce

Pada diagram di atas, dua kursor mouse ditampilkan di bagian atas. Dimulai dengan kursor paling kanan, kita akan membuat gerakan melingkar searah jarum jam ke ujung yang lain di sebelah kiri. Perhatikan bahwa path (jalur) mengelilingi ketiga penanda tersebut.

Saya juga menggambar sudut-sudut yang dilewati oleh jalur ini pada masing-masing penanda (garis-garis terang ke garis-garis gelap). Jika ketiga sudut lebih dari 360 derajat (atau nilai apa pun yang Anda pilih), kemudian kita hanya menghitungnya sebagai lingkaran.

Tapi itu tidaklah cukup. Ingat kekurangam pada Langkah 4? Nah, hal yang sama berlaku di sini: kita harus memeriksa kedekatannya. Setidaknya membutuhkan gerakan untuk tidak melebihi radius tertentu dari penanda tertentu, kami hanya akan memeriksa apakah kursor mouse mendekati semua penanda setidaknya untuk sesaat. Saya akan menggunakan pseudo-code untuk menjelaskan ide ini:


Langkah 7: Demo untuk Ide

Di sini, kami menggunakan tiga titik untuk mewakili segitiga.

Coba lingkari:

  • Satu Titik
  • Dua Titik
  • Tiga Titik

... pada gambar di bawah ini. Perhatikan bahwa gerakan hanya berhasil jika mengandung ketiga titik.

Mari kita periksa kode untuk demo ini. Saya telah menyoroti garis-garis kunci untuk ide di bawah ini; script lengkapnya ada pada Demo4.as.


Langkah 8: Menggambar Lingkaran

Metode terbaik untuk benar-benar menarik garis yang Anda lacak akan bergantung pada platform pengembangan Anda, jadi saya akan menjelaskan metode yang akan kami gunakan dalam Flash di sini.

Actionscript drawing API

Ada dua cara untuk menggambar garis di AS3, seperti yang ditunjukkan oleh gambar di atas.

Pendekatan pertama agak sederhana: gunakan moveTo() untuk memindahkan posisi menggambar ke koordinat (10, 20). Kemudian tarik garis untuk menghubungkan (10, 20) ke (80, 70) menggunakan lineTo().

Pendekatan kedua adalah menyimpan semua detail dalam dua array, commands[] dan coords[] (dengan koordinat yang disimpan dalam (x, y) berpasangan dalam coords[]) dan kemudian menarik semua detail grafis ke kanvas menggunakan drawPath() dalam satu tembakan tunggal. Saya memilih pendekatan kedua dalam demo saya.

Periksalah: coba klik dan seret mouse pada kanvas untuk menggambar garis.

Dan inilah kode AS3 untuk demo ini. Lihat source code lengkapnya di Drawing1.as.

Dalam Flash, menggunakan objek graphics untuk menggambar seperti ini menggunakan retained mode rendering, yang berarti bahwa properti dari masing-masing baris disimpan secara terpisah - sebagai lawan dari mode render secara langsung atau immediate mode rendering, di mana hanya gambar akhir yang disimpan. (Konsep yang sama ada di platform pengembangan lainnya; misalnya, dalam HTML5, menggambar ke SVG menggunakan retained mode, sementara menggambar ke kanvas menggunakan immediate mode)

Jika ada banyak garis di layar, menyimpan dan merender ulang semuanya secara terpisah dapat membuat game Anda lambat dan lamban. Solusi untuk ini akan tergantung pada platform Anda - pada Flash, Anda dapat menggunakan BitmapData.draw() untuk menyimpan setiap baris dalam satu bitmap setelah diambil.


Langkah 9: Contoh Level

Di sini saya telah membuat demo untuk contoh level permainan Spot the Difference. Coba lihat! Source code lengkapnya ada di Sample2.as dari unduhan source code.

Kesimpulan

Terima kasih telah membaca artikel ini; Saya harap ini memberi Anda ide untuk membangun Game Anda sendiri. Silahkan berikan komentar jika ada masalah dengan kode dan saya akan menghubungi Anda sesegera mungkin.

Advertisement
Advertisement
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.