TileMatrix Tutorial Teil 1

Übersicht BlitzBasic FAQ und Tutorials

Gehe zu Seite 1, 2  Weiter

Neue Antwort erstellen

joKe

Betreff: TileMatrix Tutorial Teil 1

 BeitragDo, Dez 18, 2003 13:00
Antworten mit Zitat
Benutzer-Profile anzeigen
Tutorial 2D Tile Engine ( Tile Matrix )

1.1 Voraussetzungen :

Vorwissen über LoadAnimImage(bild,x,y,frame)
Vorwissen über Arrays
Vorwissen über for-next schleifen
Vorwissen über KeyAbfragen

2.1 Anfangsteil :

Als erstes setzen wir den 2D Graphic Modus aber mit Variablen
und initializieren den BackBuffer Modus

Code: [AUSKLAPPEN]
Global gr_width = 800
Global gr_height = 600
Global gr_bit = 16
Global gr_win = 2
Graphics gr_width, gr_height, gr_bit, gr_win
SetBuffer BackBuffer( )


Danach werden wir das Array Definieren , das wichtig für die Tile Matrix ist

Code: [AUSKLAPPEN]
Dim TileMatrix( x_breite, y_hoehe, layeranzahl )


x_breite gibt natürlich an , wie breit die TileMatrix Map ( also das Level )
sein soll
y_hoehe ist das gleiche nur mit der Höhe
layeranzahl gibt an wieviel Layer die Tilematrix über einander hat.
Normalerweise nimmt man dort einen BodenLayer , einen Kollisions- bzw
WandLayer und den Layer der über dem Spieler liegt , zB für Dächer ,
Rohre etc über dem Spieler ... also ist die Layeranzahl 3 ( oder wenn man 2 Bodenlayer haben will dann 4 Layer )
In meinen Beispiel werden wir aber erstmal ohne mehrere Layer arbeiten
und mit einer Map = 10*10 Tiles : also lautet die Array Definition so :

Code: [AUSKLAPPEN]
Dim TileMatrix(9,9)


9 weil es ja von 0 bis 9 geht ... also 10 !!!

Damit wir nun noch keinen Editor und ein eigenes Mapformat
brauchen , erstellen wir halt eben kurzerhand eine eigene Map

Code: [AUSKLAPPEN]
Data 0,0,0,0,0,0,0,0,0,0
Data 0,1,1,1,1,1,1,1,1,0
Data 0,1,2,2,2,2,2,2,1,0
Data 0,1,2,3,4,4,3,2,1,0
Data 0,1,2,5,6,7,5,2,1,0
Data 0,1,2,5,8,9,5,2,1,0
Data 0,1,2,3,4,4,3,2,1,0
Data 0,1,2,2,2,2,2,2,1,0
Data 0,1,1,1,1,1,1,1,1,0
Data 0,0,0,0,0,0,0,0,0,0


Nun ist der Array mit den oben genannten Daten gefüllt.
Das wird uns erstmal ermöglichen die Darstellungweise
zu üben , ohne auf eine Sinnvolle Map achten zu müssen


Als nächstes Laden wir das Bild , das unsere TileMatrix Visualisieren soll

Code: [AUSKLAPPEN]
img_matrix = LoadAnimImage("tileset1.bmp",32,32,0,10)


Tiles sind normalerweise 32*32 oder 16*16 groß . In meinem Beispiel
entscheiden wir uns für die Variante 32*32 große Tiles.
Wie man schon an der letzen Zahl be LoadAnimImage sieht , haben wir
10 verschiedene Tiles ( also 0 - 9 )
jedes Tile hat eine Kennziffer zwischen 0 und 9 .
Zum Testen könnt ihr euch ja selber ein Tileset zusammenbasteln , zB
jedes Tile eine andere Farbe und 32*32 Groß.

2.2 Die Hauptschleife des Programms

Als erstes setzen wir die Sachen , die wir sowieso schon kennen.

Code: [AUSKLAPPEN]
Repeat

   Cls

   [...]

   Flip

Until KeyHit(1) ; Wenn Esc gedrückt wurde > Programm beenden
End


Nun müssen wir uns nurnoch um den Code in der Schleife kümmern
Also den Code der das [...] ersetzen soll.

