[JavaScript] Tworzenie mapy izometrycznej Opcje

[!*!]

Na jakiej zasadzie tworzy się mapy izometryczne? Chciałbym coś takiego napisać, jednak nie wiem jaką stworzyć pętlę która obliczy konieczne wartośći do zbudowania takiej mapy. Na początke chce poukładać tzw tiles, standardowo tekstura to 64px szerokości na 32px wysokości czyli normalna wartość dla izometrii.

Nie wiem tylko jak stworzyć prostą mapę np 5x5 pól, czyli 25 obiektów "tiles". Biorąc pod uwagę że obiekty są liczone od 0x0 w obu kierunkach.

[konole]

Tablica dwuwymiarowa.

Kod

for ($i = 0; $i < 5; $i++) {
for ($j = 0; $j < 5; $j++) {
printf("%s:%s ", $i+1, $j+1);
}
echo "<br />";
}

edit: to oczywiście jest przykładowy kod w php, nie js.

Ten post edytował konole 20.08.2011, 15:27:55

[!*!]

heh a jednak mam z tym problem, bo jak wyliczyć z tego 'szachownice' ?

[JAVASCRIPT] pobierz, plaintext 
var TileWidth = 64; // szerokość tekstury
var TileHeight = 32; // wysokość tekstury
 
var MapWidth = 2; // szerokość mapy (liczba pól)
var MapHeight = 2; // wysokość mapy (liczba pól)
 
for (i=0;i < MapWidth;++i)
{
	for(j = 0; j < MapHeight; ++j)
	{
		//printf("%s:%s ", $i+1, $j+1);
		//$('#info').append(i+1+':', j+1);
		//$('#info').append(' ');
		//alert(i+':'+j);
		//alert(Math.round(Y*TileHeight/2));
		$('#world').append('<div style="background:url(\'tiles.png\') center center no-repeat;position:relative;top:'+Math.round(i-j*TileHeight/2)+'px;left:'+Math.round(i+j*TileWidth/2)+'px;width:'+TileWidth+'px;height:'+TileHeight+'px;">'+i+':'+j+'</div>');
	}
[JAVASCRIPT] pobierz, plaintext 

Czyli powinno wygenerować

Kod

0,0 0,1
1,0 1,1

I właśnie tak powinny być ułożone divy obok siebie, aby wygenerować rzut izometryczny dzięki img które się w nich znajdują... jednak tak się nie dzieje.

Link do przykładu http://jsfiddle.net/yY7M3/1/

Ten post edytował !*! 20.08.2011, 19:50:33

[konole]

Może tutaj znajdziesz odpowiedź w źródle?

http://h1.ripway.com/qbasic010/public/isomap/isomap.html

[r4xz]

chyba dużo tego
http://ondra.zizka.cz/stranky/programovani...-libraries.texy
http://franciscojaviernieto.es/isogame/comecocos.html (pod FF)

http://glacialflame.com/

[!*!]

r4xz może i dużo ale nie są wystarczające, większość nie działa poprawnie pod wszytkimi przeglądarkami, albo jest po prostu kobyłą która imituje dawno wprowadzone rozwiązania choćby w html5.

[CuteOne]

[JAVASCRIPT] pobierz, plaintext 
 
var dy = 2, dx = 2, map = '';
 
for(var y = 0; y <= dy; y++) {
 
   map += '<div class="mapa_row">';
 
   for(var x = 0; x <= dx; x++) {
 
         map += '<div class="mapa_cell">'+y+' '+x+'</div>'; // ustaw szerokość, wysokość diva i float: left (żeby się przytulały)
   }
 
   map += '</div><div style="clear:both"></div>'; // clear:both gdy za bardzo chcą się przytulać ;)
}
 
document.getElementById('conatiner').innerHTML = map;
[JAVASCRIPT] pobierz, plaintext 

Tadam..

Ten post edytował CuteOne 23.08.2011, 14:08:53

[!*!]

CuteOne taki efekt uzyskałem już dawno, nakierował mnie konole - wystarczyło zmienić kilka rzeczy pod JS aby działało, co z resztą zrobiłeś podobnie (a ja podałem już link do 'działającej' wersji), chodzi o odpowiednie rozmieszczenie tych divów tak aby tworzyły rzut izometryczny http://jsfiddle.net/yY7M3/1/ czyli obliczyć +- wysokość i szerokość tile, nadać temu top i left.

[thek]

Tylko uważaj na RAm Ja kiedyś zrobilem mapę około 6000 kafli to wcięło prawie 3GB RAM

[!*!]

thek od tego mam już napisaną strefę buforową, widzisz tylko to co potrzeba.

eduit, mój błąd, konole podał mi rozwiązanie http://h1.ripway.com/qbasic010/public/isomap/isomap.html jednak u siebie podałem złe wartości, teraz działa.

Ten post edytował !*! 23.08.2011, 16:09:57