cocos creator入门（cocoscreator输入框边距）

本文目录

• cocoscreator输入框边距
• cocoscreator精通要多久
• cocos creator 常驻节点，以及小知识
• CocosCreator 简单使用tiledmap
• CocosCreator-基本使用
• Cocos Creator粒子系统简单操作
• CocosCreator初体验
• 想学cocoscreator，请教学习路线，先要学cocos2d-js吗
• cocos creator制作一个简单的拼图游戏

cocoscreator输入框边距

您要问的是cocoscreator怎么输入框边距。
1、首先，在cocoscreator中设置框边距：在“上”、“下”、“左”和“右”框中输入所需的框边距大小。
2、其次，设置页眉或页脚的框边距。
3、最后，在cocoscreator框中输入新的框边距数值即可。

cocoscreator精通要多久

三个月。精通cocoscreator需要三个月的时间，cocoscreator主要是编程语言和仪表盘掌握，对于零基础的学者，需要花费一个月的时间来掌握编程语言，之后再多加练习和运用，就能够编写出软件应用，熟练精通了。在cocoscreator开始学习时需要学习JS、组件语法、控制代码等，学习的内容多，需要时间来掌握。

cocos creator 常驻节点，以及小知识

在 A 场景下的 game-manager 节点上的任意脚本里，写入：

这样，你的 game-manager 节点，就不会在切换场景的时候销毁了

是在新场景的最底部（也就是所有图片的最顶层，除了一个系统节点外）
也就是说，我们不需要考虑 toast-manager 的图层会被新场景的元素覆盖的问题

CocosCreator 简单使用tiledmap

因为引擎对tiledmap支持的非常差劲,所以能不用tiledmap就不要用了

我使用的是2.4.5-2.4.6版本的CCC 在此版本下手动更改tsx文件里的图片路径会让引擎报gid的错误
所以最好在地图的时候,就把图片和地图的相对路径给配置好,这样导入到CCC里后不会出现找不到图片

tiledmap在CCC中为cc.TiledMap组件

加载的资源格式为cc.TiledMapAsset

在tiledmap里已经配置好了层级,简单拿board举例

在tiledmap的图集资源中,每个图片对应着一个编号,但是注意,在用gid找寻图片资源时,记住gid要减去1
在tmx文件中,gid为0时,表示该网格内无图片,但是在图集中,图片的编号是以0开始

在cc.TiledLayer组件中,提供了addUserNode这个api
在2.4.6版本上,每创建一个网格大小的节点,挂载上刚体后,使用adduserNode都会额外增加drawCall 1点.
创建100个节点就增加100, 所以使用node.parent = triLayer.node
(如果是创建的碰撞体,请先设置好position,再将节点添加到父节点下)

使用setTiledGIDAt api,将gid设置成0即可

CocosCreator-基本使用

1.)在资源管理器中点击选中assets目录，确保我们的场景会被创建在这个目录下
2.)点击资源管理器左上角的加号按钮，在弹出的菜单中选择 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 资源。

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

Cocos Creator粒子系统简单操作

有的时候，我们需要在游戏里面实现大量的特效，比如一些爆炸效果，子弹射击，以及天气效果，这个时候就可以用到粒子系统。粒子系统是模拟自然界的而一些粒子的物理运动效果，单个粒子是无法体现粒子 的效果的，需要大量的粒子配合，粒子不断的消失，不断的生成，就会出现相应的效果。

粒子系统可通过 Particle Designer 软件进行制作，也可以通过网页在线制作工具制作。

将制作好的.plist文件导入到Cocos中，将其拖拽到场景中

在属性检查器中可勾选Custom，对粒子的属性进行更改

直接将type定义为粒子系统

将粒子资源拖拽到particle接口中

particle的type为cc.ParticleSystem，所以可以直接对其进行操作，方法如下

更多的方法请参考CocosCreator API文档。

将particle定义为节点

此处particle定义的type为cc.Node，则需要获取particle上的cc.ParticleSystem组件。

之后就可以对CustomParticle进行操作了

***隐藏网址***
***隐藏网址***
***隐藏网址***

CocosCreator初体验

机缘巧合，最近接到关于游戏的需求，前后调研了一下Unity3D和CocosCreator，但是考虑到是作为项目的一部分而使用，并且局限于Unity3D的使用条款，为了避免法律问题，最后选择的是使用CocosCreator来实现。第一次接触Unity3D和CocosCreator这类的游戏引擎，大约用了一个月的时间，从学习到项目大部分完成，之后要打包成静态库供其他客户端的同事们使用。学习途径主要是CocosCreator官网文档和官方Demo（看中文的文档就是爽！！！）。本片文章的目的主要是记录一下过程中遇到的问题及解决方案，并不是完整的教程。

