CocosCreator-基本使用

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 资源。

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

CocosCreatorDrawing

Cocos Creator完成的一个画板

GitHub - Juefeiye/CocosCreatorDrawing: CocosCreator画板  喜欢就star吧！！！

画板最终实现效果

在cocos论坛里面很多关于画板橡皮擦的问题,特别是有背景的橡皮擦问题，都没有什么好的解决方案。 

找了很多资料和自己的摸索之后，最后有了这么一个带有完整功能的画板，下面来一步步看怎么实现的吧。

    这里使用的是RenderTexture来解决

    首先创建好renderTexture,加入到node中来，因为renderTexture是cc的组件，所以我们只能用_sgnode来添加

    接着我们在touch事件中去实现绘画功能，这里我使用的是drawNode方式，官方提供的Graphics还未找到橡皮擦方法让戚派。

    这个时候基本的绘画功能就实现了                                   

    这个是本次的重点。这个橡皮擦也是搞得我头破血流的。

    其实如果没坦贺有背景，直接改成背景色线条就可以当橡皮擦用了，主要是需求要在有背景的情况下可以擦除，那么来探索下吧！

    资料翻了不少，只看到H5有canvas的一些接口可以用，可是cocos怎么用到这些接口呢，对应的一些属性怎么取到呢。    

    不经意间我发现了canvas里面的getContext()和一个globalCompositeOperation属性，这个属性好像是解决h5橡皮擦的关键，那么我在cocos里面能找到这个属性是不是就可以解决橡皮擦问题了。

    首先，h5里面是用canvas来绘画的，cocos creator这里用的是renderTexture，那么这2者会不会有什么关联呢。果不其然，我在renderTexture下找到了这2个关键的属性

有了这2个属性之后，我们就可以开始干活了！这里的实现详细可以看 HTML 5 canvas globalCompositeOperation 属性

这里要注意canvas坐标系和cocos的坐标系不一样   

到这里就解决了有背景的橡皮擦问题了，我们直接使用最底层的canvas。橡皮擦效果

其实画板里仔配面还有贴纸功能，还带用动效的贴纸，这个功能如果有需要的话再详细解读

GitHub - Juefeiye/CocosCreatorDrawing: CocosCreator画板  喜欢就star吧！！！

---