isometric floor Javascript / css

He ,

Iedereen kent het bekende "Habbo" wel en weet waarschijnlijk ook hoe een kamer eruit ziet namelijk zo :
Hier is gebruik gemaakt van een techniek om 2d op 3d te laten lijken genaamd : isometric

ik ben nu al een tijdje bezig maar ik kom niet achter de formule ,
Hier en voorbeeld van wat ik wil hebben :
(0,0) staat dus voor de Y en de X as waarbij dus (4,10) staat voor een lengte van 4 en een breedte van 10

Nu weet ik dat dit mogelijk is in canvas maar verder kom ik niet bij iets nuttigs , Is er iemand die iets weet in deze richting?

Groet ,

Smiegles

Hmmn, kun je niet wat googlen ?

Want daar schuilt veel meer achter dan enkel dat grid. Je moet ook nog de tiles gaan renderen enzo. Maar je begint goed (denk ik)
Je moet natuurlijk eerst die techniek onder de knie hebben voor je het probeert te renderen via code Want renderen is wat je ziet, in de achtergrond is alles coördinaten enzo
Nja weet er niet zo veel van ben daar niet echt mee bezig, maar k ben zeker dat als je goed googled je wel wat vind

Ik had volgens mij nog ergens een algoritme om de X en Y te berekenen. Even zoeken hoor

toevoeging op 21 april 2013, 21:47:48:

