屏幕坐标系:
与我们开发手机是一样,手机屏幕左上角为坐标系原点,横向右为正x轴,纵向下为正y轴。
OpenGL坐标系:
又是cocos2d坐标系,手机屏幕左下角为坐标系原点,横向右为正x轴,纵向上为正y轴。
世界坐标系:
又称绝对坐标系,这里是指游戏世界在屏幕上所显示的坐标系,一般与openGL一样。
本地坐标系:
又称相对坐标系,这里是相对于游戏元素中node(节点)的坐标系,以此时的node为参考物,以该node的锚点为原点,横向右为正x轴,纵向上为正y轴。
锚点:
作为node(节点)位置的参考物,其取值范围(0,0)~(1,1),取值范围可看作node本身宽高的比例,(0.5,5)表示node的中心位置
触摸点:
指触摸屏幕的点,所得点的坐标位于屏幕坐标系,需要转换为openGL坐标系坐标
触摸函数:
virtual bool onTouchBegan(Touch *touch,Event * event); virtual void onTouchEnded(Touch *touch,Event * event); virtual void onTouchCancelled(Touch *touch,Event * event); virtual void onTouchMoved(Touch *touch,Event * event);转换坐标函数:
// 把世界坐标转换到当前节点的本地坐标系中 Point convertToNodeSpace(const Point& worldPoint) const; // 把基于当前节点的本地坐标系下的坐标转换到世界坐标系中 Point convertToWorldSpace(const Point& nodePoint) const; // 基于Anchor Point把基于当前节点的本地坐标系下的坐标转换到世界坐标系中 Point convertToNodeSpaceAR(const Point& worldPoint) const; // 基于Anchor Point把世界坐标转换到当前节点的本地坐标系中 Point convertToWorldSpaceAR(const Point& nodePoint) const;
实例应用:
实例1
Size visibleSize = Director::getInstance()->getVisibleSize(); Vec2 origin = Director::getInstance()->getVisibleOrigin(); // 窗口分辨率 log("visibleSize:(%f,%f)",visibleSize.width,visibleSize.height); // 世界坐标系原点,等同于openGL原点 log("origin:(%f,origin.x,origin.y); // 实例1 // 默认锚点为(0,0),锚点范围(0,1),可看做比例,(0.5,0.5)的锚点为中心点 auto red = LayerColor::create(Color4B(255,255),visibleSize.width/2,visibleSize.height/2); auto blue = LayerColor::create(Color4B(0,255,visibleSize.width/5,visibleSize.height/5); red->addChild(blue); this->addChild(red);
实例1运行结果:
visibleSize:(480.000000,320.000000)
origin:(0.000000,0.000000)
实例2
// 实例2 // 这里默认忽略锚点即设置为(0,0),所以激活锚点,并设置红色区域中心为锚点,其锚点与其设置的位置一致 // 如果重新设置red的位置,则移动的参考点就是锚点(red的子节点blue在red中,因此会一起移动) auto red = LayerColor::create(Color4B(255,150,150); red->ignoreAnchorPointForPosition(false); // 是否忽略锚点 red->setAnchorPoint(Point(0.5,0.5)); // 设置锚点坐标 //red->setPosition(Point(150,150)); auto blue = LayerColor::create(Color4B(0,60,30); red->addChild(blue); this->addChild(red);
实例2运行结果:
实例3
// 实例3 // 这里blue为red子节点,默认位置为red的左下角,如果设置blue位置,其位置也是相对于父节点red而言 // 设置blue的锚点为其中心点,则其位置便以锚点为参考 auto red = LayerColor::create(Color4B(255,150); red->ignoreAnchorPointForPosition(false); red->setAnchorPoint(Point(0.5,0.5)); red->setPosition(Point(150,30); blue->ignoreAnchorPointForPosition(false); blue->setAnchorPoint(Point(0.5,0.5)); red->addChild(blue); this->addChild(red);
实例3运行结果:
实例4
// 实例4 auto *sprite1 = Sprite::create("HelloWorld.PNG"); sprite1->setPosition(ccp(100,100)); sprite1->setAnchorPoint(ccp(0,0)); this->addChild(sprite1); // 此时添加到的是世界坐标系,也就是OpenGL坐标系 auto *sprite2 = Sprite::create("HelloWorld.PNG"); sprite2->setPosition(ccp(50,50)); sprite2->setAnchorPoint(ccp(1,1)); this->addChild(sprite2); // 此时添加到的是世界坐标系,也就是OpenGL坐标系 // 将 sprite2 这个节点的坐标ccp(50,50)转换为sprite1节点下的本地(节点)坐标系统的位置坐标 // 这里可视为相对于sprite1的锚点的坐标 Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition()); //将 sprite2 这个节点的坐标ccp(50,50)转换为sprite1节点下的世界坐标系统的位置坐标 // 这里可视为相对于openGL坐标系原点的坐标 Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition()); // 这里参考点为各自的锚点 log("point1:(%f,point1.x,point1.y); log("point2:(%f,point2.x,point2.y);
实例4运行结果:
point1:(-50.000000,-50.000000)
point2:(150.000000,150.000000)