Differences
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]]. | ||