Draw your own UI Components

The HTML5 Open Source engine lufylegend-1.7.1 package contains lufylegend. ui-0.1.0.js file, which is a lufylegend. the JS engine's dedicated UI component is also mentioned in the API introduction. This UI component is specially prepared for lazy people, including buttons, single-choice, multiple-choice boxes, and combo boxes, scroll bar and other UIS.

Next, let's talk about the rendering process of these UIS to help you better understand and expand new UI components.

1. rectangular button lbuttonsample1

First, let's take a look at the painting of the lbuttonsample1 button.

In lufylegend. in the JS engine, you can use the lbutton class to add a button. However, you need to input a visual object in two States, namely, lsprite or lbitmap, if you want to have a nice button, you can use a beautiful image. The general procedure is as follows:

btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));

Of course, you can also use the graphics attribute of the lsprite object to draw a graph. The general practice is as follows:

VaR up = new lsprite (); up. graphics. drawrect (1, "black", [0, 0,100, 30], true, "#999999"); var TXT = new ltextfield (); TXT. X = 10; TXT. y = 5; TXT. TEXT = "test button"; up. addchild (txt); var over = new lsprite (); over. graphics. drawrect (1, "black", [0, 0,100, 30], true, "# cccccc"); var txt1 = new ltextfield (); txt1.x = 10; txt1.y = 5; txt1.text = "test button"; over. addchild (txt1); var BTN = new lbutton (up, over );

The above Code only draws two rectangles of different colors. Of course it is not beautiful enough. The lbuttonsample1 object is created based on this method.

See the lbuttonsample1 constructor code

Function lbuttonsample1 (name, size, Font, color) {var S = this; if (! Size) size = 16; If (! Color) color = "white"; if (! Font) font = ""; S. backgroundcorl = "black"; var btn_up = new lsprite (); Scheme = new lsprite (); btn_up.back = new lsprite (); btn_up.addchild (callback); callback (btn_up.back ); labeltext = new ltextfield (); labeltext. color = color; labeltext. font = font; labeltext. size = size; labeltext. X = size * 0.5; labeltext. y = size * 0.5; labeltext. TEXT = Name; btn_up.back.addchild (labeltext); var shadow = new ldropshadowfilter (000000, "#", 10); rows = [shadow]; var btn_down = new lsprite (); btn_down.x = btn_down.y = 1; labeltext = new ltextfield (); labeltext. color = color; labeltext. font = font; labeltext. size = size; labeltext. X = size * 0.5; labeltext. y = size * 0.5; labeltext. TEXT = Name; btn_down.addchild (labeltext); base (S, lbutton, [btn_up, btn_down]); S. width = labeltext. getwidth () + size; S. height = 2.2 * size; S. backgroundset = NULL; btn_up.shadow.graphics.drawroundrect (0, "#000000", [, S. width-2, S. height-2, S. height * 0.1], true, "#000000"); S. addeventlistener (Levent. enter_frame, S. _ ondraw );}

It can be seen that it inherits from lbutton, so it has all the methods and attributes of lbutton, and uses btn_up and btn_down as the two statuses of the button at the same time, and passes it to its parent class lbutton.

Btn_up is the bounce status of the button. It contains two lsprite objects (shadow and back) and an ltextfield object. Shadow is used to set the shadow effect for the button, and ltextfield is used to display the button text.

The button is drawn in the _ ondraw function, as shown below.

LButtonSample1.prototype._onDraw = function(s){if(s.backgroundSet == s.backgroundCorl)return;s.backgroundSet = s.backgroundCorl;var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);grd.addColorStop(0,"white");grd.addColorStop(1,s.backgroundCorl);var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);grd2.addColorStop(0,"white");grd2.addColorStop(1,s.backgroundCorl);s.bitmap_up.back.graphics.clear();s.bitmap_over.graphics.clear();s.bitmap_up.back.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);s.bitmap_up.back.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);s.bitmap_over.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);s.bitmap_over.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);};

