... and an example of using the data output from photoshop (or Gimp) to create a complex irregular hit area map

http://abitofcode.com/2011/07/irregular-touch-detection-when-cgrect-is-not-enough-part-1/

Finally got around to writing up the use of Photoshop as a means to create a lookup array http://abitofcode.com/2011/07/building-arrays-with-photoshop/

hi,i have the same problem that when the sprite rotate or scale,then Pixel detection was not right,seems use the init texture coord,the
texture content size not rotate or scale,so Pixel detection was wrong,anybodt can help?
and CCMutableTexture2D can use for the frame animate?
thanks

umm MutableTexture2D is proving quite memory intensive indeed. Will have to give it a go to your solution. Hope the weather is baaaad during the weekend so that I can put some more time to work :)

Yes ... if you have memory warnings or if your game is running slow ... use the described method.

I've played with it a bit for a displacement map I was working on http://www.cocos2d-iphone.org/forum/topic/11659 with Manucorporat's Gaussian blur code http://www.cocos2d-iphone.org/forum/topic/11745

It's the reading of pixels that has an overhead, if you hit any bottlenecks in performance just move across to the alternative method

Got it working!

After thinking on your ideas I've realized that what I had to do was to translate the touch coords into the original texture system, not to translate the system!

So I've carried on with my implementation using CCMutableTexture2D and did to translate the touch:

- (BOOL)checkAlphaTouchPoint:(GCTouchPoint *)aTouchPoint
{
	//"firstState" is a CCSprite initialized in another place with a mutable texture:
	//CCMutableTexture2D *tex = [[CCMutableTexture2D alloc] initWithImage:[UIImage imageNamed:aSprite1File]];
	//firstState = [CCSprite spriteWithTexture:tex];

	CCMutableTexture2D *mutTex = (CCMutableTexture2D *)[firstState texture];

	//Converting the touch position to the node
	aTouchPoint.pos = [self convertToNodeSpace:aTouchPoint.pos];

	float texWidth = [mutTex contentSize].width;
	float texHeight = [mutTex contentSize].height;

	//Translating position
	float posX = (aTouchPoint.pos.x + texWidth / 2);
	float posY = (aTouchPoint.pos.y + texHeight / 2);

        //Now the CCMutableTexture2D does the magic
	ccColor4B pixel = [mutTex pixelAt:ccp(posX, posY)];

	int aaa = pixel.a & 0xFF;			

	if (aaa > 0)
	{
		//SOME SECRET LOGIC HERE :)
		return YES;
	}

	return NO;
}

Your suggestion sounds completely doable as well but I wonder if you guys have looked into this mutable texture class before (I reckon it has only been added a few months ago).

I do appreciate your help!

Just done a quick test;

* create a 2x2 image in Photoshop.
* Set mode to Grayscale
* Fill top left square with black
* Top right with a gray
* Bottom left with white
* Bottom right with gray
* Save As > Photoshop raw (probably an idea to save the Photoshop file at the same time in case you need it later)
* e.g myfile.raw
* I used settings - File Type: WARP File Creator:MIB8 Header:0
* Open a terminal window
* change directory to the file you have created i.e
- type cd
- drag the folder of containing the file onto the terminal window to pass in the path
- (on a side note typing 'open .' while in the terminal window opens up a finder window to that location)
* hexdump myfile.raw
* You should now see the hex values 00 67 ff 00 (black, grey, white, black)

most of these steps can be automated using Photoshop actions, including a resize as per @ehoffman 's suggestion

:D

Thanks @abitofcode and @ehoffman. I will try what you've suggested. I have this as a background task at the moment but will come back with my final resolution.

@jotajota There's more to do before the game is ever run but most of that can be automated, at runtime all you are doing is providing an offset into an array. The 256 potential values for each lookup can be put to any number of uses.

@abitofcode You guess right. I meant grayscale. :) And second yes, PhotoShop.

@jotajota Grayscale to get values in between ... visible ... half visible ... not visible. In the example of abitofcode the values represent the height of the terrain (0=valley, 255=mountain). I needed values in between to give the player a better chance at the borders of the trees (so the player can sometimes hit "through" the leafes of the tree).

