This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
iso [2011/12/31 07:39] Joel Dare |
iso [2020/06/01 22:53] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== iso ====== | ||
+ | |||
+ | A JavaScript library that lets you draw isometric 3D like images using isometric blocks. | ||
+ | |||
+ | ===== Example Code ===== | ||
+ | |||
+ | <code> | ||
+ | window.onload = function() { | ||
+ | |||
+ | iso = new Iso('isoCanvas', 53); | ||
+ | |||
+ | iso.draw(-1, 0, 0, 'grass.png'); | ||
+ | iso.draw(0, 0, 0, 'grass.png'); | ||
+ | iso.draw(1, 0, 0, 'grass.png'); | ||
+ | |||
+ | } | ||
+ | </code> | ||
+ | |||
+ | ===== Example Image ===== | ||
+ | |||
+ | Here's a screen shot of an example image drawn on an HTML page using this library. | ||
+ | |||
+ | {{ :iso_example.png?direct&300 |}} | ||
+ | |||
+ | ===== Coordinates ===== | ||
+ | |||
+ | iso uses a 3D coordinate system using the x, y, and z axis. (0, 0, 0) is the center point. Here's a graphical drawing of the coordinate system. | ||
+ | |||
+ | {{ :coordinates.png?direct&300 |}} | ||
+ | |||
+ | ===== Block Images ===== | ||
+ | |||
+ | Each block is actually a png image file. You can use various image files to represent different types of tiles such as glass, dirt, rock, brick, etc. | ||
+ | |||
+ | ===== Browser Support ===== | ||
+ | |||
+ | I've now tested the library in FireFox 8.0 and Chrome 15 (both under Linux). But I imagine it works with most current browsers and operating systems. The HTML 5 canvas element is new to HTML 5, however, so older browsers do not support it. | ||
+ | |||
+ | ===== Files and Source ===== | ||
+ | |||
+ | The [[https://github.com/codazoda/iso|iso files]] are hosted on github. | ||
+ | |||
+ | ===== License ===== | ||
+ | |||
+ | This source code is distributed under the [[MIT License]]. | ||