Christian Weber Internentdienste

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 faboulus 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?

If you normally hover an image it also recognized it on the transparent pixels. In our case it’s the same, but we attached a javascript event to the mousemove event. At the background an invisible canvas element with the same size as your image gets created and the same image gets loaded there. While moving on the image, canvas reads the pixel data of the exact same position on the canvas. Like this:

var pixel = context.getImageData(34,21,1,1);
return (pixel.data[3]===0) ? true:false;

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.

1. 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.
2. 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.
3. 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
4. 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:

Show Demo

Thanks for your time, I hope you like this article. More to come!

Best Regards,
Christian Weber
CEO of HydraGames