Welcome to FairyGui-Phaser Pages
FariyGui ui plugin that supports Phaser3
Project directory：
# GRoot
# Window
# UIPackage
# PackageItem
# DisplayItem
# xmlNode
# xmlPaerser
# UIFactory
# GObject
# GComponent
# GRoot
# UIStage
# GLoader
# GGraph
# GImage
# Image
# GGroup
# GTextfield
# GBasicTextfield
# GRichTextField
# GInputTextField
# GButton
# ScollPane
# GScrollBar
# GProgressBar
# GCombox
# GLabel
# GSlider
# GList
# GTree
# GTreeNode
# GearBase
# Controller
# Scale9Grid
# MovieClip
Create ui res process：
First Step
You can choose any item type because the internal serialization process is the same，and phaser uses laya for the default packaging method.
Second Step
You can resize the stage or add any components you want to the stage
Third Step
You can choose the packaging method and packaging options
You can choose any option for the packaging method, because fairygui’s serialization logic and deserialization logic are basically the same, and phaser uses laya for the default packaging method.
If you choose to package, you need to provide the packaged path. After packaging, a combined image and json configuration will be generated. In addition, if there are other resources such as sound effects, they will also be sent to the provided path.Don’t worry about whether the generated composite map will contradict the phaser’s atlas, fairygui-phaser has converted the produced composite map into a data structure supported by phaser
Forth Step
Just import the corresponding ui resources in the project, you can use it in the project, the edited ui
Operating procedures：
First Step
First, pre-load the corresponding ui binary file generated by the FairyGui editor. The large combined image can be loaded or not loaded. The logic of post-loading has been done internally, and it is recommended to load later. Transfer Scene to FairyGUi root node GRoot, and load it into the corresponding root container.
Second Step
We need to create the corresponding UI object, because the loading logic of Phaser is a queue. And the process of ui creation is asynchronous, so Promise should be used here.
Third Step
Create the ui object in the corresponding package，then you are able to adjust the view position, zoom and other parameters in this step
Forth Step
By running the project, you can see that the ui has been displayed in the scene