i'm trying to build a game in xna, i got a circle which i want the player to move around it, as you can see in the following picture, its working great except the drawing part which i'm not pleased with
here's a link to an image http://s12.postimage.org/poiip0gtp/circle.png
i want to center the player object to the edge of the circle so it won't look like the player is standing on air
this is how i calculate the position of the player
rad = (degree * Math.PI / 180);
rotationDegree = (float)((Math.PI * degree) / 180);
currentPosition.X = (float)(Math.Cos(rad) * Earth.radius + (GraphicsDevice.Viewport.Width / 2));
currentPosition.Y = (float)(Math.Sin(rad) * Earth.radius + (GraphicsDevice.Viewport.Height / 2));
and this is how i draw the player
spriteBatch.Draw(texture,currentPosition, null, Color.White,rotationDegree, Vector2.Zero,1f,SpriteEffects.None, 1f);
thank you.
Use the origin overload for spritebatch. Which is where the sprite is drawn according to the position.
Spritebatch.Draw(texture,Position, null,Color.White,0f,new Vector2(texture.Width / 2,texture.Height /2),1f,SpriteEffects.None, 0);
Using texture.Width / 2,texture.Height /2 for origin will center it.
It looks like what you want to do here is adjust the sprite's origin, which is the vector that you're passing into SpriteBatch.Draw(). This is used to determine the "center point" of your sprite; {0, 0} represents the sprite's upper-left corner, while {spriteWidth, spriteHeight} represents the bottom-right corner. Your sprite will be positioned and rotated relative to this origin.
Related
I am trying to implement a custom painter that can draw an image (scaled down version) on the canvas and the drawn image can be rotated and scaled.
I get to know that to scale the image I have to scale the canvas using scale method.
Now the questions is how to rotate the scaled image on its center (or any other point). The rotate method of canvas allow only to rotate on top left corner.
Here is my implementation that can be extended
Had the same problem, Solution was simply making your own rotation method in three lines
void rotate(Canvas canvas, double cx, double cy, double angle) {
canvas.translate(cx, cy);
canvas.rotate(angle);
canvas.translate(-cx, -cy);
}
We thus first move the canvas towards the point you want to pivot around. We then rotate along the the topleft (default for Flutter) which in coordinate space is the pivot you want and then put the canvas back to the desired position, with the rotation applied. Method is very efficient, requiring only 4 additions for the translation and the rotation cost is identical to the original one.
This can achieve by shifting the coordinate space as illustrated in figure 1.
The translation is the difference in coordinates between C1 and C2, which are exactly as between A and B in figure 2.
With some geometry formulas, we can calculate the desired translation and produce the rotated image as in the method below
ui.Image rotatedImage({ui.Image image, double angle}) {
var pictureRecorder = ui.PictureRecorder();
Canvas canvas = Canvas(pictureRecorder);
final double r = sqrt(image.width * image.width + image.height * image.height) / 2;
final alpha = atan(image.height / image.width);
final beta = alpha + angle;
final shiftY = r * sin(beta);
final shiftX = r * cos(beta);
final translateX = image.width / 2 - shiftX;
final translateY = image.height / 2 - shiftY;
canvas.translate(translateX, translateY);
canvas.rotate(angle);
canvas.drawImage(image, Offset.zero, Paint());
return pictureRecorder.endRecording().toImage(image.width, image.height);
}
alpha, beta, angle are all in radian.
Here is the repo of the demo app
If you don't want to rotate the image around the center of the image you can use this way. You won't have to care about what the offset of the canvas should be in relation to the image rotation, because the canvas is moved back to its original position after the image is drawn.
void rotate(Canvas c, Image image, Offset focalPoint, Size screenSize, double angle) {
c.save();
c.translate(screenSize.width/2, screenSize.height/2);
c.rotate(angle);
// To rotate around the center of the image, focal point is the
// image width and height divided by 2
c.drawImage(image, focalPoint*-1, Paint());
c.translate(-screenSize.width/2, -screenSize.height/2);
c.restore();
}
I want to give Force to my SKSpriteNode at specific angle.
So, How to treat my CGVector for give force at specific angle?
I had searched for it but unfortunately not getting any good way.
What i wants to achieve :
My SKSpriteNode moving towards the screen. There are buttons on top like 30,45,60.
So if user press button(i.e. that Button contain "30") then i had to move my SKSpriteNode to 30 degree with same speed.
Please help me towards it if any of you can help me regarding this.
First, you will need to convert the angle in degrees to radians by multiplying it by pi / 180
CGFloat angleInRadians = angleInDegrees * M_PI / 180;
You can then determine the vector components in that direction by
CGFloat dx = cosf(angleInRadians);
CGFloat dy = sinf(angleInRadians);
and finally apply a force to the sprite with
[sprite.physicsBody applyForce:CGVectorMake(dx*scale, dy*scale)];
where scale determines how much force is applied.
Optionally, you can rotate the sprite to face in the same direction as its motion by
sprite.zRotation = angleInRadians + offset;
where offset is the difference in angle, in radians, between your sprite's image and zero degrees. For example, if your sprite is facing up when zRotation is zero, offset should be -M_PI_2.
Just what it says in the title, is there any way to do this kind of thing:
Is there any way to do this? If so, how would I correspond the SKAction rotateToAngle to the side facing the circle?
Thanks!
The tangent of a circle at any given point is perpendicular to a radius drawn to that point. Consider the two nodes as being in a polar coordinate system, with the origin at the center of the circle. You can convert the square's cartesian coordinates (at its center) to polar and find the angle of the proper radius:
void cartopol(CGFloat x, CGFloat y, CGFloat *radius, CGFloat *theta)
{
*radius = sqrt(x*x, y*y);
*theta = atan2(y, x);
}
(This could instead return a CGPoint if you prefer that to using out parameters, as I'll do below for the complementary function; the arithmetic is the important point.)
theta will be in radians; add or subtract π/4 to rotate it by 90˚.
To move the square around the circle, pick the angle and radius you want and convert from polar to cartesian:
CGPoint poltocar(CGFloat radius, CGFloat theta)
{
return (CGPoint){radius * cos(theta), radius * sin(theta)};
}
Very easy: add the rectangle sprite (it should not have a physics body of its own, though you could try to see if it works with a static body) as child node to the circle sprite with the physics body. Change the rectangle sprite's position to be offset from the center of its parent node, ie {100, 0} to put the circle node 100 points away from the center.
As the circle sprite & body rotate, the rectangle sprite will move and rotate along with it.
I have a sprite, which is added to CCSpriteBatchNode. Then I fix position of the sprite, changing anchor point the way so I can rotate sprite around that point.
Hierarchy is sprite <- batchNode <- scene
Basically sprite is moving but it's .position property is not changing. I need to get the real position of the sprite after transformations. So I tried to use
CGPoint p = sprite.position;
p = [sprite convertToWorldSpace:p];
However, position is not matching to the sprite's position which I see in the scene.
Sprite position is a point at the middle of the CCSprite(by default). Changing the anchor point moves the sprite such that the point moves with respect to the sprite but remains same with respect to the world space. For example, changing the anchor point of a sprite(say square) to ccp(0,0) will move the square so that its bottom left vertex will come at the position where the square's center point was initially. So while the square may seem to be "repositioned" ,its position (property) stays the same(unaffected by change in anchor point) unless specifically changed.
EDIT
If by real position of the sprite, you mean its mid point after its anchor point has been changed then it can be calculated by taking into account the two transformations that have been applied on it i.e. Translation and Rotation.
First we take care of Translation:
Your sprite has moved by:
CGPoint translation;
translation.x = sprite.contentSize.width x (0.5 - sprite.anchorPoint.x);
translation.y = sprite.contentSize.height x (0.5 - sprite.anchorPoint.y);
Now we accomodate for change in Rotation
Converting "translation" point into polar coordinates we get
#define RADIANS_TO_DEGREES(radians) ((radians) * (180.0 / M_PI))
r = ccpDistance(translation,ccp(0,0));
ø = RADIANS_TO_DEGREES(atan2(translation.x,translation.y)); //i take x/y here as i want the CW angle from y axis.
If you rotated your sprite by "D" degrees:
ø = ø + D;
CGPoint transPositionAfterRotation = ccp(r * cos(ø),r * sin(ø) );
CGPoint realPosition = ccp(sprite.position.x + transPositionAfterRotation.x, sprite.position.y +transPositionAfterRotation.y)
This is so much an iOS question as it is my current inability to do coordinate geometry. Given a CGPoint to act as a point that the line will pass through and an angle in radians. How do I draw a line that extends across to the bounds of the screen (infinite line)?
I am using Quartz2d to do this and the API for creating a line is limited to two points as input. So how do I convert a point and angle to two points on the bounds of the iOS device?
This begins with simple trigonometry. You need to calculate the x and y coordinate of the 2nd point. With an origin of 0,0 and treating a line that goes straight to the right as 0 degrees, and going counterclockwise (anti-clockwise for some of you), you do:
double angle = ... // angle in radians
double newX = cos(angle);
double newY = sin(angle);
This assumes a radius of 1. Multiply each times a desired radius. Pick a number that will be bigger than the screen such as 480 for an iPhone or 1024 for an iPad (assuming you want points and not pixels).
Then add the original point to get the final point.
Assuming you have CGPoint start, double angle, and a length, your final point is:
double endX = cos(angle) * length + start.x;
double endY = sin(angle) * length + start.y;
CGPoint end = CGPointMake(endX, endY);
It's OK if the end point is off the screen.