Cocos creator实现套牛小游戏资源及代码
Cocos creator小游戏实现套牛小游戏资源及代码
最近在学习Cocos Creator,作为新手,刚刚开始学习Cocos Creator,上线了两个微信小游戏,刚刚入门,这里记录一下小绳套牛实现及上线过程的过程。
一 安装CocosDashBoard
这里就不介绍如何安装了
本案例使用的是编译器版本为2.4.10
二 新建2D项目RunCow
1、管理项目目录
在资源管理器中新建文件夹
- anim 动画
- preb 预制体
- res 图片、语音资源
- scene 场景
- scripts 脚本资源
将资源文件拖到res目录下
2、搭建界面
该案例中的场景界面为主界面main_scene、游戏界面game_scene.fire、关卡界面
在入口主界面中有进入游戏,绑定Touch时间,点击进入加载game场景
代码如下:
// start动画
btnStartAnimated() {
this.btnStart.node.scale = 1.0;
this.btnStart.node.runAction(cc.repeatForever(cc.sequence(
cc.scaleTo(0.6, 1.2),
cc.scaleTo(0.6, 1.0)
)));
}
btnStartPlay() {
this.selectLevel();
this.loadingBar.node.active = true;
this.btnStart.node.active = false;
this.loadingBar.progress = 0;
this.loadingBar.barSprite.fillRange = 0;
cc.loader.onProgress = (count, amount, item) => {
if (this.isFinished == false) {
let progress = Number((count / amount).toFixed(2));
if (progress > this.loadingBar.barSprite.fillRange) {
this.loadingBar.barSprite.fillRange = count / amount;
}
}
};
cc.director.preloadScene("game_scene", function () {
if (this.isFinished == false) {
this.loadingBar.node.active = false;
this.btnStart.node.active = false;
console.log("加载成功");
}
cc.director.loadScene("game_scene");
this.isFinished = true;
}.bind(this));
}
进入游戏主场景game_scene中
绑定节点
创建奔跑的牛,这里用到牛的预制体,设置schedule定时器,创建奔跑的牛
createCow() {
if (!this.checkShouldSchdule()) {
return;
}
if (this.curCowType == 0) {
this.curCowType = 1;
} else if (this.curCowType == 1) {
this.curCowType = 2;
} else if (this.curCowType == 2) {
this.curCowType = 0;
}
let cow = cc.instantiate(this.cowPreb).getComponent(CowRun);
cow.cowType = this.curCowType;
cow.node.setPosition(cc.v2(this.canvasWidth, -60));
this.cowRoot.addChild(cow.node);
}
// 倒计时
beginSchedule() {
this.schedule(this.onCountDown, this.interval);
}
onCountDown() {
if (!this.checkShouldSchdule()) {
return;
}
this.countDuration--;
if (this.countDuration < 0) {
// 游戏结束,弹出游戏结束提示
this.showGameOver();
this.stopSchedule();
this.countDuration = 0;
}
this.countDownLB.string = this.countDuration + "s";
}
stopSchedule() {
this.unschedule(this.onCountDown);
this.unschedule(this.createCow);
}
奔跑的牛使用的是动画编辑器来设置的动画,通过不同类型的牛来播放不动的奔跑动画
RunCow.ts
代码如下
playAnim() {
let anim = this.getComponent(cc.Animation);
if (this.cowType == 0) {
let animState = anim.play('cow1');
animState.speed = 2;
} else if (this.cowType == 1) {
let animState = anim.play('cow2');
animState.speed = 2;
} else {
let animState = anim.play('cow3');
animState.speed = 2;
}
}
update (dt) {
this.node.x -= this.speed*dt;
if (this.node.x < -this.canvasWidth) {
this.node.removeFromParent();
}
}
当牛奔跑超出左侧界面外,则将移出该节点this.node.removeFromParent
套绳的动画
套牛的绳子有不同的类型,默认抛出绳子后拉回套中的牛
这里执行this.cowRope.runAction一连串动作
代码如下
// 套牛的动作
throwCow() {
if (!this.checkShouldSchdule()) {
return;
}
if (this.isThrowing) {
return;
}
this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[0];
this.isThrowing = true;
// 默认在屏幕外
this.cowRope.y = - this.canvasHeight;
// 移出去
let mTop = cc.moveTo(0.45, cc.v2(0, 68 - this.cowRope.height / 2));
// 套住牛
let mFun = cc.callFunc(function () {
// 判断是否套住了牛
let cowRun = this.checkTakeCow();
if (cowRun) {
let cowType = cowRun.getComponent('CowRun').cowType;
// 由于动作
let ropeType = this.getRopeType(cowType);
console.log("cowType:" + cowType + ",ropeType:" + ropeType);
// 更换绳子样式
this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[ropeType];
cowRun.active = false;
cowRun.removeFromParent();
// 更新分数
this.score++;
// 播放声音
this.playCowSound();
}
}.bind(this));
// 拖回
let md = cc.moveTo(0.85, cc.v2(0, -this.canvasHeight));
// 动作结束
let finish = cc.callFunc(function () {
this.isThrowing = false;
let showScore = this.score + "/" + this.currentLevelInfo['cow'];
this.starCollector.updateScore(showScore);
let needCow = this.currentLevelInfo['cow'];
console.log("this.score:" + this.score + "--needCow:" + needCow);
if (this.score >= needCow) {
// 通关
this.winCurLevel();
}
}.bind(this));
let seq = cc.sequence([mTop, mFun, md, finish]);
this.cowRope.runAction(seq);
}
下面判断套中牛儿判断,当牛头移动到中间位置
// 检测是否套住了牛
checkTakeCow() {
for (let index = 0; index < this.cowRoot.childrenCount; index++) {
let cowRun = this.cowRoot.children[index];
if (cowRun.active == true && (cowRun.x >= 50 && cowRun.x <= 160)) {
return cowRun;
}
}
return null;
}
套中牛儿之后,根据套中的不同的牛更换拉回的绳子的样式
// 更换绳子样式
this.cowRope.getComponent(cc.Sprite).spriteFrame = this.ropeImgs[ropeType];
至此主要代码差不多这些,套牛的逻辑比较简单。稍后贴出资源及代码地址。
三 上线微信小游戏
在https://mp.weixin.qq.com 创建账号并登录,这里注意选择小程序的账号哦,需要绑定微信。
登录之后,在小游戏基本设置,设置一下内容
1、上线微信小游戏
小程序名称
小程序简称
小程序头像
小程序服务类目
在游戏设置中需要设置 上传小游戏自审自查文档照片,签字,日期,按手印哦。
2、Cocos Creator代码打包上传
在Cocos Creator的菜单的项目中,构建发布
选择发布平台,微信小游戏
根据游戏的横竖屏设置方向
设置appid(来自微信小程序后台)
最后点击构建,点击构建成功后。使用微信开发工具导入编译build后的项目。在微信开发工具中预览可以手机扫码看到游戏的开发版本。
上传游戏、提交版本及更新内容,上传成功后可以在微信小程序后台的版本管理中看到上传新版本。点击提交审核即可。
3、上线微信小游戏出现问题
上线微信小游戏经常出现“小游戏需具有完整的游戏玩法、不能为简单的素材堆砌”
根据这个问题,在案例中新增了关卡、游戏玩法介绍后重新发布新的版本,继续等待审核即可。暂时这么审核通过了。
学习记录,每天不停进步。
代码和资源
https://gitee.com/baibaime/class_cow.git