Meilleure technique pour dessiner des carreaux isométriques

Je pense à créer un jeu isométrique simple avec HTML5 Canvas et à me demander quel est le moyen le plus rapide de rendre les tuiles.

Étant donné que les carreaux sont en forme de diamant, mais drawImage dessine des rectangles, je dois omettre les coins (les parties noires ci-dessous):

Je pense que cela me laisse trois options:

1. Utilisez des objets Image avec des canaux alpha (.png). Je crains que cela ne tue les performances.
2. Utilisez un tracé de détourage. Si le rendu est optimisé, cela pourrait être assez rapide.
3. Prérendre les carreaux carrés, comme ceci:

J'aurais le carré noir comme une tuile réelle en mémoire, et je dessinerais une telle tuile pour le champ vert, et tous les champs à côté, ou au-dessus et en dessous. Les champs diagonaux (bleus) seraient constitués des coins des tuiles rectangulaires. Cela éviterait l'écrêtage ou les canaux alpha, mais je devrais pré-rendre toutes les combinaisons possibles de tuiles, et cela semble exagéré.

Quelle est la meilleure façon ou la plus rapide de faire des carreaux isométriques? À quoi servent d'autres jeux, comme FarmVille?

L'utilisation de la transparence (canal alpha) est la voie à suivre, je recommande.

Cela signifie que lorsque vous voulez un objet vertical sur la tuile comme ceci:

Ensuite, vous pouvez le faire facilement si votre moteur de rendu dessine les tuiles dos à face, c'est-à-dire l'algorithme des peintres.

CRÉDIT D'IMAGE: jeu de carreaux de Reiner.

Bien que la méthode décrite par sws et MarkR soit également ce que je préfère, je voudrais présenter une approche alternative.

Une option hack pour créer un aspect isométrique avec un minimum d'effort consiste à utiliser des tuiles orthogonales et à utiliser context.transform pour définir une matrice de projection qui donne à la carte un aspect isométrique (ou une combinaison de context.rotate et context.scale lorsque vous ne le faites pas ''). t savoir comment fonctionnent les matrices de projection).

Voir la spécification des méthodes de transformation du canevas pour plus de détails.

Image en mosaïque:

Code de dessin:

    for (var x = 0; x < 5; x++) {
        for (var y = 0; y < 5; y++) {
            ctx.drawImage(img, x * img.width, y * img.height);
        }
    }

Résultat avant l'application de la matrice:

Même code avec la même image de tuile après avoir appliqué cette matrice de transformation:

    ctx.transform(  1,   0.5,
                   -1,   0.5,
                  160,   0    );

Avec la grille en pointillés supprimée de l'image de la tuile et changé le décalage de la tuile dans le code de dessin pour img.width - 1et img.height - 1pour éliminer les lacunes causées par la transformation. Soudain, la tuile semble à moitié aussi moche:

Le principal inconvénient de cette méthode est que lorsque vous concevez vos carreaux dans un éditeur graphique, ils ne seront pas vraiment ce que vous voyez est ce que vous obtenez. Vous rencontrerez également des problèmes lorsque vous souhaitez dessiner des objets qui ne sont pas sur le sol mais debout. Pour ceux-ci, vous pouvez désactiver la matrice de transformation avant de les dessiner, mais vous devrez ensuite calculer la position vous-même. Vous pouvez utiliser ces formules pour cela:

var xScreen = xWorld * 1   + yWorld * -1  + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;  

(notez comment les nombres de la matrice de transformation réapparaissent dans ces formules - vous effectuez vous-même la multiplication de la matrice ici).

Alors pourquoi devrais-je faire ça?

Cette méthode est bonne lorsque vous:

1. vous n'avez pas l'expérience de la conception de carreaux isométriques, mais vous en avez de orthogonaux
2. Je ne veux pas passer beaucoup de temps à développer un moteur graphique isométrique, ce qui est un peu plus difficile qu'un moteur orthogonal.

Une autre caractéristique intéressante est que lorsque vous connaissez votre chemin dans le calcul de la matrice, vous pouvez modifier la matrice de projection entre les images pour zoomer, incliner et faire pivoter la carte en temps réel pour de beaux effets faux-3d (essayez de le faire avec des tuiles isométriques) .

Mais lorsque vous savez comment manipuler les carreaux isométriques, à la fois artistiquement et techniquement, et que vous n'avez pas besoin de tromperie à fausse perspective, je vous suggère plutôt d'aller avec des carreaux en forme de diamant avec transparence.

1. Vous utilisez context.drawImage pour copier des données de pixels d'une source (image ou canevas hors écran) vers une autre (canevas hors écran ou à l'écran), qui gère l'alpha gracieusement hors de la boîte. Canvas est accéléré par le matériel, donc les tests vous permettront de déterminer s'il existe une différence perceptible dans les vitesses de rendu par rapport aux pixels alpha par rapport aux pixels opaques.

2. L'écrêtage vous obligera à pousser / éclater l'état du contexte lors de la définition d'un chemin d'écrêtage une fois par tuile, ce qui pourrait être une opération coûteuse compte tenu de l'overdraw isométrique.

3. Comme vous le dites, les tuiles pré-rendues nécessiteraient de dessiner un nombre immense de tuiles «connecteurs», ce qui peut ou non être faisable. (Je penche davantage vers «peut-être pas».)

Une quatrième solution consisterait à adopter un «bloc» de tuiles pré-rendu (PRC), généré une fois pour des toiles hors écran, puis à recouvrir l'écran avec les PRC une fois par image. Il y aurait encore du surplomb, mais construire le PRC une fois et le rendre avec un décalage déterminé par la position du personnage du joueur (ou de la caméra de vue) par rapport au PRC devrait être une opération relativement simple. Cela vous permettrait de combiner le rendu avec l'option # 1, qui est l'OMI la meilleure option si les performances n'étaient pas prises en compte (car c'est la plus simple à implémenter).

Un petit canal alpha ne fait pas beaucoup de mal, mais si vous voulez l'éviter, envisagez d'utiliser deux tuiles quart, cela vous donne également de la place pour faire de belles transitions de tuiles sans faire une pléthore d'images différentes, c'est probablement le plus grand avantage: