[Javascript] Tile selektion bei einer iso Staggered map

Hallo zusammen,

ich stehe grad wie der ochs am Berg...

Folgende Situation:

Ich habe mit Rails eine Isometrische Karte nach dem Staggered Prinzip erstellt, das wird auch alles schön aneinander gekachelt.

Jetzt stehe ich vor dem Problem wie kann ich die einzelnen tiles am einfachsten selektieren kann. Mein erster Gedanke war auf die Berechnung vom Positionieren der tiles zurückzugreifen. Die sieht im wesentlichen so aus

for (int y=0 ;y
{
        for (int x=0; x
        {
                //Neue Reihe der Tiles kommen nach 1/2 Breite eines Tiles 
               y_px = y*(TILE_H/2);
                //Jede zweite Reihe der Tiles um 1/2 Länge versetzt
               //-> wenn y ungerade, dann 1/2 Länge zu Tilepostion hinzuaddieren
               if (y%2==1)
               {
                        x_px = x*TILE_W + (TILE_W/2))
               }
               else
                {
                        x = (x*TILE_W)
                }
        }
}

Leider funktioniert das nicht weil ja immer von Rechtecken und nicht von Rauten ausgegangen wird.

Hab ihr eine Idee wie man das lösen kann? Ich steh grad voll aufem Schlauch

g Nerosmeel

http://www.gamedev.net nach "Iso Coordinate" und ähnlichem suchen. Da findest du genügend Tutorials.

Maxx

also ich habe genau so eine karte bei mir, und ich habe jedem div eine ID zugewiesen X0Y10 und somit konnte die jeden div über die ID ansprechen. und zu deinen beiden schleifen. ich denke du hast da ein denkfehler drin. du musst befor der innen schleife, prüfen wie breit die map sein soll. also so in etwa:

for(int height = 0;height < mapHeight;height++){

if(height % 2 == 0){

width = mapWidth;

}else{

width = mapWidth+1;

for(int newWidth = 0;newWidth < width;width++){

usw..

also ich habe das so mit Buhrmis hilfe gemacht:http://pastebin.com/F5FPqfLN

startX und startY sind die mittelpunkte der karte

displayWidth und displayHeight ist die anzeigegröße der karte. vllt hilft dir das weiter

MFG

Ich glaube du unterschätzt, inwiefern es bei einer isometrischen Ansicht deutlich komplexer zugeht.

Mal ganz abgesehen davon, wenn man Objekte auf die Karte setzt, wie z.B. Bäume, welche ja über mehrere Tiles liegen können.

Da hilft dir das einfache abfragen der Tiles nicht wo die Maus gerade drüber liegt, wenn der Baum wird dann von der Maus erfasst nich die Tiles die dadrunter liegen ;) (ja ich bin schlecht im erklären)

Man muss also durch die Position der Maus die X und Y Werte der Tiles berechnen!

Original von nOnAmE^

Man muss also durch die Position der Maus die X und Y Werte der Tiles berechnen!

Genau das hab ich vor!

Im moment versuche ich mich an einem point in polygon algorithmus der bis jetzt auch gut zu funktionieren scheint. Werd euch auf den laufenden halten.

Hallo zusammen,

schaut dir mal imagemaps an. Ist zwar nicht so trivial, aber wenn man einen Layer über die tatsächlichen Grafiken mit Imagemaps legt, ist alles kinderleicht :)

http://www.html-world.de/program/html_14.php

Gruß

Original von Murmeli

Hallo zusammen,

schaut dir mal imagemaps an. Ist zwar nicht so trivial, aber wenn man einen Layer über die tatsächlichen Grafiken mit Imagemaps legt, ist alles kinderleicht :)

http://www.html-world.de/program/html_14.php

Gruß

Die Idee kamm mir auch schonmal aber irgendwas hat mich davon abgebracht...weiß nur grad nicht mehr was.

Also ich weiß nicht genau wie schnell das ganze bei einer isometrischen Karte ist (müsste ich mal testen), aber an sich müsste es mit canvas als kleines Tool gehen. Hatte das in meinem Blog auch mal geschrieben, das ist ähnlich umgesetzt wie bei der AVES-Engine. Über Canvas überprüft man ob die Maus sich über einem transparenten Pixel befindet oder nicht, falls nicht wird das korrekte Event des sich darunter befindenden Objektes getriggered. 

Hoffe es ist in Ordnung, falls nicht mache ich den Link gleich wieder raus, aber ich denke das erklärt am Besten was ich meine:

http://www.cw-internetdienste.de/2010/05/basic-pixel-related-object-selection/

Also ich denke der grundlegende Ansatz sollte auch bei einer isometrischen Karte ohne weiteres schnell laufen. Man muss ja nicht, wie bei meinem doch sehr mageren Beispiel jedes Element in einem Canvas setzen, sondern könnte die Grafiken im Canvas auch austauschen und prüfen oder pro unterschiedlichem Tile ein Canvas erzeugen.

wchris, die demo ist wirklich schick. wenn du das plugin noch im ie zum laufen bekommst, ist es echt der renner :)

laut wikipedia ist ähnliches im ie mit javascript in kombination mit vml oder flash möglich ;)