Cocos2d-JS座標系

時間 2019-11-05

原文原文鏈接

在圖形圖像和遊戲應用開發中座標系是很是重要的，咱們在Android和iOS等平臺應用開發的時候使用的二維座標系它的原點是在左上角的。而在Cocos2d-JS座標系中它原點是在左下角的，並且Cocos2d-JS座標系又能夠分爲：世界座標和模型座標。
UI座標
UI座標就是Android和iOS等應用開發的時候使用的二維座標系。它的原點是在左上角的。

html

UI座標node

UI座標原點是在左上角，x軸向右爲正，y軸向下爲正。咱們在Android和iOS等平臺使用的視圖、控件等都是遵照這個座標系。然而在Cocos2d-JS默認不是採用UI座標，可是有的時候也會用到UI座標，例如在觸摸事件發生的時候，咱們會得到一個觸摸對象（Touch），觸摸對象（Touch）提供了不少得到位置信息的方法，以下面代碼所示：
var touchLocation = touch.getLocationInView();
使用getLocationInView()方法得到觸摸點座標事實上就是UI座標，它的座標原點在左上角。

OpenGL座標
咱們在上面提到了OpenGL座標，OpenGL座標是種三維座標。因爲Cocos2d-JS的JSB是採用OpenGL渲染，所以默認座標就是OpenGL座標，只不過只採用兩維（x和y軸）。若是不考慮z軸，OpenGL座標的原點在左下角。

編程

OpenGL座標微信

咱們會經過一個觸摸對象（Touch）得到OpenGL座標位置，以下面代碼所示：
網站

[html] view plain copythis

var touchLocation = touch.getLocation(); spa

提示三維座標根據z軸的指向不一樣分爲：左手座標和右手座標。右手座標是z軸指向屏幕外，如3-49左圖所示。左手座標是z軸指向屏幕裏，以下圖所示。OpenGL座標是右手座標，而微軟平臺的Direct3D[ Direct3D（簡稱：D3D）是微軟公司在Microsoft Windows操做系統上所開發的一套3D繪圖編程接口，是DirectX的一部份，目前廣爲各家顯卡所支持。與OpenGL同爲計算機繪圖軟件和計算機遊戲最常使用的兩套繪圖編程接口之一。—— 引自於維基百科 http://zh.wikipedia.org/wiki/Direct3D]是左手座標。

操作系統

三維座標.net

世界座標和模型座標
因爲OpenGL座標有能夠分爲：世界座標和模型座標，因此Cocos2d-JS的座標也有世界座標和模型座標。
你是否有過這樣的問路經歷：張三會告訴你向南走一千米，再向東走500米。而李四會告訴你向右走一千米，再向左走500米。這裏兩種說法或許均可以找到你要尋找的地點。張三採用的座標是世界座標，他把地球做爲參照物，表述位置使用地理的東、南、西和北。而李四採用的座標是模型座標，他讓你本身做爲參照物，表述位置使用你的左邊、你的前邊、你的右邊和你的後邊。
咱們看看下圖，從圖中能夠看到A的座標是(5,5)，B的座標是(6,4)，事實上這些座標值就是世界座標。若是採用A的模型座標來描述B的位置，則B的座標是(1,-1)。
orm

世界座標和模型座標

有的時候咱們須要將世界座標與模型座標互相轉換。咱們能夠經過Node對象以下方法實現：
{cc.Point} convertToNodeSpace(worldPoint)。將世界座標轉換爲模型座標。
{cc.Point} convertToNodeSpaceAR(worldPoint)。將世界座標轉換爲模型座標。AR表示相對於錨點。
{cc.Point} convertTouchToNodeSpace(touch)。將世界座標中觸摸點轉換爲模型座標。
{cc.Point} convertTouchToNodeSpaceAR(touch)。將世界座標中觸摸點轉換爲模型座標。AR表示相對於錨點。
{cc.Point} convertToWorldSpace(nodePoint)。將模型座標轉換爲世界座標。
{cc.Point} convertToWorldSpaceAR(nodePoint)。將模型座標轉換爲世界座標。AR表示相對於錨點。

下面咱們經過兩個例子瞭解一下世界座標與模型座標互相轉換。

一、世界座標轉換爲模型座標

所示是世界座標轉換爲模型座標實例運行結果。

世界座標轉換爲模型座標

在遊戲場景中有兩個Node對象，其中Node1的座標是(400, 500)，大小是300 x 100像素。Node2的座標是(200, 300)，大小也是300 x 100像素。這裏的座標事實上就是世界座標，它的座標原點是屏幕的左下角。
編寫代碼以下：

[html] view plain copy

var HelloWorldLayer = cc.Layer.extend({
sprite: null,
ctor: function () {
this._super();
var size = cc.winSize;
var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});
var menu = new cc.Menu(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);
//建立背景
var bg = new cc.Sprite(res.bg_png); ①
bg.setPosition(size.width / 2, size.height / 2);
this.addChild(bg, 2); ②
//建立Node1
var node1 = new cc.Sprite(res.node1_png); ③
node1.setPosition(400, 500);
node1.setAnchorPoint(1.0, 1.0);
this.addChild(node1, 2); ④
//建立Node2
var node2 = new cc.Sprite(res.node2_png); ⑤
node2.setPosition(200, 300);
node2.setAnchorPoint(0.5, 0.5);
this.addChild(node2, 2); ⑥
var point1 = node1.convertToNodeSpace(node2.getPosition()); ⑦
var point3 = node1.convertToNodeSpaceAR(node2.getPosition()); ⑧
cc.log("Node2 NodeSpace = (" + point1.x + "," + point1.y + ")");
cc.log("Node2 NodeSpaceAR = (" + point3.x + "," + point3.y + ")");
return true;
}
});

