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

Source: Internet
Author: User
Tags addchild

  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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.