cocos studio怎样建立节点

启动，新建一个项目：

这样就完成项目的创建。

在编辑之前，需要先给项目提供资源，一种是把资源拖到右边的资源列表或都在资源列表打开选择资源对话框。

插入结果

其它资源依此类推。

项目创建会默认创建一个画布和一个容器panel：

在正式编辑UI之前，需要先设置画面大小，这个跟据你项目的要求设置。

下面在画面中，填加一个图片。很不幸，你不能从资源列表直接拖到中间的画布上只，只能在画布或对象列表使用右键，d出右键菜单，添加图片对象。

然后，用鼠标选这个对象。在画面的右边，会有一个对象的属性面板。

属性面版有尺寸和模式、常规、控件布局、特性。大家可以尝试设置，就知道他的作用了。添加完成后，把具体的图片资源拖到属性面版->特性->文件框内，就可以了。

结果

这样就OK了。

在属性面板有一个Tag属性和名子属性要注意一下，我面在加载UI后，可以通过这两个属性取得UI中的这个对象。

可能调整渲染层级达到调整显示次序的效果。

按照上面的步骤，就可以很快的做出UI了。

做完后，就需要导出UI了，Cocos2d-x是不能直接使用UI工程的，需要使用导出的。

在导出资源这块，要注意一下，使用大图，会把用到的资源拼成一个大图，可以提高效率。使用小图，则把资源的图原样复制过去。这个看你的取舍了。

导出完成后，把导出的目录复制到cocos2dx工程的Resource这个目录下面，就可以在项目中使用了。

最后在需要使用这个UI的场景，增加下面代码：

gui::TouchGroup* ul = gui::TouchGroup::create()

ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("NewUi_1/NewUi_1.ExportJson"))

this->addChild(ul, 2)

如果要访问这个资源，就可以通过tag来 *** 作。 ul->getWidgetByTag(42)。注意不是ui->getChildByTag(42)，这个不会遍历所有的子节点！这样就完成一个完全的UI *** 作！

1.)在资源管理器中点击选中assets目录，确保我们的场景会被创建在这个目录下

2.)点击资源管理器左上角的加号按钮，在d出的菜单中选择 Scene

3.)创建了一个名叫 New Scene 的场景文件，右键点击它并选择 重命名 ，将它改名为 game 。

4.)双击 game ，就会在 场景编辑器 和 层级编辑器 中打开这个场景。

1.首先在 资源管理器 里按照 assets/textures/background 的路径找到我们的背景图像资源，点击并拖拽这个资源到 层级编辑器 中的 Canvas 节点上，直到 Canvas 节点显示橙色高亮，表示将会添加一个以 background 为贴图资源的子节点。

2.这时就可以松开鼠标按键，可以看到Canvas下面添加了一个名叫background的节点。当我们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。

3.在 场景编辑器 中，可以看到我们刚刚添加的背景图像，下面我们将修改背景图像的尺寸，来让他覆盖整个屏幕。

4.首先选中 background 节点，然后点击主窗口左上角工具栏第四个 矩形变换工具 ：

5.使用这个工具我们可以方便的修改图像节点的尺寸，将鼠标移动到 场景编辑器 中 background 的左边，按住并向左拖拽直到 background 的左边超出表示设计分辨率的蓝色线框。然后再用同样的方法将 background 的右边向右拖拽。

之后需要拖拽上下两边，使背景图的大小能够填满设计分辨率的线框。

1.从 资源管理器 拖拽assets/texture/PurpleMonster到 层级管理器 中 Canvas 的下面，并确保他的排序在 ground 之下，这样我们的主角会显示在最前面。 注意小怪兽节点应该是 Canvas 的子节点，和 ground 节点平行。

2.为了让主角的光环在场景节点中非常醒目，我们右键点击刚刚添加的PurpleMonster节点，选择重命名之后将其改名为Player。

对于需要重复生成的节点，我们可以将他保存成 Prefab（预制） 资源，作为我们动态生成节点时使用的模板

1.)首先从 资源管理器 中拖拽 assets/textures/star 图片到场景中，位置随意，我们只是需要借助场景作为我们制作 Prefab 的工作台，制作完成后会我们把这个节点从场景中删除。

2.)我们不需要修改星星的位置或渲染属性，但要让星星能够被主角碰触后消失，我们需要为星星也添加一个专门的组件。按照和添加 Player 脚本相同的方法，添加名叫 Star 的 JavaScript 脚本到 assets/scripts/ 中。

3.)保存脚本后，将这个脚本添加到刚创建的 star 节点上。然后在 属性检查器 中把 Pick Radius 属性值设为 60：

4.)Star Prefab 需要的设置就完成了，现在从 层级管理器 中将 star 节点拖拽到 资源管理器 中的 assets 文件夹下，就生成了名叫 star 的 Prefab 资源。

层级管理器的节点->属性检查器:

在使用时，首先创建一个事件监听器，事件监听器包含以下几种：

触摸事件 (cc.EventListenerTouch)

键盘响应事件 (cc.EventListenerKeyboard)

加速记录事件 (cc.EventListenerAcceleration)

鼠标响应事件 (cc.EventListenerMouse)

自定义事件 (cc.EventListenerCustom)

以上事件监听器统一由 cc.eventManager 来进行管理, 它是一个单例对象。它的工作需要三部分组成：

事件管理器 cc.eventManager

事件类型 cc.EventTouch, cc.EventKeyboard 等

事件监听器 cc.EventListenerTouch, cc.EventListenerKeyboard 等

监听器实现了各种触发后的逻辑，在适当时候由 事件管理器分发事件类型，然后调用相应类型的监听器。

使用方法

现在将要实现在一个界面中添加三个按钮，三个按钮将会互相遮挡，并且能够触发触摸事件，以下是具体实现

首先创建三个精灵，作为三个按钮的显示图片

var sprite1 = cc.Sprite.create("Images/CyanSquare.png")

sprite1.x = size.width/2 - 80

sprite1.y = size.height/2 + 80

this.addChild(sprite1, 10)

var sprite2 = cc.Sprite.create("Images/MagentaSquare.png")

sprite2.x = size.width/2

sprite2.y = size.height/2

this.addChild(sprite2, 20)

var sprite3 = cc.Sprite.create("Images/YellowSquare.png")

sprite3.x = 0

sprite3.y = 0

sprite2.addChild(sprite3, 1)

---