HTML5 Canvas game development (iv) lufylegend open source Library (II), html5lufylegend

HTML5 Canvas game development (iv) lufylegend open source Library (II), html5lufylegend

　　I. Text

　　The LTextField object is an object used to display text information in the lufylegend library.

　　1. Text attributes

　　The created text box object is not automatically added to the visualization Object List. Only the addChild () method can be manually called for display.

Var layer = new LSprite (); // initialize the LSprite object addChild (layer); // Add the object to the canvas var field = new LTextField (); // create a text box object field. text = "Hello World! "; // Set text attributes and add the text content layer. addChild (field); // Add the text box object to the LSprite object

The text box object has many other attributes: coordinates, text size, font style, and font color.

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

　　2. input box

　　You can use the setType function of the LTextField object to set the texttype attribute to LTextFieldType. INPUT to an INPUT box.

field.setType(LTextFieldType.INPUT);

　　Ii. Events

1. mouse events

　　Mouse events are divided into three events: Click (LMouseEvent. MOUSE_DOWN), click (LMouseEvent. MOUSE_UP), and move (LMouseEvent. MOUSE_MOVE.

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

　　The TOUCH_START, TOUCH_END, and TOUCH_MOVE events occur on the mobile phone, but do not need to be distinguished in the library, because the library will be automatically converted according to the running environment.

2. Cyclic events

　　If you want to repeatedly execute a code segment, you need to listen to loop events. Loop events refer to repeatedly broadcasting events at specified intervals.

Var layer = new LSprite (); layer. graphics. drawRect (1, '# cccccc', [300,300,], true,' # cccccccc'); addChild (layer); field = new LTextField (); layer. addChild (field); layer. addEventListener (LEvent. ENTER_FRAME, onframe); // The onframe function is repeatedly called using cyclic events.

　　3. Keyboard Events

LKeyboardEvent. KEY_DOWN, LKeyboardEvent. KEY_UP, and LKeyboardEvent. KEY_PRESS are used in the library to listen for Keyboard Events.

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!";}

Note that the keyboard event needs to be loaded to the window, so the loading method changes.

Note that the listener function uses LEvent. addEventListener to load Keyboard Events. LGlobal. window is the window object. Therefore, the keyboard event is loaded to the window object, so that you can listen to the entire browser window.

　　2. Buttons

　　The library contains the built-in LButton class to add buttons.

Prototype: LButton (Displayobject_up, Displayobject_over)

Parameter: Displayobject_up: indicates that the button is UP by default, that is, it is not pressed.

Displayobject_over: the status of the button when you move the cursor over the button. When you leave, the status changes to UP again.

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

　　3. Animation

　　You can use the LAnimation class and loop events in the library to play a group of animations.

LAnimation prototype: LAnimation (layer, data, list );

Layer: LSprite object.

Data: LBitmapData object.

List: a two-dimensional array that stores coordinates.

LGlobal. divideCoordinate (width, height, row, col): Prepare a two-dimensional coordinate array.

This function splits the width and height of the input image by the number of rows and columns to obtain a two-dimensional array.

If you want to implement loop playback of images, you need to use the setAction function of the LAnimation class.

Function prototype: setAction (rowIndex, colIndex)

Parameter: rowIndex: array row number.

ColIndex: array column number.