how do you do your scroling? move the content or the camera?

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

how do you do your scroling? move the content or the camera?

(33 posts) (16 voices)

Started 2 years ago by unigee
Latest reply from artakus

Tags:

12 Next »

unigee
Member

Hi everyone,

I am currently building a game that is on a continuous scroll across the level.

I am wondering what are your methods to handle the scrolling, do you actually reposition all the content of the level, or simply move the camera?

The way I have done it is by moving the camera, because it seems 'right' and easier

The only issue I have is, when I need to create overlap sprites that always need to be in the boundary of the device's screen (think a score label etc), I need to continually calculate the position of said sprites and redraw them at the correct place, taking account of the camera's location.
Is there an better way at doing this?

Thanks

Posted 2 years ago #
psionic
Member

There is.

Make a seperate camera object, and create a 'set up relative
positions' function in your main loop that updates the positions of
your game objects that are in world space, relative to the camera
location.

You'll need to set up visibility (hidden or not) depending on their
position inside of screen space (myObj.pos.x - myCamera.pos.x). So
you'll have a 'pos' variable inside your objects that is not the same
as the sprite's 'position' variable. You'll update your sprites
'position' variable with the world space calculation, only if the
object will be inside of your screen space.

So if your object is at world position 100, 0 and your camera is at
world position 90, 0, your object would be at 100 - 90 = 10, 0 in
world space. if it's leftmost point (assuming transform anchor = 0, 0)
is below 480 (assuming landscape mode) and its rightmost point is
above 0, it's in screen space.

As a sidenote, with your current setup you'll need to do this
visibility calculation anyhow for your game objects or performance
will start to suffer a great deal, so you may as well use it for the
objects that need it, and keep your score labels, etc. without the
extra processing.

I believe cocos2d has a built in point-to-world-space and
point-to-screen-space function in cocosNode, for objects that have
multiple children a large distance away from each other.

Chris.

On Thu, Jun 25, 2009 at 5:31 PM, <cocos2d-iphone-discuss@gamesforfood.cl> wrote:
> unigee says:
>
> Hi everyone,
>
> I am currently building a game that is on a continuous scroll across the
> level.
>
> I am wondering what are your methods to handle the scrolling, do you
> actually reposition all the content of the level, or simply move the camera?
>
> The way I have done it is by moving the camera, because it seems 'right' and
> easier
>
> The only issue I have is, when I need to create overlap sprites that always
> need to be in the boundary of the device's screen (think a score label etc),
> I need to continually calculate the position of said sprites and redraw them
> at the correct place, taking account of the camera's location.
> Is there an better way at doing this?
>
> Thanks
>
> Read the whole thread.

Posted 2 years ago #
solmead
Member