In the _ ondraw function, two new gradient colors are displayed, and two normal rectangles are respectively drawn in the two statuses of the buttons, so that a button is successfully drawn, the usage is as follows.

VaR button02 = new lbuttonsample1 ("test button 2"); button02.backgroundcorl = "#008800"; button02.x = 150; button02.y = 10; layer. addchild (button02 );

Effect

2. rounded Rectangle Button lbuttonsample2

With lbuttonsample1, the rounded rectangle lbuttonsample2 is simple. You just need to replace the rectangular part with the rounded rectangle, but the constructor does not need to write it again, let lbuttonsample2 inherit lbuttonsample1 directly, as shown below:

function LButtonSample2(name,size,font,color){var s = this;base(s,LButtonSample1,[name,size,font,color]);}

Then there is the _ ondraw function, as shown below.

LButtonSample2.prototype._onDraw = function(s){if(s.backgroundSet == s.backgroundCorl)return;s.backgroundSet = s.backgroundCorl;var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);grd.addColorStop(0,"white");grd.addColorStop(1,s.backgroundCorl);var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);grd2.addColorStop(0,"white");grd2.addColorStop(1,s.backgroundCorl);s.bitmap_up.back.graphics.clear();s.bitmap_over.graphics.clear();s.bitmap_up.back.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);s.bitmap_up.back.graphics.drawRoundRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1,s.height*0.1],true,grd2);s.bitmap_over.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);s.bitmap_over.graphics.drawRoundRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1,s.height*0.1],true,grd2);};

The difference is that the drawroundrect function is used to draw a rounded rectangle.

VaR button04 = new lbuttonsample2 ("test button 4"); button04.backgroundcorl = "blue"; button04.x = 10; button04.y = 70; layer. addchild (button04 );

Effect

3. Single-threaded lradio

Lradio is composed of one or more lradiochild objects.

function LRadioChild(value,layer,layerSelect){var s = this;base(s,LSprite,[]);s.value = value;if(!layer){layer = new LSprite();layer.graphics.drawArc(2,"#000000",[0,0,10,0,2*Math.PI],true,"#D3D3D3");}if(!layerSelect){layerSelect = new LSprite();layerSelect.graphics.drawArc(0,"#000000",[0,0,4,0,2*Math.PI],true,"#000000");}s.layer = layer;s.layerSelect = layerSelect;s.addChild(s.layer);s.addChild(s.layerSelect);s.layerSelect.visible = false;s.checked = false;s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);}LRadioChild.prototype._onChange = function(e,s){s.parent.setValue(s.value);};LRadioChild.prototype.setChecked = function(v){this.layerSelect.visible = this.checked = v;};

Lradiochild is actually composed of two overlapping visual objects layer and layerselect. It sets whether the layerselect object is displayed through setchecked to change its appearance. When you click the lradiochild object, call the setvalue method of the parent-level object to check the lradio code.

function LRadio(){base(this,LSprite,[]);}LRadio.prototype.setChildRadio = function(value,x,y,layer,layerSelect){var s = this;var child = new LRadioChild(value,layer,layerSelect);child.x = x;child.y = y;s.addChild(child);};LRadio.prototype.push = function(value){this.addChild(value);};LRadio.prototype.setValue = function(value){    var s=this,child,k;    for(k in s.childList){    child = s.childList[k];        child.setChecked(false);        if(child.value == value){        s.value = value;        child.setChecked(true);        }    }};

You can use setchildradio or push to add a sub-lradiochild object. Then, when the setvalue function is called, the status of all sub-lradiochild objects is changed and the clicked sub-objects are selected.

The usage is as follows:

var radio = new LRadio();radio.x = 50;radio.y = 130;radio.setChildRadio(1,0,0);radio.setChildRadio(2,50,0);radio.setChildRadio(3,100,0);layer.addChild(radio);

Effect

4. Multiple selection box lcheckbox

Multiple selection box is relatively simple

