【cocos 2d微信小游戏开发教程】基础使用笔记分享（三）

富文本（RichText）

优点：自定义颜色，大小，描边，还能加图片。对于复杂的文本表现力更好。
缺点：cocos的富文本是由Label组件拼装实现的。低版本会打断合批。Label太多导致卡顿。

常用

// 换行符
<br/>
// 加粗
<b> </b>
// 字体颜色
<color=#FFFFFF> </color>
// 描边颜色及宽度
<outline color=#000000 width=2> </outline>
// 图片，Image Atlas需先绑定图集，还可以绑定点击事件
<img src='图片名字' click='点击方法名'/>
// 字体大小
<size=20>字体大小</size>
//斜体
<i>斜体</i>
//下划线
<u>下划线</u>
//点击事件 记得先挂载脚本，test为方法名
<on click="test">点击</on>

遮罩
用例：圆形头像
在父级节点加渲染组建 Mask
适配
加ui组件Widget
存储和读取用户数据

存储数据

cc.sys.localStorage.setItem('gold', 100);

对于复杂的对象数据，我们可以通过将对象序列化为 JSON 后保存：

userData = {name: 'Tracer',level: 1,gold: 100
};cc.sys.localStorage.setItem('userData', JSON.stringify(userData));

读取数据

cc.sys.localStorage.getItem(key)

读取json数据

var userData = JSON.parse(cc.sys.localStorage.getItem('userData'));

清除数据
移除一个数据

cc.sys.localStorage.removeItem('name')

清空数据

cc.sys.localStorage.clear()

对象和json数据存储及处理

