你的位置:首页 > 网页设计

[网页设计]HTML5 Canvas游戏开发(四)lufylegend开源库件(下)


  一、文本

  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:数组列号。