Hallo mal wieder bei einen Tutorial von Wbedesign-Ugurcu. Wir befinden uns immer noch in der 2D RPG reihe. Heute wollen wir unsere Klasse World schreiben.
Unsere Weltkarte ist eine sogenannte 2D tilemap. diese ist in einen Raster angeordnet was ihr euch ungefähr so vorstellen könnt.
Diese Raster ist etwas unspektakulär und soll nun die Optik von Wiesen und Steinen bekommen etwa so.
Nun kommen wir wieder dazu erstmal ein Objekt der klasse World zu erstellen.
|
1 2 3 4 5 6 |
world = { tilesize : 32, ........ } |
ihr seht wir haben wieder eine Variable angelegt. Die tilesize gibt an wie viel px eine tile breit und hoch sein soll. Ihr könnt wenn ihr wollt dies auch in zwei Variablen speichern z.B tilesizeX und tilesizeY,
wenn ihr unterschiedliche Werte von Y und X haben wollt. Die Tilemap erstellen wir als nächste wie in Teil 2 : Bühne bereits gesehen erstellen wir die Map.
|
1 2 3 4 5 6 7 8 |
level1 : [ [0,0,0,1,1,1,0,0,0,0], [0,0,0,0,0,1,1,1,0,0], [0,0,0,0,0,1,1,0,0,0], [0,0,0,1,1,1,0,0,0,0], [0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,0,0] ], |
Die 0 steht dabei für Gras und die 1 für Stein.Da unser Spiel warscheinlich nicht nur auf einer Karten spielen soll , erstellen wir eine pickLvl Funktion.
|
1 2 3 4 5 6 7 |
pickLvl : function(level){ if(level === "1"){ return this.level1; } } |
ihr wird die Lvl Nummer übergeben und sie gibt dafür das Level Array zurück an dem Aufrufer.
nun kommen wir zur eigentlichen draw() Funktion.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
draw : function(){ var mapArray = this.pickLvl("1"); for(var i = 0;i < mapArray.length;i++){ for(var j = 0;j < mapArray[i].length;j++){ if(mapArray[i][j] == 0){ this.drawImage("grass","grass.png",j,i); } if(mapArray[i][j] == 1){ this.drawImage("stone","stone.jpg",j,i); } } } }, |
Hier wird eine verschaltete for schleife durchgeführt. In ersten schritt über die Y Achse und der inneren Schleife durch die X Achse. In ersten Schritt holen wir uns mittels unserer pickLvl() methode das level 1 heraus. Die Schleifen werden nun durch das übergebene Array laufen und bei einer 0 gras und bei einer 1 stein zeichnen. Dazu wird die drawImage() Funktion benutzt, nun mehr zu dieser Funktion.
|
1 2 3 4 5 6 7 |
drawImage : function(name,Tilename,x,y){ var name = new Image(); name.src = 'img/'+ Tilename; context.drawImage(name, x * tilesize, y * tilesize, tilesize, tilesize); }, |
Mittels dieser Methode können wir alle Images zeichnen die wir brauchen. wir erstellen ein neues Image mittel new Image(). Die Img.src legen wir dann mittels der Tilename fest.Bei mir liegen alle in Ordner img, weshalb ich diesen noch zusätzlich angegeben habe.
Es wird nun die context.drawImage funktion ausgeführt. Ihr übergeben wird.
- image
- x * tilesize für die X-Achse
- y * tilesize für die Y-Achse
- dann die tilesize als width
- tilesize als height
Unsere World klasse ist nun fertig und kann wieder um einiges erweitert werden zum Beispiel einen Kollision Detektor oder Witterungseinflüsse.
als nächsten erstellen wir eine Scrollende Map. Da unsere Welt größer sein kann als unsere tilemap müssen wir uns ja auch bewegen können.
Schreibe einen Kommentar