Saya telah menulis sebuah game RTS (sebuah demo untuk mesin permainan sejenis, sebenarnya) di mana interaksi dasar pengguna dengan permainan adalah untuk memilih sekelompok tentara dan kemudian klik kanan pada peta untuk memindahkan mereka ke lokasi yang ditentukan. Ini dalam JavaScript dan Anda bisa bermain dengannya di sini ( kode ).
Mengabaikan masalah bagaimana tentara bergerak dari lokasi mereka saat ini ke tujuan mereka, pertanyaan saya adalah tentang menentukan apa tujuan sebenarnya mereka. Inilah yang saya coba sejauh ini:
- Percobaan 1: Beritahu semua prajurit yang dipilih untuk bergerak ke koordinat yang diklik mouse. Ini memiliki perilaku aneh bahwa semua prajurit kemudian akan mengelompok di sekitar target secara tidak wajar.
- Percobaan 2: Temukan koordinat rata-rata dari semua tentara yang dipilih, kemudian temukan offset dari titik pusat untuk setiap prajurit, dan akhirnya terjemahkan bahwa offset di sekitar koordinat mouse. Ini berfungsi dengan baik kecuali bahwa jika prajurit yang Anda pilih berjauhan mereka tidak akan mendekati target.
- Percobaan 3: Bangun kisi-kisi di sekitar koordinat mouse dan tempatkan setiap prajurit yang dipilih ke dalam sel kisi. Jika setiap prajurit berhasil masuk ke sel yang ditugaskan kepada mereka, ini akan berhasil. Namun, tentara ditugaskan ke sel-sel jaringan dalam urutan prajurit dilahirkan, jadi kadang-kadang mereka bertabrakan (yaitu semua tentara di sisi kanan akan mencoba untuk pergi ke sisi kiri) yang terlihat tidak wajar.
- Usaha 4: Gunakan kisi-kisi seperti sebelumnya, tetapi pertama-tama sortir tentara berdasarkan lokasi sehingga mereka berbaris dengan bijaksana, yaitu jika Anda mengklik di bawah grup, maka prajurit di bagian bawah grup akan berakhir di bagian bawah kisi ketika mereka mencapai tujuan mereka. Ini bekerja cukup baik tetapi kadang-kadang ada gangguan dan saya tidak yakin mengapa.
Berikut adalah fungsi yang menentukan koordinat tujuan:
function moveSelectedSoldiersToMouse() {
var w = 0, h = 0, selected = [];
// Get information about the selected soldiers.
myTeam.soldiers.forEach(function(soldier) {
if (soldier.selected) {
selected.push(soldier);
w += soldier.width;
h += soldier.height;
}
});
var numSelected = selected.length, k = -1;
if (!numSelected) return;
// Build a grid of evenly spaced soldiers.
var sqrt = Math.sqrt(numSelected),
rows = Math.ceil(sqrt),
cols = Math.ceil(sqrt),
x = Mouse.Coords.worldX(),
y = Mouse.Coords.worldY(),
iw = Math.ceil(w / numSelected), // grid cell width
ih = Math.ceil(h / numSelected), // grid cell height
wg = iw*1.2, // width of gap between cells
hg = ih*1.2; // height of gap between cells
if ((rows-1)*cols >= numSelected) rows--;
w = iw * cols + wg * (cols-1); // total width of group
h = ih * rows + hg * (rows-1); // total height of group
// Sort by location to avoid soldiers getting in each others' way.
selected.sort(function(a, b) {
// Round to 10's digit; specific locations can be off by a pixel or so
var ax = a.x.round(-1), ay = a.y.round(-1), bx = b.x.round(-1), by = b.y.round(-1);
return ay - by || ax - bx;
});
// Place the grid over the mouse and send soldiers there.
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
var s = selected[++k];
if (s) {
var mx = x + j * (iw+wg) - w * 0.5 + s.width * 0.5,
my = y + i * (ih+hg) - h * 0.5 + s.height * 0.5;
// Finally, move to the end destination coordinates
s.moveTo(mx, my);
}
}
}
}
Anda dapat menempelkan fungsi ini ke konsol JavaScript browser Anda saat melihat demo dan mengacaukannya untuk mengubah perilaku tentara.
Pertanyaan saya adalah: adakah cara yang lebih baik untuk menentukan lokasi target untuk setiap prajurit untuk pindah?