Parallax Scrolling for the Endless Game background using cocos2D - iphone

I am newbie programmer in cocos2D.... I wanted to create the Endless Background using the Parallax Scrolling.. I am trying to learn the Parallax but it doesn't update with the time and sprites doesn't keep on rotating from top to bottom! The snippet i tried is as below
-(id) init
{
if((self = [super init]))
{
CGSize wSize = [CCDirector sharedDirector].winSize;
self.isTouchEnabled = YES;
CGPoint topOffset = CGPointMake(wSize.width, 0);
CGPoint midOffset = CGPointMake(wSize.width/2,0);
CGPoint downOffset = CGPointZero;
CCSprite *para1 = [CCSprite spriteWithFile:#"Default.png"];
CCSprite *para2 = [CCSprite spriteWithFile:#"Icon.png"];
CCSprite *para3 = [CCSprite spriteWithFile:#"Default.png"];
CCSprite *para4 = [CCSprite spriteWithFile:#"Icon.png"];
paraNode = [CCParallaxNode node];
[paraNode addChild:para1 z:1 parallaxRatio:CGPointMake(0.5f, 0)
positionOffset:topOffset];
[paraNode addChild:para2 z:2 parallaxRatio:CGPointMake(1, 0) positionOffset:topOffset];
[paraNode addChild:para3 z:4 parallaxRatio:CGPointMake(2, 0) positionOffset:midOffset];
[paraNode addChild:para4 z:3 parallaxRatio:CGPointMake(3, 0) positionOffset:downOffset];
[self addChild:paraNode z:0 ];
[self scheduleUpdate];
}
return self;
}
-(void) update : (ccTime) dt
{
//Need to move the Parallax Node with the repetition of the background
}
This is the Implementation file... I am stuck here for moving the contiunous moving of the background in the Horizontal or Portrait mode.
Thanks for the Help in Advance

CCParallaxNode doesn't support endless scrolling, unless you modify its code. I have an example for endless parallax scrolling in my Learn Cocos2D book. From that link you can also download the book's source code where you'll find the parallax class in chapters 6 to 8.

I have created a simple class named ParallaxManager which is capable for creating infinite parallax effect for both small sprite like small cloud
as well large layer sprite like grass.
You can find out the complete project from GitHub.

Related

How to scale Cocos2d app to iPhone 5 screen?

I have a Cocos3d v1.01 app and I am currently making it try to fit the iPhone 5 full screen.
By simply stretching the background is enough for most screens as it is just a pattern that fills the screen and no need to change any UI parts, however on just one of the screens I am struggling to change.
This is the code part I believe to set the background for that;
-(void)animations
{
AppDelegate *app=(AppDelegate *)[[UIApplication sharedApplication]delegate];
CGSize size = [[CCDirector sharedDirector] winSize];
NSMutableArray *bodyanimframeBuddyBack =[[NSMutableArray alloc]init];
for(int j = 1;j<=4;++j)
{
[bodyanimframeBuddyBack addObject:[[CCSpriteFrameCache sharedSpriteFrameCache]spriteFrameByName:[NSString stringWithFormat:#"shark_sea_waves5%d.png",j]]];
}
CCAnimation *BuddyAnimBack = [CCAnimation animationWithFrames:bodyanimframeBuddyBack delay:0.3f];
self.backgroundAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:BuddyAnimBack restoreOriginalFrame:NO]];
CCSprite *bg=[CCSprite spriteWithSpriteFrameName:#"shark_sea_waves51.png"];
bg.position=ccp(size.width/2, size.height/2);
[self addChild:bg];
[bg runAction:backgroundAction];
Is there a way of adjusting that ? I am guessing it is the bg.position part that would need changing to tell it whether it is iPhone5 or not?
Thanks in advance,
Chris
bg.scaleX = size.width / bg.contentSize.width;
This will stretch the bg width to match the screen width.
Why can't you place seperate background for iPhone5..just like you did for iPad.
#define IS_IPHONE5 (([[UIScreen mainScreen] bounds].size.height-568)?NO:YES)
#define TEX_MM_BG (IS_IPHONE5) ? ( #"shark_sea_waves51-whd.png") : ( #"shark_sea_waves51.png")
-(void)setupBackground
{
CCSprite *bg = [CCSprite spriteWithFile:TEX_MM_BG];
bg.position = ccp(mS.width*0.5f, mS.height*0.5f);
[self addChild:bg z:-3 tag:kTagBackground];
}
//Also put these image in hard disk.
shark_sea_waves51.png //480x320
shark_sea_waves51-hd.png //960x640
shark_sea_waves51-whd.png //1136x640
shark_sea_waves51-ipad.png //1024x768
shark_sea_waves51-ipadhd.png //2048x1536

How to put animation between frames spritesheet in cocos2d?

I am new to cocos2d .Can any one suggest me a method to give animation for the transition between one frame to another frame.
this is my code to fetch frames and just display
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:#"spritesheet.plist"];
// Create a sprite sheet with the Happy Bear images
CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:#"spritesheet.png"];
[self addChild:spriteSheet];
// Load up the frames of our animation
walkAnimFrames = [NSMutableArray array];
for(int i = 1; i <=7; ++i) {
[walkAnimFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:#"sprite%d.png", i]]];
}
CCAnimation *walkAnim = [CCAnimation animationWithFrames:walkAnimFrames delay:0.1f];
// Create a sprite for our bear
CGSize winSize = [CCDirector sharedDirector].winSize;
self.sprite = [CCSprite spriteWithSpriteFrameName:#"sprite.png"];
self.sprite.position=ccp(320,480);
self.sprite.anchorPoint=ccp(1,1);
self.walkAction = [CCAnimate actionWithAnimation:walkAnim restoreOriginalFrame:NO];
How to do the animation for the transition between frames
thanks in advance
You can not "transition" (morph) between two frames (images), if that's what you mean.
It sounds to me like you want something that's called keyframe interpolation, which is normally used in 3D animations. A 2D animation displays one frame after another. You can not interpolate between two frames graphically (morphing), you can only interpolate properties like position.

Putting two backgrounds one after the other in objective-c iphone game?

Hi I am creating an iphone game
in my game layer, I have two identical background images but I want them to go one after the other.
Once the game animal (eg a penguin) crosses the first background, I want the first background to go after the second one-- becoming a continuous background until the game is over.
I have tried everything--- for loops, while loops and such but nothing seems to work
Does anyone have an idea for how I could go about doing this?
Thank you for any help you can provide me.
this is all I have so far after many different tries
- (id) init
{
if((self = [super init]))
{
for ( int x = 0; x < 10000000; ++x)
{
CCSprite *bg = [CCSprite spriteWithFile:#"level1.png"];
[bg setPosition:ccp(160,240)];
ccTexParams params = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
[bg.texture setTexParameters:&params];
[self addChild:bg z:0];
CCSprite *bg2 = [CCSprite spriteWithFile:#"level1.png"];
[bg2 setPosition:ccp(320,480)];
ccTexParams param = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
[bg2.texture setTexParameters:&param];
[self addChild:bg z:0];
}
If the backgrounds are the identical you don't actually need 2 images, you can just set the texture rect position of the one and it will continuously move. If you call moveBackground on a timer or in the update method it will continually scroll.
-(void)init
{
if((self=[super init]))
{
background = [CCSprite spriteWithFile:#"background.png"];
ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
[background.texture setTexParameters:&params];
[self addChild:background z:0];
}
}
-(void)moveBackground
{
// Scroll background 5 pixels to the left
int speed = 5;
background.textureRect = CGRectMake(background.textureRect.origin.x-speed,
background.textureRect.origin.y,
background.textureRect.size.width,
background.textureRect.size.height);
}

Cocos2D iPhone - removing the black screen between CCTransition

I am using cocos2d on my app. I am doing a transition to another scene using
[[CCDirector sharedDirector] replaceScene:
[CCTransitionFadeDown transitionWithDuration:0.5f scene:otherScene]];
On the init part of this other scene, a menu is being built, using CCMenu. This is a full screen menu.
My problem is this: the transition happens to a black screen and then the menu appears. In other words, the transition is being done before the menu is rendered, so, I see an ugly black screen for 0.5 seconds and then, after the transition is done, I see the menu.
To make things clear imagine the first scene has a picture of a boat and the second scene a picture of a car. What I have now is the boat transitioning to black and then the car pops. I need the boat transition to the car.
how do I do that? thanks.
NOTE: I have found this guy with the same problem, but I have tried that solution without success.
This is worth a try, if you are not already using it; it removes black flickers during scene loads. Run the following method before you switch scenes, in case it affects your issue (un-comment these lines and call the method directly):
- (void) removeStartupFlicker
{
//
// THIS CODE REMOVES THE STARTUP FLICKER
//
// Uncomment the following code if you Application only supports landscape mode
//
// CC_ENABLE_DEFAULT_GL_STATES();
// CCDirector *director = [CCDirector sharedDirector];
// CGSize size = [director winSize];
// CCSprite *sprite = [CCSprite spriteWithFile:#"Default.png"];
// sprite.position = ccp(size.width/2, size.height/2);
// sprite.rotation = -90;
// [sprite visit];
// [[director openGLView] swapBuffers];
// CC_ENABLE_DEFAULT_GL_STATES();
}
I have implemented a transition in my menu (same problem), call it 'fadeInView' by adding a black layer on top of everything in the init, with an opacity of 255, and in onEnter I run an action to fade the opacity to 0. as follows:
-(id) init {
self=[super init];
if(self){
// do your stuff
blackShroudLayer_=[CCLayerColor layerWithColor:ccc4(0, 0, 0, 255) width:K_SCREEN_WIDTH height:K_SCREEN_HEIGHT];
[self addChild:blackShroudLayer_ z:500];
}
return self;
}
-(void) onEnter{
// need to [super onEnter] first to that we are running
[super onEnter];
id sh = [CCFadeTo actionWithDuration:K_FADE_TIME opacity:0];
id seq = [CCSequence actions:sh,[CCCallFunc actionWithTarget:self selector:#selector(onUnshroudComplete)], nil];
[blackShroudLayer_ runAction:seq];
}
-(void) onUnshroudComplete{
[blackShroudLayer_ removeFromParentAndCleanup:YES];
}
the constants and blackShroudLayer_ are defined in the class .h file.

Cocos2d - how to make individual particles follow the layer, not the emitter?

I have a CCSprite and a CCParticleSystemQuad that are both children of the CCLayer. In my update method, I set the emitter's position to that of the sprite, so it tracks the sprite around. The smoke puff fall out the bottom of the sprite like you'd expect and even though you move the sprite around, the smoke appears to be part of the background layer.
The problem come if I match up their rotations. Now, for example if my sprite is rocking back and forth, the puffs of smoke swing in an arc and appear attached to the sprite.
How can I make the puffs of smoke continue along the parent layer in a straight line and not rotate with the sprite? They don't translate with the sprite when I move it, so why do they rotate with it?
EDIT: adding code...
- (id)init
{
if (!(self = [super init])) return nil;
self.isTouchEnabled = YES;
CGSize screenSize = [[CCDirector sharedDirector] winSize];
sprite = [CCSprite spriteWithFile:#"Icon.png"]; // declared in the header
[sprite setPosition:ccp(screenSize.width/2, screenSize.height/2)];
[self addChild:sprite];
id repeatAction = [CCRepeatForever actionWithAction:
[CCSequence actions:
[CCRotateTo actionWithDuration:0.3f angle:-45.0f],
[CCRotateTo actionWithDuration:0.6f angle:45.0f],
[CCRotateTo actionWithDuration:0.3f angle:0.0f],
nil]];
[sprite runAction:repeatAction];
emitter = [[CCParticleSystemQuad particleWithFile:#"jetpack_smoke.plist"] retain]; // declared in the header - the particle was made in Particle Designer
[emitter setPosition:sprite.position];
[emitter setPositionType:kCCPositionTypeFree]; // ...Free and ...Relative seem to behave the same.
[emitter stopSystem];
[self addChild:emitter];
[self scheduleUpdate];
return self;
}
- (void)update:(ccTime)dt
{
[emitter setPosition:ccp(sprite.position.x, sprite.position.y-sprite.contentSize.height/2)];
[emitter setRotation:[sprite rotation]]; // if you comment this out, it works as expected.
}
// there are touches methods to just move the sprite to where the touch is, and to start the emitter when touches began and to stop it when touches end.
I found the answer on a different site - www.raywenderlich.com
I don't know why this is true, but it seems that CCParticleSystems don't like to be rotated while you move them around. They don't mind changing their angle property. Actually, there may be cases where you want that behavior.
Anyway I made a method that adjusts the emitter's angle property and it works fine. It takes your touch location and scales the y component to be the angle.
- (void)updateAngle:(CGPoint)location
{
float width = [[CCDirector sharedDirector] winSize].width;
float angle = location.x / width * 360.0f;
CCLOG(#"angle = %1.1f", angle);
[smoke_emitter setAngle:angle]; // I added both smoke and fire!
[fire_emitter setAngle:angle];
// [emitter setRotation:angle]; // this doesn't work
}
CCSprite's anchorPoint is {0.5f, 0.5f), while the emitter descends directly from CCNode, which has an anchorPoint of {0.0f, 0.0f}. Try setting the emitter's anchorPoint to match the CCSprite's.