by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/11/laya-xcx-knowledge/

总结下近期用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实际上绘制的时候是以设备的物理尺寸绘制的,所以在绘制图片的时候,需要缩放原来的尺寸。否则看起来就很大。

Laya 开发小游戏的注意点

这张图片的实际大小是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);

Laya 开发小游戏的注意点

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

Laya 开发小游戏的注意点

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方法。

未完待续。

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2017/11/laya-xcx-knowledge/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号