H5填色项目(待续)
2019-03-27 本文已影响0人
IrisLong
技术栈 : egret+ts
微信小程序H5填色游戏
利益相关,效果图暂时不展示了...
核心功能模块
-
滑动功能
具体需求: 滑动到屏幕最右端,按钮区域才会展现出来
// 加载单个资源
private browseSta: egret.Bitmap;
private circle: egret.Bitmap;
private txt: egret.Bitmap;
private scrollView: egret.ScrollView;
private onGroupCom() {
this.browseSta = new egret.Bitmap();
this.browseSta.texture = RES.getRes("browse_sta_png");
this.addChild(this.browseSta);
//创建 ScrollView
this.scrollView = new egret.ScrollView();
//设置滚动内容
this.scrollView.setContent(this.browseSta);
//设置滚动区域宽高
this.scrollView.width = egret.MainContext.instance.stage.stageWidth;
this.scrollView.height = 640;
this.addChild(this.scrollView);
/*按钮区域*/
this.circle = new egret.Bitmap();
this.circle.texture = RES.getRes("browse_circle_png");
this.circle.anchorOffsetX = this.circle.width / 2;
this.circle.anchorOffsetY = this.circle.height / 2
this.circle.x = 900;
this.circle.y = 362;
// this.addChild(this.circle);
this.circle.alpha = 0;
egret.Tween.get(this.circle, { loop: true }).to({ scaleX: .1, scaleY: .1 }).to({ scaleX: 1, scaleY: 1, alpha: 1 }, 1000, egret.Ease.bounceIn);
this.txt = new egret.Bitmap();
this.txt.texture = RES.getRes("browse_txt_png")
this.txt.x = 947;
this.txt.y = 331;
// this.addChild(this.txt);
this.txt.alpha = 0;
egret.Tween.get(this.txt, { loop: true }).to({ alpha: 1 }, 1000);
this.txt.touchEnabled = true;
this.txt.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickRevBtn, this);
/*判断是否滑动到图片最右端 -> 如果是 -> 展示按钮区域*/
egret.log(this.scrollLeft);
this.onAddTimer();
}
public get scrollLeft(): number {
return this.scrollView.scrollLeft;
}
private onAddTimer() {
egret.Ticker.getInstance().register(this.onTimer, this); // 监听帧事件
}
private onTimer() {
egret.log(this.scrollLeft);
if (this.scrollLeft > 1850) {
this.addChild(this.circle);
this.addChild(this.txt);
this.onRemove();
}
}
// 没有调用的时候 -> 清除帧监听事件 -> 减少性能损耗
private onRemove() {
egret.Ticker.getInstance().unregister(this.onTimer, this);
}
private _drawTestPge: DrawTest;
private onClickRevBtn() {
this._drawTestPge = new DrawTest();
this.parent.addChild(this._drawTestPge);
this.parent.removeChild(this);
}
-
填色功能
具体需求:1)点击不同颜色按钮,按钮下方颜色面板颜色进行相应改变
2)点击图片填色区域,该区域颜色与颜色面板区域保持一致
3)重复点击时,上次的颜色消失掉,重绘当前的颜色
private square: egret.Bitmap;
private rec: egret.Shape;
private mas: egret.Bitmap
private cirBtn: egret.Shape;
private cirBtnArr: egret.Shape[];
private _colors: Array<number> = [0xd1909f, 0xf8dae0, 0xd3c7d0, 0xffad5d, 0xe3d3c0, 0xdbe0ec, 0xf8eae8, 0x305743, 0x587c47, 0xa8c952, 0x326c59, 0x579850, 0x76cf9d, 0xc3c86f, 0x637bd1, 0x9bdddb, 0xb7dced, 0x522725, 0x002010, 0x2a3836, 0x094555];
private onGroupCom() {
var bg: egret.Bitmap = new egret.Bitmap();
bg.texture = RES.getRes("draw_bg_png");
this.addChild(bg);
var btn: egret.Bitmap = new egret.Bitmap();
btn.texture = RES.getRes("draw_btn_png");
btn.x = 986;
btn.y = 500;
this.addChild(btn);
btn.touchEnabled = true;
btn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickDrawBtn, this);
this.square = new egret.Bitmap();
this.square.texture = RES.getRes("draw_square_png");
this.square.x = 100;
this.square.y = 70;
this.addChild(this.square);
// 圆圈填色区域
var cir: egret.Bitmap = new egret.Bitmap();
cir.texture = RES.getRes("draw_cir_png");
cir.x = 898;
cir.y = 88;
this.addChild(cir);
this.cirBtnArr = [];
for (var i = 0; i < 21; i++) {
this.cirBtn = new egret.Shape();
this.cirBtn.graphics.beginFill(this._colors[i], 0);
this.cirBtn.graphics.drawRect(935, 90, 40, 40);
this.cirBtn.graphics.endFill();
if (i % 7 < 3) { // -> 三个一排 0 1 2
this.cirBtn.x = (i % 7) * 64;
this.cirBtn.y = Math.floor(i / 7) * 61 * 2;
} else { // -> 四个一排 3 4 5 6
this.cirBtn.x = (i % 7) * 64 - 32 - 192;
this.cirBtn.y = Math.floor(i / 7) * 61 * 2 + 60;
}
this.addChild(this.cirBtn);
this.cirBtn.touchEnabled = true;
this.cirBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);
this.cirBtnArr.push(this.cirBtn);
}
// 圈圈下方色块区域 -> 关键点:遮罩的使用
this.rec = new egret.Shape();
this.rec.graphics.beginFill(this._colors[3], 1);
this.rec.graphics.drawRect(895, 455, 146, 115);
this.rec.graphics.endFill();
this.addChild(this.rec);
this.mas = new egret.Bitmap();
this.mas.texture = RES.getRes("draw_mask_png");
this.mas.x = 895;
this.mas.y = 455;
this.addChild(this.mas);
this.rec.mask = this.mas;
}
private onTouch(e: egret.TouchEvent) {
var shape = e.currentTarget;
var index = this.cirBtnArr.indexOf(shape);
if (this.rec) {
this.rec.graphics.clear();
}
this.rec.graphics.beginFill(this._colors[index], 1);
this.rec.graphics.drawRect(895, 455, 146, 115);
this.rec.graphics.endFill();
this.col = this._colors[index]; // 保存此处圆圈里面的值 -> 单个区域填色的时候需要用到
}
-
动画功能
具体需求:1)动画组
2)类似摩擦效果的动画
-
音乐播放功能
具体需求: 用户进入页面后会一直播放音乐
PS: 谷歌浏览器有时候没办法自动播放音乐
private async onAddToStage() {
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onStartMusic, this);
await RES.loadConfig("resource/default.res.json", "resource/");
await RES.loadGroup("preload");
}
private onStartMusic() {
/* 进入页面 -> 自动播放音乐 */
var sound: egret.Sound = RES.getRes("music_mp3");
sound.play();
/* 自动旋转的音乐按钮 */
var musBtn: egret.Bitmap = new egret.Bitmap();
musBtn.texture = RES.getRes("musicBtn_jpg");
musBtn.width = musBtn.height = 50;
musBtn.x = musBtn.y = 30;
musBtn.x -= musBtn.anchorOffsetX;
musBtn.y -= musBtn.anchorOffsetY;
musBtn.anchorOffsetX = musBtn.width >> 1;
musBtn.anchorOffsetY = musBtn.height >> 1;
musBtn.x += musBtn.anchorOffsetX;
musBtn.y += musBtn.anchorOffsetY;
this.addChild(musBtn);
egret.Tween.get(musBtn, { loop: true }).to({ rotation: 360 }, 8000);
}
踩坑(深坑)
-
遮罩层效果
-
踩坑原因: 一开始写这个功能的时候,根本就没想花点时间去想填色区域的逻辑,所以导致这一块在一开始写的时候花费了大量时间,并且越写越乱.
实际上搞清楚逻辑就会发现其实很简单. -
功能需求:
点击颜色按钮后 -> 再点击颜色填充部分 -> 颜色填充部分变成对应的颜色
再次点击颜色 -> 前一次的颜色状态可以被修改 -
需求逻辑:
PS取图,需要取出的图片材料有哪些?
最底层图片 -> 包含填充区域?不包含填充区域? -> 都可以,不影响
颜色填充区域
颜色填充区域轮廓
位图(遮罩效果)
思考: 谁是谁的遮罩呢? -> 位图部分的遮罩是颜色填充区域
层级关系:(关键)
step1. 底层图片
step2. 颜色填充部分
step3. 颜色填充部分轮廓
step4. 遮罩效果 -> 改变颜色填充部分的颜色值 -
核心代码:
/* 树 -> 位图(形成遮罩效果)/填充区域/填充轮廓*/
this.treeMas = new egret.Shape();
this.treeMas.graphics.beginFill(0xffffff);
this.treeMas.graphics.drawRect(126,87,746,466);
this.treeMas.graphics.endFill();
this.addChild(this.treeMas);
this.treeMas.touchEnabled = true;
this.treeMas.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onClickTree,this);
var treePad:egret.Bitmap = new egret.Bitmap();
treePad.texture = RES.getRes("pad_tree_png");
treePad.x = 126;
treePad.y = 87;
this.addChild(treePad);
var treeOutl:egret.Bitmap = new egret.Bitmap();
treeOutl.texture = RES.getRes("outl_tree_png");
treeOutl.x = 126;
treeOutl.y = 87;
this.addChild(treeOutl);
this.treeMas.mask = treePad;
项目待完善效果