Using cocos2d, i set up one layer with the items that stay fixed on screen on it, then I add a second layer with all the content in it. I then move the second layer (by just changing it's x position as needed) I don't move the camera, I move the layer under the camera.

Posted 2 years ago #
patrickC
Member

Also an option,
I have two layers one for the game content and one for the gui.
You can then move the camera of the layer it self, and that will only affect sprites and nodes inside that layer and not the gui layer.
similar to what solmead said really, but slightly different perhaps since i'm using the camera in the layer and not moving the layer itself.

Posted 2 years ago #
Acceleroto
Member
@patrick - that sounds great...how do you move the layer's camera?

Right now, I use:
```
[self.camera setCenterX:cameraX centerY:cameraY centerZ:0];
	[self.camera setEyeX:cameraX eyeY:cameraY eyeZ:cameraZ];
```
Is the layer's camera just layer.camera?

Thanks,
-Bryan
Posted 2 years ago #
slipster216
Moderator

I prefer the camera method, as it's the 'correct' way to do it, really. If you move your world around constantly, then calculating the true position of an object in multiple spaces becomes a giant mess. I personally don't use the parallax system cocos provides because it moves the world rather than the cameras. Instead, I make a new subclass of CocosNode with a 'setParallaxOffset' function, and it adjust the camera for that layer and passes any children the same message. It's only a few lines of code, and works with world space particles, etc..

Posted 2 years ago #
patrickC
Member

Hey Brian, actually I just use self.camera too.
But I use it inside the Layer implementation, and it just seems to use that one layer and not the other one that has been added to the scene.
hope that helps!

Posted 2 years ago #
Acceleroto
Member

@patrickC I'll have to look more closely at exactly what I do then. I move my camera around, but to keep my UI in place, I have to move it to follow the camera every frame. I'd love to clean up that bit of code. Thanks!

-Bryan

Posted 2 years ago #
marcond
Member

This is a nice thread, as I haven't seen many talking about why you would want to use Camera, or why it is the "correct" way to do it. I currently have a side view style game, where the board is 960x320 (2x wide landscape). I took the avoid-hierarchy-of-Layer quite literal, and only use one layer. Hierarchy looks like this:

LayerGameBoard
|-->GUI Stuff (Labels, joy stick etc) individual pieces
|-->ParallaxNode (practically everything goes in here. I just add the managers)
|---->Background Items (Different parallaxes i specify in XML)
|---->Enemies (AtlasManager 0 Parallax)
|---->Player (AtlasManager 0 Parallax)
|---->Bullets (AtlasManager 0 Parallax)

That's it.. Everything is moved at once, as unigee had mentioned in Comment #1.

It sounds like a lot of extra work to use Camera, especially if you have to constantly convert between chipmunk/cocos positions.. Is the overhead of these conversions insignificant when using chipmunk pretty heavily? At least in debug, when I see that a sprite is at 780px,200px, I know it's a literal location, and on the right side of the board pretty quickly!

Does anyone actually know the benefits of using Camera?

Posted 2 years ago #
marcond
Member

Grr.. Preceding spaces were removed.

|-->ParallaxNode (practically everything goes in here. I just add the managers)
_ |---->Background Items (Different parallaxes i specify in XML)
_ |---->Enemies (AtlasManager 0 Parallax)
_ |---->Player (AtlasManager 0 Parallax)
_ |---->Bullets (AtlasManager 0 Parallax)

Posted 2 years ago #
artakus
Member

@Accelerotor

Where you set your cameraX. cameraY and cameraZ ? I didn't get it.

Posted 2 years ago #
Acceleroto
Member

@artakus - In Occurro!, I update the camera position at the end of every game loop (called "step" in many Cocos projects).

Everything in that game is calculated in a game space coordinate system & the camera is moved around to view the desired part of that space. So, there's an algorithm that calculates the camera position based on the player ship. A simple way to do it would be to set the camera position to be equal to the player position. This, however, would keep the player ship exactly in the middle of the screen. To give a little more sense of motion, the camera in Occurro! doesn't move quite as fast as the player ship.

Does that help?

-Bryan

Posted 2 years ago #
natanavra
Member

Wow, this is one interesting thread!
Bryan, I really like the camera movement in Occuro!
I have one question regarding World and Screen space:

Camera shows us the screen space, and by moving it, we show a different portion of the world on the screen right?
Btw, could anyone (marcond maybe), refer me to XML tuts and on how to use them in game to create a world spacing?

~Thank in advance.

Posted 2 years ago #
artakus
Member

Thanks for your reply.

I try to implement your code for moving my map to the TOP/RIGHT/UP/DOWN by using ccTouchesMoved Method:

[self.camera setEyeX:convertedPoint.x eyeY:convertedPoint.y eyeZ:convertedPoint.x ];

unfortunately, the way the map move is not what i want. I just wanna move it by dragging to the LEFT/RIGHT/TOP/DOWN (hand still touch the screen) and the map will be at the original place where the sprite is at (after i put my finger away from the screen (untouch) )

Posted 2 years ago #

natanavra
Member

I think in order to achieve what you want you should implement this:

-(BOOL)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
        [self.camera setEyeX:mySprite.position.x setEyeY:mySprite.position.y setEyeZ:0];
        return kEventHandled;
}

By the way, why did you do the setEyeZ with an x value?? or is just a typo?

