The new version of Egretia engine is officially released to fix bugs and improve performance. We’ve fixed system stuck issue as well as the problem of htmlsound returns and DragonBones.
If you skip the upgrade to the latest version of engine, here’s how to get its features.
Method 1: WebGLVertexArrayObject.ts.cacheArrays
Method 2: WebGLRenderContext.ts.drawTexture
Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!
Please note that developers should use EgretiapPro at Version 1.6 or above and Egretia2d engine at Version 5.3.7 or above
Create a project
Firstly, open EgretiaPro, then click Project>Library Project>Create
After the creation, EgretiaPro will automatically open the library project RunningGame which was just created. Then create a RunningScene under the directory of resource/scenes and double-click to open the scene in the scene editor. As shown below:
Create tracks
The track is spliced by three entity Cubes, and the track needs to roll up as the protagonist runs forward. Here we create the track dynamically through components. Use Vscode to open the project you just created, then create a folder game under the src directory to store our component code, and then create the RoadController.ts file in the game directory.
Then add the RoadController component to the Root entity of the scene.
Now click the preview (built-in) (or preview browser) button, and you can see the following effect.
If it looks a bit weird, you can adjust the position and angle of the camera by debugging the camera’s TransForm parameters in the running interface to make the picture look more comfortable.
Add protagonist
Add the protagonist to the scene and let him run forward, as follows:
The first step is to copy the game material BakedAnimation to the project directory resource/assets/a nimations.
In the second step, open the resource/assets/animations/BakedAni mation/Boy_standby_out directory in the EgretiaPro editor explorer, drag and drop the Boy_standby.gltf.prefab.json file into the scene.
The third step is to play the running animation of the protagonist. There are two ways: Method 1: Directly operate in the pro editor. details as follows:
Method 2: Uncheck autoPlay in the pro editor and implement it through scripts. Create a PlayerController file under the game directory; (Remember to hang the PlayerController component on the protagonist entity).
As of now, the protagonist is running on the track. But the player is supposed to move forward. As such, we need to constantly update the position of the protagonist in the onUpdate function and meanwhile make the camera move along with the protagonist at the same speed. Otherwise you will find that your protagonist runs further and further on your screen, getting smaller and smaller.
As the protagonist moves forward, we find that the track under his feet is gone. What we need to do now is to open RoadController.ts component then continue to pave the road while the protagonist moves forward.
Then use the left mouse button to control the protagonist’s movement direction. To change the position of the protagonist by the onUpdate function according to the movement of the mouse.
Add coins
A prefab is a collection of game objects and their components. The purpose is to enable game objects and resources to be reused. The same game object can be created through a prefab. This process can be understood as instantiation. Since the gold coins in the game are scattered all over the runway, it is perfect to make gold coins by prefabs!
How to create a prefab:
1. Open (or create) the resource/perfab directory, and then right-click — “Create prefab coin.perfab.json in the resource manager module;
2. Double-click the prefab just created, right-click in the hierarchy bar → 3D →Sphere;
3. Select the sphere you just created, and select the material item in the property bar, select coin.mat.json.
First, let’s get started with a coin component Coin.ts
Our gold coins are scattered on the runway, so every time we create a runway, we randomly create some gold coins on the runway. The number of gold coins and location are random. Next, you need to add the following logic code to the RoadController.ts component:
Now a lot of gold coins are scattered on the road. But it’s necessary to build a gold coin pool to collect gold coins instead of creating gold coins all the time. So Next we will create a gold coin buffer pool. Add a CoinPool class to the Coin.ts file.
When the gold coin leaves the rendering range of the camera, we should put the gold coin into the buffer pool, and the gold coin entity is not participating in the rendering, so that the gold coin is in a dormant state. We put these processing of gold coins in the system class to do. The system is a tool to handle a collection of entities with one or more identical characteristic components, which only have behavior (that is, there is no state in the system). How to get all the gold coins in our system class？The entity matcher is used to define the rules of a set of entities with certain component characteristics. A clear set of rules can be defined through an instance of the matcher.
In our cases, we first create a gold coin system class CoinSystem.ts in which all the gold coins are collected, and then check whether the gold coins are thrown behind by the player and no need to render in each frame, then those will be returned to the gold coin pool. Look specifically at the following code:
The system does not work like a component directly added to the entity so we need to register the system with the component. Next, add the following two lines of code in PlayerController
We will consider getting them from the buffer pool first when it comes to the creation of gold coins. Modify the crea teCoins() function in RoadController.ts.
The collision
Next, what we must do is to deal with the collision between the gold coin and the protagonist. We need to check each gold coin. If there is a collision with the protagonist, then the gold coin will have an easing animation and then disappear. Thus we still put the behavior of dealing with the collision between gold coins and the protagonist in the CoinSystem.ts system class.
Add UI interface
As of now, 3D scene is complete. Next, we need to add a UI interface to the case, that is, to add some 2d content. Here is an explanation of how to add a UI interface in a 3d scene. The integration of Egretia2d and EgretiaPro. Firstly, to export the 3d scene into a third-party library pro-library; Secondly, to create a 2d project and add the third library pro-library to the 2d project; Thirdly, to upgrade the 2D project and modify index.html.
Lastly, the scene in EgretiaPro is rendered as an Egretia.Texture object. Add Egretia.Texture to the Bitmap object so as to render to the stage through Egretia engine.
After the first three steps, the project directory is as follows:
Then we click the start button to add a parkour scene. See the Main.ts file for details
.But at this time, you may find that the protagonist could not move towards left or right side. What we need to do now is to pass on the 2d touch event to the 3d scene. Then you need to complete the communication through Egretia.pro
Then we need to receive and process the message in the PlayerController of the 3d scene. Details as below:
Now, enter the command in the console: Egretia run -a and run your project!
What are the coolest projects you saw from people using Egretia Pro?
Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!
Development procedure for accessing the Huawei Quick Game:
1. Preparation
>Register as a developer on Huawei Quick Game
>Call APIs such as game sign-in and user information provided by Huawei
> Note that the size of released rpk file is less than 10MB
2. The game creation and package
1）Create a game via Egretia Launcher or import the existing project on Egretia
2) After creating or importing is done, it will be shown on the list. Then developers can click the release settings
3) Select the Huawei Quick Game to create the quick game
4) After the creation, developers can click the button to release the game
Compile the game code to Huawei Quick Game: compile the code in the Egretia project into the Quick Game project;
• The type of game code -debug: js code is not obfuscated by uglify, which is convenient for debugging;
The type of game code -release: the uglify obfuscation and compression for js code;
5） After release, the rpk files will be generated in dist files
6） Huawei Quick Game Structure
• Build directory:
o egret.fastgame.js: Adaptation layer code of Egretia engine and Quick Game;
o game.js: the entry file of Quick Game;
o icon directory: game icons;
o js directory: js code of the game;
o manifest.js: to load dependent js files;
o manifest.json: the configuration file of Quick Game
o resources: resource files such as pictures and audio of the game;
o dist directory: to store compiled rpk files;
o sign: to store signature files;
o signtool: a compilation tool for Quick Game;
7） Through the “Modify Configuration” tab of the Launcher, developers can modify the relevant parameters of Huawei quick game
• Note that developers need to republish the rpk for the new parameters to take effect after modifying the parameters;
The minimum platform version number is 1075;
3. Download and install Huawei Quick App Loader
• Download the Windows/Mac version of the Quick Application Loader Assistant;
Click to select the compiled rpk package, and then install it on the phone
4. About signature files
There are two types of the signature of Huawei Quick Game: debug and release. We provide a default debug signature for developers to package and debug. But if developers want to use platform functions such as log-in and user information, they must use the release signature.
• On the release tab of the Launcher, developers can select Release as the signature type, and click the “Open” button on the right to open a folder, and then import the generated signature file;
• After re-release, the generated rpk package is signed with release;
Note: For signatures generated by Huawei tools, the fingerprint of the certificate must be filled in the project settings in the background of Quick Game.
As one of our main products, Egretia Pro is designed to provide the developers with 3D rendering engine and simple 3D editor.
1.The Neat and exquisite UI design
Egretia Pro allows developers to experience a brand-new interface as follows:
2.The Complete editor
2.1 New Feature: 3D editor
Egretia Pro has such various features on improving 3D editor as the light direction, Light direction, the world coordinate system navigator and the rendering viewport of the current camera.
2.2 New Feature: Editor extension
Egretia Pro supports both command extension and view editing extension. The architecture design of editor extension is as follows:
A. Each extension runs in an independent process, and a single extension stuck does not affect the editor performance;
B. Extensions are not allowed to directly access DOM and Runtime, and subsequent extensions that must access Runtime are not in this iteration target;
C. The extended imperative can be allowed to operate UI in Egretia Pro through extended APIs and extension points;
D. All extensions are loaded lazily and activated at specific moments through the extension points configured in package.json.
2.3 New feature: Import model resources
Models and other resources can be directly imported into Egretia Pro, which provides developers with a better choice beyond Unity3D export plug-ins. Examples of its functions are as follows:
In the follow-up planning, various functions in the Unity3D export plug-in will be applied to Egretia Pro and eventually developers can directly develop a 3D game without installing Unity3D. However, we will continue to maintain the Unity3D export plugin to facilitate the Unity3D game development team to make full use of existing resources to develop H5 3D games.
2.4 New Feature: Engine manger
Add engine manager to the startup page. In terms of design, the editor and engine of Egretia Pro are decoupled, and the same version of the editor will support multiple versions of the engine.
2.5 New Feature: Support 2D editing
Egretia Pro is not only a 3D editor, but also supports simple 2D editing.
For developers, if you are creating a 3D game and only use 2D for simple UI, we recommend that you use the latest 2D editing for your game creation. If your game is still based on UI mostly, it’s recommended that you continue to use the eui module and EUI Editor for UI editing, and then adapt it to Egretia Pro through the Stage2D adapter in the engine.
3. Compiler
The features of powerful compiler include:
A. Compiler and engine runtime code are binding and built into the editor so that developers no longer manually install the compiler through npm;
B. The compiler will automatically compile all the codes in the src folder of the user project, without manual import, which greatly improves the operating experience of creating a new component in the editor;
C. The compiler supports three operating modes of publishing, namely,client mode, server mode and editor mode. The editor mode is an internal call method. Developers can launch their games as client and server modes. For more information about this feature, please refer to the next section: Battle Engine.
4. Battle engine
As mentioned, Egretia Pro is not only a 3D editor, but also a complete HTML5 game solution. Due to its lightweight and social characteristics, HTML5 game technology is widely used in casual battle games. In such circumstances, Egretia launch a complete battle engine and integrated it into Egretia Pro as a first-class citizen.
For a battle game, the most important mechanism is the synchronization method. There are currently two common synchronization methods on the market, frame synchronization and state synchronization. Their respective implementation principles are:
A. The realization of state synchronization: all calculations are completed on the server side, and the client side, like a “player”, shows the calculation results on the server side;
B. The realization of frame synchronization: all calculations are done on the client side, and the server is only used as a forwarding relay for user operations.
Their advantages and disadvantages are as follows:
It shows that state synchronization has decisive advantages in terms of security and anti-plugin because all logic is calculated on the server side, but the biggest disadvantage is that its development model greatly increases the client and server Communication costs at the end, which in turn leads to low efficiency of development.
In Egretia Pro’s battle service, we first support the state synchronization method, and design from the engine’s underlying architecture level to greatly improve the traditional client/server development model. The specific principles are as follows:
Compared with the traditional one, this method has the following specific advantages:
A. No need for a full-time server-side gameplay development engineer;
B. There is no need for multiple developers to jointly debug the C/S agreement;
C. Convert the game to a stand-alone game at a very low cost (for example, the novice training mode is modified to a stand-alone game to reduce server pressure);
D. Many common codes on client side or server side can be reused;
E. Server-side visual debugging.
To sum up, according to the feedback of internal test developers, it benefits from this model. The development efficiency is generally doubled (because the joint debugging cost is greatly reduced), and the personnel cost can be reduced by 1/3 (the full-time server game development engineer is no longer required), the final research and development cost in gameplay can save more than 60%.
5. Other Features
In addition to the above ones, many new functions have been added to the engine’s runtime, including:
1. GPU-based skeletal animation rendering
2. Custom Shader support
3. Better Box2D support
4. A more complete battle module
Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!