Als erstes werden wir uns erstmal nur um das Darstellen der Tile-
Matrix kümmern.
Es gibt eine einfache und eine etwas schwierigere Methode eine
TileMatrix darzustellen , obwohl die schwierigere dafür auch
schneller ist :

>>> Die einfache und langsame Methode :

Code: [AUSKLAPPEN]
For x = 0 to 9
   For y = 0 to 9
      DrawImage img_matrix , x*32 , y*32 , TileMatrix(x,y)
   Next
Next


Die For-Next Schleifen müssten klar sein .
img_matrix ist natürlich die Bildvariabel
X und Y müssen mit 32 multipliziert werden , damit die Koordinaten
auch auf die Breite und Höhe der Tiles Rücksicht nehmen.
d.H. das die Tiles ja nicht nur einen Pixel verschoben sein soll ,
sondern um 32 , damit sich auch genau aneinander liegen.

Bevor wir nun die zweiteVariante ausprobieren wollen , müssen
wir das Scrollen der Map mit den Pfeiltasten einbauen ...
Dafür müssen wir zuerst in dem Oberen Teil des Programmcodes
also außerhalb der Repeat-Until Schleife die Variabeln dafür de-
klarieren .

Code: [AUSKLAPPEN]
Global scrollx = 0
Global scrolly = 0


Das "= 0" kann man sich eigentlich auch sparen , da der Standartwert
sowieso 0 ist .
Was die beiden Variabeln angeben ist wohl klar. Sie beinhaltet den Wert
der Verschiebung ( der TileMatrix ) auf der X und auf der Y-Achse .

Nun bauen wir erstmal die Pfeiltasten ein in die Repeat-Until Schleife

Code: [AUSKLAPPEN]
If KeyDown(200) Then scrolly = scrolly - 2
If KeyDown(208) Then scrolly = scrolly + 2

If KeyDown(203) Then scrollx = scrollx - 2
If KeyDown(205) Then scrollx = scrollx + 2


Nun verbinden wir es mit der Darstellung der TileMatrix

Code: [AUSKLAPPEN]
For x = 0 to 9
    For y = 0 to 9
        DrawImage img_matrix , (x*32) - scrollx , (y*32) - scolly , TileMatrix(x,y)
    Next
Next


Nun wird der Scroll Wert immer von den errechneten Koordinaten des
Tiles abgezogen !!!


Der zweite Teil mit der schwierigeren TileMatrix Darstellung folgt noch ....
Projekt: Pollux Renegades Coop
[Maschine: Intel DualCore2 2x 3Ghz | 4096 DRR2 | GeForce GTX 260 Ultra]

Jan_

Ehemaliger Admin

BeitragDo, Dez 18, 2003 13:07
Antworten mit Zitat
Benutzer-Profile anzeigen
Sehr schön, kann man bestimmt ne Menge draus lernen.

schön geschrieben!
between angels and insects

Julz

 BeitragDo, Dez 18, 2003 16:26
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich finds auch gut daran häng ich nämlich grad, aber eine frage

Code: [AUSKLAPPEN]

DrawImage img_matrix , x*32 , y*32 , TileMatrix(x,y)


Als frame gibst du TileMatrix(x,y) an warum das versteh ich nich so ganz Confused

joKe

 BeitragDo, Dez 18, 2003 17:58
Antworten mit Zitat
Benutzer-Profile anzeigen
weil in TileMatrix ( das ist ja der Array ) die Tilenummer gepseichert ist die an der Position X , Y gemalt werden soll ... Frame weil das Tileset als Animation geladen ist ... obwohl es ja ein Set ist und keine Animation
Projekt: Pollux Renegades Coop
[Maschine: Intel DualCore2 2x 3Ghz | 4096 DRR2 | GeForce GTX 260 Ultra]

Julz

 BeitragDo, Dez 18, 2003 18:40
Antworten mit Zitat
Benutzer-Profile anzeigen
hhhmmmm.........ja schon aber das array hat doch zwei werte oder ???
x und y und wie werden die dann zu dem frame verarbeitet ??

Freeman

 BeitragDo, Dez 18, 2003 20:13
Antworten mit Zitat
Benutzer-Profile anzeigen
sorry, aber ist das nich der selbe code wie in den Tutorials bei Robsite? Kann mich aber auch täuschen, ich nehm alles zurück wenns nich so ist.

