首先声明五子棋游戏非原创（文中有原文链接）。
4. 整理下知识点
没有写完，后面再补充吧
4.1 场景切换：
creator是由一个一个的游戏场景组成，通过代码逻辑来控制场景跳转
creator场景是一个树形结构：父节点, 孩子节点
cc.Node就是场景树中的节点对象
五子棋游戏的分为两个场景
- Menu场景（导入背景图片，添加button节点、删除label、调成透明）
- Game场景（添加棋盘节点，把锚点设为“0, 0”）
- 图片的位置，在cocos2d中图片的位置由两个维度决定：
- 一个是位置 position
- 一个是锚点 anchor point
把position设置成(x,y)时，画到屏幕上需要知道：到底图片上的哪个点放在屏幕的（x,y）上，而anchor point就是这个放置的点。
- 继续说锚点 anchor point，取值范围[0,1]，对应图片比率。
- 默认情况，值为(0.5, 0.5)，在图片的中心位置。
- （0，0），以图片左下角作为起始点。
- 锚点可以超过图片边界，（-1,-1）,表示从超出图片左下角一个宽和一个高的地方放置到屏幕的（0,0）位置
（假设actualPosition.x，actualPosition.y是真实图片位置的中点）:
actualPosition.x = position.x + width*(0.5 - anchor_point.x)
acturalPosition.y = position.y + height*(0.5 - anchor_point.y)
actualPosition 是sprite实际上在屏幕显示的位置
image.png
- 编辑脚本：双击脚本文件，可以打开代码编辑器。但内置的代码编辑器功能并不完善，只适合快速浏览和做少量编辑。摘自[配置代码编辑环境](https://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html)。所以建议安装使用vscode，可以参考前面链接内文档。安装后，在cocos中安装vscode插件，会提示“VS Code extension installed to /Users/pcname/.vscode/extensions”
- 添加 VS Code 编译任务：Compiling task has been added to .vscode/tasks.json, please run "compile" task in VS Code to trigger compile in Cocos Creator.
4.2 按钮事件监听：
脚本成为组件，节点关联方法
新建脚本Menu.js, 添加开始游戏方法。
将其添加为Menu场景的Canvas的组件（添加组件->脚本组件->menu）。
并在BtnP2C节点上添加按钮监听响应。(这个操作有困难，或者看我录制的视频，或者看这个链接“# cocos creator绑定按钮事件”)
4.3 预制资源：
预制资源是存放在资源中，并不是节点中
先描述预制资源是啥吧。
预制资源可以看成是一个类、一个模板、或一个自制的控件，主要就是为了重用。常见的背包界面和战绩界面，会有很多条，这时就很好用了。还有不同场景使用的同一个界面提示弹框。也可以看这个链接“ 话说，预制资源有什么好处？”
预制资源的使用场景看下图，图片来源PREFAB讲解&CC项目如何多开与分享
image.png
这里要把一个五子棋黑子、白子做成预制资源。
- sprite、spriteframe、图片的关系
如果说场景、层起容器的作用，那么精灵（sprite）就是容器中盛放的内容、图像的载体。精灵总绑定一个纹理对象（Texture2D）或者精灵桢对象（SpriteFrame）。引擎渲染精灵实际上就是把精灵绑定的纹理或者精灵桢按照属性设定渲染到屏幕上。
image.png
网友评论