function LCheckBox(layer,layerSelect){var s = this;base(s,LSprite,[]);if(!layer){layer = new LSprite();layer.graphics.drawRect(2,"#000000",[0,0,20,20],true,"#D3D3D3");}if(!layerSelect){layerSelect = new LSprite();layerSelect.graphics.drawLine(5,"#000000",[2,10,10,18]);layerSelect.graphics.drawLine(5,"#000000",[10,18,18,2]);}s.layer = layer;s.layerSelect = layerSelect;s.addChild(s.layer);s.addChild(s.layerSelect);s.layerSelect.visible = s.checked = false;s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);}LCheckBox.prototype._onChange = function(e,s){s.checked = !s.checked;s.layerSelect.visible = s.checked;};LCheckBox.prototype.setChecked = function(value){s.checked = value;s.layerSelect.visible = s.checked;};

As you can see, it works in the same way as lradiochild. It also controls the status of multiple selection boxes through two overlapping visual objects.

The usage is as follows:

var check1 = new LCheckBox();check1.x = 50;check1.y= 160;layer.addChild(check1);var check2 = new LCheckBox();check2.x = 100;check2.y= 160;layer.addChild(check2);

Effect

5. Combo box lcombobox

This is relatively complicated, because you don't want to select one or more boxes, but click to change the status. It needs to scroll up and down the internal list according to the click action, first look at the constructor.

Function lcombobox (size, color, Font, layer, layerup, layerdown) {var S = This; base (S, lsprite, []); S. list = []; S. selectindex = 0; S. value = NULL; S. selectwidth = 100; If (! Size) size = 16; If (! Color) color = "black"; if (! Font) font = ""; S. size = size; S. Color = color; S. font = font; S. refreshflag = false; If (! Layer) {S. refreshflag = true; layer = new lsprite (); layerup = new lsprite (); layerdown = new lsprite (); S. layer = layer; S. layerup = layerup; S. layerdown = layerdown; S. refresh ();} s. addchild (layer); S. addchild (layerup); S. addchild (layerdown); S. layer = layer; S. layerup = layerup; S. layerdown = layerdown; S. runing = false; S. textlayer = new lsprite (); S. textlayer. X = 5; S. textlayer. y = S. size * 0.4; S. addchild (S. textlayer); S. layerup. addeventlistener (lmouseevent. mouse_up, S. _ onchangeup); S. layerdown. addeventlistener (lmouseevent. mouse_up, S. _ onchangedown );}

Layer is the style of the combo box, while layerup and layerdown are the upward and downward control buttons respectively. By clicking these two buttons, The _ onchangeup and _ onchangedown functions are called respectively, in addition, the internal list of the combo box is added to the textlayer.

Let's take a look at the setchild function.

LComboBox.prototype.setChild = function(child){var s = this;if(!child || !child.value || !child.label)trace("the child must be an object like:{label:a,value:b}");var text = new LTextField();text.size = s.size;text.color = s.color;text.font = s.font;text.text = child.label;text.y = (s.size * 1.5 >>> 0) * s.list.length;s.textLayer.addChild(text);if(s.list.length == 0){s.value = child.value;}s.list.push(child);s.selectWidth = 100;s.refresh();};

This function adds an element to the list of the combo box and displays it using the ltextfield object.

Next, let's look at the _ onchangeup and _ onchangedown functions.

LComboBox.prototype._onChangeDown = function(e,b){var s = b.parent;if(s.runing)return;if(s.selectIndex >= s.list.length - 1)return;s.runing = true;for(k in s.list){s.textLayer.childList[k].visible = true;}s.selectIndex++;s.value = s.list[s.selectIndex].value;var mask = new LSprite();mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);s.textLayer.mask = mask;var my = s.textLayer.y - (s.size * 1.5 >>> 0);var fun = function(layer){var s = layer.parent;layer.mask = null;s.runing = false;s.refresh();};LTweenLite.to(s.textLayer,0.3,{ y:my,onComplete:fun,ease:Strong.easeOut});};LComboBox.prototype._onChangeUp = function(e,b){var s = b.parent;if(s.runing)return;if(s.selectIndex <= 0)return;s.runing = true;for(k in s.list){s.textLayer.childList[k].visible = true;}s.selectIndex--;s.value = s.list[s.selectIndex].value;var mask = new LSprite();mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);s.textLayer.mask = mask;var my = s.textLayer.y + (s.size * 1.5 >>> 0);var fun = function(layer){var s = layer.parent;layer.mask = null;s.runing = false;s.refresh();};LTweenLite.to(s.textLayer,0.3,{ y:my,onComplete:fun,ease:Strong.easeOut});};

