True Isometrische Projektion mit HTML5-Canvas

Ich bin ein Neuling mit dem HTML5-Canvas und JavaScript, aber gibt es eine einfache Möglichkeit zu haben, Isometrische Projektion in HTML5-Canvas-element?

Ich meine die wahre isometrische Projektion - http://en.wikipedia.org/wiki/Isometric_projection

Dank für alle Antworten ist.

InformationsquelleAutor gma | 2011-07-12

11

Erste, die ich empfehlen würde denken, das Spiel Welt wie ein regulärer X durch Y raster von quadratischen Fliesen. Das macht alles von Kollisionserkennung, Wegfindung, und auch das Rendern viel einfacher.

Rendern der Karte in einer isometrischen Projektion ändern Sie einfach die Projektions-matrix:
```
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... :)
}
```
Das ist spannend, das erste mal, wenn Sie es arbeiten, aber du wirst schnell erkennen, dass es nicht so nützlich für die tatsächliche isometrische Karten... man kann nicht einfach drehen Sie Ihr Bild und sehen, was um die Ecke. Die Transformationen sind nicht so viel zum zeichnen, da Sie für die Konvertierung zwischen Bildschirm-Raum und Welt-Raum.

Bonus: herauszufinden, welche Fliesen die Maus über

Was Sie wollen zu tun ist, konvertieren von "view-Koordinaten" (pixel-offsets von der Leinwand Herkunft) zu "Welt-Koordinaten" (pixel-offsets von der Fliese 0,0 entlang der diagonalen Achsen). Dann teilen Sie einfach die Welt-Koordinaten durch die Kachelbreite und-Höhe, um die "map-Koordinaten".

In der Theorie, alles, was Sie tun müssen, ist ein Projekt, das die "view position" Vektor durch die inverse der Projektions-matrix vor, um die "Welt" - position ist. Ich sage in der Theorie, denn aus irgendeinem Grund die Leinwand nicht bieten eine Möglichkeit der Rückgabe des aktuellen Projektions-matrix. Es ist ein setTransform() Methode, aber keine getTransform(), so ist dieses, wo Sie müssten, um zu Rollen Sie Ihre eigenen 3x3-Transformationsmatrix.

Es ist wirklich nicht schwer, und Sie benötigen diese für die Konvertierung zwischen Welt-und Sicht-Koordinaten beim zeichnen von Objekten.

Hoffe, das hilft.
- Wie könnte ich hinzufügen, dass die Tiefe (z) ? Und zeichnen Sie andere Objekte auf, die isometrische Ansicht.
- Vorausgesetzt, Ihre Welt-Koordinaten sind bereits im 3D-Raum, z.B. x,y,z, die Sie benötigen, multiplizieren Sie die position jedes Objekts von der Projektions-matrix zu konvertieren 2D-Raum. Ich erinnere mich nicht an die genaue matrix, aber es sollte Recht einfach nachschlagen.
InformationsquelleAutor alekop

Axonometrische rendering

Die besten verarbeiten, axonometrische (gemeinhin als Isometrie) rendering ist über eine Projektions-matrix.

Projektion-Objekt wie folgt beschreiben kann alles, was Sie tun müssen, um jede form von axonometrische Projektion

Das Objekt hat 3 Transformationen für die x -, y-und z-Achse mit jeder beschreibt das Ausmaß und die Richtung, in der 2D-Projektion für die x -, y -, z-Koordinaten. Eine Transformation für die Berechnung der Tiefe und Herkunft, ist in der canvas-Pixel (wenn setTransform(1,0,0,1,0,0) oder was auch immer die aktuelle Transformation für die Leinwand ist)

Projekt einen Punkt, rufen Sie die Funktion axoProjMat({x=10,y=10,z=10}) und wird es wieder ein 3D-Punkt mit x,y 2D-Koordinaten des vertex und z die Tiefe (Tiefe Werte positiv, nähert sich die Ansicht (gegenüber perspektivische 3D-Projektion));

  //3d 2d points
  const P3 = (x=0, y=0, z=0) => ({x,y,z});
  const P2 = (x=0, y=0) => ({x, y});
  //projection object
  const axoProjMat = {
      xAxis : P2(1 , 0.5) ,
      yAxis :  P2(-1 , 0.5) ,
      zAxis :  P2(0 , -1) ,
      depth :  P3(0.5,0.5,1) , //projections have z as depth
      origin : P2(), //(0,0) default 2D point
      setProjection(name){
        if(projTypes[name]){
          Object.keys(projTypes[name]).forEach(key => {
            this[key]=projTypes[name][key];
          })
          if(!projTypes[name].depth){
            this.depth = P3(
              this.xAxis.y,
              this.yAxis.y,
              -this.zAxis.y
            );
          }
        }
      },
      project (p, retP = P3()) {
          retP.x = p.x * this.xAxis.x + p.y * this.yAxis.x + p.z * this.zAxis.x + this.origin.x;
          retP.y = p.x * this.xAxis.y + p.y * this.yAxis.y + p.z * this.zAxis.y + this.origin.y;
          retP.z = p.x * this.depth.x + p.y * this.depth.y + p.z * this.depth.z; 
          return retP;
      }
  }

