Libera circolazione in un gioco isometrico a tessere

Esiste un modo semplice e ragionevole per implementare la libera circolazione in un gioco isometrico basato su tessere? Ciò significa che il giocatore non salterebbe istantaneamente da una tessera all'altra o non verrebbe "agganciato" alla griglia (ad esempio, se il movimento tra le tessere fosse animato ma si sarebbe bloccato dal fare qualsiasi cosa prima che l'animazione finisse). Sono un principiante con qualsiasi cosa legata alla programmazione di gioco, ma con l'aiuto di questo sito e di alcune altre risorse è stato abbastanza facile fare le cose di base, ma non sono stato in grado di trovare risorse utili per questo particolare problema .

Attualmente ho improvvisato qualcosa di simile a questo: http://jsfiddle.net/KwW5b/4/ (movimento WASD). L'idea per il movimento era quella di utilizzare la mappa del mouse per rilevare quando il giocatore si è spostato su una tessera diversa e quindi capovolgere gli offset, e per la maggior parte funziona correttamente (ogni angolo fa spostare il giocatore in una posizione sbagliata: vedi http: //www.youtube.com/watch?v=0xr15IaOhrI , probabilmente perché non sono riuscito a far funzionare correttamente la mappa completa del mouse), ma non ho l'illusione che sia persino vicino a una soluzione buona / sana. E comunque, è principalmente solo per dimostrare che tipo di cosa mi piacerebbe implementare.

— xtr486
fonte

Quel codice ha un bell'aspetto, qual è esattamente il problema? Sei piuttosto modesto (in senso buono) il tuo codice sembra piuttosto buono, quale caratteristica manca nella demo?

— AturSams,

Ciò che intendevo per problemi all'angolo era questo tipo di comportamento: youtube.com/watch?v=0xr15IaOhrI . Non sono stato in grado di trovare un'altra soluzione se non quella di fare molti controlli if per gli offset problematici, e anche allora ci sono alcuni casi speciali in cui il giocatore si sposta in una posizione sbagliata. Ma come ho detto, mi chiedevo come questo tipo di movimento fosse di solito implementato poiché non ho visto il metodo che mi è venuto in mente usato altrove.

— xtr486,

Risposte:

Prima di tutto ti suggerisco di cambiare direzione da: W - su-sinistra S - giù-destra A - giù-sinistra D - alto-destra

in più intuitivo: W - su S - giù A - sinistra D - destra

Per quanto riguarda la tua preoccupazione, ti suggerisco di creare due funzioni, una che traduce le coordinate isometriche delle tessere in coordinate della griglia e l'altra il contrario. In questo modo potresti semplicemente separare MVC e ti semplificherebbe la vita durante il calcolo del riquadro attivo: inserisci qui la descrizione dell'immagine

— Markus von Broady
fonte

La tua risposta sembra davvero promettente, ma ammetto che quasi mi passa per la testa. Tuttavia, proverò a continuare a digerire la tua soluzione nei prossimi giorni. Questo è vicino a quello che stavi cercando? jsfiddle.net/Sd4ZP/18 Ha alcuni errori logici (disattivati da uno ecc.) e simili, ma per quanto ne so le mappe top-down e isometriche hanno lo stesso movimento. Quello che non ho nemmeno ottenuto è come tradurre l'offset della piastrella dall'alto verso il basso in isometrico ..

— xtr486

Finora sembra tutto a posto! Lo esaminerò la sera. Il punto è applicare le trasformazioni nel metodo di disegno di piastrelle isometriche nella funzione di traduzione positionToUser () e invertirla nel metodo positionFromUser ().

— Markus von Broady,

Vedo il problema: stai disegnando una vista izometrica inserendo immagini invece di utilizzare l'API di disegno su tela. È abbastanza logico, poiché alla fine le tue tessere izo saranno molto più di un colore solido. Tuttavia, per il debug dovresti anche tracciare delle linee tra le tessere, questo renderebbe la tua vita molto più semplice. Comunque, ho modificato il tuo codice e ho creato la funzione di traduzione positionToUser (x, y). Provalo centrando il quadrato nero su una piastrella (perché nella vista iso è sempre centrato) e spostando il mouse sulla tela inferiore: un punto tradotto verrà mostrato sulla tela di iizo

— Markus von Broady

Grazie! In realtà sono riuscito a dedurre (beh, una specie di) qualcosa da solo, vale a dire l'offset isometrico nella funzione drawIsometric. Ora sembra così: jsfiddle.net/P2eKF/4 , che sembra fare esattamente ciò che ho posto nella domanda originale, quindi segnerò la tua risposta. :)

— xtr486,

Sono contento che tu l'abbia fatto! Mi piace il modo in cui le kombinazioni dei tasti WA, WD, AS, SD allineano il movimento agli assi isometrici anziché agli angoli di 45 gradi. Buon lavoro.

— Markus von Broady,

Se ho capito, vuoi che il giocatore muova la tessera su tessera ma senza saltare. Puoi:

1- Inizia con la piastrella t0 e l'offset 0

2- Quando il giocatore si sposta sulla tessera t1 imposta offset = - (t1 - t0)

3- Nell'aggiornamento del giocatore, se l'offset non è 0, decrementa usando il tempo di aggiornamento e la velocità del giocatore.

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 può usare offset == 0 check per sapere quando il giocatore è sulla tessera.

Con questo ottieni un giocatore che si muove liberamente sulla mappa ma si attacca alle tessere.

— Zhen
fonte