Simple Iso Map (Kleines Tutorium + Code)

Übersicht BlitzMax, BlitzMax NG FAQs und Tutorials

Neue Antwort erstellen

Trust

Betreff: Simple Iso Map (Kleines Tutorium + Code)

BeitragFr, März 08, 2013 22:22
Antworten mit Zitat
Benutzer-Profile anzeigen
Hallo,

hier mal eine kleine Starthilfe für Anfänger, die gerne die isometrische Perspektive in ihren Spielen verwenden möchten:


Tiledimensionen
Für welche Tiledimensionen sollte man sich entscheiden und warum?
Grob gesagt, ist folgende Regel zu beachten: Tilebreite sollte eine grade Zahl sein, und Tilehöhe = Tilebreite/2 - 1
Wobei dann die Tilebreite eine Grade Zahl sein sollte, die durch 2 geteilt, eine Zahl mit 0 am Ende ergibt.
ZB. korrekte Teilebreiten wären: 20, 40, 60, 80, 100, 120 usw., durch 2 geteilt wären diese Zahlen dann: 10, 20, 30, 40, 50, 60 usw. (eben mit 0 am Ende)
Korrekte Tiledimensionen wären also: 20x09, 40x19, 60x29, 80x39, 100x49, 120x59 usw...
Hält man sich nicht daran, kann es passieren, dass es beim entwerfen der Tiles keine gleichmäßigen Rautenspitzen gibt. (Siehe Bild)
Mit diesen Vorgaben lässt sich sehr einfach der Code für unser Programm entwerfen.

user posted image
Nicht gleichmäßige Spitzen


user posted image
Gleichmäßige Spitzen


Der Code sollte an sich ausreichend dokumentiert sein.

Hier das dazu benötigte Tile-Bildchen:
Tile60x29.png
user posted image

BlitzMax: [AUSKLAPPEN]
SuperStrict


' Grafikeinstellung
Graphics 1024, 768


' Das TileImage Laden
Local image:TImage = LoadImage("Tile60x29.png")

' Die Tiledimensionen in einer Variable speichern
' tileW ist die Tile-Breite und tileH ist die Tile-Höhe
' Das hier verwendete Tile-Image hat die Maße 60 x 29, warum aber "tileH = tileW/2" was 30 ergibt und nicht 29...?
' Zum richtigen zeichnen der Map, muss dieses Verhältnis ("tileH = tileW/2") von der Breite zur Höhe gegeben sein,
' da es sonst zu "Treppeneffekten" an den Rändern führt, weil sich die Tiles überlappen.
' Zudem wird nur so, ein Blickwinkel von den üblichen 40° erreicht. (Siehe Bild unten)
' ( Zum testen einfach mal bei "tileH:Int = " den tatsächlichen Wert von "29" eingeben und genau hinschauen. Die Treppeneffekte sind gut zu erkennen!)

Local tileW:Int = 60
Local tileH:Int = tileW/2


' Die Variablen für die X- und Y-Position der gesammten Map
Local mapX:Float = 512, mapY:Float = 200

' Variablen für MouseXSpeed() und MouseYSpeed() ( Wird benötigt um die Map zu verschieben )
Local mXs:Int, mYs:Int


' Variablen für Pixel/Tile Koordinaten
Local pixX:Int
Local pixY:Int
Local pickedX:Int
Local pickedY:Int

'Timer ertellen
Local timer:TTimer = CreateTimer(60)

' Hauptschleife
Repeat
Cls

' Die Map zeichnen ( Die Zählervariablen x und y sind zugleich auch die Tile-Koordinaten )
For Local y:Int = 0 To 9
For Local x:Int = 0 To 9
' Tilekoordinaten in Pixelkoordinaten umrechen für "Drawimage"
pixX = PixelX(x, y, tileW)
pixY = PixelY(x, y, tileH)
' Tile zeichnen ( "-tileW/2" ist die hälfte der Tilebreite und wird deshalb subtrahiert,
' da der Nullpunkt des Tiles die obere Spitze der Raute ist, und nicht
' die obere linke Ecke des ganzen Bildchens )
' mapX und mapY, da die Verschiebung der Map berücksichtigt werden muss
DrawImage(image, pixX-tileW/2 + mapX, pixY + mapY)
Next
Next