Mit diesem Objekt können Sie die Funktion axoProjMat.setProjection(name) wählen Sie den Projektionstyp.

Unten ist die damit verbundene Projektion Arten, wie skizziert, auf die im wiki Axonometrische Projektionen plus zwei Modifikationen üblicherweise in pixel-Kunst und Spiele (mit dem Präfix Pixel). Verwenden axoProjMat.setProjection(name) wobei name einer der projTypes Namen der Eigenschaft.

const D2R = (ang) => (ang-90) * (Math.PI/180 );
const Ang2Vec = (ang,len = 1) => P2(Math.cos(D2R(ang)) * len,Math.sin(D2R(ang)) * len);
const projTypes = {
  PixelBimetric : {
    xAxis : P2(1 , 0.5) ,
    yAxis :  P2(-1 , 0.5) ,
    zAxis :  P2(0 , -1) ,
    depth :  P3(0.5,0.5,1) , //projections have z as depth      
  },
  PixelTrimetric : {
    xAxis : P2(1 , 0.5) ,
    yAxis :  P2(-0.5 , 1) ,
    zAxis :  P2(0 , -1) ,
    depth :  P3(0.5,1,1) ,
  },
  Isometric : {
    xAxis : Ang2Vec(120) ,
    yAxis : Ang2Vec(-120) ,
    zAxis : Ang2Vec(0) ,
  },
  Bimetric : {
    xAxis : Ang2Vec(116.57) ,
    yAxis : Ang2Vec(-116.57) ,
    zAxis : Ang2Vec(0) ,
  },
  Trimetric : {
    xAxis : Ang2Vec(126.87,2/3) ,
    yAxis : Ang2Vec(-104.04) ,
    zAxis : Ang2Vec(0) ,
  },
  Military : {
    xAxis : Ang2Vec(135) ,
    yAxis : Ang2Vec(-135) ,
    zAxis : Ang2Vec(0) ,
  },
  Cavalier : {
    xAxis : Ang2Vec(135) ,
    yAxis : Ang2Vec(-90) ,
    zAxis : Ang2Vec(0) ,
  },
  TopDown : {
    xAxis : Ang2Vec(180) ,
    yAxis : Ang2Vec(-90) ,
    zAxis : Ang2Vec(0) ,
  }
}

Beispiel Wahrer Isometrische Projektion.

Snippet ist ein einfaches Beispiel mit der Projektion festgelegt Isometric so detailliert auf den wiki-link in den OP ' s Frage und mit den oben genannten Funktionen und Objekte.

JS:

const ctx = canvas.getContext("2d");

//function creates a 3D point (vertex)
function vertex(x, y, z) { return { x, y, z}};
//an array of vertices
const vertices = []; //an array of vertices

//create the 8 vertices that make up a box
const boxSize = 20; //size of the box
const hs = boxSize / 2; //half size shorthand for easier typing

vertices.push(vertex(-hs, -hs, -hs)); //lower top left  index 0
vertices.push(vertex(hs, -hs, -hs)); //lower top right
vertices.push(vertex(hs, hs, -hs)); //lower bottom right
vertices.push(vertex(-hs, hs, -hs)); //lower bottom left
vertices.push(vertex(-hs, -hs, hs)); //upper top left  index 4
vertices.push(vertex(hs, -hs, hs)); //upper top right
vertices.push(vertex(hs, hs, hs)); //upper bottom right
vertices.push(vertex(-hs, hs, hs)); //upper  bottom left index 7



const colours = {
  dark: "#040",
  shade: "#360",
  light: "#ad0",
  bright: "#ee0",
}

function createPoly(indexes, colour) {
  return {
    indexes,
    colour
  }
}
const polygons = [];