Posted 2 years ago #

zombie
Member

Interesting thread. I use the layer position approach. Then I use its position for the offset of some stuff. Works ok. Thought about using the camera, but some things did not work as I needed it.

Zombie - ZombieSmash! http://ZombieSmash.gamedrs.com
Our musician will be revealed tonight! (the last hint: Tu..., R-..., Gr..., Sh...)

Posted 2 years ago #
riq
Key Master

Some notes regarding camera vs. position/rotation/scale:

With the camera you can do everything that you can do with position/rotation/scale and more.
But you should know that if you use the camera you can't use the position/rotation/scale.
Either you use the camera or the position/rotation/scale.

Benefits of camera:
* you can do more things than the position/rotation/scale, like 3d effects (eg: OrbitCamera)

Limitations:
* position/rotation/scale doesn't work if you are using the camera

Posted 2 years ago #
Carpy
Member

Its funny... i've been working with cocos2d for a long time now and i have no idea how to use the camera, i tried looking for information but was unable to find any.

So i just move the layer around.

Posted 2 years ago #
Codemattic
Moderator

"Limitations:
* position/rotation/scale doesn't work if you are using the camera"

But you can use position/rotation/scale for childnodes of that camera node right? So you can just keep the parent node static (and use camera to scroll or zoom, etc...) - and you can change the position/rotation/scale of the childnodes to run your game's animation.

Posted 2 years ago #
riq
Key Master

@codematic:
yes, the camera only affects the node that is using it.
the node's children can use it's own camera or it's own position/scale/rotation properties.

Posted 2 years ago #
Acceleroto
Member

@natanavra:
>Camera shows us the screen space, and by moving it,
>we show a different portion of the world on the screen right?

Yes. The setEye method sets where the camera is looking FROM and the setCenter method sets where the camera is looking TO. So, the setCenter location defines the center point of the portion of the world that you are viewing. If you want a 2D scrolling view, set the camera x,y and the eye x,y to be the same. You can create a rotating/slanting/3D view by making the center & eye different x,y values.

>By the way, why did you do the setEyeZ with an x value?? or is just a typo?

For a 2D non-zooming view, you usually want the setEyeZ value to be a constant number. You could, however, vary the zoom of the scene by changing the Z value based on some other calculations. If you set it to an X value of something, then the further left (towards zero) that object got, the more zoomed in the scene would be.

@Codemattic:
>But you can use position/rotation/scale for childnodes of that camera node right?

Yes. The way I do this in Occurro! is I leave the background layer stationary. There are parallax layers, bad guys, explosions & more all as children of the background layer. It may not be the most elegant way to do this, but it works fine for me.

I prefer moving the camera around instead of the layer because I do physics calculations based on positions of objects in the layer. It also seems more "pure" to me.

-Bryan

Posted 2 years ago #
artakus
Member

