HTML5 Canvas游戏开发(四)lufylegend开源库件(下)

时间:2021-11-25 20:54:18

  一、文本

  LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象。

  1、文本属性

  创建的文本框对象不会自动加入可视化对象列表中。只有手动调用addChild()方法才能使它显示。

var layer = new LSprite();   //初始化LSprite对象
addChild(layer); //将对象添加进canvas画布中
var field = new LTextField(); //创建文本框对象
field.text = "Hello World!"; //设置文本属性,添加文本内容
layer.addChild(field); //将文本框对象添加进LSprite对象中

  文本框对象还有很多其他的属性:坐标、文字大小、字体风格、字体颜色。

field.x = 50;
field.y = 50;
field.text = "Hello World!";
field.size = 25;
field.color = "#333333";
field.weight = "bolder";

  2、输入框

  使用LTextField对象的setType函数,可将texttype属性设为LTextFieldType.INPUT,将其变成一个输入框。

field.setType(LTextFieldType.INPUT);

  二、事件

  1、鼠标事件

  鼠标事件分为鼠标按下(LMouseEvent.MOUSE_DOWN)、鼠标弹起(LMouseEvent.MOUSE_UP)和鼠标移动(LMouseEvent.MOUSE_MOVE)3个事件。

init(50,"mylegend",300,300,main);
var field;
function main(){
var layer = new LSprite();
layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
addChild(layer);
field = new LTextField();
field.text = "Wait Click!";
layer.addChild(field);
layer.addEventListener(LMouseEvent.MOUSE_DOWN,downshow); //事件监听
layer.addEventListener(LMouseEvent.MOUSE_UP,upshow);
}
function downshow(event){
field.text = "Mouse Down!";
}
function upshow(event){
field.text = "Mouse Up!";
}

  在手机上发生的是TOUCH_START、TOUCH_END、TOUCH_MOVE事件,但是在库件中不需要进行区分,因为库件会根据运行环境自动进行转换。

  2、循环事件

  如果想重复执行某段代码,就需要循环事件的监听,循环事件指的是按照指定间隔事件不断重复地广播某事件。

var layer = new LSprite();
layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
addChild(layer);
field = new LTextField();
layer.addChild(field);
layer.addEventListener(LEvent.ENTER_FRAME,onframe); //使用循环事件重复调用onframe函数。

  3、键盘事件

  在库件中用LKeyboardEvent.KEY_DOWN、LKeyboardEvent.KEY_UP、LKeyboardEvent.KEY_PRESS来侦听键盘事件。

init(50,"mylegend",300,300,main);
var field;
function main(){
var layer = new LSprite();
layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
addChild(layer);
field = new LTextField();
field.text = "Wait Click!";
layer.addChild(field);
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,downshow);
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,upshow);
}
function downshow(event){
field.text = event.keyCode + " Down!";
}
function upshow(event){
field.text = event.keyCode + " Up!";
}

  需要特别注意的是,由于键盘事件需要加载到window上,所以加载的时候方法有变化。

  注意看监听函数,在这里使用的是LEvent.addEventListener来加载键盘事件,其中LGlobal.window就是window对象。所以键盘事件是加载到window对象上,这样就能监听整个浏览器窗口。

  二、按钮

  库件中内置了LButton类来添加按钮。

  原型:LButton(Displayobject_up,Displayobject_over)

  参数:Displayobject_up:代表按钮默认是UP的状态,即没被按下。

  Displayobject_over:鼠标移动到按钮上时按钮的状态,离开时又恢复成UP状态。

var testButton = new LButton(bitmapup,bitmapover);
testButton.y = 50;
layer.addChild(testButton);
testButton.addEventListener(LMouseEvent.MOUSE_DOWN,downshow);

  三、动画

  在库件中使用LAnimation类和循环事件,可以实现一组动画的播放。

  LAnimation原型:LAnimation(layer,data,list);

  layer:LSprite对象。

  data:LBitmapData对象。

  list:一个存储坐标的二维数组。

  LGlobal.divideCoordinate(width,height,row,col):准备一个二维的坐标数组。

  该函数会将传入图片的宽和高按照行数和列数进行拆分计算,从而得到一个二维数组。

  如果要实现图片的循环播放,则需要用LAnimation类的setAction函数。

  函数原型:setAction(rowIndex,colIndex)

  参数:rowIndex:数组行号。

  colIndex:数组列号。