I'm trying to create an isometric background for a game but I'm not sure how to do it. I'm using Javascript and jQuery. I've already tried it before using CSS3 but I think I'm using the wrong method.
1 Answer
I don't know about jQuery but in general terms I can think of a few alternatives.
Use isometric tiles to create the background. It's very similar to creating a top-down tile based map but with tiles being offset a little. You can find more information here. Also check this answer for a side-by-side comparison between isometric and top-down.
Turn a top-down background into isometric by rotating 45º and compressing it vertically, either in code or in some image manipulation software.
Probably not applicable here but in a 3D API you can also get an isometric view of the world by setting an orthographic projection and positioning the camera at the correct angle.
-
\$\begingroup\$ i know how to do it (rotate 45° and compressing) with css or tiles on png. But my really question talk about how distribute uniformly the tiles. \$\endgroup\$– davidMar 27, 2012 at 15:01
-
2\$\begingroup\$ @david When did you mention tiles in your question? I had to make the assumption and talk about all the possibilities. And have you read the document I linked about isometric tiles? It talks about your problem on page 15. \$\endgroup\$ Mar 27, 2012 at 15:14
-
\$\begingroup\$ ok, i use jQuery, and my idea it's make a isometric floor. i read about tiles here: cw-internetdienste.de/2010/05/creating-a-basic-isometric-map but this script doesn´t works me, the tiles don't maintained in the site. \$\endgroup\$– davidMar 27, 2012 at 15:28