@Acceleroto :
Yeah the concept help me but the implementation made me confuse! :( .
@natanavra
I think the Z value is just a typo. Sorry for my mistake.

Your code suggestion:

[self.camera setEyeX:mySprite.position.x setEyeY:mySprite.position.y setEyeZ:0];

===============

I compile and X-code said : warning 'Camera' may not respond to '-setEyeX:setEyeY:setEyeZ:'

Maybe setEyeY and setEyeZ don't exist? Or instead use eyeY and eyeZ?

I change setEyeY and setEyeZ to eyeY and eyeZ :

[self.camera setEyeX:tilemap.position.x eyeY:tilemap.position.y eyeZ:0 ]

and blank dark screen appear.. :(

Posted 2 years ago #

Acceleroto
Member

@artakus - there's only a "set" for the X part of the method name. I think you need to set the camera and the eye to do what you want:

//the next 2 lines are from camera.m
GSize s = [[Director sharedDirector] displaySize];
//return ( s.height / 1.1566f ); //commented out & left for reference

//this sets the Z value for the eye to the Cocos default
float cameraZ = ( s.height / 1.1566f );

//set the camera view center and location
[self.camera setCenterX:tilemap.position.x centerY:tilemap.position.y centerZ:0];
[self.camera setEyeX:tilemap.position.x eyeY:tilemap.position.x eyeZ:cameraZ];

Posted 2 years ago #

artakus
Member

Hai Acceleroto. I cannot move the map, First I click on the screen, The map going to the top right (North East) and nothing happened.

I think it should be used in ccTouchBegan. because im going to drag it to the right, left, top and down. then in cctouchEnded (i untouch), then it will be going to the original location.

So which part did you mention about the dragging method? The above code? Or the above code just to center the map position? How about the dragging map?

Posted 2 years ago #
Acceleroto
Member

The above code just centers the camera on a given point. If you want to move the camera while your finger moves, you should add something in ccTouchesMoved also. I'm not exactly sure what you're trying to do with your game, so it's a little tough for me to give exact code examples.

Maybe think about what you want to occur when touches start, move and end. From there, program the right things in ccTouchesBegan, ccTouchesMoved, ccTouchesEnded, and ccTouchesCancelled. For my code, my ccTouchesEnded & ccTouchesCancelled do the same things.

-Bryan

Posted 2 years ago #
artakus
Member

I'm new in cocos2d actually.

I have large map and i wanna drag it to the left, right, top and bottom, so I use this code to drag my map:

- (BOOL)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];

if( touch )
{
CGPoint location = [touch locationInView: [touch view]];
TileMapAtlas *tilemap = (TileMapAtlas*) [self getChildByTag:kTagMap];
[tilemap setPosition:[[Director sharedDirector] convertCoordinate:location]];
}
}

However the result is bad. My map only follow the touch location.. :|

Posted 2 years ago #
Acceleroto
Member

One way to do this would be to define the location of your last touch and compare that to the current touch location (the new Cocos touch handler is probably the best to use for this). Once you have to difference in x & y between the old & new touch locations, add that difference to the tilemap location.

-Bryan

Posted 2 years ago #
artakus
Member

i understand your concept but a bit confuse with the implementation.

So i have to define my map position like this:

locx = tilemap.position.x;
locy = tilemap.position.y;

then ? urgh. :|

Posted 2 years ago #

Nicke
Member

Simple implementation would look something like:

In your interface file:

CGPoint lastLocation;

In your implementation

-(BOOL)ccTouchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {

        UITouch *touch = [touches anyObject];
	CGPoint tmpLoc = [touch locationInView: [touch view]];
	CGPoint location = [[Director sharedDirector] convertCoordinate:tmpLoc];

        lastLocation = location;

}

-(BOOL)ccTouchesMoved:(NSSet*)touches withEvent:(UIEvent*)event {

	UITouch *touch = [touches anyObject];
	CGPoint tmpLoc = [touch locationInView: [touch view]];
	CGPoint location = [[Director sharedDirector] convertCoordinate:tmpLoc];

        if (!(CGPointEqualToPoint( location, lastLocation ))) { 

            yourTileMap.position = ccp((location.x - lastLocation.x), (location.y - lastLocation.y));

        }

        lastLocation = location;

}

Feel free to correct any silly errors, I'm only on my first cup of coffee, still two cups away from my zen hacker state ;)

Posted 2 years ago #

cpk
Member

Hello! I have a game with a background wider than the screen. When the actor moves I want the view to be centered over the actor. Moving the camera (discussed above) works well for this.

I want the user to be able to interact with (touch) the actor. But I am having problems with mapping touches on the screen (screen coordinates) with coordinates in the game space. The following code get's the position of the touch relative to the "screen coordinates" and orientation.
UITouch *myTouch = [touches anyObject];
CGPoint loc = [myTouch locationInView: [myTouch view]];
CGPoint convLoc = [[Director sharedDirector] convertCoordinate: loc];
It looks like the method attached to CocosNode should do the trick....
CGPoint wsConvLoc = [self convertToWorldSpace: convLoc];
But it does not. Any hint would be much appreciated. I am using Cocos2d 0.8.1 and the most recent version of Chipmunk.

Posted 2 years ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.