本次要做的是一个最简单的跑酷类游戏，无需使用Tiled（地图器），spine（骨骼动画器）。也是做了这个小游戏才发现游戏其实已经发展的很成熟了。
我们可以看到，元素很简单，背景主要有远景、中景，通过设置不同的速度来实现现实中跑动的效果。主要的逻辑实现部分是在前景的任务和障碍物。由于没有使用物理引擎，所以是直接使用CocosCreator的碰撞检测实现的。主人公可以跳跃越过障碍物，撞开障碍物，收集金币。按住屏幕，hero跳起，按的时间长一些，主人公的跳跃也会高一些，自然一些的话还是需要简单的物理公式的。正常情况下hero是在x轴上是没有速度的，一种情况是当障碍物挡住hero时会有一个和障碍物同样的速度模拟阻挡的效果，还有一种情况是阻挡产生之后hero产生了位置上的移动，需要一个速度回到原位置。由于CocosCreator提供了碰撞检测之后的回调函数，所以我们可以很轻松的在回调中做一些相关操作，比如让碰到的金币消失之类的。

有位同事做过cocos2d-x的开发，使用的c++，向他请教了一些基础了知识，但是细节上跟cocosCreator相差恨远，因为cocosCreator是用cocos2d-js框架并配合可视化的器来实现的。由于是先调研的Unity3D，对这种脚本的方式还是比较能够接受的。其核心思想是在组件，在器中制作精灵和动画，然后通过脚本组件来控制其逻辑实现，各种功能都组件化，当我们需要给精灵添加一个功能的时候，就是向其添加一个组件。在这个小游戏的制作过程中用的组件的数量也是有限的，主要是使用了：

器给我们提供了方便的拖拽界面，直接将我们需要使用的图片导入，就会自动生成精灵文件（但是用过Unity3D之后，还是感觉Unity3D的功能集成度更高一些，而且还可以做3D）。

在编写脚本的时候也是不能脱离器的，在编写脚本的时候着实是让我这个ios程序员有点摸不到头脑了，JS的使用方式有点让我不太适应，没有了xcode的提示功能，写起来还是有些费劲的。JS也是边学边写，不过得益于官方的Demo几乎把所有组件都写了一遍，所以就照着葫芦画瓢。写的时候就发现，其实引擎并没有帮我们做很多的工作（Unity3D可以直接在器里设置物理属性，不过听说下个版本的CocosCreator也会有）。在编写脚本的过程中，最复杂的就是hero脚本的编写，需要检测碰撞和处理hero跳跃过程中的不同状态。碰撞检测的话需要自己计算碰撞发生的位置，当做矩形碰撞器来处理的，只计算x轴和y轴的碰撞。x轴发生碰撞的话，hero有一个和障碍物一样的速度，y轴碰撞一直持续的话就是调整hero的y轴的位置，让其在障碍物的顶部。跳跃的过程中完成动画的切换。

与CocosCreator器不同的是，这个器是我写的一个生成障碍物的一个app，可以方便让产品配置障碍物的位置。主要的实现思路是使用UICollectionView，界面非常的简单,主要是配合CocosCreator脚本的实现，需要将颗粒状的障碍物连成一个长的条状，所以需要将界上的障碍物颗粒结构化一下，取到障碍物的最底部的颗粒的位置，然后连接在一起的高度，这样的话就是对每一列的统一种类的障碍物进行深度优先搜索，记录最低点和搜索过的深度，这样的生成的JSON文件在CoCosCreator脚本里就可以直接使用了。

想学cocoscreator，请教学习路线，先要学cocos2d-js吗

不用学习cocos2d-js，直接学习creator的开发模式就可以了，因为现在官方主推也是creator，但是前提是需要会js。
js基础会了以后，然后看官方文档知道ide如何使用、编写脚本，后面就是看官方demo熟悉api，自己根据想做的游戏尝试做一些demo了。

cocos creator制作一个简单的拼图游戏

简介使用cocos creator2.x版本制作的拼图游戏, 移动图块, 还原最终的样子

开始, 我们分析一下这个游戏的几个要点 1, 是如何将一张完整的图片分成3*3 5*5个小图, 并且这些小图要可以保存自己的位置信息, 等一些属性 2, 是如何表示小图合集的位置, 用什么数据结构保存, 且怎么让图片逻辑, 与数据逻辑对应 3, 是如何判断游戏结束 

上图是游戏的场景结构, 可以看到2.x版本和1.x版本有一些区别, 最突出的就是新增了一个默认的carmera结点 这个我会在别的帖子内仔细介绍, 这里不再多说 

首先我们解决第一个问题, 如何将一个大图切成一个个小图, 并让这个小图保存一些属性值, 我们先新建一个脚本, puzzlePiece.ts, 

const{ ccclass, property } = cc._decorator;

@ccclass

exportclassPieceextendscc.Component{

@property({

type: cc.Texture2D

})

privatetexture: cc.Texture2D =null;

publicoriCol: number;

publicoriRow: number;

publiccurCol: number;

publiccurRow: number;

publicisBlank:boolean;

publicgetisRight(){

returnthis.curCol ===this.oriCol &&this.curRow ===this.oriRow;

}

publicinit(col: number, row: number, colNum: number, colWidth: number){

this.oriCol = col;

this.oriRow = row;

this.curCol = col;

this.curRow = row;

let sprite =this.node.addComponent(cc.Sprite);

// 升级2.0后setRect失效

// sprite.spriteFrame = new cc.SpriteFrame(this.texture);

// let rect = sprite.spriteFrame.getRect();

let rect = cc.rect(0,0,this.texture.width,this.texture.height);

let newRectWidth = rect.width / colNum;

let newRectHeight = rect.height / colNum;

let newRectX = col * newRectWidth;

let newRectY = (colNum - row -1) * newRectHeight;

let newRect = cc.rect(newRectX, newRectY, newRectWidth, newRectHeight);

// sprite.spriteFrame.setRect(newRect);

sprite.spriteFrame =newcc.SpriteFrame(this.texture, newRect);

this.node.width = colWidth;

this.node.height = colWidth;

this.isBlank =this.oriCol === colNum -1&&this.oriRow ===0;

if(this.isBlank) {

this.node.active =false;

}

}

}

