Hi! I am fairly new to this and I have some ideas that I’d like to start working on.
However, I’m not sure how I would go about making this happen.
I’ve looked around and did some searching but couldn’t find anything that can help me.
I would like one node to rotate about a point on the screen.
And be able to control the speed at which it rotates, as well as be able to track the specific coordinate of the rotating node.
For example, the moon is rotating around the earth’s center point. And I’d be able to control how fast it’s going around the earth as well as know the exact point of the moon’s center.
I can think of a way where I can just calculate the rotation and use cc.MoveTo, but that’s not a true rotation about a specific point. And I am not sure how I can control the speed.
I hope you guys can help me in javascript as that is what I am most familiar with.
Thanks in advance!!
Thanks for the reply!
But I think this code will keep the sprite unturned.
You were right, I was hoping to make the moon’s face keep facing the earth.
If I could make a big sprite with lots of empty(transparent) space, with only the moon on the the edge, I could rotate that and it would look like the face was always facing the earth. However, I don’t know how to keep track of the moon’s coordinates.
How about making your moon a child of your earth; then offset your moon by setting its anchor point. This offset is the distance of your moon to your earth. Then rotate your moon using RotateBy; this will allow your moon to rotate around your earth - you can control the speed by changing its duration. The only problem with this is that your moon will rotate around the bottom left corner of your earth.
Make your moon a child of your earth and adjust its position (this will be relative to your earth’s). Then rotate your earth using RotateBy; in effect, your moon will seem look like it’s rotating around your earth. This lets your moon to rotate around the centre point of your earth. The problem with this is that your moon’s rotation is dependent to your earth’s. Maybe you don’t want that.
Have a dummy Node/Sprite to be the parent of your moon instead and choose from the previous two solutions. For the first one, you can adjust your parent sprite to align its bottom left corner to the centre of your earth. For the second, you just need to position your parent node to your earth’s position. Both of these will achieve true rotation about a specific point, control of the speed, and tracking of your moon’s position.
Sorry I don’t have a sample code for you. Hope it’s simple enough that it doesn’t need one.
@jonah1nine
Thank you for the help!
It makes sense and I believe that it does exactly what I want!
however, I’m fairly new to this, how do I go about making a node a child of another node?
generally the anchor point for sprite is set at vec2(0.5, 0.5)
when you set the anchorpoint to some other value… say vec2(0, 0) you can calculate the center using sprite width, height and the anchor point…
First of all welcome to cocos2d-x! This page gives you tons of resources to help you get started: http://cocos2d-x.org/learn
Going back to your question, I’ve written a sample code below with hopefully enough comments to tell you what’s going on. The code have been tested and it achieves what I believe you required. There’s an earth with a moon revolving around it.
This is javascript.
// Your earth.
this.earth = new cc.Sprite(res.Earth_png);
this.earth.attr({
x: size.width / 2,
y: size.height / 2,
});
this.addChild(this.earth); // <- Adds your earth to the scene.
// Your moon.
this.moon = new cc.Sprite(res.Moon_png);
this.moon.attr({
x: 100,
y: 100,
});
// The specific point where your moon will rotate around.
this.rotationPoint = new cc.Node();
this.rotationPoint.attr({
// Places this node wherever your earth is.
x: this.earth.x,
y: this.earth.y
});
this.rotationPoint.addChild(this.moon); // <- Adds your moon to this node.
this.addChild(this.rotationPoint); // <- Adds this node to the scene.
// Revolve your moon around your earth.
var rotatePoint = new cc.RotateBy(5, 360); // <- Rotate the node by 360 degrees in 5 seconds.
var rotateForever = new cc.RepeatForever(rotatePoint); // <- Keeps the node rotating forever.
this.rotationPoint.runAction(rotateForever); // <- Run the action with your rotationPoint node, not with your moon.
// Get your moon's position every half a second.
function logMoonPos() {
var moonPos = this.rotationPoint.convertToWorldSpace(this.moon.getPosition());
cc.log("Your moon's position: " + moonPos.x + ", " + moonPos.y);
}
cc.Director.getInstance().getScheduler().scheduleCallbackForTarget(this, logMoonPos, 0.5, 100, 0, false);
I am running into an issue where if I add the moon to the rotation point, it stops showing up. I was able to try running different bits of code to narrow it down to that cause and effect. However, I am not sure how to solve it.
I was using the code you provided, and it looked sound.
Edit: just tried something else. If I add the moon as a child of the earth, the moon doesn’t show up. but the earth does. Don’t know if that helps troubleshoot.
It could be because of multiple reasons. From the top of my head, I can think of a few.
Your rotation point is not added to the scene, hence all its children are not added also.
Your rotation point is not position to where your earth is.
Your moon position is way off. Don’t set your moon position before adding it to your rotation point. The position you set will be relative to the position of your rotation point i.e. rotation point’s position will be your moon’s (0,0).
My bet is on number 3. Try zeroing the x and y of your moon, then you should be able to see it where your rotation point is. Also, hide your earth first when trying this, as your earth might cover your moon. (Lunar Eclipse?)
Number 3 was indeed the problem! wow, thanks!
I changed the location to some random value, and I could see the spin.
I was using windowsize.width and windowsize.height to set the location of the moon. Is there a reason why that did not work?
edit: I’ve been playing around with different locations and coordinates. and they don’t behave like normal. Some times it doesn’t move and other times it’s to a seemingly random spot.
Edit: Nevermind!!! I solved it! silly mistake. the location of the moon was relative to the center point of the rotationpoint instead of the screen.
