Latest Vanilla JS Tutorials

Latest JsIso Tutorials

RSS feed
JsIso - Open Source Tile-Based Engine

JSIso - A Tile-Based HTML5 Canvas Engine

JSIso is a Tile-Based engine which uses the HTML5 Canvas element. It's still classed as being in early stages and will be until it is capable of much much more. The engine is still under constant development and is licensed using MIT. An early prototype which was titled under the project name of "Glacial Flame" can be seen in the following YouTube Video: https://www.youtube.com/watch?v=Qlsipfu5Qq4. It initially started out as an Isometric engine however it easily supports both 2D and 2.5D

Currently contained features are:

Fork the code from GitHub or check out the samples bellow. We would love to hear your feedback via the contact form, Twitter or directly through iain@beakable.com.


JsIso In Use

Used JsIso for something? Let us know and we will happily feature you here!

Tile Map Samples

These samples are intended as both proof of concepts and initial tests of JSIso capabilities. A few of them are kept simple to show the little code required to achieve the output. Although these eight samples are displayed in their current states, they are intended for further refinement by reducing the customized sample code, optimizing the engine and improving their capabilities on multiple platforms.

Engine Sample One

Sample One
Showcase of most isometric features available.
- Multiple layers
- Heightmaps
- AI Pathfinding
- Fake Lighting
- Multiple Vision Points
- Particle System
- Keyboard Input

 		Engine Sample Two

Sample Two
Isometric Sample showing larger map array.
- Single Layer
- Heightmap
- Zoom
- Rotate
- Keyboard Input

 		Engine Sample Three

Sample Three
Isometric Tower Defense styled gameplay. Click to create maze.
- Single Layer
- Heightmap
- Pathfinding
- Mouse Input
Engine Sample Four

Sample Four
Smooth moving in Isometric view similar to featured sample below.
- Single Layer
- Heightmap
- Cross Tile Locations

 		Engine Sample Five

Sample Five
Simple 2D Tilemap
- Isometric set as false
- Mouse Input

 		Engine Sample Six

Sample Six
Basics of a 2D platform game.
- Isometric set as false
- Keyboard Input
- Cross Tile Locations
- Particle System
Engine Sample Seven

Sample Seven
Simple 2D snake game. Replica code of sample 8.
- Isometric set as false
- 2D tiles 25 x 25
- Keyboard Input

 		Engine Sample Eight

Sample Eight
Simple Isometric snake game. Replica code of sample 7.
- Isometric set as true
- Isometric tiles 34 x 17
- Keyboard Input

 		Engine Sample Nine

Sample Nine
Similar to Sample 3 but uses JSON.
- Single Layer
- Heightmap
- Pathfinding
- Mouse Input
Engine Sample Ten

Sample Ten
Height-map image example.
- Single Layer
- Heightmap
- Mouse Input
- Uses a height-map image to generate world

Engine Sample Eleven

Sample Eleven
Isometric Tiled Editor example.
- Single Layer
- Uses default Isometric Tiled Editor sample
- Spritesheets

Engine Sample Twelve

Sample Twelve
RGBA Tiles example. Similar to sample 3 & 9.
- Single Layer
- Heightmap
- Pathfinding
- Mouse Input
- RGBA tiles rather than images

Engine Sample Thirteen

Sample Thirteen
Tiled Editor example.
- Single Layer
- Uses default desert Tiled Editor sample
- Spritesheets

Engine Sample Fourteen

Sample Fourteen
Tiled Editor example.
- Single Layer
- Uses default desert Tiled Editor sample
- Spritesheets
- Fake lighting
- Particle Engine
- Mouse Input

Engine Sample Fifteen

Sample Fifteen
Tower Defence example.
- Single Initial Pathfinding Generation
- Animated Sprites
- Towers that Pew Pew
- Mouse Input

Engine Sample Sixteen

Sample Sixteen
Multiple Pathfinding Units.
- Multiple Pathfinding Generation
- Animated Sprites
- Mouse Input