Moving a sprite on a sine path « cocos2d for iPhone

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

Moving a sprite on a sine path

(25 posts) (4 voices)

Started 1 year ago by blakespot
Latest reply from Lam

Tags:

blakespot
Member

I am a developer, primarily web, and am new to iPhone development and to Cocos2D. I've got some little demos going with sprites moving around the screens using MoveBy functions, etc. What I want to do now is move a sprite following a sine function, basically a set of bouncing "copper bars" that bounce up and down on the screen, slowing at the edges (hence the sine path) -- and am wondering if anyone has an example of an event / update loop that shows how to move a sprite on such a varying path as a sine function, as opposed to the more simple MoveBy (from current position, to HERE, in THIS amount of time).

Thanks.

bp

Posted 1 year ago #
abitofcode
Moderator
Simple gameloop can be set up as follows (0.82 syntax not sure if its changes recently);
```
[self schedule:@selector(doStep:) interval:1/30.0f]; // 30 fps
```
Calls the following 30 times a second
```
- (void)doStep:(ccTime)dt
{
    // I get called every thirtieth of a second (almost, dt gives a correction
    // to where I should be if everything was running in a perfect world)
}
```
Check out the Read me first post at the top of the forum for details on where to find the test code and some open source examples.
Posted 1 year ago #

mobilebros
Moderator

Subclassing IntervalAction is always a fun route, and it's easier than it sounds.....

@implementation SineAction

+(id) actionWithDuration:(ccTime)t  length:(int)len //also amp, freq, etc
{
	return [[[self alloc] initWithDuration:t length:len] autorelease];
}

-(id) initWithDuration:(ccTime)t length:(int)len //also amp, freq, etc
{
    [super initWithDuration: t];
    _len = len;

    return self;
}

-(void) start
{
    [super start];
}

-(void) update: (ccTime) t
{
    //y = A*sin(kx-wt+o)

    [target setPosition:ccp(x,y)];
}

@end

Once you have an action defined, any CCNode will run it.

Posted 1 year ago #

abitofcode
Moderator

Alternatively if you check out the EaseActionsTest.m in the test code you may find that there are already the functions to do what you need.

Posted 1 year ago #
blakespot
Member

Thanks abitofcode, the EaseActionTest.m functions seems to be what I need - I've got this working with one sprite.

What I'd like to do is have multiple sprites following the same sinus path, but spaced out a bit in time / on the x. It's EaseSineInOut that I'm using to animate the single sprite. I don't see a way to feed the class a time offset. Some searching mentioned rate: as a possible input, but I get a compiler warning when I try that. Dunno.

Is there a way to space the sprites out in time, using these functions? Would prevent me needing to put together my own system for this, and I'm pretty limited in Cocoa / Obj C at present.

Thanks.

bp

Posted 1 year ago #
abitofcode
Moderator
Depends on what you want to achieve, you could insert a delay action before starting each easeaction;
```
[DelayTime actionWithDuration:3.0f]
```
Add this into an action sequence;
```
[Sequence actions: [DelayTime actionWithDuration:3.0f], <other actions here>, nil];
```
You're probably wanting to offset by xpos rather than time though.
Posted 1 year ago #
blakespot
Member

Offset by time is just fine, actually.

Thanks - this does provide a few moments of the lag I want, but at each iteration (up and down on a sine path), the gap gets repeated and gets wider. What would be great is ife the DelayTime could only happen ONCE in the sequence, and then it would run the sequence without, so the distance behind the first stays constant.

Is there an easy way to do what I speak of? Thanks!! I appreciate the assistance.

Posted 1 year ago #
abitofcode
Moderator

This thread may help :)

http://code.google.com/p/cocos2d-iphone/issues/detail?id=648

Posted 1 year ago #
blakespot
Member

Hm, trying to make sense of that in my context. Let me take another look...

Posted 1 year ago #

blakespot
Member

I can't seem to get the code listed on the linked thread to fit into what I'm doing. I'm new to Obj C and am having some issues w/ the syntax, primarily.

So far I've got this, which as I said recently, works the delay, but the delay happens at each swing of the bar along the sinus path, getting longer and longer. Is there a way to put a conditional that checks for a flag in the declaration?

I've got this:

@implementation SpriteEaseSineInOut
-(void) onEnter
{
	[super onEnter];

	id move = [MoveBy actionWithDuration:1 position:ccp(0,200)];
	//id move_back = [move reverse];
	id move_ease = [EaseSineInOut actionWithAction:[[move copy] autorelease]];
	id move_ease_back = [move_ease reverse];

	id move2 = [MoveBy actionWithDuration:1 position:ccp(0,200)];
	//id move_back = [move reverse];
	id move_ease2 = [EaseSineInOut actionWithAction:[[move2 copy] autorelease]];
	id move_ease_back2 = [move_ease2 reverse];

	id seq1 = [Sequence actions: move_ease, move_ease_back, nil];
	id seq2 = [Sequence actions: [DelayTime actionWithDuration:0.05f], move_ease2, move_ease_back2, nil];

	[hbar1 runAction: [RepeatForever actionWithAction:seq1]];
	[hbar2 runAction: [RepeatForever actionWithAction:seq2]];
}

