HTML5 Canvas Game Development (iv) Lufylegend open Source Library (bottom)

　　One, the text

　　The Ltextfield object is an object that is specifically used to display text information in a lufylegend library piece.

　　1. Text Properties

　　Created text box objects are not automatically added to the list of visualizations. Only the Addchild () method can be called manually to make it appear.

var New Lsprite ();   // initializes the Lsprite object addChild (layer);    // add an object to the canvas canvas var New Ltextfield ();   // Create text Box object field.text = "Hello world!";   // set Text properties, add text content layer.addchild (field);   // Add a text box object to the Lsprite object

Text box objects also have many other properties: coordinates, text size, font style, font color.

field.x = = = "Helloworld!" = " #333333"= "bolder";

　　2. Input Box

　　Using the Settype function of the Ltextfield object, you can set the Texttype property to Ltextfieldtype.input and turn it into an input box.

Field.settype (Ltextfieldtype.input);

　　II. Events

1. Mouse events

　　Mouse events are divided into 3 events: Mouse Down (lmouseevent.mouse_down), mouse Bounce (lmouseevent.mouse_up), and mouse Movement (lmouseevent.mouse_move).

Init ("Mylegend", 300,300, main);varfield;functionMain () {varLayer =NewLsprite (); Layer.graphics.drawRect (1, ' #cccccc ', [0,0,300,300],true, ' #cccccc ');   AddChild (layer); Field=NewLtextfield (); Field.text= "Wait click!";   Layer.addchild (field);  Layer.addeventlistener (lmouseevent.mouse_down,downshow); //Event MonitoringLayer.addeventlistener (lmouseevent.mouse_up,upshow);} functionDownshow (event) {Field.text= "Mouse down!";}functionUpshow (event) {Field.text= "Mouse up!";}

　　The Touch_start, Touch_end, and Touch_move events occur on the phone, but there is no need to differentiate them in the library because the libraries are automatically converted according to the running environment.

2. Cyclic events

　　If you want to execute a piece of code repeatedly, you need to listen for the loop event, which refers to a recurring event that is broadcast repeatedly at a specified interval.

var New lsprite (); Layer.graphics.drawRect (1, ' #cccccc ', [0,0,300,300],true, ' #cccccc 'New  Ltextfield (); Layer.addchild (field); Layer.addeventlistener (levent.enter_frame,onframe);   // Call the Onframe function repeatedly using a looping event. 

　　3. Keyboard events

Lkeyboardevent.key_down, LKEYBOARDEVENT.KEY_UP, lkeyboardevent.key_press are used in libraries to listen for keyboard events.

Init ("Mylegend", 300,300, main);varfield;functionMain () {varLayer =NewLsprite (); Layer.graphics.drawRect (1, ' #cccccc ', [0,0,300,300],true, ' #cccccc ');    AddChild (layer); Field=NewLtextfield (); Field.text= "Wait click!";    Layer.addchild (field);    Levent.addeventlistener (lglobal.window,lkeyboardevent.key_down,downshow);  Levent.addeventlistener (lglobal.window,lkeyboardevent.key_up,upshow);} functionDownshow (event) {Field.text= Event.keycode + "down!";}functionUpshow (event) {Field.text= Event.keycode + "up!";}

It is important to note that because keyboard events need to be loaded onto the window, there are changes in the method of loading.

Watch the listener function, where levent.addeventlistener is used to load keyboard events, where Lglobal.window is the Window object. So the keyboard event is loaded onto the window object so that you can listen to the entire browser window.

　　Second, button

　　The Lbutton class is built into the library to add buttons.

Prototype: Lbutton (Displayobject_up,displayobject_over)

Parameters: Displayobject_up: Represents the button default is up state, that is not pressed.

Displayobject_over: The state of the button when the mouse moves over the button, and resumes to the up state when it leaves.

var New  =layer.addchild (Testbutton); Testbutton.addeventlistener (lmouseevent.mouse_down,downshow) ;

　　Third, animation

　　Using the Lanimation class and looping events in your library, you can play a set of animations.

Lanimation prototype: lanimation (layer,data,list);

The Layer:lsprite object.

The Data:lbitmapdata object.

List: A two-dimensional array that stores coordinates.

Lglobal.dividecoordinate (Width,height,row,col): Prepares a two-dimensional array of coordinates.

This function splits the width and height of the incoming picture by the number of rows and columns, resulting in a two-dimensional array.

If you want to implement loop playback of a picture, you need to use the Setaction function of the Lanimation class.

Function prototype: setaction (Rowindex,colindex)

Parameter: RowIndex: Array line number.

Colindex: Array column number.

HTML5 Canvas Game Development (iv) Lufylegend open Source Library (bottom)