HTML5 Egret Game Development Idiom big challenge (d) Select interface

Through the front of the start interface basically understand the use of eui, you can easily and quickly create a UI interface, this article using the second interface to display a more difficult code control, to show the level map content, please ensure that the material and resources complete, you can find the download in the previous tutorial.

Check the interface and start interface is not the same, please refer to the opening of the structure diagram, need a push-pull map interface, create basic exml and start interface is the same, here is called "Scenelevelsskin", Drag the Scroller component into the component library and name its subordinate content Group_levels, which is used to host the map content, and finally a return button.

<?XML version= ' 1.0 ' encoding= ' utf-8 '?><E:skinclass= "Scenelevelsskin"width= "720"Height= "1136"xmlns:e= "Http://ns.egret.com/eui"xmlns:w= "Http://ns.egret.com/wing" >    <E:scrollerTop= "0"Bottom= "0" Right= "0" Left= "0">        <E:groupID= "Group_levels"/>    </E:scroller>    <E:buttonID= "Btn_back"x= "607"y= "1047">        <E:skinname>            <E:skinstates= "up,down,disabled">                <E:imagewidth= "100%"Height= "100%"Source= "Backbtn_png"Source.down= "Backbtn1_png"/>                <E:labelID= "Labeldisplay"Horizontalcenter= "0"Verticalcenter= "0"/>            </E:skin>        </E:skinname>    </E:button></E:skin>

Below to prepare the level icon, the level icon corresponding to the main two states: open and not open, just can use the button component to achieve, through the control enabled to implement the open and open state corresponding to the previous practice dragged the creation of a button, and then enter the number can be used as the Level button, But the problem comes, the game has more than 400 off, a place to put the dead, so, there are several ways: pagination, grouping, with code generation, pagination can not achieve the drag-and-drop effect of the map, so this project, we use code control to manage the creation of buttons.

For faster control and better understanding of the tutorial, here, using a custom button skin to achieve Levelicon effect, first create a eui based. Button component's Leveliconskin skin, size set to 77x77,

Then add picture and display settings for various states, add a label in all states to display the level of the number, the specific drag-and-drop details are no longer verbose, the effect is as follows:

<?XML version= ' 1.0 ' encoding= ' utf-8 '?><E:skinclass= "Leveliconskin"states= "up,down,disabled"width= "The "Height= "The "xmlns:e= "Http://ns.egret.com/eui"xmlns:w= "Http://ns.egret.com/wing">    <E:imageSource= "Gs_select_1_png"Horizontalcenter= "0"Verticalcenter= "0"Includein= "Up,down"/>    <E:imageSource= "Gs_select_dis_png"Includein= "Disabled"Horizontalcenter= "0"Verticalcenter= "0"/>    <E:labelID= "Lb_level"text= "+"Horizontalcenter= "0"Verticalcenter= "0"/></E:skin>

Save it, then you can drag it into a button component in the interface and select it directly from the skin to see the display.

For control and ease of operation, add a levelicon.ts, where get and set are used to create a property to mark the level number

classLeveliconextendsEui. button{PrivateLb_level:eui.    Label;  PublicConstructor () {Super();  This. Skinname ="Src/game/leveliconskin.exml"; }     Public GetLevel (): Number{        returnparseint ( This. Lb_level.text); }     Public SetLevel (Value: Number){         This. Lb_level.text =value.tostring (); }}

Here is the code for SCENELEVELS.TS, which will use the previous scenelevelsskin.exml, make sure you are ready to complete the scenelevelsskin.exml and Levelicon:

classScenelevelsextendseui.component {PrivateBtn_back:eui.    Button; PrivateGroup_levels:eui.    Group;  PublicConstructor () {Super();  This. Skinname ="Src/game/scenelevelsskin.exml";  This. Btn_back.addeventlistener (Egret. Touchevent.touch_tap, This. Onclick_back, This); //Create map Options        varrow = 20; varCol = 10; varSpanx = 720/col;//calculate row x interval        varSpany = 1136/row;//calculate column y interval        varGroup =NewEui. Group ();//Map BackgroundGroup.width = 720; Group.height= (Spany * 400);//figure out the maximum size        //Fill Background         for(vari = 0;i <= (group.height/1138); i++) {            varIMG =NewEui.            Image (); Img.source= Res.getres ("Gamebg2_jpg"); Img.y= i * 1138; Img.touchenabled=false;  This. Group_levels.addchildat (img,0); }        //path to draw the level icon with a sinusoidal curve         for(vari = 0; i<400;i++){            varicon =NewLevelicon (); Icon. level= i + 1; ICON.Y= Spany * I/2; icon.x = Math.sin (icon.y/180 * math.pi) * + GROUP.WIDTH/2; ICON.Y+ = Spany * I/2; ICON.Y = GROUP.HEIGHT-ICON.Y-Spany;            Group.addchild (icon); Icon.addeventlistener (Egret. Touchevent.touch_tap, This. Onclick_level, This); }        //turn on bitmap caching modeGroup.cacheasbitmap =true;  This. Group_levels.addchild (group); //Scroll to the bottom         This. GROUP_LEVELS.SCROLLV = group.height-1100;    }    PrivateOnclick_back () {}PrivateOnclick_level (E:egret. TouchEvent) {varicon = <LevelIcon>E.currenttarget; Console.log (icon. level);    }    }

In order to look good, the above code does not use a simple code to arrange the level, but the use of a sinusoidal depiction, of course, the details still need to adjust, you know another "Crazy guess song" The Level button is a place, more than 200 off. Now all the buttons are open, click on the output to see the number of buttons, up and down can be dragged, has reached our goal

However, the details can still be dealt with again, when we click on the button, there will be a directive to mark the current selection, in the official game, is selected to enter the experience flow, so, add an arrow, Here is the original material more than a originally used to do the level of paging effect of waste resources, directly use it to do material, declare a class object:

private Img_arrow:eui. Image;

Added in the construction method:

//Trace Arrows This. Img_arrow =NewEui. Image (); This. Img_arrow.source = Res.getres ("Pagedownbtn_png"); This. Img_arrow.anchoroffsetx = 124/2-Group.getchildat (0). WIDTH/2; This. img_arrow.anchoroffsety = 76; This. img_arrow.touchenabled =false; This. img_arrow.x = Group.getchildat (0). x; This. img_arrow.y = Group.getchildat (0). Y;group.addchild ( This. Img_arrow);

Add in the Onclick_level method:

Private Onclick_level (E:egret. TouchEvent) {    var icon = <LevelIcon>e.currenttarget;    Console.log (icon. level);     this. img_arrow.x = icon.x;     this. img_arrow.y = icon.y;}

How about a final look at the effect? Open Main.ts, modify the Startcreatescene method, and then run to see it.

/**/void  {    this. AddChild (new  Scenelevels ());}

This article uses EUI to create a custom button component, scroll the application of the view, and control the interface elements in code mode.

Source code: Source code Download (because the resource is too large, there is no resource folder, please refer to the previous article separately download footage )

HTML5 Egret Game Development Idiom big challenge (d) Select interface