Publishing System Settings Logout Login Register
Browsergames: Creating a basic Isometric Map
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Add to Favorites
Posted on June 8th, 2010

Hello everyone,

This tutorial will give you a short introduction on how to code your own jQuery plugin that creates an isometric map out of an array and a given container. I'm sorry for the missing syntax highlighting, I will add it as soon as I get it to work properly. Somehow it doesn't render correctly, even if I add the correct formatting by myself.


1. Introduction

First, I assume you're using jQuery, because I do and I used it to write the isometric map. After this article you will have a fully working jQuery plugin that can create a isometric map out of a array and some other options. The styling is completly done by a small stylesheet and spritesheet. You can easily enhance it and also make use of the very basic objects that can be added.

Also the array that you give to the plugin doesnÃt need to start with "array[0][0]" so you can easily load content with ajax from the current location. This might be useful because you could have a array beginning with 2545 as y value or something like this.


This image displays how coordinates are arranged on the isometric map. The lowest value is located in the left corner, in our case this is 0,0 as we start at the beginning of a map.

Next Page
Pages: 1 2 3 4 5
Dig this tutorial?
Thank the author by sending him a few P2L credits!


I'm a freelancing webcoder from germany next to Frankfurt. I'm developing web application solutions for mid-sized companies. I'm a coder with minor art skills.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top