这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战
要求：在 cocos creator 中添加 sprite，绑定脚本，监听方向键控制 sprite 移动，构建生成 web 产物。
CocosCreator版本：2.4.0
CocosCreator新手上路： docs.cocos.com/creator/man…
1. 创建项目&搭建场景
打开Cocos Dashboard，选择了一个helloworld模板创建。（选择了模板就不用自己搭场景啦）
2. 导入资源&显示资源
准备三张图片资源，这里我用的是pixi官网的示例资源，一个人explorer，一个史莱姆blob，还有一个背景场景。（下面是外链）
直接把图片资源拖拽到窗口左下角资源管理器中的Texture中。
依照helloworld的模板，把原本的cocos图标还有文字label从左上角的层级管理器删掉，然后放上自己的资源，比如下面的背景显示：
- 从左下角的资源管理器拖拽到左上角的层级管理器的canvas层级下面。
- 调整好位置，在右侧属性检查器设置size中的x，y调整宽高，覆盖camera的全部范围。
同样的流程，拖上主角还有史莱姆怪物。拖完了之后点击上方的游戏预览：
弹出一个浏览器窗口，可以看到当前的静态效果：
3. 脚本挂载
- 新建脚本（JavaScript文件）
BlobAction：在左下角资源管理器的Script文件夹下创建。
此时右侧会显示初始化好的模板代码：（啥都没有）
编辑脚本如下：
cc.Class({
extends: cc.Component,
//属性
properties: {
speed: {
default: 1, // The default value will be used only when the component attaching
},
direction:1,
timer:0,
},
start () {
},
update (dt) {
if (this.timer<100){//每100帧换方向移动
this.node.x += this.speed * this.direction;
this.timer++;
}else{
this.timer -= 100;
this.direction = 0 - this.direction;
}
},
选择Canvas下的blob，在右下角添加脚本即可：
同理，编辑一下主角的左右移动ExplorerAction：我们可以通过编辑回调函数，然后利用cc.systemEvent来监听键盘事件onKeyDown,onKeyUp函数。从而实现键盘控制人物移动。
cc.Class({
extends: cc.Component,
properties: {
xSpeed:0,
accel:500,
maxMoveSpeed:1000,
},
// LIFE-CYCLE CALLBACKS:
onKeyDown (event) {
// set a flag when key pressed
switch(event.keyCode) {
case cc.macro.KEY.a:
this.accLeft = true;
break;
case cc.macro.KEY.d:
this.accRight = true;
break;
}
},
onKeyUp (event) {
// unset a flag when key released
switch(event.keyCode) {
case cc.macro.KEY.a:
this.accLeft = false;
break;
case cc.macro.KEY.d:
this.accRight = false;
break;
}
},
onLoad () {
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
start () {
},
update: function (dt) {
// 根据当前加速度方向每帧更新速度
if (this.accLeft) {
this.xSpeed -= this.accel * dt;
}
else if (this.accRight) {
this.xSpeed += this.accel * dt;
}
// 限制主角的速度不能超过最大值
if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
// if speed reach limit, use max speed with current direction
this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
}
// 根据当前速度更新主角的位置
this.node.x += this.xSpeed * dt;
},
});
4. 运行调试：
挂载脚本结束后，就可以运行调试了，这时候的精灵都会移动了~
5. 构建Web发布
打开主菜单的 项目 -> 构建发布，打开 构建发布 面板。
打开后发布窗口如下:
点击构建后，看上方的idel文字是否变成cut-engine，如果没有变化需要检查一下自己的项目有没有错误，保存。如果有的话，耐心等待一下就有进度条显示了。最后生成的build文件夹如下：
至此完成了一次简单的Web产物构建。
