html5游戏按钮,lufylegend-HTML5游戏引擎学习笔记7:按钮和动画(基础部分完结)

实现一个按钮

为了简化开发,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";

}

实现一个帧动画

使用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参考: