滑索效果案例

项目需求

1. 倒数3,2,1后.进入游戏画面
2. 点击屏幕按钮，小人可以在索道上滑动，点击越快滑动越远，停止点击，滑动变慢，按滑动的距离计算积分
3. 游戏总时长为60s，倒计时结束后，跳转到当前总积分页面

踩坑处

1. 层级问题:

数值越大,层级越高,离用于视野越近
 1. wy.changeScene(Page11, wy.PopType.ALPHAIN) 界面层 -> 1
 2. wy.hideView() 场景层 -> 2
 3. wy.hidePopUpView() 弹出层 -> 3

产生问题的原因: 同一页面中不涉及页面层级的情况下,层级越高的元素为第一个可以触摸的元素.
解决办法: 等遮罩消失后,再设置按钮为可被触摸状态.

2. 重新开始游戏后,上一次小人滑动的距离会被留存在距离栏中,并且距离栏中的数据不会再实时更新!
   产生问题的原因:
   1)在倒计时为0时,未移除控制人物自动滑动的帧事件
   this.removeEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);
   2)一个页面内静态变量只会生成一次,所以需要一开始就在show函数里面,将距离的变量值初始化为0

3. 点击按钮,小人滑动加速后,即使不点击了,滑动的速度也不会变慢! 注意: 加减速后距离栏里滑动距离也要同步!
   思路: 在按钮点击事件内部,设置一个时间间隔,超过规定时间没触发点击事件,则逐渐减速滑动
   注意: 此处是逐渐减速而不是仅减速一次!!! (掉坑 -> setTimeOut/setInterval区别)

    private idTnterval;
    private onTouchTap(e: egret.TouchEvent): void {
        if (this.idTnterval) {  //如果存在
            egret.clearInterval(this.idTnterval);
            this.idTnterval = null;
        }
        this.addSpeed++;
         // -> setTimeOut只会调用一次,setInterva是每隔1s就调用一次!
        this.idTnterval = egret.setInterval(this.onReduceSpeed, this, 1000);  
    }

    private onReduceSpeed() {
        this.addSpeed--;
        if (this.addSpeed < 1) {
            this.addSpeed = 1;
        }
    }

4. 背景位移模拟小人滑动效果的时候,出现卡顿现象
   产生问题的原因: 因为森林的背景图片只做了一张,所以在进行判断的时候,到达某个位置会直接跳转到X=0的位置,因而造成卡顿.
   解决方法: 将同一张背景图片调用两次,通过图片前进/后退的位移模拟背景图片在不断运动的效果.

    private bg1: egret.Bitmap;
    private bg2: egret.Bitmap;
    // 添加游戏背景
    private onAddBg(type: number = 1) {
        this.bg1 = new egret.Bitmap;
        this.bg1.texture = RES.getRes('startPage_bg_png');
        this.bg2 = new egret.Bitmap;
        this.bg2.texture = RES.getRes('startPage_bg_png');
        this.bg2.x = 6686; // -> 第二个图片X的起点为第一张图片的宽度(衔接效果)
        this.addChildAt(this.bg1, 0);
        this.addChildAt(this.bg2, 1);
        this.bg.visible = false;
    }
    // 背景运动
    private onEnterFrame() {
        this.changeGraphics();
        this.bg1.x -= this.addSpeed;  // 新距离 = 旧距离 - 速度
        this.bg2.x -= this.addSpeed;
        this.green.x -= this.addSpeed;
        if (this.bg1.x <= -this.bg1.width) {  // 前进
            this.bg1.x = this.bg2.x + this.bg2.width;
        }
        if (this.bg2.x <= -this.bg2.width) {  // 后退
            this.bg2.x = this.bg1.x + this.bg1.width;
        }
        StaticVar._distance = Number((StaticVar._distance + this.addSpeed / 50).toFixed(2));
    }

参考资料

1. bug2对应知识点 ->