CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("pic.png");
CCSprite* p1 = CCSprite::createWithSpriteFrame(frame);
p1->setPosition(100,100);
p1->setAnchorPoint(Vec2(0, 0));
this->addChild(p1);
以上代码是我们常用的添加图片精灵的方法,以下是结果图1
看起来似乎没什么问题,那么我们把p1的坐标设为(0,0),以下是结果图2
可以发现p1没在左下角,它不见了,这是为什么呢?这是因为openGL的绘画原点不在窗口的左下角,可以通加上绘图原点坐标达到我们想要的效果,以下是代码:
auto visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();//获取绘图的原点
CCSpriteFrame *frame = CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("pic.png");
CCSprite* p1 = CCSprite::createWithSpriteFrame(frame);
p1->setPosition(Vec2(0,0) + origin);//加上origin
p1->setAnchorPoint(Vec2(0, 0));
this->addChild(p1);
以下为效果图3:
可以发现结果正常了,但是pic.png的大小是100*100,上图红色色块并没有达到100*100,并且从图1也可以发现坐标设为(100,100),真是显示中坐标也不是(100,100),这是怎么回事呢?这涉及到Point和pixel,点和像素之间的关系,在窗口中显示的sprite大小和坐标,是以point为单位,所以会和设想中有偏差
以下是一段适配代码:
int w = 20, h = 10;//假设整个屏幕显示大小为20*10,没哥色块占1个单位
auto size = frame->getRect().size;//获取图片point大小
auto t1 = Director::getInstance()->getVisibleSize();//获取整个显示窗口的point大小
float wScale = t1.width * 1.0 / size.width;//计算出实际窗口能容纳多少个原尺寸色块
float hScale = t1.height*1.0 / size.height;//计算出实际窗口能容纳多少个原尺寸色块
int count = 0;//当前纵向偏移
bool bturn = true;//绘制是否转向(防止色块跑出显示区)
for (int i = 0; i < w; i++) {
CCSprite* sprite = CCSprite::createWithSpriteFrame(frame);
sprite->setAnchorPoint(Point(0, 0));
sprite->setScaleX(wScale / w);//根据实际容量和需要容量,计算出缩放比例
sprite->setScaleY(hScale / h);//根据实际容量和需要容量,计算出缩放比例
sprite->setPosition(Vec2(i*size.width*wScale / w,count*size.height*hScale / h)+ origin);//每个色块之间间隔一个单位距离
if (bturn)count++;
else count--;
if (count >= h - 1)bturn = false;//向上到顶,转向
if (count <= 0)bturn = true;//向下到底,转向
this->addChild(sprite, 10);
}
结果如下图4