HTML5 Egret Game Development Idiom Big Challenge (iii) Start interface

This article needs in front of the material ready, before you can start, using Egret Eui combined with code editing, quickly complete the basic interface, the writing here may be relatively thin, the purpose is to reduce the number of people for some of the operational questions, I removed a lot of useless steps to the most streamlined process to complete, if more skilled words , these operations take less than 15 minutes to complete.

Special Note: If you already have a basic understanding of eui children's shoes, you can skip this article, because it is too simple.

Create a exml skin, here specifically, until now still for the project "package" and "directory" What the specific difference is still not very clear, anyway for me is a directory, habitual will put the same operation or system together, so in the SRC directory, Create a package called game, what name is not important, in this project is a game, and then right-click to choose New "Exml skin file", about Exml interested in careful study, you can refer to: Official EUI overview

As a simple explanation, it is a pattern of configuring interface elements in XML, similar to Microsoft's WPF XAML, where the benefits of using Eui are WYSIWYG, which is intuitive and efficient with code development, for example, where a exml named Scenebeginskin is created. Used to do the start interface, the size of the same as the game size, note "Host components", using component, the other first do not try, a moment at the button will explain.

Start interface is relatively simple, only the background image and a Start button, in the designer mode, directly can drag and drop the resources in the right side of the resource pool into the main window, you can see the following effect:

The background image position on its own adjustment, and then click on the left side of the component window, select the button dragged into the main interface, because there is no default component skin, and displayed as a control tag:

At this time, look at the property bar on the right, find the "Skin shortcut template", put the resource name, resource name is not a file name, but the tag name in the resource library, in order to better operate this button, the ID of its named "Btn_begin", note "label" this option, Does not mean that the tag is a label, the default is "label" text on it, delete it.

Put the buttons and background pictures neatly, you can see the effect in the preview:

The operation is relatively simple, if it is the Exml source code is like this:

<?XML version= ' 1.0 ' encoding= ' utf-8 '?><E:skinclass= "Scenebeginskin"width= "720"Height= "1136"xmlns:e= "Http://ns.egret.com/eui"xmlns:w= "Http://ns.egret.com/wing">    <E:imageSource= "Gamebg1_jpg"x= "0"y= "0"/>    <E:buttonlabel= "button"x= "The "y= "826"/>    <E:buttonID= "Btn_begin"x= "182"y= "997">        <E:skinname>            <E:skinstates= "up,down,disabled">                <E:imagewidth= "100%"Height= "100%"Source= "Startbtn_png"Source.down= "Startbtn1_png"/>                <E:labelID= "Labeldisplay"Horizontalcenter= "0"Verticalcenter= "0"/>            </E:skin>        </E:skinname>    </E:button></E:skin>

The following is a TS class named Scenebegin, similarly, the name is not important, from the AAAAA is no problem, mainly you can clearly understand the relationship.

Delete useless information, enter extends inherit from Eui. Component, in the class declaration Btn_begin, the constructor, the Skinname is assigned to the Exml just created, so that the skin of this class can be directly rendered as a scenebeingskin effect, while you can get the ID name of the object, Add a Click event for the button and now it's done

classScenebeginextendseui.component {PrivateBtn_begin:eui.    Button;  PublicConstructor () {Super();  This. Skinname ="Src/game/scenebeingskin.exml";  This. Btn_begin.addeventlistener (Egret. Touchevent.touch_tap, This. Onclick_begin, This); }    PrivateOnclick_begin () {Console.log ("game begin!"); }}

So how do we see the effect, open main.ts, about this structure is not more verbose, its process will eventually go to the Startcreatescene () method, delete the template comes with the code, input: This.addchild (new Scenebegin ());

Finally run a look at the effect of it, is not to get what you want it? It's so simple.

Basically this article demonstrates how to use EUI to create a simple UI interface and apply it to the code, which is a more reliable step-up.

This project Source: Chengyutiaozhan1.zip (due to the file size limit of the blog park, resource resources, please go to the back of the second chapter to download)

HTML5 Egret Game Development Idiom Big Challenge (iii) Start interface