Share
Wenn Sie ein Spiel gemeinsam für einen Jam oder # 1GAM hacken, ist es Ihnen wahrscheinlich nicht allzu wichtig, es "auf die richtige Art" zu tun. In diesem Artikel werde ich einige Tipps zum Zeichnen und Codieren von pseudoisometrischen Ebenen schnell und einfach veröffentlichen.
Technisch, "isometrisch" bezieht sich auf eine Projektion, bei der der Winkel zwischen den x-, y- und z-Achsen (in Bildschirmabmessungen) 120 ° beträgt. Und das richtig Um zwischen Bildschirmkoordinaten und isometrischen Koordinaten zu konvertieren, verwenden Sie eine Transformationsmatrix.
Aber vergiss das! In diesem Quick Tip werden wir einige Ecken schneiden und ein wenig schummeln.
Schau dir das an. Wir können ein normales 90 ° -Gitter in etwas verwandeln, das mit zwei einfachen Schritten einem isometrischen Gitter nahe genug erscheint.
Beginnen Sie mit einem Gitter wie diesem (ich nenne es ein kartesisches Gitter):
Drehen Sie es um 45 °:
Squash es 50% vertikal:
Erledigt! Dies sollte korrekt als bezeichnet werden dimetrisch nicht isometrisch, wie in diesem wunderbaren Artikel erklärt, aber für die meisten Zwecke ist dies ausreichend.
Dieses Gitter wird nicht viel aus einem Spiel alleine machen. Vielleicht möchten Sie Schachfiguren hinzufügen, vielleicht möchten Sie Monster hinzufügen - was auch immer Sie hinzufügen, Sie müssen wissen, wo Sie es ablegen müssen.
Hier ist das Objekt, das ich verwenden werde (vom The Noun Project):
Wir müssen es nicht drehen oder zerquetschen, damit es in das Raster passt. skaliere es einfach entsprechend:
Wie Sie sehen können, sollte die Basis (in diesem Fall die Füße des Mannes) nur in die Mitte des Rasterfelds gehen. Wir müssen also herausfinden, wo das ist.
Wir könnten Trigonometrie oder eine Transformationsmatrix oder etwas anderes verwenden, aber es gibt einige einfache Algebra, die diese Aufgabe erfüllen.
Messen Sie die halbe Breite und halbe Höhe der Diagonalen (in Bildschirmabmessungen):
Dies ist vergrößert. var tileHalfWidth = 17,5; var tileHalfHeight = 8,75;
Ermitteln Sie die Rasterindizes des Bereichs, an dem Sie interessiert sind:
Wie Sie sehen, benutze ich die Mitte des Gitters als Ursprung. Der Kerl steht im Weltraum (4, 2).
Konvertieren Sie die Rasterraumkoordinaten in Bildschirmkoordinaten. Verwenden Sie dazu die folgende Formel:
screenX = (isoX - isoY) * tileHalfWidth; screenY = (isoX + isoY) * tileHalfHeight;
In unserem Fall erhalten Sie Bildschirmkoordinaten von (35, 52,5).
Dies ist eigentlich die "obere" Ecke des Raumes; Um die Mitte des Raums zu erhalten, müssen Sie hinzufügen tileHalfHeight zum Ergebnis für screenY.
Sie müssen einen Versatz hinzufügen. Ermitteln Sie einfach manuell die Koordinaten des Ursprungsgitters (Mitte) in Bildschirmkoordinaten und fügen Sie sie hinzu (screenX, screenY).
Ihr endgültiger Conversion-Code sieht folgendermaßen aus:
screenX = ((isoX - isoY) * tileHalfWidth) + screenOriginOffsetX; screenY = ((isoX + isoY) * tileHalfHeight) + tileHalfHeight + screenOriginOffsetY;
Nehmen wir an, wir wollen ein Objekt in dem Gitterbereich erzeugen, auf den der Spieler klickt. Wie können wir herausfinden, welcher Bereich angeklickt wurde??
Mit etwas Algebra können wir die obigen Gleichungen einfach neu anordnen, um folgendes zu erhalten:
// Korrigiere zuerst den Offset: var adjScreenX = screenX - screenOriginOffsetX; var adjScreenY = screenY - screenOriginOffsetY; // Rufen Sie jetzt den Rasterplatz ab: isoX = ((adjScreenY / tileHalfHeight) + (adjScreenX / tileHalfWidth)) / 2; isoY = ((adjScreenY / tileHalfHeight) - (adjScreenX / tileHalfWidth)) / 2;
Dann lupen Sie einfach alles hinter den Dezimalstellen ab, um herauszufinden, um welchen Rasterplatz es sich handelt.
Eine kleine Sache, die Sie nicht vergessen sollten: Wenn Sie blitting sind, stellen Sie sicher, dass Sie zuerst die Objekte auf der Rückseite rendern! Andernfalls könnte es zu ungewöhnlichen überlappenden Effekten kommen:
Das ist ganz einfach. Sie müssen nur diejenigen mit dem niedrigsten (dh dem obersten) bestellen. screenY Werte zuerst:
Beachten Sie auch, dass Sie die Größe der Objekte nicht anhand ihrer Entfernung ändern müssen. Bei einer solchen pseudoisometrischen Ansicht erscheinen Objekte, die weiter entfernt sind, nicht kleiner als diejenigen, die näher an Ihnen liegen.
Accentsconagua