Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games

Memukul Target dengan Homing mematikan rudal

by
Read Time:12 minsLanguages:
This post is part of a series called You Do The Math.
Gravity in Action
Circular Motion in AS3: Make One Moving Object Orbit Another

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

Tutorial ini akan memandu Anda melalui menambahkan mematikan akurat Menembakan peluru ke gudang Anda permainan berikutnya.


Hasil akhir Tinjauan

Mari kita lihat hasil akhir yang akan kita upayakan:


Langkah 1: Menyiapkan dokumen FLA

Membuat dokumen Flash baru ditetapkan untuk ActionScript 3.0. Aku akan menggunakan dimensi 600 x 400, dan frame rate 30 fps. Simpan file dengan nama pilihan Anda.

Create a .FLA documentCreate a .FLA documentCreate a .FLA document

Langkah 2: Buat sebuah dokumen kelas

Selain FLA, kita juga perlu untuk membuat dokumen kelas. Buat sebuah file baru Actionscript, lalu tambahkan kode ini:

Simpan file ini di direktori yang sama dengan FLA kami. Beri nama Main.as.


Langkah 3: Link kelas utama dengan FLA

Untuk mengkompilasi kode dari kelas utama, kita perlu dihubungkan dengan Fla Pada panel properti FLA, di kelas, masukkan nama dokumen kelas, dalam kasus ini, Main.

Link the Main class with the FLA

Kemudian, Simpan perubahan pada Fla


Langkah 4: Menggambar sebuah rudal

Kami membutuhkan grafik rudal untuk ditampilkan saat pengambilan gambar. Anda dapat mengimpor bitmap atau menggambar bentuk di sana di Flash. Saya akan menggunakan bentuk kecil pada contoh ini.

Draw a missile shape or import a missile bitmap.

Yang penting di sini adalah Anda harus membuat titik misil lurus ke kanan, karena itulah titik asal untuk rotasi. Jadi 0° berarti menunjuk langsung ke kanan, -90° berarti ke atas, 90° berarti ke bawah, dan 180° menunjuk ke kiri. Nanti kita perlu memutar rudal sesuai dengan arahnya.


Langkah 5: Buat MovieClip untuk Rudal

Setelah Anda memiliki grafis rudal, pilih dan tekan F8 untuk membuat klip. Nama itu "Rudal", pastikan titik pendaftaran adalah di pusat, dan centang kotak centang "Ekspor untuk ActionScript".

Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.

Anda akan berakhir dengan sebuah rudal movieklip di Perpustakaan.

Missile MovieClip in the Library.

Jika Anda memiliki sebuah instance rudal di atas panggung, menghapusnya. Kami akan menambahkan movieklip rudal oleh kode.


Langkah 6: tujuan

Hal pertama yang perlu diketahui rudal pelacak adalah di mana target berada. Kita akan mengatur rotasi rudal sesuai dengan posisi kursor mouse terlebih dahulu. Mari bekerja dengan enterFrame Event untuk pembaruan rotasi konstan.

Tambahkan sebuah instance rudal ke panggung, aku 'm menempatkannya di pusat (300, 200). Kemudian menghitung jarak dari rudal ke kursor mouse (I 'm menyimpannya dalam variabel targetX dan targetY). Akhirnya, rudal sudut akan arc tangen dari kedua-dua titik (targetX, targetY). Hasil Anda akan mendapatkan akan di radian, tapi rotasi bekerja dalam derajat, sehingga Anda akan perlu untuk melakukan konversi dengan mengalikan dengan 180 Pi. (Untuk melihat mengapa, periksa artikel ini.)