You can see the delay you suggested there. Sorry to underscore my being so wet behind the ears here.

Thanks for any others tips that I might find workable.

Posted 1 year ago #

Lam
Member

@blakespot
Are you trying the spawn technique for adding a starting delay or are you using the standard CallFunc technique for adding that starting delay?

Posted 1 year ago #
blakespot
Member
Lam, I was attempting to use the example in the earlier linked forum post, this code:
```
-(void) example
{
	id action = [CCSequence actions:
				 [CCDelayTime actionWithDuration:1],
				 [CCCallFuncN actionWithTarget:self selector:@selector(repeatForever:)],
				 nil];

	[sprite runAction:action];
}

-(void) repeatForever:(id)sender
{
	CCRepeatForever *repeat = [CCRepeatForever actionWithAction: [CCRotateBy actionWithDuration:2
angle:360]];
	[sender runAction:repeat];
}
```
But I, being new to Obj C, but not to development in general, have failed in the attempt. I don't care how it's done, but I just want to insert a delay once in the infinitely repeating sequences that draw these animated bars, so that they can follow the same path, but staggered in time.

Any additional help is most appreciated!
Posted 1 year ago #
Lam
Member

That is really strange. The sample code you posted makes sense. The delay should only happen once since the repeat is called in the callback method.

Posted 1 year ago #

blakespot
Member

Ok, having success here - got the CallFuncN approach working. But there is a timing / sync issue.

Have a look at this code:

@implementation SpriteEaseSineInOut
-(void) onEnter
{
	[super onEnter];

	id move = [MoveBy actionWithDuration:0.5f position:ccp(0,200)];
	//id move_back = [move reverse];
	id move_ease = [EaseSineInOut actionWithAction:[[move copy] autorelease]];
	id move_ease_back = [move_ease reverse];

	//id move_title = [MoveBy actionWithDuration:1 position:ccp(0,-320)];
	//id move_title_back = [move reverse];
	//id move_title_ease_in = [EaseSineIn actionWithAction:[[move_title copy] autorelease]];
	//id move_title_ease_in_back = [move_title_ease_in reverse];

	//id seq0 = [Sequence actions:[DelayTime actionWithDuration:1.5f], move_title_ease_in, nil];

	id seq1 = [Sequence actions: move_ease, move_ease_back, nil];
	//id seq1 = [Sequence actions: [DelayTime actionWithDuration:2.0f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq2 = [Sequence actions: [DelayTime actionWithDuration:0.05f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq3 = [Sequence actions: [DelayTime actionWithDuration:0.10f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq4 = [Sequence actions: [DelayTime actionWithDuration:0.15f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq5 = [Sequence actions: [DelayTime actionWithDuration:0.20f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq6 = [Sequence actions: [DelayTime actionWithDuration:0.25f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];
	id seq7 = [Sequence actions: [DelayTime actionWithDuration:0.30f], [CallFuncN actionWithTarget: self selector:@selector(hbarRepeat:)], nil];     

	[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"Phenomena_Enigma.mp3"];

	//[title runAction: seq0];
	[hbar1 runAction: [RepeatForever actionWithAction:seq1]];
	[hbar2 runAction: seq2];
	[hbar3 runAction: seq3];
	[hbar4 runAction: seq4];
	[hbar5 runAction: seq5];
	[hbar6 runAction: seq6];
	[hbar7 runAction: seq7];
}

-(void)hbarRepeat:(id)sender
{
	id move2 = [MoveBy actionWithDuration:0.5f position:ccp(0,200)];
	//id move_back = [move reverse];
	id move_ease2 = [EaseSineInOut actionWithAction:[[move2 copy] autorelease]];
	id move_ease_back2 = [move_ease2 reverse];

	RepeatForever *repeat = [RepeatForever actionWithAction:[Sequence actions: move_ease2, move_ease_back2, nil]];
	[sender runAction:repeat];
}

That's my adaptation of the example method SpriteEaseSineInOut that has a number of horizontal bars (sprites loaded from images) moving up and down the screen on a sine path. Things start out pretty well and evenly spaced...

http://blakespot.com/images/bars_1.PNG

But after a few seconds, the spacing becomes quite uneven as the bars drift closer / farther apart during the overall animation...

http://blakespot.com/images/bars_2.PNG

Eventually, I end up with a few bars, with others hiding behind them, moving in sync with them.

Is there a better way to time this than with a delay? Could the calls made in the code take too long for the timing to work? That seems hard to believe. This happens both on the simulator and on my iPhone 3GS.

Thanks for any help.

Posted 1 year ago #

Lam
Member
running multiple actions at once is fine if you don't really need precise delay:
```
[a runAction:b];
[a runAction:c];
[a runAction:d];
```
But since we need that you should look at making sure actions are executed at the exact same time through a spawn:
```
[a runAction:[Spawn actions:a,b,c,nil]];
```
Posted 1 year ago #

blakespot
Member

Ok, thanks. But what is 'a' here? I am triggering the actions with this code:

