Perspective Camera + background image

cocos2d-x C++
#1

Hi everyone,

I would like to have a camera with a perspective which renders all sprites with a camera flag (I used USER2 for this camera).
Furthermore I’d like to have a background which doesn’t get affected by the perspective camera so I created a normal camera with another camera Flag (USER4).

Here is the code I used:

/* Creating the cameras */
/* Cam 1 */
auto gameCamera = Camera::createPerspective(60, (float)visibleSize.width / visibleSize.height, 1.0, 5000); /* Create a perspective camera */
gameCamera->setPosition3D(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000));
gameCamera->lookAt(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000), Vec3(0.0, 1.0, 0.0));
gameCamera->setCameraFlag(CameraFlag::USER2);
this->addChild(gameCamera);

/* Cam 2 */
auto backgroundCamera = Camera::create();
backgroundCamera->setCameraFlag(CameraFlag::USER4);
this->addChild(backgroundCamera);


/* Creatingthe sprites */
/* Sprite 1 */
auto gameSprite = Sprite::create("GameSprite.png");
gameSprite->setPosition(centerPosition);
gameSprite->setCameraMask((unsigned short)CameraFlag::USER2, true);
this->addChild(gameSprite);

/* Sprite 2 */
auto backgroundSprite = Sprite::create("BackgroundSprite.png");
backgroundSprite->setPosition(centerPosition);
backgroundSprite->setCameraMask((unsigned short)CameraFlag::USER4, true);
this->addChild(backgroundSprite);

Now it seems like that the perspective camera is always rendered before the one I use for the background and thus the background image is in front of the game image.

CameraTesting
CameraTesting1026×795 330 KB

Does anyone know a solution for my problem?

Thank you in advance :slight_smile:

#2

Try to swap cameras:
Use USER2 for background
Use USER4 for game

1 Like
#3

Thank you for your answer but the swapping of the camera flags does not change anything at all.
The outcome is still the same and the “gameSprite” remains behind the “backgroundSprite”

#4

Try to create cameras in another order.

#5

I tried creating the cameras in another order as you suggested but it only works if the cameras are “equal”. Meaning that it only works if I have for example two default cameras and two perspective cameras.
But a mixture of both leads to the initial result where the regular camera is always rendered before the perspective camera, regardless of the order I add them to the scene.
I will add the updated code with two equal cameras, if someone wants to try it out.

	auto visibleSize = Director::getInstance()->getVisibleSize();
	Vec2 origin = Director::getInstance()->getVisibleOrigin();
	Vec2 centerPosition = Vec2(origin.x + visibleSize.width / 2.f, origin.y + visibleSize.height / 2.f);

	/* Creating the cameras */
	/* Cam 2 */
	//auto backgroundCamera = Camera::create();
	auto backgroundCamera = Camera::createPerspective(60, (float)visibleSize.width / visibleSize.height, 1.0, 5000); /* Create a perspective camera */
	backgroundCamera->setPosition3D(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000));
	backgroundCamera->lookAt(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000), Vec3(0.0, 1.0, 0.0));
	backgroundCamera->setCameraFlag(CameraFlag::USER4);
	this->addChild(backgroundCamera);


	/* Cam 1 */
	//auto gameCamera = Camera::create();
	auto gameCamera = Camera::createPerspective(60, (float)visibleSize.width / visibleSize.height, 1.0, 5000); /* Create a perspective camera */
	gameCamera->setPosition3D(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000));
	gameCamera->lookAt(Vec3(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2, 2000), Vec3(0.0, 1.0, 0.0));
	gameCamera->setCameraFlag(CameraFlag::USER2);
	this->addChild(gameCamera);


	/* Creatingthe sprites */
	/* Sprite 1 */
	auto gameSprite = Sprite::create("GameSprite.png");
	gameSprite->setPosition(centerPosition);
	gameSprite->setCameraMask((unsigned short)CameraFlag::USER2, true);
	this->addChild(gameSprite);

	/* Sprite 2 */
	auto backgroundSprite = Sprite::create("BackgroundSprite.png");
	backgroundSprite->setPosition(centerPosition);
	backgroundSprite->setCameraMask((unsigned short)CameraFlag::USER4, true);
	this->addChild(backgroundSprite);

CameraTesting2
CameraTesting21026×795 115 KB

Best

#6

Maybe we need to make a tutorial about cameras. I’m supposed to be writing one this week on some subject.

The first one was on UserDefaults and SQLite

1 Like
#7

@biffzs I’m writing a tutorial on Camera now, can you share your motivation for using a Camera this way? You are making a 2D game, right?

#8

Hi @slackmoehrle,
I’m glad you are writing a camera tutorial. I think a lot of people will benefit from this!
Yes, I’ making a 2D game. It is kind of a tabletop game, seen from above with multiple playing fields.
I wanted the playing fields to be rendered by a perspective camera to zoom in and out easily, do translation of the camera and maybe rotate it.
I also wanted the game to have a background image which covers the whole screen and stays as it is behind of everything else.
Furthermore I’d like to have some ui elements in front of everything.

#9

I see. Thanks for explaining it helps me visualize what i should cover in the tutorial.

1 Like