(Tidak yakin untuk apa Math.atan2()? Lihat artikel ini tentang trigonometri.

Jika Anda menerbitkan (Ctrl + Enter) dokumen pada titik ini, Anda harus mendapatkan sesuatu seperti ini:

Gerakkan mouse Anda di dekat rudal untuk melihatnya memutar.


Langkah 7: mencari

Kami punya rotasi, sekarang kita membutuhkan gerakan. Rudal harus mencari target, tidak peduli apakah itu mantap atau target yang bergerak. Apa yang akan kita lakukan adalah menghitung gerakan menurut rotasi saat ini rudal. Mari kita menetapkan nilai untuk kecepatan, dan membuat rudal mengejar kursor mouse.

Kami akan menyertakan beberapa variabel baru untuk menghitung kecepatan (vx, vy). Ketika rudal menunjuk ke kanan, sudut lebih rendah daripada 90° dan lebih tinggi dari-90 °, sehingga selalu lebih rendah daripada nilai absolut 90 °. Ketika itu menunjuk ke kiri, sudut memiliki nilai mutlak yang lebih tinggi daripada 90°. Ini akan menentukan vx sesuai dengan kecepatan, maka vy akan perbedaan kecepatan dan vx.

Anda akan mendapatkan rudal mengejar kursor Anda.

Anda dapat menggunakan kecepatan yang berbeda jika Anda ingin.


Langkah 8: Membuat peluncur rudal

Rudal tidak datang dari udara tipis, mereka ditembak dari peluncur rudal. Mari kita membuat sebuah movieklip mewakili sebuah meriam (saya akan menggunakan sederhana persegi panjang), dan nama itu meriam. Aku akan menambahkan sebuah meriam misalnya dengan kode, jadi aku akan menjaga panggung kosong.

Cannon MovieClip in the Library.

Langkah 9: menembak

Sekarang, alih-alih menambahkan rudal, saya hanya akan menambahkan meriam, dan rudal akan ditambahkan pada posisi meriam ketika saya mengklik panggung. Kami akan menambahkan Boolean untuk memeriksa apakah rudal telah ditembak, dan juga fungsi baru untuk menembak setelah klik.

Ini adalah apa yang Anda akan mendapatkan:

Ini tidak terlihat bagus. Kami telah membuat baik meriam berputar pula, atau memaksa rudal naik ke atas hak setelah ditembak. Karena pilihan #1 adalah pendekatan yang paling mudah, kami akan mengambil pilihan #2.


Langkah 10: Kurang presisi untuk terlihat lebih baik

Jika meriam vertikal, kita berharap rudal untuk memulai ke atas dan kemudian mendapatkan di jalur menuju target. Pendekatan saya akan menggunakan untuk mencapai tujuan ini adalah untuk memberikan rudal sudut awal °-90 (menunjuk ke atas), dan lancar memutar untuk mendapatkan di jalur untuk kursor mouse. Kami akan menambahkan variabel kemudahan untuk menentukan kelancaran atau ketajaman rotasi. Kemudian kita akan menciptakan variabel lain untuk melacak rotasi aktual yang mengarah langsung ke target, sementara rudal rotasi akan berubah sesuai kemudahan kami menetapkan (kemudahan = 1 akan berperilaku sama seperti sebelumnya, apa pun yang lebih tinggi akan membuat giliran halus).

Karena setengah dari nilai rotasi negatif, dalam beberapa kasus kita perlu menghitungnya terhadap 360 untuk mendapatkan perbedaan aktual antara sudut target dan rotasi rudal.

Memeriksa:

Perhatikan apa yang terjadi ketika Anda memindahkan mouse Anda dari SWF, dan bagaimana hal ini berbeda dari contoh sebelumnya.


Langkah 11: Hits rudal, rudal meledak

Selain rudal klip, kita perlu animasi ledakan. Dalam kasus saya, saya akan membuat movieklip terpisah dengan tween sederhana lingkaran yang mengembang. Aku sedang mengekspor itu sebagai ledakan. Tekan O untuk memilih alat Oval, dan terus Shift sambil menggambar oval untuk mendapatkan lingkaran.

The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.

Untuk efek visual yang lebih bagus, saya akan menempatkan lingkaran dalam klip lain sendiri, dan memberikan Bevel filter untuk mendapatkan warna gelap di bagian bawah dan warna yang lebih ringan di bagian atas. Selanjutnya, aku akan pergi ke frame 10 dan tekan F6 untuk membuat Keyframe, kemudian klik kanan antara bingkai 1 dan 10 dan membuat Tween klasik. Kembali pada bingkai 10, tekan Q pilih mengubah alat gratis dan memperbesar lingkaran.

Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.

Lalu, buat Classic Tween lain ke frame 20, saya akan menambahkan efek filter Blur.

Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.

Akhirnya, membuatnya menghilang di Tween klasik terakhir ke frame 30 dengan efek warna Alpha akan 0.

Alpha color effect set to 0 in a Classic Tween.

Langkah 12: Membersihkan panggung

Ledakan animasi harus dihapus setelah selesai, atau akan loop tanpa batas waktu. Tambahkan layer baru dan tekan F6 pada frame terakhir, kemudian tekan F9 untuk membuka panel tindakan, dan tambahkan kode ini:

Ini akan membuat instance Explosion menghapus dirinya sendiri setelah animasi selesai.

The Explosion instance will remove itself.The Explosion instance will remove itself.The Explosion instance will remove itself.

Langkah 13: meledak

Sekarang ketika rudal bertemu kursor, kita akan menggantinya dengan instance ledakan. Kita hanya perlu menambahkan bersyarat baru dalam fungsi playGame().

Perhatikan:


Langkah 14: Sesuatu Yang Lain untuk Meledakkan

Mengejar kursor mouse adalah menghibur, tapi itu sia-sia dalam permainan; kita perlu membuat target. Aku akan menggambar sekelompok lingkaran untuk membentuk Target klip.

Create and export a Target Movie Clip.

Langkah 15: Menembak Target

Sekarang kita akan menambahkan sebuah instance Target untuk rudal untuk memiliki tujuan yang lebih nyata. Jadi kami akan mengganti referensi kursor mouse untuk posisi sasaran. Juga, kami tidak akan menguji untuk memukul titik, tetapi sebuah objek.

Metode hitTestObject() benar-benar hanya memeriksa untuk tumpang tindih antara kotak melompat-lompat dua objek (yaitu, kotak biru yang muncul saat Anda mengklik instance objek dalam tahap), so watch out untuk itu; Hal ini tidak deteksi tabrakan pixel sempurna. Namun, ia melakukan pekerjaan baik di sini.

Anda dapat mencoba menempatkan target di lokasi yang berbeda, serta meriam.


Langkah 16: Target bergerak

Kita sudah melihat bahwa rudal akan mengejar target bergerak, seperti kursor mouse, jadi sekarang mari kita membuat instance Target bergerak sedikit.

Ini bukan fisika realistis, aku hanya akan membuat target bouncing vertikal. Aku akan memilih titik acuan sebagai tingkat dasar, dan menambahkan nilai gravitasi untuk mempengaruhi target. Dan untuk membuatnya lebih dinamis, saya akan meningkatkan kecepatan rudal sampai 15.

Jika Anda menerbitkan ini sekarang, Anda harus mendapatkan target yang bergerak.


Kesimpulan

Apakah Anda ingin rudal berpandu akurat, atau Anda lebih suka animasi yang halus, Anda bisa mendapatkan kedua hasil berdasarkan contoh ini. Sekarang Anda punya senjata baru untuk menambahkan dalam gudang senjata Anda, mungkin Anda bisa mencoba membuat permainan seperti cacing, atau bahkan menggunakan algoritma pada sesuatu yang lain dari sebuah rudal, seperti beberapa nyamuk aneh yang mengikuti karakter Anda.

Saya harap Anda telah menemukan tutorial ini berguna. Terima kasih untuk membaca!

Advertisement
Did you find this post useful?
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.