cocos2d / cocos2d-html5

Cocos2d for Web Browsers. Built using JavaScript.
https://www.cocos.com
3.07k stars 902 forks source link

Camera [feature] #2115

Open hsdk123 opened 10 years ago

hsdk123 commented 10 years ago

Hi, it would be nice if cocos2d-html5 could implement a camera feature of some sort, and add a property to each Node that defines whether the user wants or doesn't want the Node (sprite, label, etc.) to be affected by the camera.

The camera should be scalable (zoom) moveable, rotatable, apply tint, etc. (like sprite actions) This would be great for things like attack, crash effects and so on.

If the user doesn't want the node (ex. sprite, label) affected by the camera, it should just render in normal 2d coordinates, scale, etc.

dingpinglv commented 10 years ago

Hi @hsdk123 ,

I think this feature has been supported, but only on WebGL mode. You can see the js-tests -> Node tests -> camera center test

Hopes to help David

hsdk123 commented 10 years ago

@dingpinglv

Thanks for the reply, I've confirmed the tests and they seem to work in the way I need : )

But it would be great if basic camera features (zoom, rotate, move) could also be implemented for the canvas version (things like camera orbit, while nice, can be be put lower in priority for the canvas version)

A lot of mobile devices still don't support webgl and are limited to html5 canvas. My mobile users are also mostly on devices that don't support webgl.

And from what I understand from the code, each sprite has its own unique camera, and I need to update its camera in the update function - is this correct?

hsdk123 commented 10 years ago

I also notice this comment in CCCamera.js: IMPORTANT: Either your use the camera or the rotation/scale/position properties. You can't use both. World coordinates won't work if you use the camera.

What I'm looking for is to be able to change the sprite's position, rotation, scale, etc. and have the camera applied on top of them. (so that while the sprite's position remains the same, the rendered result looks different)

ex. sprite.setPosition(20, 30)

if camera applied (camera position: 30, 40)
sprite would be rendered at (50, 70) but with sprite.getPosition() returning (30, 40)

if camera not applied
sprite would be rendered at (30, 40) with sprite.getPosition() returning (30, 40)

Basically, having the camera values multiplied to the sprite's properties right before rendering. (And not affecting the sprite's position, scale, rotation properties directly)