polygons.push(createPoly([1, 2, 6, 5], colours.shade)); //right face
polygons.push(createPoly([2, 3, 7, 6], colours.light)); //front face
polygons.push(createPoly([4, 5, 6, 7], colours.bright)); //top face



//From here in I use P2,P3 to create 2D and 3D points
const P3 = (x = 0, y = 0, z = 0) => ({x,y,z});
const P2 = (x = 0, y = 0) => ({ x, y});
const D2R = (ang) => (ang-90) * (Math.PI/180 );
const Ang2Vec = (ang,len = 1) => P2(Math.cos(D2R(ang)) * len,Math.sin(D2R(ang)) * len);
const projTypes = {
  PixelBimetric : {
    xAxis : P2(1 , 0.5) ,
    yAxis :  P2(-1 , 0.5) ,
    zAxis :  P2(0 , -1) ,
    depth :  P3(0.5,0.5,1) , //projections have z as depth      
  },
  PixelTrimetric : {
    xAxis : P2(1 , 0.5) ,
    yAxis :  P2(-0.5 , 1) ,
    zAxis :  P2(0 , -1) ,
    depth :  P3(0.5,1,1) ,
  },
  Isometric : {
    xAxis : Ang2Vec(120) ,
    yAxis : Ang2Vec(-120) ,
    zAxis : Ang2Vec(0) ,
  },
  Bimetric : {
    xAxis : Ang2Vec(116.57) ,
    yAxis : Ang2Vec(-116.57) ,
    zAxis : Ang2Vec(0) ,
  },
  Trimetric : {
    xAxis : Ang2Vec(126.87,2/3) ,
    yAxis : Ang2Vec(-104.04) ,
    zAxis : Ang2Vec(0) ,
  },
  Military : {
    xAxis : Ang2Vec(135) ,
    yAxis : Ang2Vec(-135) ,
    zAxis : Ang2Vec(0) ,
  },
  Cavalier : {
    xAxis : Ang2Vec(135) ,
    yAxis : Ang2Vec(-90) ,
    zAxis : Ang2Vec(0) ,
  },
  TopDown : {
    xAxis : Ang2Vec(180) ,
    yAxis : Ang2Vec(-90) ,
    zAxis : Ang2Vec(0) ,
  }
}

const axoProjMat = {
  xAxis : P2(1 , 0.5) ,
  yAxis :  P2(-1 , 0.5) ,
  zAxis :  P2(0 , -1) ,
  depth :  P3(0.5,0.5,1) , //projections have z as depth
  origin : P2(150,65), //(0,0) default 2D point
  setProjection(name){
    if(projTypes[name]){
      Object.keys(projTypes[name]).forEach(key => {
        this[key]=projTypes[name][key];
      })
      if(!projTypes[name].depth){
        this.depth = P3(
          this.xAxis.y,
          this.yAxis.y,
          -this.zAxis.y
        );
      }
    }
  },
  project (p, retP = P3()) {
      retP.x = p.x * this.xAxis.x + p.y * this.yAxis.x + p.z * this.zAxis.x + this.origin.x;
      retP.y = p.x * this.xAxis.y + p.y * this.yAxis.y + p.z * this.zAxis.y + this.origin.y;
      retP.z = p.x * this.depth.x + p.y * this.depth.y + p.z * this.depth.z; 
      return retP;
  }
}
axoProjMat.setProjection("Isometric");

var x,y,z;
for(z = 0; z < 4; z++){
   const hz = z/2;
   for(y = hz; y < 4-hz; y++){
       for(x = hz; x < 4-hz; x++){
          //move the box
          const translated = vertices.map(vert => {
               return P3(
                   vert.x + x * boxSize, 
                   vert.y + y * boxSize, 
                   vert.z + z * boxSize, 
               );
          });
                   
          //create a new array of 2D projected verts
          const projVerts = translated.map(vert => axoProjMat.project(vert));
          //and render
          polygons.forEach(poly => {
            ctx.fillStyle = poly.colour;
            ctx.strokeStyle = poly.colour;
            ctx.lineWidth = 1;
            ctx.beginPath();
            poly.indexes.forEach(index => ctx.lineTo(projVerts[index].x , projVerts[index].y));
            ctx.stroke();
            ctx.fill();
            
          });
      }
   }
}

CSS:

canvas {
  border: 2px solid black;
}
body { font-family: arial; }

HTML:

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

InformationsquelleAutor Blindman67

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.