Sprites and image masks « cocos2d for iPhone

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

Sprites and image masks

(15 posts) (4 voices)

Started 1 year ago by codecowboy
Latest reply from thefuzz

Tags:

photo edit

codecowboy
Member

If I want to have a portion of a large image only displaying through the alpha channel of a sprite which was been created from a png with transparency (e.g. a black jigsaw piece on a transparent background), is this possible using the existing sprite class in 0.99 final?

an explanation of the problem using layers:

layer 1 - background image
layer 2 - sprite created from a png with transparency (jigsaw piece)
layer 3 - the user sees only the portion of the background image visible through the jigsaw piece which acts as a mask. None of the rest of the background image is visible.

Does anyone have a definitive answer on this? The docs / forum posts are either out of date / non-existent / confusing.

To be clear, don't want a 'scratch off' example or texture blending (I don't think ;-). I have looked at the examples and searched extensively on google and the forums. I just want to know if the above is possible and , if so, which classes / methods I should be using in the latest version of cocos2d.

This post says I would need to subclass sprite. Is this the only way to achieve this?

http://www.mailinglistarchive.com/cocos2d-iphone-discuss@googlegroups.com/msg03112.html

Many thanks for any replies!

Posted 1 year ago #
petem
Member

It sounds very much like what I'm trying to do, viz imagine a hole in the wall and there's a layer/sprite visible through the hole (ie transparent section). If that's what you're asking, then yes it looks as I described.

It seems to me though that if you touch what you see through the hole and the outer layer is catching the touches, then the inner layer won't get them even though you touch through the visible hole. If outer layer is not intercepting the touch, then it's passed through everywhere in the outer layer, not just the hole.

If this is you, then join me waiting for advice. Otherwise, maybe you're in luck.

Posted 1 year ago #
Steve Oldmeadow
Administrator

@codecowboy and @petem - can you explain what you want to do more clearly? A picture would really help. I realise you may not want to give your ideas away but if you want help you may need to explain your requirements in a more concrete way.

Posted 1 year ago #
petem
Member

I'm unaware how to include a picture here. Imagine simply vertical wall, a window in wall and a mountain beyond and through the window; wall is sprite with a transparent section being the window, and mountain is another sprite.

Not sure about @codecowboy but I'm wishing that touches of the "mountain" will be, blocked by the non-transparent wall areas, ie, touch only through window.

Does this help?

Posted 1 year ago #
Steve Oldmeadow
Administrator

@petem - I would implement the wall as a layer, in the touches began and touches moved event handlers I would work out whether any touches are within the window using a simple point in rectangle test. If a point is within the window then process accordingly.

Posted 1 year ago #
petem
Member

I understand, and if the "window" was not a CGRect but more a circle, or something worse, then I would need to determine an enclosing CGRect? It's not generated prog'ly so I'd need to hardcode it? In my case it's more of an ellipse, determined by the art people.

Posted 1 year ago #
Steve Oldmeadow
Administrator

If it is an ellipse then you should be able to come up with a formula, if it is an irregular shape then you might need to use some kind of bit mask that you check against to see if the point is within the window. Either way knowing the bounding box for the window would be useful so you can quickly reject touches that can't possibly be within the window.

You could generate the bounding box and bit mask at run time by analysing the UIImage that is used to create the wall. However, that makes your user pay a performance and battery hit every time they run your game. Personally I'd calculate these offline.

Posted 1 year ago #
petem
Member

Good, thanks for the thoughts. Ellipse bounding box is not ideal since there is some "leakage". I guess I was hoping for a way where I could put an "invisible texture" over the window and sense touches on the texture. Not in this lifetime I guess.

How would I generate a bit map prog'ly? And is there a convenience method for using it?

Posted 1 year ago #
Steve Oldmeadow
Administrator

By bit mask I was referring to just an array of bits that indicate whether a given pixel is touchable. There was some code posted on the old Google forum by Ernesto Corvi for creating collision maps that would be useful. Basically you just scan through a UIImage's pixels looking for transparent ones. mhussa recently posted some code that shows how you can efficiently pack the bits for your bit mask.

Posted 1 year ago #
petem
Member

OK, and the bit mask array might be generated offline too. Interesting.
You've updated me on useful techniques, so thank you very much. I'll try some of this.

Posted 1 year ago #
petem
Member

Steve, the window is a circle and using a formula involving diffference, squares and sqrt()'s I'm now able to be accurately selective about moving only via touching the image through the window. Works great but ... having touched and started moving the image inside the window, it's still moving as the finger goes over the window edge. The touch is not to be sensed outside the window.

I tried to fix this by using the same formula inside the cctTouchMoved method, to check whether to increment the move or not. Basically return with no movement if inside-window-check returns false. It works in principle but makes for jerky movement and inaccurate stop positions, and that's on the simulator. Clearly a performance hit.

Is there a better way of dealing with the contained touch effect? I'd like to hear about whatever works here. Thanks.

PS. Still interested in a better way but another look at this revealed that it's not that bad - still workable. Not a problem for now.

Posted 1 year ago #
Steve Oldmeadow
Administrator

If you are doing point and circle comparison then there is no reason to use square roots, work in squared space instead. e.g if you are currently comparing the square root of something to a certain number then don't take the square root and compare it to the square of the number.

I also wouldn't process every point in the touch handlers. In the touch handlers I would just remember the last point that was touched and then do the processing in a scheduled "tick" method. The touch handlers may be triggered more frequently than the screen update but there is really no reason to process every touch moved event. You also may want to calculate a trajectory between the last point processed and the current point and move your object somewhere along that line - this means if the user quickly moves their finger to a non touch responsive region the movable object would still move as far as possible towards the touch.

Posted 1 year ago #
petem
Member

All good tricks. Thank you. I'll certainly use the "squared space" comparison. The movement is quite smooth as is, so for now I'll process touches as they're presented. The trajectory may be a bit too soph'ed for the current need but I'll put it under my hat.

This has been very useful, and thank you again.

Posted 1 year ago #
codecowboy
Member

thanks for hijacking my post petem! That's not what I wanted to do at all.

Posted 1 year ago #
thefuzz
Member

@codecowboy: Can your jigsaw piece actually be the reverse ? i.e. the entire screen blacked out with only the jigsaw piece cut out (i.e. alpha) or will you have too many jigsaw pieces on screen to pull off that awful hack ;)

@Steve, petem: I'm using svg parsed poly's as masks and good old 'point-in-poly' checks for hit testing in my upcoming game Chuck Gnome (http://www.cocos2d-iphone.org/forum/topic/5555). If there is interest I can post some code samples in a new thread, it should be just as applicable to touch detection as it is sprite collision.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.