edit :
das ist der Code aus dem Robsite Tut :
Code: [AUSKLAPPEN]
Graphics 640,480,16,1

tileset = LoadAnimImage("tileset.bmp",32,32,0,6)
char = LoadImage("char.bmp")
px = 10

py = 7
move = 1

Dim map(20,20)

Data 5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,5,5,5,5,5,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,5
Data 5,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,3,3,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,3,3,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,3,3,0,0,0,0,0,0,0,0,3,3,0,0,0,0,5
Data 5,0,0,0,3,3,0,0,0,0,0,0,0,0,3,3,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5
Data 5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5

For y = 0 To 20
For x = 0 To 20
Read map(x,y)
Next
Next

Repeat
SetBuffer BackBuffer()
Cls
If KeyDown(1) Then End

framezahl des tilesets nehmen 
veränderbaren variablen
For y = 0 To 20
For x = 0 To 20
DrawBlock tileset,x*32-scrollx,y*32-scrolly,map(x,y)
Next
Next


If KeyDown(208) Then
If map(px,py+1) < 3 Then
py = py + 1
scrolly = scrolly + 32
move = 1
End If
End If

If KeyDown(200) Then
If map(px,py-1) < 3 Then
py = py - 1
scrolly = scrolly - 32
move = 1
End If
End If

If KeyDown(203) Then
If map(px-1,py) < 3 Then
px = px - 1
scrollx = scrollx - 32
move = 1
End If
End If

If KeyDown(205) Then
If map(px+1,py) < 3 Then
px = px + 1
scrollx = scrollx + 32
move = 1
End If
End If
If KeyHit(57) Then
If map(px,py) = 2 Then
For y = 0 To 20
For x = 0 To 20
If map(x,y) = 4 Then
map(x,y) = 0
End If
Next
Next
End If
End If

If move = 1 Then x = px * 32: y = py * 32:DrawImage char,x-scrollx,y-scrolly: Delay 50

Flip
Forever


ok, gut, vom Sinn her isses das gleich, ok, sorry, is aber trotzdem sehr ähnlich... aber anders läst sich das ja sowieso nicht machen ^^
 

Alu-Folie

Gast

BeitragDo, Dez 18, 2003 20:22
Antworten mit Zitat
Schön geschrieben, Joke. Echt Klasse. Wink
Aber mach mal nen zusammengescchnürtes Archiv mit Bildern.
AAber wieso nennst du es Tilematrix? Ich würde es bis jetzt noch als normale Tileengine einschätzen. Die Layeranzahl die du mitdimensionierst wird ja noch garnicht verwendet.

Achja, und LOL wegen dem zeug was du da sagst mit dem "der selbe code". Das ist verdammt scheisse. Denn das stimmt nicht, der Code ist sicherlich von Joke. Und das sie so ähnlich sind, kommt daher, weil es ja auch die selbe Darstellungsvariante ist.

Freeman

 BeitragDo, Dez 18, 2003 20:33
Antworten mit Zitat
Benutzer-Profile anzeigen
sorry, ich möchte mich hiermit dafür entschuldigen,wird nich wieder vorkommen, sorry

joKe

 BeitragDo, Dez 18, 2003 21:18
Antworten mit Zitat
Benutzer-Profile anzeigen
@ Alu : danke danke =)
@ freeman : okay kein problem
@ julz : es geht nicht darum das in zwei dimensionen in dem Frame rumwurstest sonder dass der zweidimensionale Array dir nen Eindimensionalen wert zurückgibt .... der den sagt welches Frame aus dem Tileset er malen soll
Projekt: Pollux Renegades Coop
[Maschine: Intel DualCore2 2x 3Ghz | 4096 DRR2 | GeForce GTX 260 Ultra]
 

Zwische

 BeitragDo, Dez 18, 2003 23:13
Antworten mit Zitat
Benutzer-Profile anzeigen
ok, aber in Jok3's Code fehlt nur noch das Einlesen des Data-Felds in das TileMatrix-Array. Very Happy
www.bitbybit-creations.net

joKe

 BeitragFr, Dez 19, 2003 0:52
Antworten mit Zitat
Benutzer-Profile anzeigen
oh ups ... =)
Projekt: Pollux Renegades Coop
[Maschine: Intel DualCore2 2x 3Ghz | 4096 DRR2 | GeForce GTX 260 Ultra]
 

