The mini-game from iamaddy

Laya 开发问题集合

遇到的问题可以讨论，定期更新~

1、继承Sprite类

继承精灵类后不能定义render方法，会覆盖父类的方法，导致渲染不出来。

class EnergyPoint extends Laya.Sprite{
	render(){
	}
}

2、图片的尺寸

提前预加载的资源才可以获得图片的尺寸。

// 预加载
var urls = ['./monkey.png'];
Laya.loader.load(
    [{
        url: urls,
        type: Laya.Loader.IMAGE
    }],
    Laya.Handler.create(this, showHandling)
);


// 不提前加载则为0
this.monkey = new Laya.Image();
this.monkey.skin = ("./monkey.png");
console.log(this.monkey.width, this.monkey.height);

子元素的宽高不会把父元素撑开

this.monkey = new Laya.Sprite();
this.monkey.loadImage("./monkey.png");
this.addChild(this.monkey);
console.log(this.width, this.height); // 0, 0

3、事件

如果对象没有宽高，点击事件也无法触发。

this.on('click', this, this.clickThis1)

clickThis1(){
	console.log(2); // 不会打印2
}

子元素的点击事件会冒泡到子元素上。

this.monkey.on('click', this, this.clickThis);
this.on('click', this, this.clickThis1);
clickThis(){
    console.log(1); // 1
}
clickThis1(){
    console.log(2); // 2
}

mouseup、mousedown等事件在移动端会默认转换为touch对应的事件。

4、多倍图

主要为retina屏幕的表现，原理同html。如果是2倍图，那么就需要设计屏幕尺寸2倍大小的图片。但是laya实际上绘制的时候是以设备的物理尺寸绘制的，所以在绘制图片的时候，需要缩放原来的尺寸。否则看起来就很大。

https://wximg.qq.com/wxgame/bottlefly/feichuang2/1.png

这张图片的实际大小是86*106，最终被绘制的大小是43,53。除了这样还可以设置Sprite的scale大小为0.5。

var sp = new Laya.Sprite();
sp.graphics.loadImage(
    'https://wximg.qq.com/wxgame/bottlefly/feichuang2/1.png',
    0,
    0,
    43,
    53
);
Laya.stage.addChild(sp);

图片的实际尺寸是上面的2倍，如果不缩放宽高，则会很大，在高分辨率手机上看起来就糊掉。

5、removeSelf和destroy的区别

什么时候会用到这个两个函数呢？当我们切换场景，或者用到的绘制对象不再需要的时候可以销毁它，释放内存。

因此Sprite、Graphics等对象都是继承Node类。Node 是laya的一个基类。Node类是可放在显示列表中的所有对象的基类。该显示列表管理 Laya 运行时中显示的所有对象。使用 Node 类排列显示列表中的显示对象。Node 对象可以有子显示对象。

/**
 * 从父容器删除自己，如已经被删除不会抛出异常。
 * @return 当前节点（ Node ）对象。
 **/
 __proto.removeSelf=function(){
     this._parent && this._parent.removeChild(this);
     return this;
 }

/**
  *<p>销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。</p>
  *<p>destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p>
  *@param destroyChild （可选）是否同时销毁子节点，若值为true,则销毁子节点，否则不销毁子节点。
  */
__proto.destroy=function(destroyChild){
    (destroyChild===void 0)&& (destroyChild=true);
    this.destroyed=true;
    this._parent && this._parent.removeChild(this);
    if (this._childs){
        if (destroyChild)this.destroyChildren();
        else this.removeChildren();
    }
    this._childs=null;
    this._$P=null;
    this.offAll();
    this.timer.clearAll(this);
}

代码注释说明的很清楚了，destroy做的事情多多了，包括对象上的事件和事件监听器都会被移除。因为真正要释放一个显示对象，则用destroy。

6、Laya 缓动

跟其他的缓动没有什么区别，只不过要注意下使用，官方文档没有说的很清楚。

To和from方法是提供渐变的，一个是到目标属性，一个是到目标属性。

to(target:*, props:Object, duration:int, ease:Function = null, complete:Handler = null, delay:int = 0, coverBefore:Boolean = false, autoRecover:Boolean = true):Tween

Laya.Tween.to会返回一个tween实例对象。

this.moveBackgroundTween = Laya.Tween.to(this, {
    y: this.y + 300
}, 5000, 
Laya.Ease.linearNone,
Laya.Handler.create(this, this.moveBackGroundEnd, [this])
);

