This plugin is out of date. The new demo can be found here: DEMO
In my last tutorial I talked about how the isometric map could be enhanced, for example by using canvas as a tool to determinate the real position of an object and not the whole image including transparency. In this small article I would like to introduce this technique. I got inspired by Dextrose AG and their fabulous upcoming AVES Engine. I’m sure their approach is much more efficient and functional. But mine should give you a good point to start.
1. Introduction and Features
It really is just a good starting point and should not be used in a public project, just like the isometric map plugin. However it will give you instantly access to the following features:
- Selection of IMG “objects” by filled pixels excluding transparent pixels
- Basic Processing of Objects behind transparent areas. The events will be triggered to the object behind
- Support for click, over and out callbacks.
- Everything as a jQuery plugin
Is it fast? Is it crossbrowser? Well I must admit, I didn’t heavily test it, I just wanted to introduce the technique itself. But without processing objects behind transparent areas, I was able to load 1.500 IMG objects with different images and without any performance loss. I think this is more than most need.
2. How is it working?
In this case canvas reads the data of x: 34 y: 21 with only 1 px width and height. The data constists of r,g,b and the alpha value, which is the only important one in our case. 1 is no transparence and 0 invisible. So all we need to know is if the pixel is totally transparent (0). Actually pretty easy isn’t it? If the pixel we’re hovering is NOT transparent, we just attach a class to the object to make it active. This is it. Of course it’s a way harder to make objects behind the transparent areas work.
- The top layer will normally get all events called because he is above the bottom layer. Because of this object#1 is without any use and interactivity.
- A click on object#2 will also normally call the objects event function, but in our case we check if it is a transparent pixel. Else we will normally go on.
- Assuming it’s a transparent pixel, we now hide object#2 and use the document.elementFromPoint(x,y) function to check what object is also located on the given coordinates. Now that we know the object, we trigger the click event on object#1
- Now we make object#2 visible again. All this happens quite fast, so it won’t be really visible to users, except the performance is really weak.
I will post the script of this tomorrow as there are still some small bugs and performance issues. But for now you can just test it over here:
Thanks for your time, I hope you like this article. More to come!