lufylegend-HTML5游戏引擎学习笔记7:按钮和动画(基础部分完结)-优快云博客

本文介绍如何使用LufyLegend框架实现按钮点击交互及帧动画效果。通过LButton类创建按钮并响应点击事件，利用LAnimation类实现帧动画播放。涉及LBitmap、LSprite等组件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上篇: http://my.oschina.net/wolfx/blog/632810

实现一个按钮

为了简化开发,lufylegend提供了LButton

var loader,bitmapup,bitmapover,field;
LInit(50,"my",300,300,main);
function main(){
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadBitmapup);
	loader.load("img/btn1.png","bitmapData");
}
function loadBitmapup(){
	bitmapup = new LBitmap(new LBitmapData(loader.content));
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadBitmapover);
	loader.load("img/btn2.png","bitmapData");
}
function loadBitmapover(){
	bitmapover = new LBitmap(new LBitmapData(loader.content));
	var layer = new LSprite();
	addChild(layer);
	field = new LTextField();
	field.text = "wait for click";
	layer.addChild(field);
	var btn = new LButton(bitmapup,bitmapover);
	btn.y = 50;
	layer.addChild(btn);
	btn.addEventListener(LMouseEvent.MOUSE_DOWN,downshow)
}
function downshow(){
	field.text = "clicked";
}

API参考: http://lufylegend.com/api/zh_CN/out/classes/LButton.html

实现一个帧动画

使用LGlobal.divideCoordinate(width,height,row,col)分割一张图片,动画的每一帧其实就是所分割出的图.

var loader,ani,layer;
LInit(50,"my",300,300,main);
function main(){
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadImgEnd);
	loader.load("img/ani.jpg","bitmapData");
}
function loadImgEnd(){
	var bitmapData = new LBitmapData(loader.content);
	//LGlobal.divideCoordinate(width,height,row,col)
	//分割图片
	//width宽
	//height高
	//row行
	//col列
	var list = LGlobal.divideCoordinate(600,450,6,9);
	layer = new LSprite();
	addChild(layer);
	ani = new LAnimation(layer,bitmapData,list);
	layer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
	//循环播放第一行分割的图
	ani.onframe();
}

API参考:

LGlobal http://lufylegend.com/api/zh_CN/out/classes/LGlobal.html

LAnimation http://lufylegend.com/api/zh_CN/out/classes/LAnimation.html

LAnimationTimeline http://lufylegend.com/api/zh_CN/out/classes/LAnimationTimeline.html

转载于:https://my.oschina.net/wolfx/blog/632881