These two functions use ltweenlite to hold the textlayer layer of the combo box up or down.

Both setchild, _ onchangeup, and _ onchangedown call the refresh function. Let's take a look at this function.

LComboBox.prototype.refresh = function(){var s = this,k;for(k in s.list){s.textLayer.childList[k].visible = false;if(s.value == s.list[k].value)s.textLayer.childList[k].visible = true;if(s.selectWidth < s.textLayer.childList[k].getWidth() + s.size){s.selectWidth = s.textLayer.childList[k].getWidth() + s.size;}}s.layer.graphics.clear();s.layerUp.graphics.clear();s.layerDown.graphics.clear();s.layer.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2],true,"#D3D3D3");s.layerUp.x = s.selectWidth;s.layerUp.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);s.layerUp.graphics.drawVertices(2,"#000000",[[s.size*0.5*2,s.size*0.2],[s.size*0.2*2,s.size*0.8],[s.size*0.8*2,s.size*0.8]],true,"#000000");s.layerDown.x = s.selectWidth;s.layerDown.y = s.size;s.layerDown.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);s.layerDown.graphics.drawVertices(2,"#000000",[[s.size*0.5*2,s.size*0.8],[s.size*0.2*2,s.size*0.2],[s.size*0.8*2,s.size*0.2]],true,"#000000");};

We can see that this function is actually a re-drawing of the combo box, drawing a rectangle using drawrect, and drawing a triangle using drawvertices.
The usage of the combo box is as follows:

VaR COM = new lcombobox (20); COM. X = 50; COM. y= 210; COM. setchild ({label: "Test 1", value: "AAA"}); COM. setchild ({label: "Test 2", value: "BBB"}); COM. setchild ({label: "Test 3", value: "CCC"}); COM. setchild ({label: "Test 4", value: "DDD"}); layer. addchild (COM );

Effect

6. scroll bar lscrollbar

The last is the scroll bar, which is a little difficult to implement. Fortunately, I used to write a scroll bar in as3 and transplanted it directly. During the transplantation process, I sighed again, lufylegend. JS syntax imitating as3 is still relatively successful.

This is troublesome, so I will only talk about its usage here. If you are interested, you can take a look at the code and understand it for yourself.

Take a look at the official API Introduction

Lscrollbar (showobject, maskw, maskh, scrollwidth, wvisible) ■ function: a visible object with a scroll bar. ■ Parameter: showobject: the object to be added to the scroll bar. Maskw: the width of the visible size of the scroll bar object. Maskh: Specifies the height of the visible size of the scroll bar object. Scrollwidth: the width of the scroll bar. Wvisible: whether to display the horizontal scroll bar. If not specified, it is the default value.

The usage is as follows:

var showObject = new LSprite();showObject.graphics.drawRect(2,"#ff0000",[0,0,500,500],true,"#ff0000");var t = new LTextField();t.color = "#000000";t.text = "あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと";t.width = 300;t.stroke = true;t.size = 30;t.setWordWrap(true,35);showObject.addChild(t);var sc = new LScrollbar(showObject,200,200);sc.x = 450;sc.y = 20;layer.addChild(sc);

Effect

The design in the lower artist is very poor, so this article is purely a reference. You can try to write several beautiful UIS on your own, or contact me if you have any good comments or ideas.

HTML5 open-source game engine lufylegend1.7.1 release

Http://blog.csdn.net/lufy_legend/article/details/8780821

Lufylegend. js engine Official Website

Http://lufylegend.com/lufylegend

Lufylegend. js engine online API documentation link

Http://lufylegend.com/lufylegend/api