CocosCreator背景图循环播放
时间:2020-04-25
本文章向大家介绍CocosCreator背景图循环播放,主要包括CocosCreator背景图循环播放使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以前在玩小游戏的时候发现有的小游戏背景图一直再动,视觉效果挺好,给人一种炫炫的感觉,让我这写后台的码农很是羡慕和膜拜。没想到天意弄人,我也开始写游戏前端了刚接触CocosCreator,好多东西都不懂,整个懵逼状态,然后只能硬着头皮上来写,其实写代码思路还是有的,就是api和工具用起来有点陌生。这不,下午有个前端大佬让我弄个游戏背景图循环播放功能,说是游戏里会用到,然后就撸起袖子开干了。
大致思路:
1. 既然是至少轮播得有两张图吧
2. 轮播是肯定是要修改坐标的,横播就是改X坐标,竖播就是改y坐标
3. 循环播就是一张播放完毕,得重新修改它的坐标等待下次播放
算了,直接点还是直接来代码吧。
- 在资源管理器新建一个TypeScript文件,重命名为Game,然后把Game文件拖到层级管理器的Cavas下面。Game内容如下:
const {ccclass, property} = cc._decorator;
@ccclass
export default class Game extends cc.Component {
@property({displayName: '播放速度'})
speed: number = 0; // 移动时控制速度的变量
@property({displayName: '播放方向0横1竖'})
orient: number = 0;// 0横 1竖
@property( {displayName: '背景图', type: cc.Node})
bgArr: cc.Node[] = []; // 用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量
curBg: cc.Node = null;// 当前播放背景
nextBg: cc.Node = null;// 即将播放背景
curIndex: number = 0;// 当前播放背景索引
xy:string = 'x';// x | y
wh:string = 'w';// 宽高
// 是否可以播放
move:boolean = true;
start () {
if (this.bgArr.length == 0) {
this.move = false;
return;
}
// 如果只有一张背景图,则克隆一个
if (this.bgArr.length == 1) {
this.bgArr[1] = cc.instantiate(this.bgArr[0]);
this.bgArr[0].parent.addChild(this.bgArr[1]);
}
this.xy = this.orient == 0 ? 'x' : 'y';
this.wh = this.orient == 0 ? 'width' : 'height';
this.curBg = this.bgArr[this.curIndex];
this.nextBg = this.bgArr[this.curIndex + 1];
// 设置背景图坐标
this.setBgPosition();
}
/**
* 设置背景图坐标
*/
setBgPosition () {
this.bgArr[this.curIndex][this.xy] = 0;
this.bgArr[this.curIndex + 1][this.xy] = - (this.curBg[this.wh] / 2 + this.nextBg[this.wh] / 2);
}
update (dt) {
this.bgMove();
}
/**
*
* @param bgList
* @param speed 速度
*/
bgMove() {
if (this.move) {
this.curBg[this.xy] += this.speed;
this.nextBg[this.xy] += this.speed;
// 当前背景图已播放完
if(this.curBg[this.xy] >= this.curBg[this.wh]) {
this.curBg = this.nextBg;
this.nextBg = this.bgArr[this.curIndex ++ % this.bgArr.length];
this.nextBg[this.xy] = this.curBg[this.xy] - this.curBg[this.wh] / 2 - this.nextBg[this.wh] / 2;
}
}
}
}
-
把要播放的背景图拖入层级管理器的Cavas下面,坐标设置如下图
-
给Game脚本属性赋值(把背景图拖入进来),如图
以上就是CocosCreator实现轮播图的一个思路。代码获取
原文地址:https://www.cnblogs.com/rookie-test/p/12774188.html
- 写一只具有识别能力的图片爬虫
- 【今日问题】变量未初始化引起的崩溃
- 前端特效开发 | 点击查看大图相册效果
- 开发 | 星际争霸2人工智能研究环境 SC2LE 初体验
- 开发 | 我做了12万条的影评分析,告诉你《战狼Ⅱ》都在说些啥
- JavaScript | 函数定义的两种方法;预编译与执行
- jQuery特效 | 导航底部横线跟随鼠标缓动
- JavaScript | 选中并获取多行文本框内容的效果
- JavaScript | 动画显示比例的投票效果
- 原生JS | 作用域
- 腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析
- 原生JS | 随机抽取不重复的数组元素 —— 有没有更好的方法?
- 原生JS | 逻辑操作符的短路问题
- 数字识别,从KNN,LR,SVM,RF到深度学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux系统中 /etc/fstab 文件的深入解读
- bash命令使用详解
- 实例详解Linux 中的命令链接操作符
- Python 为什么不支持 switch 语句?
- centos安装jdk1.8时出现没有/lib/ld-linux.so.2:这个文件的原因分析
- Linux多线程编程快速入门
- Linux添加swap分区的方法
- linux下vsftpd的安装及配置使用详细步骤(推荐)
- Linux分区格式化的命令
- Linux调试工具GDB使用简易教程
- Linux 挂载分区的方法
- 使用Python生成Shell命令,批量执行程序代码解析
- 基于Ubuntu 18.04配置固定IP的方法教程
- 详细解读linux下swap分区的作用
- Linux下将源文件编译成目标文件的过程解析