Gerakan bebas dalam gim isometrik berbasis ubin

Apakah ada cara mudah yang masuk akal untuk menerapkan gerakan bebas dalam game isometrik berbasis ubin? Berarti pemain tidak akan langsung melompat dari satu ubin ke ubin lain atau tidak "bentak" ke kotak (misalnya, jika gerakan di antara ubin diaktifkan tetapi Anda akan dikunci dari melakukan apa pun sebelum animasi selesai). Saya benar-benar pemula dengan segala sesuatu yang berkaitan dengan pemrograman game, tetapi dengan bantuan situs ini dan beberapa sumber daya lainnya, cukup mudah untuk melakukan hal-hal dasar, tetapi saya belum dapat menemukan sumber daya yang berguna untuk masalah khusus ini. .

Saat ini saya telah mengimprovisasi sesuatu yang dekat dengan ini: http://jsfiddle.net/KwW5b/4/ (gerakan WASD). Gagasan untuk gerakan ini adalah menggunakan peta mouse untuk mendeteksi ketika pemain telah pindah ke ubin yang berbeda dan kemudian membalikkan offset, dan sebagian besar itu berfungsi dengan benar (setiap sudut membuat pemain pindah ke lokasi yang salah: lihat http: //www.youtube.com/watch?v=0xr15IaOhrI , yang mungkin karena saya tidak bisa mendapatkan peta lengkap mouse berfungsi dengan baik), tapi saya tidak punya ilusi bahwa itu bahkan dekat dengan solusi yang baik / waras. Lagi pula, sebagian besar hanya untuk menunjukkan hal seperti apa yang ingin saya terapkan.

html5 movement isometric html-canvas xtr486
sumber

Kode itu terlihat hebat, apa masalahnya sebenarnya? Anda cukup sederhana (dengan cara yang baik) kode Anda tampak bagus, fitur apa yang tidak ada dalam demo?

AturSams

Yang saya maksud dengan masalah sudut adalah perilaku semacam ini: youtube.com/watch?v=0xr15IaOhrI . Saya belum bisa menemukan solusi lain selain membuat banyak jika-untuk memeriksa offset bermasalah, dan bahkan kemudian ada beberapa kasus khusus di mana pemain bengkok ke lokasi yang salah. Tapi seperti yang saya katakan, saya bertanya-tanya bagaimana gerakan seperti ini biasanya diterapkan karena saya belum melihat metode yang saya gunakan di tempat lain.

xtr486

Jawaban:

Pertama-tama saya sarankan Anda mengubah arah dari: W - atas-kiri S - kanan bawah A - kiri bawah D - kanan atas

menjadi lebih intuitif: W - up S - down A - kiri D - kanan

Adapun keprihatinan Anda, saya sarankan Anda membuat dua fungsi, satu menerjemahkan koordinat ubin isometrik ke dalam koordinat kotak, dan yang kedua sebaliknya. Dengan begitu Anda bisa memisahkan MVC dan itu akan membuat hidup Anda lebih mudah saat menghitung ubin aktif: masukkan deskripsi gambar di sini

Markus von Broady
sumber

Jawaban Anda terlihat sangat menjanjikan, tetapi saya akui cukup banyak di antara saya. Namun, saya akan mencoba untuk terus mencerna solusi Anda selama beberapa hari ke depan. Apakah ini mendekati apa yang Anda kejar? jsfiddle.net/Sd4ZP/18 Memang memiliki beberapa kesalahan logika (off oleh satu dll) dan semacamnya, tapi sejauh yang saya tahu peta top-down dan isometrik memiliki gerakan yang sama. Apa yang saya bahkan belum sempat sekitar adalah bagaimana menerjemahkan ubin offset dari atas ke bawah ke isometrik ..

xtr486

Sejauh ini terlihat baik-baik saja! Saya akan memeriksanya di malam hari. Masalahnya adalah untuk menerapkan transformasi dalam metode menggambar ubin isometrik menjadi fungsi positionToUser () menerjemahkan, dan membalikkannya dalam metode positionFromUser ().

Markus von Broady

Saya melihat masalah: Anda menggambar tampilan izometrik dengan meletakkan gambar alih-alih menggunakan kanvas menggambar API. Ini cukup logis, karena pada akhirnya ubin izo Anda akan lebih dari warna yang solid. Namun, untuk debugging Anda juga harus menggambar garis di antara ubin, yang akan membuat hidup Anda lebih mudah. Pokoknya, saya bercabang kode Anda dan menciptakan fungsi menerjemahkan positionToUser (x, y). Uji dengan memusatkan kotak hitam di atas ubin (karena dalam tampilan iso itu selalu terpusat), dan menggerakkan mouse di atas kanvas bawah - titik yang diterjemahkan akan ditampilkan pada kanvas izo: jsfiddle.net/tZTXS/1

Markus von Broady

Terima kasih! Saya sebenarnya berhasil menyimpulkan (well, semacam) sesuatu sendiri, yaitu offset isometrik pada fungsi drawIsometrik. Sekarang terlihat seperti ini: jsfiddle.net/P2eKF/4 , yang sepertinya melakukan apa yang saya tanyakan dalam pertanyaan awal, jadi saya akan menandai jawaban Anda. :)

xtr486

Saya senang Anda melakukannya! Saya suka bagaimana kombinasi kunci WA, WD, AS, SD menyelaraskan gerakan ke sumbu isometrik alih-alih sudut 45 derajat. Kerja bagus.

Markus von Broady

Jika saya mengerti, Anda ingin pemain memindahkan ubin ke ubin tetapi tanpa melompat. Kamu bisa:

1- Mulai dengan ubin t0 dan offset 0

2- Saat pemain pindah ke ubin t1 set offset = - (t1 - t0)

3- Dalam pembaruan pemain, jika offset bukan 0, penurunan menggunakan waktu pembaruan dan kecepatan pemain.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Yo dapat menggunakan offset == 0 periksa untuk mengetahui kapan pemain ada di ubin.

Dengan ini Anda mendapatkan pemain yang bergerak bebas di peta tetapi tetap berpegang pada ubin.

Zhen
sumber