Alu-Folie

Gast

BeitragFr, Dez 19, 2003 13:50
Antworten mit Zitat
Wie stehts mit dem 2. Teil? Würde mich mal interessieren wie du das mit den layer machen willst Smile,

joKe

 BeitragFr, Dez 19, 2003 14:38
Antworten mit Zitat
Benutzer-Profile anzeigen
kommt bald hab ich zZ kein Zeit für ... mach in den Ferien .. irgedwann am Anfang !
Projekt: Pollux Renegades Coop
[Maschine: Intel DualCore2 2x 3Ghz | 4096 DRR2 | GeForce GTX 260 Ultra]

Julz

 BeitragFr, Dez 19, 2003 18:27
Antworten mit Zitat
Benutzer-Profile anzeigen
@ jOk3 ach du hast ja recht ich bin dumm....hihihi.........
super würd mich echt freuen wenn bald en neuer teil vom tut kommt ist en interessantes thema und wichtig für noobs (so wie mich).........

Julz

 BeitragFr, Dez 19, 2003 19:42
Antworten mit Zitat
Benutzer-Profile anzeigen
Also ich hab jetzt das ganze nach gemacht hab auch festgestellt das du das read map(x,y) vergessen hast aber egal mein prob ist:

Code: [AUSKLAPPEN]

graphics 640,480
setbuffer backbuffer()

loadanimimage("sprites.bmp",32,32,0,4)

dim map(9,9)

data 1,1,1,1,1,1,1,1,1,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,2,3,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,4,2,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
for x = 0 to 4
for y = 0 to 4
read map(x,y)
next
next

repeat
cls


for x = 0 to 4
for y = 0 to 4
drawimage map, x*32, y*32, map(x,y) ;<------
next
next

flip
until keydown(1)


Der Code geht nicht die Fehlermeldung:
Identifier 'map' may not be used like this
 

Zwische

 BeitragFr, Dez 19, 2003 19:57
Antworten mit Zitat
Benutzer-Profile anzeigen
hab die sachen die Falsch sind FETT geschreiben:

;##########CODE##############
graphics 640,480
setbuffer backbuffer()

tileset = loadanimimage("sprites.bmp",32,32,0,4)

dim map(9,9)

data 1,1,1,1,1,1,1,1,1,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,2,3,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,4,2,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
data 1,0,0,0,0,0,0,0,0,1
for x = 0 to 4
for y = 0 to 4
read map(x,y)
next
next

repeat
cls


for x = 0 to 4
for y = 0 to 4
drawimage tileset, x*32, y*32, map(x,y) ;<------
next
next

flip
until keydown(1)
;##########CODE##############

ausserdem ist in dem Data-Feld eine "4" enthalten, da deine Frameanzahl allerdings nur von 0-3 geht könntest du noch einen "Frame Out Of Range"(oder so)-Fehler kriegen
www.bitbybit-creations.net

Julz

 BeitragFr, Dez 19, 2003 20:21
Antworten mit Zitat
Benutzer-Profile anzeigen
Man bin ich en hirno.........sorry für die TOTAL dumme frage, konzentrieren..............damit hab ich manchmal meine probleme Confused
 

Alu-Folie

Gast

BeitragMo, Dez 22, 2003 11:27
Antworten mit Zitat
Mich würd jetzt echt mal die 2. Möglichkeit interessieren, wie du das mit den mehreren Matrizen lösen willst.
 

Zwische

 BeitragMo, Dez 22, 2003 15:58
Antworten mit Zitat
Benutzer-Profile anzeigen
@alu: den eigentlichen Trick bei der Sache hat er doch schon verraten:

Dim TileMatrix( x_breite, y_hoehe, layeranzahl )

Wink
www.bitbybit-creations.net
 

Alu-Folie

Gast

BeitragMo, Dez 22, 2003 16:01
Antworten mit Zitat
Schon klar. Aber ob er auch den Speed mit einberechnet, das untere Ebenen nicht so schnell gescrollt werden wie die oberen, und und und

Gehe zu Seite 1, 2  Weiter

Neue Antwort erstellen


Übersicht BlitzBasic FAQ und Tutorials

Nach Oben

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group