Cocos Camera 2D Zoom Out

cocos2d-x C++
#1

I have been trying to use camera in my Cocos 2D project but I am not getting proper results. I have a world size which is 3840 * 2160. At a time, the player can only see 1920 * 1080. But using arrow keys, he can move around. This works by changing the camera position. Now I want to add another feature in which the player can zoom out and see the entire 3840 * 2160. I have tried so many options but the camera just doesn’t zoom out. I don’t want to use scaling on the entire game scene as it changes touch controls, and physics. My question is, does cocos camera even support zooming in and out? If yes, then how? If no, what is the best alternative?

#2

Any suggestions on this please?

#3

in a 2D game, I dont think so as you are missing the z axis in 2D.

Is your camera orthographic or perspective?

#4

My camera is orthographic! And orthographic cameras doesn’t zoom in and zoom out by default. I wanna change the view port of the camera. Instead of displaying only 1920 x 1080, I want to show more. But changing the viewport doesn’t do anything.

#5

We dont have anything here: http://www.cocos2d-x.org/docs/cocos2d-x/en/3d/camera.html

Let me ask @zhangxm because we should update the docs if we have a solution.

#6

orthographic projection can not zoom in or zoom out, and viewport doesn’t do the thing either. I think you should use perspective projection and adjust the camera’s z value.

#7

@DarkNemesis hey I just implemented something like this… I had to switch to perspective camera for this.

let me know if your looking for something like. https://www.dropbox.com/s/p36neeqq212s55u/zoominmap.mov?dl=0

#8

@bilalmirza I actually want to achieve this too. Can you share with me? I’d be happy to provide back any enhancements I make.

#9

there is actually nothing much to it.

i create a camera.

init(){
 _mapCamera = Camera::createPerspective(60, (GLfloat)frameSize.width/frameSize.height, 1, 2000);
    _mapCamera->lookAt(Vec3(0, 0, 0), Vec3(0, 0, 0));
    _mapCamera->setPositionZ(CAMERA_HEIGHT * 3);
    _mapCamera->setPosition(mapCameraPoint);
    this->addChild(_mapCamera);
    _mapCamera->setCameraFlag(CameraFlag::USER3);

}

void update(float dt){
  _mapCamera->setPositionZ(_mapCamera->getPositionZ() + ((-_mapCamera->getPositionZ() + mapCameraToZ) * dt * 3));
        _mapCamera->setPosition(_mapCamera->getPosition() +(-_mapCamera->getPosition() + mapCameraPoint) * dt * 3);
}
//lerp towards the wanted positions

//all the buttons are ui::Button placed on the map... so i simply do this

 button->addTouchEventListener([this,scaleVal](Ref *sender, ui::Widget::TouchEventType type){
    if(type == ui::Widget::TouchEventType::ENDED) 
{

    ui::Button *button = static_cast<ui::Button *>(sender);
               

                    mapCameraToZ = CAMERA_BUTTON_PRESS_HEIGHT;
                    mapCameraPoint = Point(button->getWorldPosition().x + zoomToFit/2,button->getWorldPosition().y);
                    _buttonSelectedAnimation->setPosition(button->getPosition());
            }
            
        });
1 Like
#10

Interesting approach. I will try this and see how it works for me. Thank you so much for sharing.

#11

@bilalmirza Yup, I want exactly what you are doing in the video. Now since I am new to camera stuff, I might ask some basic questions. This is what I am trying to do:

    this->_defaultCamera = Camera::createPerspective(60, (GLfloat)1920 / 1080, 1, 2000);
	this->getDefaultCamera()->lookAt(Vec3(0, 0, 0), Vec3(0, 0, 0));
	this->getDefaultCamera()->setPositionZ(100 * 3);
	this->getDefaultCamera()->setPosition(0, 0);

Then when user presses space, zoom out:

this->getDefaultCamera()->setPositionZ(100);

And it crashed when I pressed space.

#12

have you added the camera as a child of the scene?

this->addChild(this->getDefaultCamera());

#13

I added that. It doesn’t crash, but it still doesn’t translates or zooms the camera.
For translation, I use this:

auto moveBy = MoveBy::create(0.5, Vec2(0, -1080));
this->getDefaultCamera()->runAction(moveBy);`

This worked fine when I didn’t try to override the default camera. Is it because there are two cameras now, and the one which I am viewing isn’t the one which I am translating?

#14

I got it working. I used removeChild to remove the existing _default camera. Now I just need to find the appropriate parameters for creating the appropriate perspective camera such that near plane is 1920x1080 and far plane is 3840x2160. Anybody knows how to create a frustum like that?