Irregularly shaped sprite from a texture map?

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Irregularly shaped sprite from a texture map?

(19 posts) (3 voices)

Started 2 years ago by monte
Latest reply from monte

Tags:

monte
Member

I have an image and a convex polygon defined by an array of x,y coordinates.

How would I go about getting a sprite (or a Texture2D) representation of the part of an image encompassed by a polygon?

I know cocos2d's atlas sprite manager can grab a rectangular shape from an image, but I'm having serious difficulty finding a way to get a sprite ( or Texture2D object) from a shape with more than four vertices.

Basically I just need a texture from the image with the part outside the polygon made transparent*.

If the resultant texture were also clipped to the width and height of the polygon I'd do backflips.

Any pointers/snippets would be appreciated. Thank you!

*(These polygons will vary so I'm trying to come up with a function that can be passed the vertex arrray defining the shape I want to grab from the image.)

Posted 2 years ago #
monte
Member

This street is empty. A tumbleweed rolls by...

Posted 2 years ago #
Lam
Member

Haha. Sorry about that I never saw this post.

Please explain a little more about your convex polygon coordinate space.
Are you trying to say you want a texture coordinate space conversion from your convex polygon coordinates?

Posted 2 years ago #
monte
Member

I'm not sure if that's another way of saying what I'm trying to do... but imagine you had a 320x480 background uiimage and a polygon box2d shape - say with 5 or 6 vertices moving across the screen over the background image. What I'd like is a way to grab the part of the background image covered by the box2d shape when, say, I tap the screen.

I've got as far as getting the polygon's vertex array from box2d with its screen coordinates (converted from world coordinates) when I tap the screen. All I need now is a way to grab the part of the image within the polygon.

I hope this made it a bit more clear what I'm trying to do!
Thank you so much for taking the time to read all this!!!

Posted 2 years ago #
Lam
Member

A pictures worth a thousand words... unfortunately I don't know how to post one on here
=/

To figure out how to map your texture image onto the shape you first have to decide if the texture grows according to the shape. So if a shape is twice the size then the texture is twice the size as well.

If it doesn't then you want the texture to stay the same and sometimes the face will get cut off.

Do you know which one you want?

It's pretty much texture mapping that you're doing. How much do you know about texture mapping in opengles?

NOTE: I'll be a busy for a couple of hours today so sorry in advance if I don't respond readily . I hope someone will be able to help but if they don't, I'll figure out a solution when I get back.

Posted 2 years ago #
monte
Member

I don't think I want it to grow...

Imagine I print out the background image on paper. Then I draw the 6 vertex dots on it. Then I connect the dots. Then I cut out the shape I just drew and tossed the rest. I would then have what I need :)

Posted 2 years ago #
monte
Member

Oh, about texture mapping in OpenGL ES I've been studying it like crazy for the last week in pursuit of a solution for this little problem. I may have do some googling to interpret any GL related suggestions but I'll try my best.

Posted 2 years ago #
Lam
Member

Ok so I made some pictures below to kind of explain my point. (Click to get full image)
The first image depicts texture mapping that does not care about the size of the shape so if we have different shapes the image will always be the same.

The second image shows a texture mapping that will scale the texture across the shape so the image will be larger relative to the shape size.

Those are the two options.

Posted 2 years ago #
Lam
Member

Wow... ok it's been an hour and I guess I'm not allowed to post images since that post never shows up. =/

Anyway, All you do is convert the vertex points of a box2d shape to a normalized range. Then it is easier to take those coordinates and convert to a texture map coordinate.

I would show pictures as I type this but then my posts won't ever show =/

Posted 2 years ago #
riq
Key Master

@Lam: Your post didn't show up becase bbPress thought that it was spam. fixed.

Posted 2 years ago #
monte
Member

The first image is exactly what I need. Thanks for making those!

I've converted the box2d coordinates to my image's coordinates. This is where I'm stuck unfortunately :(

Posted 2 years ago #
Lam
Member

@riq
Sorry about that. So pretty much any image I make will be spam. Is there a better host for free images?

@monte
A big thing about box2d is that you want the metrics somewhat correct.

1m (box2d) = 32 pixels

what's your conversion formula right now?

Posted 2 years ago #
monte
Member

I'm using 32 ppm also. I've got all the coordinates in the vertex array translated to the image's coordinate space. It's how to now make open gl es return the texture that's still confounding me.

Posted 2 years ago #
Lam
Member

if you look in the Texture2D:drawRect it might provoke some insight. Ask any questions though if you don't understand the calls.

So pretty much if your class extends a CocosNode or TextureNode, all you need to do is override the draw method. Bind the texture and use glDrawArrays or glDrawElements with your own vertex data.

This forum post had someone needed to map coordinates that vary between any number of vertices so I posted some code it might make sense.
http://www.cocos2d-iphone.org/forum/topic/2612

Since you already have the vertices and image coordinates it should be quite easy to create triangles from them.

Does image coordinate space represent texture coordinate space?
You know 0,0 being top left to 1,1 being bottom right?

Posted 2 years ago #
monte
Member

I've tried something close to that a few times, but I obviously missed something - I'll try again. That last step - "Bind the texture and use glDrawArrays or glDrawElements with your own vertex data." - is the part that kills me. I've looked at how the texture atlas class extracts a quad from an image, but I can't seem to get a more complex shape extracted.

Posted 2 years ago #
Lam
Member
Well I know you want a 5 or more vertex shape but a simple example might make it clearer.

Let's say you want a triangle from box2d.
The image is a triangle with a width and height of 32.

Therefore box2d has vertices
```
bVerts = {{0,1},{-1,-1},{1,-1}}; \\(Top, bottomLeft, bottomRight)
```
So you want to convert bVerts to texture coordinates (which would have to be):
```
texCoord_ = {{sMax*.5f, 0.f}, {0.f,tMax}, {sMax, tMax}};
```
What we really need though is vertex coordinates for the node space and we know if we are drawing in a node it's relative from the node's position so:
```
vertices_ = {{0,32},{-32,-32},{32,-32}}
```
Then its just binding the texture and vertex data and using glDrawArrays. But the coordinate conversion must be correct otherwise it'll probably draw offscreen or with the wrong size.
Posted 2 years ago #
riq
Key Master

@Lam: Most of the time, the posts with images are not tagged as spam, but sometimes bbPress thinks they are spam. bbPress is using askimet to detect spam.

Posted 2 years ago #
monte
Member

Holy shit that makes sense!!!! Lam, you're awesome. I will try again as soon as I get home!

Posted 2 years ago #
monte
Member

I've been looking at Texture2D:drawRect per your suggestion - and the TextureNode draw method you overrode from the post you linked to at:
http://www.cocos2d-iphone.org/forum/topic/2612

That has helped some thanks!

You asked,
"Does image coordinate space represent texture coordinate space? You know 0,0 being top left to 1,1 being bottom right?"

That means I need to normalize the texture's width and height when I tell OpenGL what to grab, right?

Must sleep now... so close... too many hours of not looking away from screen...

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.