I've been looking for a solution for quite a while now, but I can't help finding one. The situation is as following: I created an SKSpriteNode with an image, by the method touchesBegan I want to interact with it, like if one touches the image, something should change. The problem is that the hitbox around this image is square-shaped and not adjusted to the shape of the image. Has anyone got any clue how I can solve this problem? I tried doing it by changing the physicsBody like this
CGFloat offsetX = node.frame.size.width * node.anchorPoint.x;
CGFloat offsetY = node.frame.size.height * node.anchorPoint.y;
CGMutablePathRef path = CGPathCreateMutable();
CGPathCloseSubpath(path);
node.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];
Seems like the touchesBegan method doesn't use the physicsBody shape but the actual shape, I tried my best explaining it, sorry if I confused you.
Thanks in advance!
Julian
In the Xcode level editor, under the physics definition of your SKSpriteNode, change the body type to alpha mask (see image). This makes the physics boundary conform to the actual shape of your sprite rather than the rectangular bounding box.
Sadly, this solution only applies if your sprites are managed in an .sks file since level editor seems to have logic that calculates your sprite's outline and turns it into a path used to initialize the physics body with a body type of 'alpha mask'. (Too bad there's currently no 'bodyType' property on SKPhysicsBody because it would be really convenient to be able to set this programmatically instead of only being able to do so in the .sks file... Apple?)
The way you're attempting to create and initialize an SKPhysicsBody with a CGpath is on the right track I think... But since it's currently an empty path (having no points or lines) I'm guessing it won't have any effect.
Is there any way you could approximate some points & lines to represent a rough outline path for your sprite? Then, you could use those points to create a CGPath and then use that to initialize an SKPhysicsBody.
If not, a short-term compromise could be to initialize your SKPhysicsBody using init(circleOfRadius:) and use a circle as the body type which could seem less clunky than a box. And you could maybe play around with the circle radius to get a feel for the most natural radius for your collisions.
Related
I'm writing an app that could make good use of the Apple Watch's fitness tracker design, here:
So far, I've created the basic outline which is just a CAShapeLayer with a CGPath of an ellipse. I use strokeStart and strokeEnd to animate the progress. My problem comes when applying a gradient to the outline. How do I apply a gradient like above to the stroke of a CGPath?
The cleanest way to do this without having to drop down to Core Graphics or GL is to create a layer containing the angle gradient that you want the ring filled with, mask it with a CAShapeLayer containing your circular path (with the appropriate line width and cap settings), then, as you’re currently doing, use the shape layer’s strokeEnd property to set the “fill” percentage. Note that there isn’t a built-in way to create an angle gradient—you can use one of the suggestions in this answer for that.
edit: Also, you’ll need a pair of semicircular “cap” images, one at each end of the ring—as the fill percentage gets close to 100%, the region at the top will reveal the discontinuity between the start and end color. In your example image above, you’d need a red semicircle oriented like this ( at the start, and a pink one oriented like this ) with a translation/rotation transform tracking the end.
additional edit: Also also, since the end-cap semicircle will be moving along the gradient, you’ll need it to change color, interpolating from the start color to the end color as the fill amount goes from 0% to 100%. Best way to do that is with a shape layer with a semicircular path, since you can set the fillColor of that without having to redraw image contents.
We did this for an iOS app.. but quickly stopped as it gets bogged down quickly.
I think Apple is using images.. as they do in the Lister example
I want to be able to select some area from this image, and change the color of the selected area.
To do this, I thought of using CALayer and UIBezierPath.
I've cleared the colored area from the image, then I took each area point and drew a UIBezierPath beneath the image.
I have 3 CALayers for each area, each CALayer has a UIBezierPath with predefined points.
When the user clicks on a layer, it will show the selected layer without filling the UIBezierPath, just to have a border around the UIBezierPath, the result look like this:
I added a UIView over the image with Opacity = 0.6f and
redrew all the CALayers on it.
All the layers are hidden in the new UIView
Every thing is working great, the next step is to merge the selected areas:
I took the points from the first area and added it to the points of
the second area
I created a new UIBezierPath with the new points
My problem is that the result is wrong:
How to merge a UIBezierPath with a correct points order?
Is there a better way to accomplish something like this without
using UIBezierPath?
from looking at the image above, the path is wrong because the sequence of points is not followed which pretty much screws up your path. I don't think a Bezier Path is the right tool to do this in the first place as you have rectangular or point to point connections. So you more have a Poligon than a Bezier Path object. However UIKit seems to bundle all this into a UIBezierPath object (non optimal naming if you ask me).
The tricky thing here is to find out where the two shapes really touch each other and to add the points in the sequence as before but then tear up the vertical lines in the middle and connect the path to the other structure.
Another alternative could be to use a bitmap and simply union the bitmaps and create a new shape. It largely depends on how your base data is represented and managed. You could also simply keep two shapes and just join them in a meta object to draw them concurrently.
I used masking for breaking an image as the below mention pattern now its breaking in different pieces but now i have one issue to make the Rect of each pieces, i need to drag the broken pieces and to adjust at correct position so that i can make again actual images. To drag and put at right positing i need to make Rect but i am not getting idea how to make Rect of this irregular shape, I will be very thankful to you, any idea or code to make rect . My previous Question is:
https://gamedev.stackexchange.com/questions/27650/how-do-i-break-an-image-into-6-or-8-pieces-of-different-shapes/27655#comment53300_27655
Why you want to make rect of broken image ? If you want to move the images on touch then it'll not require any rect.The only reason for using Rect of irregular shapes are for sake of collision detection from right part of image.If this is the reason for making cgrect of broken images you can use boundingBox of sprites with pixel perfect collision.
If this is the case in can give you pixel perfect collision detection code.
In my game, I have a CCSprite that orbits another CCSprite, much like an electron orbiting a nucleus. I have the electron as a child of the nucleus, to make animation much simpler. All I have to do is rotate the nucleus and the electron follows suite quite nicely.
However, my problem comes from wanting to have the orbit animation appear a little snazzier, by either adding something like a particle system trail, or a ribbon effect following the path of the electron. I cannot simply add a particle system to the electron itself, because the particles don't follow correctly, since they are being rotated by the nucleus as well. If I add the particle system to self, then they appear correctly, but not in the same position as the object they are supposed to be trailing.
My question is this:
Is there a way to get the scene position of an object, say the electron, as opposed to only having access to it's position relative to it's parent?
Thanks.
Yes there is!
Each CCNode and its descendants has the ability to get a position relative to the scene:
CGPoint worldCoord = [mySprite convertToWorldSpace: mySprite.position];
This worldCoordinate will be relative to the scene as opposed to the parent node!
Hope this helped! ^_^
A later edit:
When you do:
[aSprite convertToWorldSpace:position];
You are actually getting the global coordinates of position in aSprite's coordinate system. If you want to translate aSprite's position to global space you need to ask for it's parent to do the translation for you, because the sprite.position is already in it's parents coordinates system.
Hope it explains it
Original Answer:
For me this solution did not work
I had a 2 level hierarchy where mySprite is a child of a CCSprite that is a child of the scene.
Bottom line: This code fixed the problem for me:
CGPoint worldCoord = [[mySprite parent]convertToWorldSpace: mySprite.position];
This is the hierarchy structure that required my solution:
myScene -> mySpriteParent -> mySprite
mySprite.position:29,254
mySpriteParent.position:533,57
Solution1 - wrong result:
[mySprite convertToWorldSpace: mySprite.position]:91,418
Solution2 - right result:
[[boxSprite parent] convertToWorldSpace:boxSprite.position]:253.5,275.5
Perhaps this solution will help someone
And maybe someone will explain why this solution works and not the other
I'm working on an iPhone app that has some non-rectangular UI elements. Currently, I'm subclassing UIView, and in drawRect I'm using a CGPathRef to draw black border and a color-filled interior.
I'd like to make these items look more like "buttons", though, so I'd like to have some of the same sort of "glass effects" that are used on e.g. the icons for an iPhone app (when you don't set UIPrerenderedIcon to true), or in other buttons.
I hunted around, and found this, which seems to be close to what I need:
Gradients on UIView and UILabels On iPhone
But I'm having difficulty figuring out how to clip the gradient to my shape.
It seems like the mask property on the view would be the right place to go, which seems like it would call for me to create a new CALayer object, with the clipping somehow applied to it.
I'm hoping there's some nice convenience function for doing this, though if I need to write something more complicated, that's OK, too. I'm just having difficulty figuring out how to apply the path as a mask. I'm unsure if I need to create a new drawing context and draw the path into it? And then use CGContextClip?
I think I've got a lot of the right pieces figured out, I'm just having difficulty understanding how to assemble them.
Could someone please point me in the right direction? (I'm happy to read more in the docs, just point me in the right direction, please.)
You can create a CAShapeLayer and set its path to your CGPathRef. Then set the mask property of a CAGradientLayer to your shapeLayer.