Skip to content

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

Notifications You must be signed in to change notification settings

ojdon/CSS3-Isometric-Tile-Map-Example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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, who is currently a Web Development student who has always had an interest in game development. Have a question? Ask me on Twitter!

@ojdon

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages