Libre circulation dans un jeu isométrique à base de tuiles

Existe-t-il un moyen facile et raisonnable de mettre en œuvre la libre circulation dans un jeu isométrique à base de tuiles? Cela signifie que le joueur ne sauterait pas instantanément d'une tuile à l'autre ou ne serait pas "accroché" à la grille (par exemple, si le mouvement entre les tuiles était animé mais que vous ne pouviez rien faire avant la fin de l'animation). Je suis vraiment un débutant avec tout ce qui concerne la programmation de jeux, mais avec l'aide de ce site et d'autres ressources, il était assez facile de faire les choses de base, mais je n'ai pas pu trouver de ressources utiles pour ce problème particulier .

Actuellement, j'ai improvisé quelque chose proche de cela: http://jsfiddle.net/KwW5b/4/ (mouvement WASD). L'idée du mouvement était d'utiliser la carte de la souris pour détecter le moment où le joueur s'est déplacé vers une autre tuile, puis inverser les décalages, et pour la plupart cela fonctionne correctement (chaque coin fait déplacer le joueur au mauvais endroit: voir http: //www.youtube.com/watch?v=0xr15IaOhrI , ce qui est probablement dû au fait que je n'ai pas pu faire fonctionner correctement la carte complète de la souris), mais je ne me fais aucune illusion qu'elle est même proche d'une bonne solution. Et de toute façon, c'est surtout juste pour montrer quel genre de chose j'aimerais implémenter.

html5 movement isometric html-canvas xtr486
la source

Ce code a fière allure, quel est le problème exactement? Vous êtes assez modeste (dans le bon sens) votre code semble plutôt bon, quelle fonctionnalité manque dans la démo?

AturSams

Ce que je voulais dire par les problèmes de coin était ce genre de comportement: youtube.com/watch?v=0xr15IaOhrI . Je n'ai pas été en mesure de trouver une autre solution que de faire beaucoup de vérifications if pour les décalages problématiques, et même dans certains cas spéciaux, le joueur se déforme au mauvais endroit. Mais comme je l'ai dit, je me demandais comment ce type de mouvement est généralement mis en œuvre car je n'ai vu la méthode que j'ai trouvée utilisée ailleurs.

xtr486

Réponses:

Tout d'abord, je vous suggère de changer de direction: W - haut-gauche S - bas-droit A - bas-gauche D - haut-droit

en plus intuitif: W - haut S - bas A - gauche D - droit

En ce qui concerne votre préoccupation, je vous suggère de créer deux fonctions, l'une traduisant les coordonnées des tuiles isométriques en coordonnées de grille, et l'autre dans l'autre sens. De cette façon, vous pourriez simplement séparer MVC et cela vous faciliterait la vie lors du calcul de la tuile active: entrez la description de l'image ici

Markus von Broady
la source

Votre réponse semble vraiment prometteuse, mais j'avoue qu'une bonne partie de celle-ci me dépasse. Cependant, je vais essayer de continuer à digérer votre solution au cours des prochains jours. Est-ce quelque part proche de ce que vous recherchiez? jsfiddle.net/Sd4ZP/18 Il a quelques erreurs logiques (désactivées par un etc.) et autres, mais pour autant que je sache, les cartes top-down et isométriques ont le même mouvement. Ce que je n'ai même pas compris, c'est comment traduire le décalage de la tuile de haut en bas en isométrique ..

xtr486

Ça a l'air bien jusqu'ici! J'examinerai cela le soir. La chose est d'appliquer des transformations dans la méthode de dessin de tuile isométrique dans la fonction de traduction positionToUser (), et de l'inverser dans la méthode positionFromUser ().

Markus von Broady

Je vois le problème: vous dessinez une vue izométrique en mettant des images au lieu d'utiliser l'API de dessin sur toile. C'est tout à fait logique, car au final vos carreaux izo seront bien plus qu'une couleur unie. Cependant, pour le débogage, vous devez également tracer des lignes entre les tuiles, ce qui vous faciliterait la vie. Quoi qu'il en soit, j'ai bifurqué votre code et créé la fonction de traduction positionToUser (x, y). Testez-le en centrant un carré noir sur une tuile (car en vue iso, il est toujours centré) et en déplaçant la souris sur la toile inférieure - un point traduit sera affiché sur la toile izo

Markus von Broady

Merci! J'ai réussi à déduire (enfin, en quelque sorte) quelque chose moi-même, à savoir le décalage isométrique dans la fonction drawIsometric. Maintenant, cela ressemble à ceci: jsfiddle.net/P2eKF/4 , qui semble faire exactement ce que j'ai demandé dans la question d'origine, donc je vais marquer votre réponse. :)

xtr486

Je suis content que tu l'aies fait! J'aime la façon dont les combinaisons de touches WA, WD, AS, SD alignent le mouvement sur les axes isométriques au lieu des angles de 45 degrés. Bon travail.

Markus von Broady

Si je comprends bien, vous voulez que le joueur déplace la tuile en tuile mais sans sauter. Vous pouvez:

1- Commencez avec la tuile t0 et le décalage 0

2- Lorsque le joueur passe à la tuile t1, définissez le décalage = - (t1 - t0)

3- Dans la mise à jour du lecteur, si le décalage n'est pas 0, décrémentez en utilisant le temps de mise à jour et la vitesse du lecteur.

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

4- Vous pouvez utiliser offset == 0 vérifier pour savoir quand le joueur est sur la tuile.

Avec cela, vous obtenez un joueur qui se déplace librement sur la carte mais reste fidèle aux tuiles.

Zhen
la source