Egret H5 game development (2), egreth5

Egret H5 game development (2), egreth5

Preface:

Yesterday's article briefly introduced the Egret engine from installation to basic usage configuration and other issues. Today we will focus on the early stages of H5 game development, such as the use of Wing panel, material Processing, class description, and layout.

 

Overview:

According to the article, we can find index.html to set the frame rate.Data-frame-rateChange to 60. Based on the design drawing width and height, I willData-content-widthSet to 640,Data-content-heightSet it to 1038;

That is, the height of the toolbar is not included. AsAdaptation ModeSet it to exactFit and run it in canvas rendering mode.Set actual requirements.

　　

After saving the settings, you can close index.html and click"Build and run", Or click" project "-" run ".

:

　　

After running, Wing will start your default browser andServer EnvironmentOpen the index page of the project. For the convenience of display and debugging, I directly use F12 to browse in Mobile Phone mode.

If compilation and running are successful, you will see the following Egret detail page:

　　

 

Next, findSRC directoryAnd openLoadingUI. tsThis is the LoadingUI class of the officially preset loading page.

In the chrome consoleSpeed ReductionTo view the effect of the loading page.

　　

 

Processing code:

Next, we will start to operate the code. We will find the"Main class", But Main is not the real Main class, it is different from the Main class in other languages such as C, but the basic function is the same, that is, to enter the Main process.

I openedMain. tsAnd some preset effects and commentsDelete.

　　

　　

HoweverCreateBitmapByName ()Method, and the previousLoad resources and configurationsWe need to stay. This part needs to be reused.

After removing useless code, we need to write our own code. Press ctrl + s to save the code, click "project", and select"Automatic Build"Can be saved afterAutomatic compilationThen we open the browser and refresh it. Now we can see nothing.

　　

 

Processing resources:

When we delete redundant code, we also needPreset Resource MaterialsDelete, first we enterResource DirectoryNextAssetAndConfigDelete all clips in the folder.

After the deletion, you need the required materials, suchImages and audiosIn the asset directory, andConfiguration File jsonAnd the like are placed in the config directory.

Note,Default. res. jsonThis resource configuration fileCannot be deletedOh, but you can modify the name and path. In general, let it reduce errors.UnchangedOkay.

　　

When we place the resources we use in the asset directory, we return to the wing panel,Click default. res. jsonEnter the resource Management Interface and refresh it. If you add materials under the resource Directory, the following window is displayed.

Click"Yes", ThenAutomatically addAll resources are stored in the json resource configuration file default. res. json.
Note: If the resource containsYellow prompt boxIndicates the resource.Deleted, Delete or modify the path of the configuration item synchronously.Right-clickTo delete resources.

　　

On the resource configuration page, we can see a resource group below. It means we canGroupsLoad resources in batches.

For example, in scenario 1, we only need to use some resources.Independent resource placementIn a group, pre-load is performed at the moment.

Assuming scenario 2, we continue to load the group of resources in scenario 2 and continue to use the resources after loading. In this wayBatch Loading.

　　

Now, this case is first used in a group. So I will put all the resourcesDrag inIn preload, all load before entering the game.

After all resources are dragged to the preload group, the selected resources will display the otherBackground Color. Then clickCtrl + sSave.

　　

In additionDrag and select ResourcesIn addition, we can also use the code for configuration,Manually modifyJson. Click"Source code"Button to view the clip configuration we just saved.

　　

"Groups": The number of resource groups we use, the materials to be loaded for each resource group, and the name of this resource group. All of these are usedString name.

"Resources": Covers allResource Name,TypeAnd itsPath. Note thatNoUseAbsolute path, The absolute path will be configured later in the Main class.

In additionNaming rulesWait.SetYou can click"Project"-"Project Properties"Open the configuration panel and modify the settings according to your preferences.

　　

Go back to Main. ts and findRes. loadConfig ()Method

TheFirst ParameterThis indicatesConfiguration FileJsonPath, AndSecond ParameterIt indicates the resources loaded in it.Path prefixIn general, you can use relative paths, but we can also write external variables to easily change them to absolute paths.

　　

After the above steps are completed, we can perform basic encoding. Before coding, Let's first look at what the Main class has done.

 

Main class logic:

It is because we have already stated in the index.html pagePortal class (Data-entry-class)So after the page is loadedAutomatic ExecutionIn the Main classConstructor.

After this class is built, it is automatically addedStage).

 

　　1. instantiate the Main class

This process is completed internally by Egret after the Main class is created. For usIs invisible, We set MainSet as entry classOkay.

　　

 

 

　　2. constructor Initialization

During the instantiation of the Main class, the constructor of this class will beAutomatic Call, And thenInitializationWe want to useData or Method.

Here, because Main inherits from the basic container of egretEgret. DisplayObjectContainerAndAutomatically added to stageSo in the initialization phase, the Main is bound to the stage event to start the interface.

 

　　3. The Main instance is instantiated and added to the stage.

This step is invisible to us. After we define the Main class and run the program, egret willAutomatic ExecutionThis step.

 

　4. The Main is added to the stage to trigger its onAddToStage method.

After the onAddToStage method is triggeredInstantiate the LoadingUI classAnd add it to the interface. At this time, we can see a white screen and the initial loading progress.

Then we can bindConfiguration File loadedMethod executed after the event and executedRES. loadConfig ()To load the json configuration file.

　　

 

　　5. After the configuration file is loaded, run the onConfigComplete method.

Remove CONFIG_COMPLETE configuration completion events and bind them separatelyResource Group loaded (GROUP_COMPLETE)Method of execution,

　　An error occurred while loading the resource group (GROUP_LOAD_ERROR),Resource file loading progress (GROUP_PROGRESS)The method to be executed,An error occurred while loading the resource item (ITEM_LOAD_ERROR)The method to be executed.

Start nowExecute RES. loadGroup ()And load Resources in the Resource Group (default preload.

 

　　6. loading the resource. Trigger RES. ResourceEvent. GROUP_PROGRESS and execute the onResourceProgress method.

In this process, the public method setProgress (event. itemsLoaded, event. itemsTotal) in LoadingUI is continuously called );

The GROUP_PROGRESS event returns the number of currently loaded instances.Event. itemsLoadedAnd the total number of resources loaded.Event. itemsTotalYou can use these two values to display the progress.

　　

 

　　7. After the resource group is loaded, trigger RES. ResourceEvent. GROUP_COMPLETE and execute the onResourceLoadComplete method.

Remove the loading page from the stage,RemovePreviously bound loading events and executedCreateGameScene ()Method.

　　

 

　8. Start to draw game scenarios

After the above basic loading and preparation stages are completed, we canStart plottingOurGame scenarios. Of course, there is nothing at the moment.

However, we have completed the basic steps. In the next section, I will continue to detail the game code development section.

　　

 

 

The third article will be updated later.

 

Please indicate the source for reprinting. Thank you.