将小图看做一个类, 使用texture保存图片纹理,在通过new cc.SpriteFrame(this.texture, newRect);获取某一个矩形区域内的纹理, 这样就可以把一张大图切成一张张小图, 并添加几个属性, 保存位置和其他的信息 

那么开始解决第二个问题, 我们可以采取二维数组的数据结构保存数据信息private pieceMap: Array; 讲一个个切好的小图保存在内, 然后随机移动(为了保证图片可以还原, 我采取的方法是将一个正确摆放好的小图数组, 按照游戏规定的移动方式随机移动1000次), 这样图片一定可以被还原

import{ Piece } from"./PuzzlePiece";

import{ PuzzleScene } from"./PuzzleScene";

const{ ccclass, property, executeInEditMode } = cc._decorator;

@ccclass

// @executeInEditMode

exportclassPuzzleBoardextendscc.Component{

@property(cc.Prefab)

privatepiecePrefab: cc.Prefab =null;

@property(cc.Integer)

privatecolNum: number =5;

@property(cc.Integer)

privatecolSpace: number =5;

privatecolWidth: number =0;

privatepieceMap: Array;

privateblankPiece: Piece =null;

privatepuzzleScene: PuzzleScene =null;

init(puzzleScene: PuzzleScene) {

this.puzzleScene = puzzleScene;

this.addListeners();

}

publicreset(colNum?: number){

this.colNum = colNum;

this.colWidth = (this.node.width -this.colSpace * (this.colNum +1)) /this.colNum;

this.node.removeAllChildren();

this.pieceMap = ;

for(let x =0; x

this.pieceMap;

for(let y =0; y

let pieceNode = cc.instantiate(this.piecePrefab);

this.node.addChild(pieceNode);

pieceNode.x = x * (this.colWidth +this.colSpace) +this.colSpace;

pieceNode.y = y * (this.colWidth +this.colSpace) +this.colSpace;

this.pieceMap = pieceNode.getComponent(Piece);

this.pieceMap.init(x, y,this.colNum,this.colWidth);

if(this.pieceMap.isBlank) {

this.blankPiece =this.pieceMap;

}

}

}

this.shuffle();

}

privateshuffle(){

for(let i =0; i 《1000; i++) {

let nearPieces =this.getNearPieces(this.blankPiece);

let n = Math.floor(Math.random() * nearPieces.length);

this.exchangeTwoPiece(this.blankPiece, nearPieces);

}

}

privateonBoadTouch(event: cc.Event.EventTouch){

let worldPos = event.getLocation();

let localPos =this.node.convertToNodeSpaceAR(worldPos);

let x = Math.floor((localPos.x -this.colSpace) / (this.colWidth +this.colSpace));

let y = Math.floor((localPos.y -this.colSpace) / (this.colWidth +this.colSpace));

this.puzzleScene.onBoardTouch(x, y);

}

publicmovePiece(x, y):boolean{

let piece =this.pieceMap;

let nearPieces =this.getNearPieces(piece);

for(let nearPiece of nearPieces) {

if(nearPiece.isBlank) {

this.exchangeTwoPiece(piece, nearPiece);

returntrue;

}

}

returnfalse;

}

publicjudgeWin():boolean{

for(let x =0; x

for(let y =0; y

if(!this.pieceMap.isRight) {

returnfalse;

}

}

}

this.blankPiece.node.active =true;

returntrue;

}

privategetNearPieces(piece: Piece): Array {

let nearPieces = ;

if(piece.curCol 》0) {// left

nearPieces.push(this.pieceMap);

}

if(piece.curCol

nearPieces.push(this.pieceMap);

}

if(piece.curRow 》0) {// bottom

nearPieces.push(this.pieceMap);

}

if(piece.curRow

nearPieces.push(this.pieceMap);

}

returnnearPieces;

}

publicexchangeTwoPiece(piece1: Piece, piece2: Piece){

this.pieceMap = piece1;

this.pieceMap = piece2;

;

;

;

}

privateaddListeners(){

this.node.on(cc.Node.EventType.TOUCH_END,this.onBoadTouch,this);

}

privateremoveListeners(){

}

}

解决第三个问题, 其实这个很简单, 因为我们已经在小图类中保存了小图本身的位置信息, 我们只需要,每次移动图片 都遍历一个二维数组判断其是否在正确的位置, 判断成功, 结束游戏  点击链接加入群聊【cocos/unity交流群】

声明 ：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