https://github.com/ojdon/css3-isometric-tile-map-example

A simple demonstration on how to create Isometric tile maps using CSS3 Transformations
https://github.com/ojdon/css3-isometric-tile-map-example

Last synced: 3 months ago
JSON representation

A simple demonstration on how to create Isometric tile maps using CSS3 Transformations

• Host: GitHub
• URL: https://github.com/ojdon/css3-isometric-tile-map-example
• Owner: ojdon
• Created: 2013-06-22T12:37:57.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-12-06T12:56:39.000Z (about 11 years ago)
• Last Synced: 2024-05-02T00:19:23.444Z (8 months ago)
• Language: JavaScript
• Size: 112 KB
• Stars: 6
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#CSS3 Isometric Tile map Example

##Purpose

I wanted to demonstrate that the canvas element is not the end-all for developing modern web-based games. Therefore this isometric tile map engine uses the recently implemented CSS3 transformations for the rotation and skewing of the tiles and also modifying other factors of each tile such as the color or position of each tile.

This project also uses jQuery to aid with dynamically adding / removing each tile on the map and will later play a huge part with parsing a simple tile mapping format so that creations can be easily imported / exported into the game view.

The first version of this project was developed and uploaded to GitHub within 24 hours of it's initial creation.

##Features

- Not <canvas> dependent

- CSS3 Transformations for ease of future texture creation (Textures will be rotated and skewed onto the selected tile)

- Adding different tiles / colors dynamically

- Basic real-time tile map editor

##Future Goals (In no particular order)

- Include sample transparent textures to accompany the background color

- Import/Export tile map file for quick map creation

- Snap tiles to an isometric grid

- Improved Responsive Design

- Additional Object layer

- More technical tile types (Stairs, etc) & layers

- Tile Selection

##Changelog

###Version 1

- Initial release

##License

This project is distributed under the MIT license. Go wild!

##Contact Me

This project was originally created by [Ollie Reardon](http://ollie-reardon.co.uk/portfolio), who is currently a Web Development student who has always had an interest in game development. Have a question? Ask me on Twitter! 

[@ojdon](http://twitter.com/ojdon)