const {ccclass, property} = cc._decorator;class Person{id: number;name: string;wugong: string[];
}
@ccclass
export default class Wuli extends cc.Component {start(){let person = new Person();person.id = 10;person.name = '小王';person.wugong = ['降龙十八掌', '独孤九剑'];//对象转jsonlet json = JSON.stringify(person);//存储cc.sys.localStorage.setItem('info', json);//json转对象let person2: Person = Object.assign(new Person(), JSON.parse(json));}
}

网络请求

let url = 'http://xxx.com/api?name=xxx';
//请求
let request = cc.loader.getXMLHttpRequest();
request.open('GET', url, true);//true开启异步请求
request.onreadystatechange = () => {//请求结束后，获取数据if(request.readyState == 4 && request.status == 200){console.debug('请求完成');console.debug(request.responseText);//内容}
}
request.send();//发送请求

用代码自定义一个播放Animation动画播放组件

const {ccclass, property} = cc._decorator;
@ccclass
export default class MyAnimation extends cc.Component {//每秒播放速度@propertyspeed: number = 0.1;//播放帧数组@property([cc.SpriteFrame])sprites: cc.SpriteFrame[] = [];//是否播放动画@propertyisPlay: boolean = false;//当前播放帧index:number = 0;//计时器timer:number = 0;start (){}update (dt){if(this.isPlay){//播放动画//计时器增加this.timer += dt;if(this.timer > this.speed){this.timer =0;//切换帧 012 012 012this.index++;if(this.index >= this.sprites.length){this.index = 0;}//更换帧图片this.getComponent(cc.Sprite).spriteFrame = this.sprites[this.index];}}}//开始play(){this.isPlay = true;}//停止stop(){this.isPlay = false;}
}

调用

import MyAnimation from "./MyAnimation";const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {start () {this.getComponent(MyAnimation).play();}
}

自定义封装一个玩家控制器

const {ccclass, property} = cc._decorator;//写个单例 封装键盘控制玩家移动
export default class Input{private static instance: Input = null;//水平轴horizontal: number = 0;//垂直轴vertical: number = 0;static get Instance(){if(this.instance = null){this.instance = new Input();}return this.instance;}constructor(){//键盘按下cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,(event)=>{if(event.keyCode == cc.macro.KEY.w){this.vertical = 1;} else if(event.keyCode == cc.macro.KEY.s){this.vertical = -1;}if(event.keyCode == cc.macro.KEY.a){this.horizontal = -1;}else if(event.keyCode == cc.macro.KEY.d){this.horizontal = 1;}});//键盘抬起 归0cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,(event)=>{if(event.keyCode == cc.macro.KEY.w){this.vertical = 0;} else if(event.keyCode == cc.macro.KEY.s){this.vertical = 0;}if(event.keyCode == cc.macro.KEY.a){this.horizontal = 0;}else if(event.keyCode == cc.macro.KEY.d){this.horizontal = 0;}});}
}

调用

import Input from "./Input";const {ccclass, property} = cc._decorator;@ccclass
export default class Player extends cc.Component {//速度speed: number = 20;start () {}update (dt) {//移动this.node.x += this.speed * dt * Input.Instance.horizontal;this.node.y += this.speed * dt * Input.Instance.vertical;}
}

摄像头跟随玩家移动

update(dt){//player为玩家 减去的是屏幕一般偏差的距离if(this.player != null){cc.Camera.main.node.x = this.player.x-240;cc.Camera.main.node.y = this.player.y-160;}
}

回调
小鸟预设体绑定脚本

const {ccclass, property} = cc._decorator;@ccclass
export default class Bird extends cc.Component {//游戏结束回调over: Function;//加分回调add: Function;start () {//结束this.over();//加分this.add();}update (dt) {}
}

其他地方使用

import Bird from "./Bird";const {ccclass, property} = cc._decorator;@ccclass
export default class Test extends cc.Component {//绑定小鸟预设体@property(cc.Prefab)birdPre: cc.Prefab;score: number = 0;start () {//创建小鸟let bird = cc.instantiate(this.birdPre);//设置父物体bird.setParent(this.node);//加分回调bird.getComponent(Bird).add = ()=> {this.score += 100;}//游戏结束回调bird.getComponent(Bird).over = ()=> {console.debug('游戏结束');}}update (dt) {}
}

【cocos 2d微信小游戏开发教程】基础使用笔记分享（三）相关推荐

微信小游戏开发教程-2D游戏原理讲解
微信小游戏开发教程-2D游戏原理讲解原理为了更加形象的描述,这里先上一张图: 背景 a. 首先,我们看到背景好像是一张无限长的图片在向下移动.实际则不然,这是一张顶部和底部刚好重叠的图片.这是一种 ...
微信小游戏开发零基础教程（一）-CocosCreator
微信小游戏零基础教程(一)-CocosCreator 最终效果预览准备工作创建工程测试第一个场景最终效果预览本教程最后制作的游戏效果: 准备工作下载微信开发者工具最新版->下载地 ...
微信小游戏开发教程-游戏实现1
微信小游戏开发教程-游戏实现1 概述微信开发者工具官方提供一个飞机大战的游戏Demo,这里我们不再使用这个demo,我们以FlappyBird为例,为了让读者更加容易理解. 源码 https://g ...
微信小游戏开发教程-游戏实现3
微信小游戏开发教程-游戏实现3 对象池由于游戏过程中会创建很多临时对象,这些对象很快又不再使用,垃圾回收器也能帮我们主动回收这部分垃圾,但是回收时间不可控制,同时增大了创建对象的开销,所以我们使用对 ...
微信小游戏开发教程-游戏实现2
微信小游戏开发教程-游戏实现2 绘制地面类似于绘制背景,读者自行完成代码.src/runtime/land.js 简易View系统坐标布局对于复杂的页面来说维护相当困难,因此这里我们引入布局的概念 ...
微信小游戏开发教程-新建项目
微信小游戏开发教程-新建项目 1. 新建小游戏项目我们这回使用空项目,不要勾选使用模板创建. 2. 添加小游戏必要文件项目创建好以后我们发现缺少一些必要的文件,我们手动添加即可: game.jso ...
微信小程序开发教程(基础篇)8-数据绑定下
教程接上篇,当需要展示一组数据时,可以使用wx:for //.wxml <view wx:for="{{array}}">{{index}}: {{item.messa ...
Unity3d C#开发微信小游戏音频/音效播放问题解决过程分享
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前我写了一篇u3 ...
解决cocos creator微信小游戏本地缓存文件超过限制问题
cocos creator微信小游戏开发,如果游戏包内资源超过包体大小限制,那么可以通过远程加载的方式加载资源(代码脚本文件除外). 小游戏在迭代过程中因为缓存资源的积累,在加载资源的时候会出现超过缓 ...

【cocos 2d微信小游戏开发教程】基础使用笔记分享（三）

【cocos 2d微信小游戏开发教程】基础使用笔记分享（三）相关推荐

最新文章

热门文章