[hbar1 runAction: [RepeatForever actionWithAction:seq1]];
	[hbar2 runAction: seq2];
	[hbar3 runAction: seq3];
	[hbar4 runAction: seq4];
	[hbar5 runAction: seq5];
	[hbar6 runAction: seq6];
	[hbar7 runAction: seq7];

hbarx are sprites defined earlier as...

hbar1 = [[Sprite spriteWithFile:@"red_bar_14h.png"] retain];
		hbar2 = [[Sprite spriteWithFile:@"yellow_bar_14h.png"] retain];
		hbar3 = [[Sprite spriteWithFile:@"green_bar_14h.png"] retain];
                ...

and it doesn't work to do a ...

[hbar1 runAction:[Spawn actions:hbar1,hbar2,hbar3,...,nil]];

What can 'a' be to work like your example, if not a Sprite? Thanks.

Posted 1 year ago #

Lam
Member

oh whoops 'a' represents one cocosnode so I have to think of an alternate way for multiple nodes.

How about attaching all the sprite 'hbars' into a parent node 'voidNode'. Space each sprite apart so it's distributed the way you want and then run one action on the parent 'voidNode'. Since the sprites are children they will all 'move' in a sense.

This is me assuming that you wanted all the hbars to be moving at the same rate with the same spacing. Though maybe it may be a misunderstanding.

Posted 1 year ago #
blakespot
Member

Thanks - and that is my desire, yes - same rate, same spacing.

I'll see if I can figure out how to do what you suggest. :-) Wish me luck.

Posted 1 year ago #
blakespot
Member

Could you point me to an example of setting up a simple node? I have tried many examples and none seem to adapt to my situation. Sorry to be a newb.

Posted 1 year ago #

Lam
Member

Here's a sample of the idea below:

//creating the parent node
CocosNode *theParentNode = [CocosNode node];

//Create the first hbar to add to the parent
Sprite *sprite = [Sprite spriteWithFile:@"yellow_bar_15h.png"];
sprite.position = ccp(0,0);
[theParentNode addChild:sprite];

//Reuse the variable for a new sprite to add
sprite = [Sprite spriteWithFile:@"green_bar_14h.png"];
sprite.position = ccp(30,0);
[theParentNode addChild:sprite];

//Lets try it one more time with another different position

sprite = [Sprite spriteWithFile:@"red_bar_14h.png"];
sprite.position = ccp(60,0);
[theParentNode addChild:sprite];

[self addChild:theParentNode];

[theParentNode runAction:seq2];

Now of course we could do this all in a for loop but any method is fine.
theParentNode can also be set with a tag or added as a weak ref so you can access it later on.

As the parent moves, we'll see children moving as well.

Posted 1 year ago #

blakespot
Member

Thanks for the code, Lam.

I think I mis-understood you, though, regarding my desire for the sprites to be equally spaced and running at the same speed. I want them to be "equally spaced" along a sine path -- but, in following that path (near the outer ends of the animation, where the bars turn around and head the other way), they get closer together, as the sine curve is steepest in the middle. See what I mean?

The bars all move to the top of the screen, "slow" apparently (due to the sine function), reverse direction, gaining speed, then do the same at the bottom, ad infinitum. See what I mean? So locking them all together in a CCNode won't really work, as it won't move push them along the sine path, as if on a track.

Might you have another suggestion as to achieve what I've got working, but with tighter timing so that there's no "drift" to the individual bars?

Look at this video, set to start at the right place:

Get the Video Plugin

[edit: oh, well, the effect I am talking about starts at 0:18 into the video...]

Note what the two sets of colored bars are doing, moving from top to bottom (opposite each other). They "bunch up" at the tops and bottoms as they are riding a sine-determined path. I am trying to mimic this effect, but currently am only working on one of the two sets of bars you see there. See where I'm going with this?

Thanks so much for the help.

Posted 1 year ago #
Lam
Member

I see. A video is worth a thousand words per second!

Haven't thought of a proper approach yet but now the problem's clear so my next post will surely be the solution ;)

Posted 1 year ago #
Lam
Member

The best way is to have a sprite that is that rainbow pattern and instead of using move actions you would run scale actions.

Posted 1 year ago #
blakespot
Member

Thanks, Lam.

Note that it's this effect I'm going for:

http://blakespot.com/images/copper_lines.png

...the two clusters of individual bars moving on a sine path. I wonder, with your referring to the rainbow, that you were looking at another effect in the video?

Thanks.

Posted 1 year ago #
Lam
Member
Ok from what I can see it's probably that you don't want a delay but you want each move position to be different for the furthest side edge.

So the starting position is the same but the ending position is offset a bit for each hbar.
```
sprites starting position is all the same (let's pretending it's all on the left).

The right edge that each hbar has to move to is always a bit less (maybe double the width of the hbar)

Assuming the hbar has a width of 10.
Move to positions.
hbar1 =  right
hbar2 =  right - 20 (2x width *1)
hbar3 =  right - 40 (2x width *2)
hbar4 =  right - 60 (2x width *3)
```
Now you spawn a sine easing action to move all sprites at the same time with the same duration. Reverse that action and then repeat.
Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.