Cocos2D-X学习6：在屏幕上显示图像

之前学习了文字的显示，现在继续学习如何显示图像，实际方法和增添文字很像，因此学起来十分容易了。

cocos2d-x通过精灵类来显示图像，下面先来理解试一下精灵的概念。在cocos2d-x的游戏中，一个怪物、道具、角色，都是被看成一个精灵，游戏背景作为独立的一部分，也可以看做一个精灵。

接下来将做一个简单的游戏开始界面学习图像的显示，代码如下：

	Size size = Director::getInstance()->getVisibleSize(); //获取屏幕尺寸
	Vec2 origin = Director::getInstance()->getVisibleOrigin(); //获取可视屏原点的坐标 
	auto* background = Sprite::create("background.jpg"); //创建精灵类，背景图像为background.jpg
	background->setPosition(size.width / 2, size.height / 2); //让背景图像居中显示
	background->setScale(0.7f); //缩小背景图像
	addChild(background); //将背景图像加入到场景中

	//增添三个按钮
	auto* button1 = Sprite::create("button.png"); //第一个按钮素材图像为button.png
	button1->setPosition(550, size.height / 2); //设置按钮位置
	button1->setScale(0.6f); //缩小图像
	addChild(button1); //将第一个按钮加入到场景中
	 
	auto* button2 = Sprite::create("button.png"); //第二个按钮素材图像为button.png
	button2->setPosition(550, size.height / 2 - 60); //设置按钮位置
	button2->setScale(0.6f); //缩小图像
	addChild(button2); //将第二个按钮加入到场景中

	auto* button3 = Sprite::create("button.png"); //第三个按钮素材图像为button.png
	button3->setPosition(550, size.height / 2 - 120); //设置按钮位置
	button3->setScale(0.6f); //缩小图像
	addChild(button3); //将第三个按钮加入到场景中

	auto* renwu = Sprite::create("renwu.png"); //增加一幅人物图像
	renwu->setPosition(0, 0); //设置图像位置 
	renwu->setAnchorPoint(Vec2(0, 0)); //设置精灵锚点
	renwu->setScale(0.5f); //缩小图像
	addChild(renwu); //将图像加入到场景中
	
	return true;

界面中添加了背景图像、三个按钮和左侧的人物图像。效果图如下：

主要内容是创建精灵和设置精灵的属性，还使用了获取当前屏幕尺寸。

1、获取当前屏幕尺寸

不同设备屏幕存在差异，为了适配不同设备，因此使用Director::getInstance()->getVisibleSize()获取屏幕尺寸。然后通过屏幕尺寸来设定精灵的位置。

2、创建精灵：

类似于标签的创建，使用Sprite::create创建精灵，参数为要使用的图像名称，十分简单。

3、设置属性包含了位置、缩放、设置锚点。

位置设置：与标签相同，使用setPosition进行设置。

缩放设置：为了将原始图像与屏幕大小适配，因此需要对图像进行缩放。使用setScale进行缩放，参数是一个float值，表示缩放比例。

锚点设置：锚点就是setPosition的参数坐标在精灵中的位置，默认锚点是位于中心，也就是setPosition设定的是中心坐标。使用setAnchorPoint更改锚点位置，参数为一个Point或Vec2值，在本文的代码中Vec2(0, 0)为左上角，通过更改Point或Vec2的值来修改锚点位置。