Mouvement fluide dans un jeu à base de tuiles

Comment pouvons-nous faire en sorte que notre personnage se déplace en douceur sur les tuiles? Il déplace carreau par carreau, mais cela ne semble pas professionnel. De plus, lorsque vous maintenez les touches fléchées enfoncées, il zippe sur l'écran. Comment pouvons-nous empêcher que cela se produise?

Un mouvement fluide peut être réalisé de plusieurs façons. Et cela dépend vraiment du type de mouvement que vous souhaitez autoriser.

• Déplacement toujours limité aux tuiles. Ce type est le plus simple pour faire des choses comme la détection de collision et d'autres contrôles de mouvement. Pour ce type de mouvement, vous interpolerez simplement la position au fil du temps lors de la transition entre les tuiles. Cela peut être aussi simple que d'ajouter quelque chose comme ce qui suit à la boucle de mise à jour.

Pseudo code:

 if(GetDistance(position, targetposition) > minDistance) {
     position = MoveTowards(position, targetposition, deltatime);
 }

Où MoveTowardsprend simplement la position actuelle et ajoute une partie de la distance entre elle et la position cible.

• Le mouvement n'est pas limité aux tuiles. Cela devient beaucoup plus délicat à mettre en œuvre. Essentiellement avec cette méthode, vous stockez simplement la position et la mettez à jour via la vélocité. Autrement dit, changement de position au fil du temps.

Maintenir les touches fléchées pour déplacer les personnages peut également être implémenté de différentes manières. Ce que vous faites est probablement quelque chose comme:

if(keydown(left))
   tilePosition.X--;

Cela ferait en effet glisser le personnage sur l'écran. Puisque vous mettriez à jour la position plusieurs fois par seconde. Une meilleure façon de mettre en œuvre ce serait d'ajouter un délai. Quelque chose comme

if(keydown(left)) {
    if(leftKeyHeldTimer > movementDelay) {
        tilePosition.X--;
        leftKeyHeldTimer = 0;
    } else {
        leftKeyHeldTimer+= deltaTime;
    }
}

Cela ajoutera une minuterie de retard et ne mettra à jour la position de la tuile que lorsque la movementDelayvaleur aura été atteinte.

Je peux identifier deux problèmes. Le premier concerne le mouvement fluide et le second est lié à la fermeture éclair du personnage.

Pour créer un mouvement fluide, vous pouvez utiliser une technique appelée interpolation linéaire ou (LERP) pour lisser le mouvement. Fondamentalement, comment cela fonctionne entre votre point de départ et votre point d'arrivée, vous calculez un ensemble de distances de plus en plus petites pour émuler un mouvement fluide et ralentir lorsque le point final est presque atteint.

L'exemple le plus simple de cette fonction serait:

//point1 is the current position, will be starting position on first call
//point2 is the target position
//epsilon is the % of the distance between current and target you want
//to cover per game physics loop (a fixed realworld time based loop).
//The smaller the % the "smoother" the motion.

float lerp(float point1, float point2, float epsilon)
{
    return point1 + epsilon * (point2 - point1);
}

À mesure que le personnage se rapproche du point 2, il ralentira progressivement. Notez bien qu'ils ne toucheront jamais le point 2 mais se rapprocheront infiniment. Vous devrez corriger cela et si le joueur est à moins d'une distance infiniment petite du point 2, nous pouvons considérer que le joueur est au point 2.

Le deuxième problème que vous avez mentionné est lié au fait que votre personnage vole hors écran. Ceci est le résultat de la lecture de l'entrée à chaque rafraîchissement de la boucle de jeu combinée au mouvement instantané entre les tuiles.

Idéalement pour résoudre ce problème, dans votre code, vous devez décider

1. Combien de temps réel il faudrait au personnage pour passer du point 1 au point 2.
2. Réglez votre Lerp pour qu'il fonctionne entre le point 1 et deux pendant cette durée
3. Relisez l'entrée une fois le point 2 atteint pour décider où aller