代碼①~②行是建立背景精靈對象，這個背景是一個白色900 x 640像素的圖片。代碼第③~④行是建立Node1對象，並設置了位置和錨點屬性。代碼第⑤~⑥行是建立Node2對象，並設置了位置和錨點屬性。第⑦行代碼將Node2的世界座標轉換爲相對於Node1的模型座標。而第⑧行代碼是相似的，它是相對於錨點的位置。
運行結果以下：
JS: Node2 NodeSpace = (100,-100)
JS: Node2 NodeSpaceAR = (-200,-200)
結合圖3-52咱們解釋一下，Node2的世界座標轉換爲相對於Node1的模型座標，就是將Node1的左下角做爲座標原點（以下圖中的A點），咱們不難計算出A點的世界座標是(100, 400)，那麼convertToNodeSpace方法就是A點座標減去C點座標，結果是(-100,100)。
而convertToNodeSpaceAR方法要考慮錨點，所以座標原點是B點，B點座標減去C點座標，結果是(-200, -200)。
二、模型座標轉換爲世界座標
下圖所示是模型座標轉換爲世界座標實例運行結果。

模型座標轉換爲世界座標

在遊戲場景中有兩個Node對象，其中Node1的座標是(400, 500)，大小是300 x 100像素。Node2是放置在Node1中的，它對於Node1的模型座標是(0, 0)，大小是150 x 50像素。
編寫代碼以下：

[html] view plain copy

var HelloWorldLayer = cc.Layer.extend({
sprite: null,
ctor: function () {
this._super();
var size = cc.winSize;
var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});
var menu = new cc.Menu(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);
//建立背景
var bg = new cc.Sprite(res.bg_png);
bg.setPosition(size.width / 2, size.height / 2);
this.addChild(bg, 2);
//建立Node1
var node1 = new cc.Sprite(res.node1_png);
node1.setPosition(400, 500);
node1.setAnchorPoint(0.5, 0.5);
this.addChild(node1, 2);
//建立Node2
var node2 = new cc.Sprite(res.node2_png);
node2.setPosition(0, 0); ①
node2.setAnchorPoint(0, 0); ; ②
node1.addChild(node2, 2); ③
var point2 = node1.convertToWorldSpace(node2.getPosition()); ④
var point4 = node1.convertToWorldSpaceAR(node2.getPosition()); ⑤
cc.log("Node2 WorldSpace = (" + point2.x + "," + point2.y + ")");
cc.log("Node2 WorldSpaceAR = (" + point4.x + "," + point4.y + ")");
return true;
}
});

上述代碼咱們主要關注第③行，它是將Node2放到Node1中，這是與以前的代碼的區別。這樣第①行設置的座標就變成了相對於Node1的模型座標了。
第④行代碼將Node2的模型座標轉換爲世界座標。而第⑤行代碼是相似的，它是相對於錨點的位置。
運行結果以下：
JS: Node2 WorldSpace = (250,450)
JS: Node2 WorldSpaceAR = (400,500)
圖所示的位置，能夠用世界座標描述。代碼①~③行修改以下：
node2->setPosition(Vec2(250, 450));
node2->setAnchorPoint(Vec2(0.0, 0.0));

this->addChild(node2, 0);

更多內容請關注最新Cocos圖書《Cocos2d-x實戰：JS卷——Cocos2d-JS開發》

本書交流討論網站：http://www.cocoagame.net

歡迎加入Cocos2d-x技術討論羣：257760386

更多精彩視頻課程請關注智捷課堂Cocos課程：http://v.51work6.com

智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：

京東：http://item.jd.com/11659698.html

歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息