' Die Mauskoordinaten in Tilekoordinaten umrechnen, um jene Tile-Koordinaten, welche sich unter der Maus befinden zu bekommen.
' mapX und mapY, da die Verschiebung der Map berücksichtigt werden muss
pickedX = TileX(MouseX(), MouseY(), tileW, tileH, mapX, mapY)
pickedY = TileY(MouseX(), MouseY(), tileW, tileH, mapX, mapY)


' Die "gepickten" Tilekoordinaten neben dem Mauszeiger ausgeben
DrawText pickedX + " | " + pickedY, MouseX()+8, MouseY()-8


' Mousegeschwindigkeit aktualisieren
mXs = MouseXSpeed()
mYs = MouseYSpeed()

' Wenn die rechte Maustaste gedrückt wird, die Map verschieben
If MouseDown(2)
mapX = mapX + mXs
mapY = mapY + mYs
End If

Flip()
'Auf timer warten
WaitTimer(timer)
Until AppTerminate()





' Funktionen für das Umrechnen von normalen Pixel-Koordinaten in Tile-Koordinaten und umgekehrt

Function PixelX:Float(tileX:Int, tileY:Int, tileW:Int)
Return ( tileX * (tileW/2) ) - ( tileY * (tileW/2) )
End Function

Function PixelY:Float(tileX:Int, tileY:Int, tileH:Int)
Return ( tileX * (tileH/2) ) + ( tileY * (tileH/2) )
End Function

Function TileX:Int(PixelX:Float, PixelY:Float, tileW:Int, tileH:Int, offsetX:Float = 0, offsetY:Float = 0)
pixelX = pixelX - offsetX
pixelY = pixelY - offsetY
Return ( pixelX / (tileW/2) + pixelY / (tileH/2) ) / 2
End Function

Function TileY:Int(PixelX:Float, PixelY:Float, tileW:Int, tileH:Int, offsetX:Float = 0, offsetY:Float = 0)
pixelX = pixelX - offsetX
pixelY = pixelY - offsetY
Return ( pixelY / (tileH/2) - pixelX / (tileW/2) ) / 2
End Function


user posted image
Nicht korrekt

user posted image
So sollte es sein

Hoffe es hat jemandem geholfen.


[Edit]
Bilder hinzugefügt und Erkläreung verbessert.

Gruß Trust
  • Zuletzt bearbeitet von Trust am Sa, März 09, 2013 20:49, insgesamt 3-mal bearbeitet

Hakkai

BeitragSa, März 09, 2013 18:26
Antworten mit Zitat
Benutzer-Profile anzeigen
Super Tutorial, glaube aber du meintest oben: ... wären also: 20x09, 40x19, ...
Und bei den 40° Bildern könntest du den Text bei tileW, tileH verwechselt haben.

Trust

BeitragSa, März 09, 2013 18:51
Antworten mit Zitat
Benutzer-Profile anzeigen
Zitat:
... wären also: 20x09, 40x19, ...

Danke, habe es ausgebessert!

Zitat:
bei den 40° Bildern könntest du den Text bei tileW, tileH verwechselt haben

Das sollte eigentlich so stimmen, wenn man sich an die oben genannten Tile-Dimensionen hält.

Xeres

Moderator

BeitragSa, März 09, 2013 22:17
Antworten mit Zitat
Benutzer-Profile anzeigen
~VERSCHOBEN~
Dieser Thread passte nicht in das Forum, in dem er ursprünglich gepostet wurde.
Win10 Prof.(x64)/Ubuntu 16.04|CPU 4x3Ghz (Intel i5-4590S)|RAM 8 GB|GeForce GTX 960
Wie man Fragen richtig stellt || "Es geht nicht" || Video-Tutorial: Sinus & Cosinus
T
HERE IS NO FAIR. THERE IS NO JUSTICE. THERE IS JUST ME. (Death, Discworld)

Neue Antwort erstellen


Übersicht BlitzMax, BlitzMax NG FAQs und Tutorials

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group