This method is as exactly as you want it (depends on how much you scale down the images). It can be very difficult to define polygons for the leafs of a tree or hairs in a picture... With this method you have a lot of preprocessing, but what you use in the final game is very effective - less memory, fast (just one lookup to an array), ... If you have enough CPU/RAM (or you simply don't need to care if your program runs fast enough), you can do it in the game/program. But as ressources on mobile devices are limited ... pre processing can help.

@abitofcode I think ehoffman refers here to B/W representing Alpha =0 and Alpha != 0.

Thanks for the tip on PS. If I understand correctly your solution (combined with ehoffman's second solution) would be to:

1. Convert each graphic into a B/W one (PS batch script)
2. Convert these files into raw binary files
3. Create C arrays with this data for each graphic
4. Do the conversions of the Touch position according to scale/rotation
5. Check touch position against C Array

Doesn't it look too cumbersome and pre-processing intensive?

I'm trying to automatize the pixel detection to stop using the polygon solution I already have in place, and this solution while better than my current one, looks like will add the same or possibly more burden to the process.

I'm looking into the coordinate translation against the texture/sprite to see if I can come with something more real-time...

any more pointers on this?

Thanks

convert them into C arrays with just the b/w values

I'm guessing you meant Grayscale here not b/w. I've used this approach in the past to generate data from maps to allow me to scale characters i.e make them smaller as they go into valleys and bigger as they reach the peaks. If i remember correctly you can save the data in raw format from Photoshop to get your array (1998 was the last time I did this :S )

edit: You may be able to record a macro in photoshop and batch convert all your images to raw format in one go.

I can't opt for your suggestion (2) as the number of different graphics is quite big and the work I'm doing should be agnostic to the graphics. This is indeed the reason for these investigations as I have already a working solution (using polygons for each graphic) but it's too time consuming and scales badly.

I will try to look into RenderBuffers. As I mentioned before, I don't master textures or "graphic processing" so it will take me some time...

But thanks! @ehoffman

Someone may correct me, if I'm wrong here ...

The scaling and rotation of the texture is done by the GL engine/GPU. Have a look at the CCSprite draw method. A CCSprite is always a quad, which is drawn by splitting it into two triangles using VBO on newer devices.

Then the vertices of this two triangles (6 vertices) are feed into the GPU:

1--4
|\ |
| \|
2--3

1 and 3 are used in both triangles. For every vertice there are texture coordinates (u,v) and color information. The texture coordinates are always in 0,1 range (ok, they are flipped and not always 0,1 when using sprite sheets... but for now...).

No scaling or rotation. I think you could do that manually, but I think you will waste a lot of memory.

How could you solve the problem?

(1) If you have a lot of changing sprites (I mean a lot of different graphics) to check you could just draw to a CCRenderTexture (RenderBuffer) and check there.

(2) If you know all your graphics at development time you could use smaller graphics to check. I did that for my HubliBubli... There I have three layers with an alpha channel. So I made a grey scale image from every layer representing only the alpha channel - black means 0% alpha, white is 100% alpha.

Then I scaled the images down - 25% of the original size is enough to get an acceptable touch accuracy on iPad and iPhone Retina.

Now you can use the images directly or -what I did- convert them into C arrays with just the b/w values (unsigned char) - I used a small PHP script for that. Include the arrays in some header file.

Now, how to check if the sprite is scaled/rotated: You know the screen position of the touch TOUCH(X,Y) and you know the rotation and the scale of your sprite. At first convert the TOUCH(X,Y) to your node space (the position inside the sprite). Now apply scaling and rotation to this and check it against your C array (take into account if you resized the images).

I'm trying to implement a pixel detection mechanism. Basically I need to check whether a touch happens on a transparent pixel to trigger some logic. For that, I've been experimenting with CCMutableTexture2D which is a great implementation I think and adds value to the engine.

It works fine when I create the texture with a file and then initialise Sprites with these textures. I also have it working so that the detection works while a Sprite is moving.

However, it is not fully working for me when I scale the Sprite after initialising it. When I inspect pixels form the MutableTexture, these seem to reflect what it would be if I didn't scale the Sprite.

The problem really is that I've never worked with textures myself and I don't really understand what is that I'm not taking in count. I get that the textures themselves will never resize but I don't know how to "translate" the scaling done on a Sprite to its texture.

Any help much appreciated.
Thanks!