Véritable projection isométrique avec toile HTML5

Premièrement, je recommanderais de penser au monde de jeu comme une grille X par Y de carreaux carrés. Cela rend tout de la détection de collision, de la parcelle et de rendre même beaucoup plus facile.

Pour rendre la carte dans une saillie isométrique modifier simplement la matrice de projection: P>

var ctx = canvas.getContext('2d');

function render(ctx) {
    var dx = 0, dy = 0;
    ctx.save();

    // change projection to isometric view
    ctx.translate(view.x, view.y);
    ctx.scale(1, 0.5);
    ctx.rotate(45 * Math.PI /180);

    for (var y = 0; i < 10; y++) {
        for (var x = 0; x < 10; x++) {
            ctx.strokeRect(dx, dy, 40, 40);
            dx += 40;
        }
        dx = 0;
        dy += 40;
    }

    ctx.restore(); // back to orthogonal projection

    // Now, figure out which tile is under the mouse cursor... :)
}

Rendu axonométrique

Le meilleur moyen de manipuler le rendu axonométrique (communément appelé isométrique) est via une matrice de projection. p>

Un objet de projection comme suit peut décrire toute forme de projection axonométrique P>

L'objet a 3 transformés pour l'axe X, Y et Z avec chacun décrivant la balance et la direction dans la projection 2D pour les coordonnées X, Y, Z. Une transformation pour le calcul de la profondeur et une origine dans les pixels en toile (si setTransform (1,0,0,1,0,0) ou quelle que soit la transformation de courant pour la toile, est) p>

pour projeter un Point Appelez la fonction axoprojmat ({x = 10, y = 10, z = 10}) code> et il retournera un point 3D avec x, y étant des coordonnées 2D du sommet et de z étant la profondeur ( Avec des valeurs de profondeur positives approchant de la vue (en face de la projection de perspective 3D)); p> xxx pré>

avec l'objet ci-dessus, vous pouvez utiliser la fonction axoprojmat.setprojection (nom) Pour sélectionner le type de projection. p>

ci-dessous est les types de projection associés, comme indiqué sur le wiki Projections axonométriques plus deux modifications couramment utilisées dans les pixels Art et les jeux (préfixés avec pixel). Utiliser axoprojmat.setprojection (nom) code> où nom est l'un des noms de propriété code> projtypes code>. P> xxx pré>

exemple de véritable isométrique Projection. H3>

Le snippet est un exemple simple avec la projection définie sur isométrique code> comme détaillé sur le lien wiki dans la question de l'OP et à l'aide des fonctions et des objets ci-dessus. P>

p>

True Isometric projection. With x at 120deg, and y at -120deg from up.<br>
<canvas id="canvas"></canvas>

Je crée quelque chose cela pour mon application isométrique xxx