Sprite hitTest || alpha channel transparency check possible?

[michahell]

Hi forum,

 

I am working on a proof of concept for a game where i need to be able to place buildings (like any RTS you know). I already have some terrain generation going (I do not use tilemaps) with trees and later on other stuff. I'd like to know if it is possible somehow to calculate where a user can place buildings, and possible even draw (using PIXI.Graphics) a green colored area (around the building) where it is possible to place / install it.

 

Circle based collisions would help at this stage, but alpha channel transparency checks would be better: i have tree textures as transparent 256*256 and 512*512 PNG's with shadow, i'd like to know when a building is being placed right near a/some tree(s).

 

http://www.powergeek.nl/proj/mongento/versions/5/ (no preloader, working version. zooming is buggy but too lazy to work on that right now :> ).

Thanks for any tips / pointers!

Edited September 23, 2013 by michahell

[mathaeus]

Canvas' 2D context has the method getImageData that returns an object with one of the property being an array of the RGBA values of the area you checked. You can just loop this array to find the transparency level of all pixels in the area.

 

var ctx = document.getElementsByTagnName('canvas')[0].getContext('2d');

var imgData = ctx.getImageData(x,y,width,height); // x,y - coordinates from where you want to start checking.

 

for (var i = 0; i < imgData.data.length; i +=4) {

    if (imgData.data[i+3] = 0) console.log('transparent');

}

[michahell]

Canvas' 2D context has the method getImageData that returns an object with one of the property being an array of the RGBA values of the area you checked. You can just loop this array to find the transparency level of all pixels in the area.

 

var ctx = document.getElementsByTagnName('canvas')[0].getContext('2d');

var imgData = ctx.getImageData(x,y,width,height); // x,y - coordinates from where you want to start checking.

 

for (var i = 0; i < imgData.data.length; i +=4) {

    if (imgData.data[i+3] = 0) console.log('transparent');

}

 

Thanks for this, but i forgot to mention that i use the WebGL renderer

[xerver]

You should have a map of where the textures are placed in memeory, find the texture for the area in question and run your checks on it. What specific issue are you running into?

[IvanK]

If you are familiar with flash's hitTestObject / hitTestPoint, it is already implemented in IvanK lib -  http://lib.ivank.net/?p=documentation , but for your purpose, it would be better to make a geometric model, it will work much faster than pixel-to-pixel intersection test.

 

You can also create new BitmapData, draw some DisplayObject into it and then use getPixels() with 1x1 rectangle + reading the first value of returned array.

[michahell]

You should have a map of where the textures are placed in memeory, find the texture for the area in question and run your checks on it. What specific issue are you running into?

 

 

If you are familiar with flash's hitTestObject / hitTestPoint, it is already implemented in IvanK lib -  http://lib.ivank.net/?p=documentation , but for your purpose, it would be better to make a geometric model, it will work much faster than pixel-to-pixel intersection test.

 

You can also create new BitmapData, draw some DisplayObject into it and then use getPixels() with 1x1 rectangle + reading the first value of returned array.

 

 

Thank you guys for your replies, i think i understand what you mean @rolnaaba, although i still not understand how to approach a WebGL context as a 2D canvas context, is that possible?

and IvanK, i've worked with your library before, it's pretty awesome, definitely if you come from AS3, which i do. I think it's far better to come up with a better way to position individual elements, which i think you mean by saying 'geometric model'. What are your ideas on this? do you know any good sites that explain how i can get a good geometric model?

 

I've read some terrain generating tutorials in which one solution is to use a physics-based 'spring-model' to position trees, and another one is trees with a surrounding circle in which other trees cannot grow, is that what you mean by geometric model?

 

As to what i am running into, at the moment buildings (and trees) are placed randomly, and i have some basic checks which check if trees are placed on top of each other (if sprites overlap) but that's it. I'd like a better 'model' or ways to check where things are placed, for example,

if you look at my latest working version here: 

http://www.powergeek.nl/proj/mongento/versions/8/

You can see that trees and farms are placed over hedges. I have no idea how to write a check that checks if a building or tree is NOT on a line, for example. That's why i was resorting to alpha channel checking, but that's quite intensive to do if i want to have 1000 trees, 200 buildings etc. etc.

any suggestion is welcome!

 

 

Thanks again!

[xerver]

..., although i still not understand how to approach a WebGL context as a 2D canvas context, is that possible?

 

I'm saying forget the canvas, you have the data in memory (because you are rendering it to canvas) deal with the data, not the display.You should know what tiles are where, and further what their textures are. Do you tests outside the canvas itself.