Layaair UI file Mode

Layaair version: laya2.0.0bate4.

I. Preface

I think there are several advantages to using the file mode:
① You can minimize the package size when creating a small game (this is obvious, especially when the UI is large or large)
② You can use zip and other packages to generate files, thus reducing the number of network requests.
③ You can encapsulate the UI class again (inherit scane) to maximize the scalability and adaptability of the system.
This article only describes how to implement the file mode.

Ii. File Mode

① Create a UI and select "file mode" for the file type, as shown below:

After creating the UI, remember to export it.
②,Write UI code

Export default class demo extends laya. dialog {private BBB: laya. button = NULL; Public Constructor () {super (); this. once (laya. event. added, this, this. add); this. createview (laya. loader. getres ("test/demo. JSON ");} private add (): void {This. bbb. on (laya. event. click, this, (): void => {console. log ("the button is clicked"); this. close ();});}}

Supplement
Note:
I: laya. loader. getres: if it is a remote resource (a mini-game will usually throw the UI file to the remote server), add domain name information before it, such as: This. createview (laya. loader. getres ("https://xxx.com/gameres/test/Demo.json "));
II: No domain name is required for retrieving cells in Atlas. All other fields are required.

③ Display the UI
Note: First load the necessary files, as shown in figure
I. resources used in the UI (image resources, gallery resources)
Ii. UI skin files, such as demo. JSON (under the bin directory)
Iii. Other pre-loaded Resources
Code:

Laya. loader. load ([{URL: "Res/Atlas/comp. atlas ", type: laya. loader. atlas}, {URL: "Test/demo. JSON ", type: laya. loader. JSON}], laya. handler. create (this, (): void => {Let $ ing: laya. image = new laya. image (); $ ing. skin = "COMP/textinput.png"; $ ing. width = gameconfig. width; $ ing. height = gameconfig. height; laya. stage. addchild ($ ing); let $ lab: laya. label = new laya. label (); $ lab. TEXT = "Click !!! , Pop up dialog "; $ lab. fontsize = 50; $ lab. y= 500; laya. stage. addchild ($ Lab); $ ing. on (laya. event. click, this, (): void => {Let $ Demo: Demo = new demo (); $ demo. popup (false) ;}) ;}, null );

Laya. Scene. Open ("test/demo. Scene") in the separation mode is no longer needed.
Effect:

Layaair UI file Mode