I'm really struggling to understand cocos2d 2.0 and how its layers and coordinates work. I have a single scene with a single layer that contains a single sprite. Here are the stats:
Layer: Position: (0,0)
Origin: (-384, -430)
Size: (768, 860) (same as the view)
AnchorPoint: (0.5, 0.5)
ignoreAnchorPointForPosition: NO
Scale: 1.0
Sprite: Position: (768, 860)
Origin: (499.5, 413.5)
Size: (537, 893)
AnchorPoint: (0.5, 0.5)
I add the sprite in the init of the layer.
How is it that the sprite is positioned at the center of the view in the iPad simulator? If someone could help me draw a mental picture (or an actual one :)) of this, that would really help.
This image shows how I understand the placement and it doesn't make any sense. If this is a bad question or not the correct forum, please let me know and I'll move it to the correct place.
Anchor point is relative point on the node. (0.f, 0.f) corresponds to left-bottom corner and (1.f, 1.f) is for right-top corner. The position, that you set to the node, is set for anchor point. Of course, if it's property isRelatieveAnchorPoint is YES.
So, if anchor point is (0.5f, 0.5f), you set the position of center of the node. Thats why your layer is placed in (0.f, 0.f) of world coordinates with it's center.
But inner coordinates are always count from (0.f, 0.f) of current node. So, if you add your sprite to (768.f, 860.f) with sprite's anchor point (0.5, 0.5f), sprite's center will be positioned to this coordinates relatieve to the parent layer's origin.
I hope i described it clear enough =)
Related
I am dealing with an experimental setup where a simple picture is being displayed to a gene-modified fly. The picture is projected on a screen with certain distances to that fly.
Now it's my turn to set up the perspective correction, so that the displayed image, for example a horizontal bar, appears wider in a longer distance to the fly's point of view (experimental setup) . The code now looks like this:
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
if(!USEFRUSTUM)
gluPerspective(90.0f, 2 * width/height, 0.1f, 100.0f);
else
glFrustum(92.3f, 2.3f, -25.0f, 65.0f, 50.0f, 1000.0f);
The values were entered by someone a few years ago and we figured out they are not accurate anymore. However, I am confused which values to enter or to change to make the projection work properly, because as you can see in the experimental setup the fly's field of view is a bit tilted.
I thought about those values:
fovy = angle between a and c
measure width and height on the projection screen
but what is zNear? Should I measure the distance from fly to the top or the bottom of the screen? I dont't get why somebody entered 0.1f, cause that seems for me too near.
How can I know the value of zFar? Is it the maximum distance of an object to the fly?
I got my information on glPerspective from: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
I also checked Simplest way to set up a 3D OpenGL perspective projection , but this post doesn't treat my experimental setup, which is the source of my confusion.
Thank you for any help!
This is one of the prime examples where the frustum method is easier to use than perspective. A frustum is essentially a clipped pyramid. Imagine your fly at the tip of a four sided, tilted pyramid. The near value gives the distance to the pyramid's base and the left, right, bottom and top the perpendicular distance of each side of the pyramids base to the tip. It's perfectly reasonable that the tip is "outside" of the base area. Or in case of your fly the center might be just above the "left" edge.
So assuming your original picture we have this:
"Near" gives the "distance" to the projection screen and right (and of course also top, bottom and left) the respective distances of the tip, err, fly perpendicular to the edges of the screen.
"far" is not important for the projective features and is used solely for determining the depth range.
So what you can program into is the following:
double near = ${distance to screen in mm};
double left = ${perpendicular to left screen edge in mm};
double right = ${perpendicular to right screen edge in mm};
double top = ${perpendicular to top screen edge in mm};
double bottom = ${perpendicular to bottom screen edge in mm};
double s = ${scaling factor from mm into OpenGL units};
double zrange = ${depth range in OpenGL units the far plane is behind near};
glFrustum(s*left, s*right, s*bottom, s*top, s*near, s*near + zrange);
Keep in mind that left, right, top and bottom may be negative. So say you want a symmetrical (unshifted) view in one direction, that left = -bottom and a shift is essentially adding/subtracting to both the same offset.
I'm trying to make a whirling effect where the screen is rotating along the center point.
So the end result would be a whirlpool continuously spinning with the center of the screen being the focal point.
I tried to rotate the texture coordinate in the vertex shader by XMMatrixRotationZ, but it rotates the whole screen obviously.
I need to rotate around the center point (0.5, 0.5) but unsure how to go about it.
first thing I want to do is translating to the center of the screen and draw all of the objects from there.
then I would like to apply tranlsate for panning and scale for zoom. I want to zoom relative to a center point ! so how should be the order of them so that it works ?
glTranslatef(width/2, height/2, 0);
gltranslate(centerX,centerY); // go to center point
glscale(zoom);
glTranslatef(offset.x/zoom, offset.y/zoom, offset.z/zoom); // pan
I tried the above order but it doesn't go to the center point and it always zoom relative to (0,0).
I suppose you are drawing a square with both x and y between 0,1.
first you have to translate to the point the scaled object should be:
glTranslate3f(centerX,centerY,0);
glScale(zoom);
glTranslatef(-0.5f, -0.5f,0); // to the middle
draw stuff
opengl executes the transformations in reverse order since it's a pipeline.
reading the above sequence in the bottom-up direction will give the key.
I have a sprite added to a layer. I am having a lot of problems when I transform the layer. As far as I know a layer has its center (anchorPoint) on the bottom left corner and a layer has it in the middle (right?) - I am not totally sure about that.
On the figures below, I represent a CClayer in pink and a CCSprite in purple. See where I think the centers are.
When I add a sprite to a layer, I think Cocos will do like in A, but I want it like in B. How do I do that? Another possibility is C, that I think is better, but that would involve moving the anchorPoint of the layer to the middle and put the sprite there... I don't a have a clue on how to do that.
Change anchor point of CCSprite.
CCSprite *sprite = [CCSprite spriteWithFile:#"sprite.png"];
//For case A
sprite.anchorPoint = ccp(0.0f,0.0f);
sprite.position = ccp(0.0f,0.0f);
//For case B
sprite.anchorPoint = ccp(0.5f,0.5f);
sprite.position = ccp(0.0f,0.0f);
//For case c
sprite.position = ccp(ScreenWidth/2.0f, ScreenHeight/2.0f);
sprite.anchorPoint = ccp(0.5f,0.5f);
Anchor point is relatieve coordinate. (0.f, 0.f) is left-bottom corner of the node, (1.f, 1.f) is right-top corner. All transformations are make relatieve to the anchor point. Positioning is also transform. It means that in case of anchor point (0.5f, 0.5f) all positioning and other transforms will be applied relatieve to the center of the node. If you want to place your sprite to the left-bottom corner of your layer, you can simply set it's anchor point to (0.f, 0.f) and set position (0.f, 0.f). It means that left-bottom corner of your sprite will be placed to the (0.f, 0.f) coordinate of your parent layer.
[sprite setAnchorPoint:ccp(0.f, 0.f)];
[sprite setPosition:ccp(0.f, 0.f)];
[layer addChild:sprite];
When I add a sprite to a layer, I think Cocos will do like in A, but I
want it like in B.
Don't try to guess behaviour. Add sprite to the layer and see what happens.
Also, CCNode and all its subclasses, including CCSprite, have position property, which represents node's position relative to its parent's origin.
Please tell me if I got this wrong.
Anchor point is like a movable center of a sprite.
You specify a sprite's center by setting an anchor point.
Now you can place the sprite by specifying the position of the center.
ex)
anchor point = (1,1) : sprite's center is its right upper corner(I can think of it as "pinned at the right upper corner")
position = (screenWidth, screenHeight) : place the center(anchor point) at the (screenWidth, screenHeight)
Resulting in a sprite aligned at the top-right corner of the screen.
strange name ("movable center"), but you are almost right. the only thing, that it is property of CCNode class, not CCSprite. Just by default CCNode has no contentSize and has isRelatieveAnchorPoint property to NO.
Another one point is that all transformations will be done relatieve to the anchor point. I mean, if you will set anchor point to, for example, (1.f, 1.f),place tour node(sprite) to the center of the screen and begin to change it's rotation(scale, etc.), it will rotate around it's anchor point.
And one interesting trick with anchor point. Nobody says that it's x and y values must be between 0.f and 1.f =) So, you can rather simply make your node(sprite) to move by circle, setting it's anchor point to the out part (for example, to (0.5f, -10.f)) and begin to rotate it. Your node(sprite) will move by circle with center in node.position(sprite.position) and radius of (10.5f * it's contentSize.height)