[COLOR= #0000BB]<?php[/COLOR]

[COLOR= #FF8000]/**
     * Calculates the X coord from grid params.
     * @param gridX The grid X position.
     * @param gridY The grid Y position.
     * @return The X coord.
     */[/COLOR]

    [URL="http://www.php.net/public"]public[/URL] [URL="http://www.php.net/static"]static[/URL] int calculateX[COLOR= #007700]([/COLOR]int gridX[COLOR= #007700],[/COLOR] int gridY[COLOR= #007700]) {[/COLOR]
        [URL="http://www.php.net/return"]return[/URL] [COLOR= #007700](([/COLOR]Tile[COLOR= #007700].[/COLOR]WIDTH / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridX[COLOR= #007700]) - (([/COLOR]Tile[COLOR= #007700].[/COLOR]WIDTH / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridY[COLOR= #007700]) + ([/COLOR]Mmocc[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]);
    }[/COLOR]
    
    [COLOR= #FF8000]/**
     * Calculates the Y coord from grid params.
     * @param gridX The grid X position.
     * @param gridY The grid Y position.
     * @return The Y coord.
     */[/COLOR]
    
    [URL="http://www.php.net/public"]public[/URL] [URL="http://www.php.net/static"]static[/URL] int calculateY[COLOR= #007700]([/COLOR]int gridX[COLOR= #007700],[/COLOR] int gridY[COLOR= #007700]) {[/COLOR]
        [URL="http://www.php.net/return"]return[/URL] [COLOR= #007700](([/COLOR]Tile[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridY[COLOR= #007700]) + (([/COLOR]Tile[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridX[COLOR= #007700]) + (([/COLOR]Mmocc[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) -[/COLOR] [COLOR= #0000BB]100[/COLOR][COLOR= #007700]);
    }[/COLOR]

Mmocc.WIDTH en Mmocc.HEIGHT stelt dan de venstergrootte voor. gridX en gridY stellen de x en y as voor.

Heb dit gebruikt :

[COLOR= #0000BB]<?php[/COLOR]    
    [URL="http://www.php.net/for"]for[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$for_x[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]0[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$for_x[/COLOR] [COLOR= #007700]<[/COLOR] [COLOR= #0000BB]$X[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$for_x[/COLOR][COLOR= #007700]++)
        {[/COLOR]
            [URL="http://www.php.net/for"]for[/URL][COLOR= #007700]([/COLOR][COLOR= #0000BB]$for_y[/COLOR] [COLOR= #007700]=[/COLOR] [COLOR= #0000BB]0[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$for_y[/COLOR] [COLOR= #007700]<[/COLOR] [COLOR= #0000BB]$Y[/COLOR][COLOR= #007700];[/COLOR] [COLOR= #0000BB]$for_y[/COLOR][COLOR= #007700]++)
            {[/COLOR]
                [COLOR= #0000BB]$_x[/COLOR] [COLOR= #007700]= (([/COLOR][COLOR= #0000BB]$for_x[/COLOR][COLOR= #007700]*[/COLOR][COLOR= #0000BB]32[/COLOR][COLOR= #007700]) + ([/COLOR][COLOR= #0000BB]$for_y[/COLOR][COLOR= #007700]*-[/COLOR][COLOR= #0000BB]32[/COLOR][COLOR= #007700]) +[/COLOR] self[COLOR= #007700]:[/COLOR][COLOR= #007700]:[/COLOR][COLOR= #0000BB]$OffsetX[/COLOR][COLOR= #007700]);[/COLOR]
                [COLOR= #0000BB]$_y[/COLOR] [COLOR= #007700]= (([/COLOR][COLOR= #0000BB]$for_x[/COLOR][COLOR= #007700]*[/COLOR][COLOR= #0000BB]16[/COLOR][COLOR= #007700]) + ([/COLOR][COLOR= #0000BB]$for_y[/COLOR][COLOR= #007700]*[/COLOR][COLOR= #0000BB]16[/COLOR][COLOR= #007700]) +[/COLOR] self[COLOR= #007700]:[/COLOR][COLOR= #007700]:[/COLOR][COLOR= #0000BB]$OffsetY[/COLOR][COLOR= #007700]);[/COLOR]

voor de mensen die interesse erin hebben

Even een bumpje. Haha

Ik probeer ook zo een soort style te krijgen. Ik las iets op stackoverflow over verschillende algoritme. Maar maakt habbo gebruikt van de "Zig Zag methode" of "Diamond"?

http://stackoverflow.com/questions/892811/drawing-isometric-game-worlds

shahiem zie mijn post ^

Raoul schreef:

Ik had volgens mij nog ergens een algoritme om de X en Y te berekenen. Even zoeken hoor

toevoeging op 21 april 2013, 21:47:48:

[COLOR= #0000BB]<?php[/COLOR]

[COLOR= #FF8000]/**
     * Calculates the X coord from grid params.
     * @param gridX The grid X position.
     * @param gridY The grid Y position.
     * @return The X coord.
     */[/COLOR]

    [URL="http://www.php.net/public"]public[/URL] [URL="http://www.php.net/static"]static[/URL] int calculateX[COLOR= #007700]([/COLOR]int gridX[COLOR= #007700],[/COLOR] int gridY[COLOR= #007700]) {[/COLOR]
        [URL="http://www.php.net/return"]return[/URL] [COLOR= #007700](([/COLOR]Tile[COLOR= #007700].[/COLOR]WIDTH / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridX[COLOR= #007700]) - (([/COLOR]Tile[COLOR= #007700].[/COLOR]WIDTH / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridY[COLOR= #007700]) + ([/COLOR]Mmocc[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]);
    }[/COLOR]
    
    [COLOR= #FF8000]/**
     * Calculates the Y coord from grid params.
     * @param gridX The grid X position.
     * @param gridY The grid Y position.
     * @return The Y coord.
     */[/COLOR]
    
    [URL="http://www.php.net/public"]public[/URL] [URL="http://www.php.net/static"]static[/URL] int calculateY[COLOR= #007700]([/COLOR]int gridX[COLOR= #007700],[/COLOR] int gridY[COLOR= #007700]) {[/COLOR]
        [URL="http://www.php.net/return"]return[/URL] [COLOR= #007700](([/COLOR]Tile[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridY[COLOR= #007700]) + (([/COLOR]Tile[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) *[/COLOR] gridX[COLOR= #007700]) + (([/COLOR]Mmocc[COLOR= #007700].[/COLOR]HEIGHT / [COLOR= #0000BB]2[/COLOR][COLOR= #007700]) -[/COLOR] [COLOR= #0000BB]100[/COLOR][COLOR= #007700]);
    }[/COLOR]

Mmocc.WIDTH en Mmocc.HEIGHT stelt dan de venstergrootte voor. gridX en gridY stellen de x en y as voor.

Das toch geen PHP of wel?

Dat is java. Maar je kan de formule gemakkelijk afleiden en omzetten naar een andere taal natuurlijk.