cocos2d-x 基础系列 (04) 对象位置屏幕尺寸设置关系以及addChild函数的使用

在之前的文章中各个position比较混乱，每次都是自己在手机上调试出来的，在这里都描述一下，可能并不深入，因为没有去剖析源码。

01. Anchor Point and Position

Anchor Point可以理解为对象的基点，默认值是(0.5, 0.5),也就是图像的正中间。

可以通过

mySprite->setAnchorPoint(0, 0);

设置成为对象的左下角，

mySprite->setPosition(Vec2(100, 200));

会根据这点到屏幕的左下角的距离。

网上有个例子很清晰地显示如何表示两者的关系。





02. 注意在MainScene.cpp中还有两个与尺寸相关的变

Size visibleSize = Director::getInstance()->getVisibleSize();

Returns visible size of the OpenGL view in points.

The value is equal to

Director::getWinSize()

if don't invoke

GLView::setDesignResolutionSize()

.

可以通过添加log打印这个值是多少，大概的意思就是获取可视界面的大小。

这里apple机就好很多，因为只有一款手机，最多两款，不像android机那样要适配各种尺寸，各种分辨率。

  // Return visible origin coordinate of the OpenGL view in points

Vec2 origin = Director::getInstance()->getVisibleOrigin();

加入log后的运行结果

Ready for GLSL

Ready for OpenGL 2.0

visibleSize = (426.666656, 320.000000), origin = (26.666672, 0.000000)

可以得到visibleSize 为(426， 320）， origin(26.6, 72).

<
4000
span>Parent Child Realationship

Coco2d-x uses a parent and child relationship. This means that properties and changes to the parent node are applied to its children.

编程确定尺寸

#include "Frames.h"

USING_NS_CC;

Scene *Frames::createScene() {
// Some upfront items that we need
auto director = Director::getInstance();
Size visibleSize = director->getVisibleSize();
Vec2 origin = director->getVisibleOrigin();
auto scene = Scene::create();
log("visible width = %lf, height = %lf",
visibleSize.width, visibleSize.height);
log("origin X = %lf, Y = %lf", origin.x, origin.y);
// console output
// visible width = 480.000000, height = 320.000000
// origin X = 0.000000, Y = 0.000000

// smile 100 * 100 pixels
auto smile = Sprite::create("smile_100.png");
smile->setPosition(0, 0);
scene->addChild(smile, 1);

return scene;
}

原来的图片



得到的结果



可以知道坐标系的远点在左下角， 屏幕的尺寸为 480 × 320，图像的anchor point在默认图像的中间。

将代码修改成可以看到图像像右向上移动（50， 50），证明上面的猜测正确。

// smile->setPosition(0, 0);
smile->setPosition(50, 50);

场景结构图

A scene greph is a data structure that arranges a graphical scene. A scene graph contains Node objects in a tree.