Laya 开发小游戏的注意点
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
总结下近期用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实际上绘制的时候是以设备的物理尺寸绘制的,所以在绘制图片的时候,需要缩放原来的尺寸。否则看起来就很大。
这张图片的实际大小是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方法。
未完待续。
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
近期评论