// 如果中途要停止的话，pause。

this.moveBackgroundTween.pause();

// Clear 方法直接清除掉缓动，也会立马停止当前的缓动。会将当前的对象从缓动中移除，并且清除掉计时器任务。
this.moveBackgroundTween.clear();

7、HitArea

设置一块区域作为精灵的点击区域。

本来精灵的点击区域是他自身，如果设置HitArea，那么原来的区域则不可点击，创建的新的hitArea才能发生点击。

var hitArea = new Laya.HitArea();
var graphics = new Laya.Graphics();
graphics.drawRect(100,100,100,100,"#ff9900");
hitArea.hit = graphics;
this.monkey.hitArea = hitArea;

8、Graphics

绘制矢量图形的类。
填充色居然没有透明色，设置alpha，则会整体透明。需要绘制一个圆环都很费劲，可能还是没找到正确的接口。后来发现fillColor可以传递rgba(255,255,255,0)色值，算是一种hack方法。

9、Laya 中的卡顿问题

在测试过程中发现有很频繁的卡顿，而且是比较大的卡顿。最后通过日志分析发现，是在创建圆头像的时候出现了这种问题。下面这段代码就是离屏canvas裁剪圆头像的逻辑：

var draw = function(obj) {
    var offScreenCanvas = wx.createCanvas();

    var offScreenContext = offScreenCanvas.getContext('2d');
    offScreenCanvas.width = obj.width;
    offScreenCanvas.height = obj.height;
    // 创建图片纹理
    offScreenContext.beginPath();
    offScreenContext.arc(obj.width / 2, obj.height / 2, Math.max(obj.width, obj.height) / 2, 0, 2 * Math.PI);
    offScreenContext.clip();
    offScreenContext.drawImage(obj, 0, 0, obj.width, obj.height);

    let img = new Laya.Image();
    img.skin = offScreenCanvas.toDataURL();
    offScreenCanvas = null;
    return img;
}

如果用一个for循环来执行他，就知道会有多耗性能了

for(var i = 0; i < 100; i++){
	draw(img);
}

页面至少要卡2s以上，所以要避免过度使用图像裁剪功能。

10、内存优化

官方提到对象池的概念，这种可以理解为key-value字典，将要移除的对象放进池子里面，下次要创建的时候再拿出来。从而避免，对象回收与对象创建的内存消耗，而且对象回收也不是立马能够回收掉，要等到v8来做真正的回收操作，js层面仅仅只能做到设置为null。这种场景适用于需要频繁创建的对象。

当然对构造函数也有要求。不要将对象私有的属性通过构造函数初始化，而应该通过属性或者函数来控制。

class Man{
	constructor() {
    }
    init(score, type){
    }
};

var man = new Man();
man.init(100, 1);
// 回收
Laya.Pool.recover('Man', man);
// 从对象池里新创建，其实用的就是上面的man
var new_man = Laya.Pool.getItemByClass('Man');
// 改变属性
new_man.init(300, 2);

后来通过阅读源码，还发现一种针对资源回收的方法：

Laya.ResourceManager._systemResourceManager.garbageCollection();

所有的资源都会由_systemResourceManager对象管理，garbageCollection内部核心也是将资源对象置为null。

微信小游戏问题集合

1、在 Canvas 画布上面画用户的微信昵称，如果昵称中带有 Emoji 表情，暂时不能正常显示。

2、小游戏如何适配？

先要理清楚：设计尺寸、游戏世界尺寸以及屏幕尺寸三者的关系。

一般以主流机型的分辨率进行设计，如iPhone 6：750px * 1334px。
手机的物理尺寸为375px * 667px
2倍屏或者3倍屏
为了兼容长屏幕、短屏幕的手机正常浏览，如 iPhone X 等，游戏世界的尺寸要进行裁剪或者缩放。

3、游戏中遇到黑屏或卡死的现象

先打开调试，看看js脚本是否报错，大部分由此引起。

4、Uncaught Error: APP-SERVICE-SDK:setStorageSync:fail

写缓存失败，小程序一直有这个失败，但没有根治，大概有 0.15% 的概率。建议try catch做兼容处理。

5、canvasToTempFilePathSync:fail:write file failed;at setTimeout callback function

客户端设置分享图片失败，写文件无权限。少数机型。建议try catch做兼容处理。

iamaddy / mini-game Goto Github PK

mini-game's People

Contributors

Stargazers

Watchers

mini-game's Issues