Egretia Native is officially released!

Image for post

Along with the upgrading engine technology, HTML5 gaming has grown steadily in its industrial ecosystem, the number & quality of games as well as its market. Meanwhile, more and more game developers opt to build the hardcore, high-quality and multi-platform games.

The adoption of HTML5 technology not only ensures that the quality of game is compatible with native games but also increases revenue for game developers. Thus, the solution for packaging HTML5 game is a must-have feature in HTML5 engine.

Image for post

Egretia Native, as one of main products, aims to enable developers to release game to multi-platform by one-click and simplify the method of game release. Egretia Native can power 2D game and 3D game with high efficiency in packaging and running performance.

Features:

  1. Power 3D games and 3D/2D hybrid games

Egretia Native allows users to package 3D game developed by Egretia engine with high efficiency and power 2D&3D hybrid games by automatically optimizing the rendering. Its architecture and design ensure that game can run smoothly and rendering can be improved among plenty objects at same time.

Image for post

2.Reduce the package size

There is concern about the package size of native game, except for the efficiency. Egretia Native reduces the package size without prejudice to the function and efficiency of game.

The size of empty project package is as follows:

IOS: ipa file 2.3M

Android: apk file 18.7M

Notably, Egretia Native supports three different CPU architectures in Android:

· ARM EABI

· ARM EABI-v7A

· x86

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

How to Make Fruit Slicing in Egretia Pro

Image for post

In this tutorial, you’ll learn how to create a fruit slicing game by using Egretia Pro. There’s a lot to cover — so let’s get started!

Image for post
  1. Creating fruits

— Recognize the meshes and materials that make up the model

Fruit →3D model →Game entity

These 3D models can be imported through another program (such as 3dmax or Maya) or the meshes created by program

Image for post
Image for post

After creating a cube in the scene or dragging and drop a 3d model in Egretia Pro, you will find that each model contains two components:

• MeshFilter records the mesh data you want to display

  • MeshRenderer shows the mesh how to render, such as which shader to use, whether to accept shadows and other settings
Image for post

In the fruit slicing game, you’ve noticed that the fruit is cut into pieces by us. Thus, it’s time to create the model via programming. Here is some information mainly about mesh creation.

Attributes of mesh

• Vertex coordinates (vertex)

• Normal

• Texture coordinates (uv)

  • Vertex Index

Vertex coordinates: The vertex coordinate array stores the spatial coordinates of each vertex of the Mesh. If a mesh has n vertices and each vertex is a three-dimensional coordinate point, the length of vertices equals n*3

Normal: The normal array stores the normal of each vertex of the mesh, and the length of normal is equal to the length of vertex

• The normal is the vector perpendicular to the surface. We usually use a normal vector of unit length, and the dyadic vector points to the outside of the surface instead of the inside.

• The normal can be used to determine the angle between the light and the vertex.

Texture coordinates: It defines the information of the position of each point on the image. Combining with the 3D model, these points determine the location of the surface texture map. UV provides an accurate correspondence with each point of image for surface of the model object. uv[i] corresponds to vertex[i]

Vertex index: Each mesh is composed of several triangles, and the three points of the triangle are the points in the vertex coordinates. And the sequence of these points’ connection is the vertex index.

Next, let’s compile a component to print the information of log and view the mesh information of Plane and Cube.

Image for post

Build Mesh

Firstly, create a 3d entity;

Secondly, add MeshFilter and MeshRender components to the entity;

Thirdly, implement the mesh property in the MeshFileter component with code;

Lastly, add materails material to MeshRender;

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

2. Slice the fruit

Image for post

Firstly, determine the position and the surface to cut, and add the Cut component to the target when the space bar is clicked

Image for post

Secondly, classify the vertices of the model into the upper and lower parts according to the cut surface;

Image for post

Then, find out the triangular separated by cutting

Image for post
Image for post

Then, calculate the new vertices

Image for post
Image for post
Image for post

Lastly, create two models by the vertices, normal, UVs and indexes

Image for post
Image for post

3. How to generate the new slicing

> Create a sliced entity

> Create the attribute of Mesh in MeshFilter components of the sliced entity

The several key attributes of Mesh:

• Vertex coordinates (vertex) — the point created by cutting

• UV

• Vertex normal — consistent with or opposite to the normal of the tangent point

• Vertex Index — form triangles by connecting the cutting points according to the counterclockwise attributes

Ø Create the attribute of material in MeshRender components of the sliced entity

Ø Repeat the slicing

4. Slice the fruits with flying knives

Add CutController component to the scene

Setting in onstart:

• Initialize the mesh information of all presets;

• Create the first entity to be cut;

• Initialize the position of the blade;

Setting in onUpdate:

• Add Cut components to the cutting object;

• When the position of blade reaches the bottom, update the blade position and update the next cutting object;

Several main categories:

CutFly, CutFlyPool — — slicing cube and slicing management

CutFillFace,CutFillFacePool- the sliced surface and its management

CutFlySystem — — -Process the animation of the flying slicing (including a cut and the newly generated cut surface and the last slicing) and recycling operations

CutEntityAttributesFactory — — Saves preset mesh information

There is a variety of fruits and multiple type of knives in the game, and we’ll put the information of these fruits and knives in the configuration table.

1. Load the configuration table;

2. According to the information in the configuration table, load the information of fruit and knife;

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Has Officially Launched Its VSCode Plugin — Egretia Coder

Image for post

Egretia Coder is officially released! As a plugin for Egretia UI Editor, Egretia Coder functions as exml file code editor, an adaptor for Egretia UI Editor, the invocation of Egretia Engine and debugging, which helps developers boost the productivity in using EUI and VSCode.

Image for post

It’s recommended that developers utilize VSCode as an integrated development environment (IDE). By default, VSCode has been used to access Egretia project automatically since Egretia Launcher 1.2.3.

Introduction of VSCode

Visual Studio Code (VS Code/VSC) is a lightweight and free code editor which is built on open source. It comes with supports for syntax highlighting and smart completions based on the mainstream programming languages, along with the extensions. It is optimized for both web development and cloud application development.

Introduction of Egretia Coder

Egretia Coder is a VSCode plugin for EUI project. Its features include, but not limited to:

>exml file code editing

>syntax highlighting

>smart completions

>hints

> snippets code

>formatting

> access a project in Egretia by invoking Egretia UI Editor

> call the compiling/cleanup/creation functions of Egretia Engine

>run and call project in Egretia

Setup

Local installation

1. Download the plugin and unzip the files

2. Open VSCODE

3. Open the extension page by clicking the icon on the sidebar

Image for post

4. Click the view and more buttons on the upper right of the panel, and select installation from VSIX and then choose the local plug-in installation package to set up

Image for post

5. Restart VSCODE

Get app from APP Store

Search and install Egretia Coder in the app store of VSCode

Image for post

Features

Call Egretia UI Editor and open the directory

Menu > View > Command > Select the following command

Image for post

Call Egretia engine

Menu> View > Command panel > select the following command

Image for post

Or click the corresponding button on the status bar

Breakpoints debugging

INFO: Plugin will automatically detect whether the current folder is EUI (egretProperties.json) once it’s activated, then configure launch.json and tasks.json in ./vscode

1. Open a file of EUI project

2. Open ./scripts/config.ts file and make sure that build command has been deployed by the following content

const outputDir = ‘.’;

return {

outputDir,

commands: [

new ExmlPlugin(‘debug’), // 非 EUI 项目关闭此设置

new WebpackDevServerPlugin({ //新的 Webpack 编译器

libraryType: “debug”,

defines: { DEBUG: true, RELEASE: false },

typescript: { mode: ‘legacy’ },

open: false,

port: 3000

}),

]

}

Note: By default, the port number is 3000. Please revise uri of Egret WebpackDevServer Debugger in ./vscode/launch.json and the corresponding content in ./scripts/config.ts if you want to edit the port number.

3. Select Egret WebpackDevServer Debugger on the sidebar’s runtime panel, press F5 to debug. When you execute the breakpoint debugging in VSCode, the output information of browser console can be displayed on the debugging console simultaneously.

Image for post
Image for post

Run emmet in exml files editing

Find out Emmet: includeLanguages in the settings of VSCode, then edit the corresponding content to connect in setting.json

Image for post

Add the following content in the popup panel: (run Emmet by xml)

“emmet.includeLanguages”: {

“exml”: “xml”

}

Keyboard shortcuts

The ‘cmd’ contained in the following table is key ‘ctrl’ in Windows

Image for post

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Develop a Wheel of Fortune Game | Tutorial for Beginners

Image for post

This is a fun and simple tutorial for game developers since we are going to build a wheel of fortune game. Let’s get started!

Demonstration

Image for post

Development Procedures

1. Create a Luck class for the main logic

Luck class is inherited from container egret.DisplayObjectContainer

Image for post

2. Data initialization

Image for post

3. Create a red button to spin (creatbtn)

Center the button: change the default anchor point of the button in the upper left corner to the center of the button this.btn.anchorOffsetX = this.btn.width / 2; this.btn.anchorOffsetY = this.btn.height / 2; Then make the button position in the center of the entire stage. However, the width and height of the stage cannot be obtained by directly using this.stage.stageWidth since there is nothing on the stage when the button is created. As such, students can create a date class to store global data. In this tutorial, two static attributes STAGEWIDTH and STAGEHEIGHT are directly added to main.ts. The specific methods are as follows:

Image for post
Image for post

4. Arrange all the prizes in a circle

Image for post
Image for post

You will get the prompt when using comments with /***/. When there are many parameters, you can use @param in the comment line to declare the function of each parameter.

5. Respond to click events

Remove the monitoring of the current click in the ‘click’ event to prevent multiple clicks on button.

In the timer, you can directly use timer.delay to change the delay of the timer in milliseconds.

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Engine: Development procedure for accessing the Xiaomi Quick Games

Image for post

1.Environment Configuration

>Egretia Launcher V1.0.62 or above

>Egretia Engine V5.2.17 or above

>Install npm

2. The game creation

1)After the creation via Egretia Launcher, the project will be shown on the list. Then developers can click the release settings

Image for post

2) Select the Xiaomi Quick Game to create the game

Image for post

3) After the creation, developers can click the button to release the game

Image for post

a. Compile the game code to Xiaomi Quick Game: to execute command egret build — target qgame and compile the code in the Egretia project into the Quick Game project;

b. QR code: to install rpk by scanning the QR code on the Xiaomi Quick Game Debugger

c. Release: to execute the command npm run build and build rpk package

d. Debugging: use the USB cable to connect your computer to the Xiaomi device and click the debug button then the debugging interface will start automatically in Chrome

3. Publish to Xiaomi Quick Game by the command line

Method 1: Developers can use the command line to build and release Xiaomi Quick Game

>debug: egretia build — target qgame;

>release: egretia publish — target qgame

Method 2: Deploy the template: egretProperties.json

Image for post

As it shows, developers can execute the command line egretia build or egretia publish to build and release Xiaomi Quick Game when property current is set to qgame in the configuration files of egretProperties.json

4. Package and release Xiaomi Quick Game by the command line

1)Execute the command line npm run build and generate a dist file. The file com.application.demo.debug.rpk is the Quick Game Project file, which can be debugged on the devices.

2) Generate the Quick Game to be released by executing the command line

npm run release

3) Listed below is the Quick Game structure

Image for post

4) An overview of directory structure:

egret.qgame.js: Adaptation layer code of Egretia engine and Quick Game;

js folder: js code of the game;

library:the code of local cache of running Xiaomi Quick Game by Assetsmanager can be deleted;

main.js:the entry file of Quick Game;

manifest.js: to load all js codes;

manifest.json: the configuration file of Quick Game

resources: resource files such as pictures and audio of the game

5) manifest.json

Image for post

6) Parameter:

Package: the name of package;

Name: Application name, within 6 Chinese characters, consistent with the name saved in the application store, used to display the application name on desktop icons, pop-up windows, etc.;

versionName: the application version;

versionCode: The application version number, which is incremented from 1. It is recommended to add 1 to the current version every time the package is re-uploaded;

minPlatformVersion: The minimum supported platform version number (1041), for compatibility check, can avoid the incompatibility caused by running on low version platforms after going online; if not filled in, it will be processed according to the internal test version;

icon: The path of the application icon, the size is 192×192;

orientation: the Supported screen orientation. Portrait is vertical screen, and landscape is horizontal screen. This parameter will be automatically obtained from index.html of the Egretia game project.

4. Debugging

Note: The debugging must be based on the physical device.

1) Install Xiaomi Quick Game Debugger and Xiaomi Quick Game Environment

2) Use a USB cable to connect your computer to your Xiaomi device and copy the generated quick game rpk file to the devices

3) Open the Xiaomi Quick Game Debugger, choose (com.miui.hybrid) and click Local Install, then select the uploaded rpk files to run the game

4) Input chrome://inspect/#devices on the Chrome browser and click Enter to generate com.miui.hybrid. the debugging information will pop out on the screen

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Engine Upgrade: How to get access to Taobao (Alibaba’s eBay-like online marketplace) Mini Program

Image for post

As Taobao Mini Program goes mainstream, brand owners have a growing need to increase their brand value and gain more users and market share through Alibaba. As such, Egretia engine allows developers to launch the game on Taobao quickly.

Development procedure for accessing Taobao Mini Program

1. Preparation

> Register a retailer account on Taobao

> Download Taobao toolkit

> Call APIs such as game sign-in and user information provided by Taobao

> Egretia engine V5.3.10 or above

> Egretia Launcher V1.2.22 or above

2. The game creation and package

1)Create a game via Egretia Launcher or import the existing project on Egretia

Image for post

2) After creating or importing is done, it will be shown on the list. Then developers can click the release settings

Image for post

3) Select Taobao Mini Program to create the game

Image for post

4) After the creation, developers can click the button to release the game

Image for post

5) The type of game code: compile the code in the Egretia project into Taobao project;

• debug: js code is not obfuscated by uglify, which is convenient for debugging;

  • release: the uglify obfuscation and compression for js code;

6) Taobao Mini Program structure:

Image for post

· app.css :files of application, no modification in general

· app.js:register app, to receive the notification of running, display and hiding

· app.json:the configuration file

· js directory:js code of game

· manifest.js:to load dependent js files

· mini.project.json:to configure the files format.(set the special format here)

· package.json:description file

· pages/index files:

· egret.tbgame.js:Adaptation layer code of Egretia

· index.axml:the page of entry

· index.js:entry files

· tools files:tools (no editing)

· resource : resource files such as pictures and audio of the game

3. Download and install

• Download the toolkit

  • Click to select the app for retailer, and then install it on the phone
Image for post

• Select the application

Image for post

Associate the application on the upper left and click the real-device test on the upper right. After the compilation is completed, please scan the code for debugging via Taobao mobile APP

Image for post

4. Notes

1). Due to security issues, the platform does not support the API of my.request network request. However, it supports most of the network request methods through other APIs. If you still have problems with your game, please use cloud development

2). When loading remote resources, the resources must be placed under the domain name of Ali, please consult Taobao’s technical support for details;

3). The text input function provided by the platform is very weak, please test first to check the effect;

4). The created egret.Sound must be destroyed by calling the sound.close() method when it’s not in use;

5). Horizontal screen games is not available;

6). iOS does not support websock real-device debugging, but preview mode can be used;

7). iOS does not support local sound playback for the time being, and the sound loaded on the network is available;

8). You cannot directly call the window object without $global.window;

9). The emulator does not support functions such as sound playback, please refer to the real-device test.

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitterhttps://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Engine Upgrade: Troubleshooting iOS 14 Problems

Image for post

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

Image for post
Image for post

Method 2: WebGLRenderContext.ts.drawTexture

Image for post

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitter: https://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Build a 3D Running Game | Egretia Pro Tutorial

Image for post

Preparation

Please note that developers should use EgretiapPro at Version 1.6 or above and Egretia2d engine at Version 5.3.7 or above

Image for post

Create a project

Firstly, open EgretiaPro, then click Project>Library Project>Create

Image for post

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:

Image for post

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.

Image for post

Then add the RoadController component to the Root entity of the scene.

Image for post

Now click the preview (built-in) (or preview browser) button, and you can see the following effect.

Image for post

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:

Image for post

The first step is to copy the game material BakedAnimation to the project directory resource/assets/a nimations.

Image for post

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.

Image for post

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:

Image for post

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).

Image for post

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.

Image for post

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.

Image for post

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.

Image for post

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

Image for post

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:

Image for post
Image for post

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.

Image for post

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.

Image for post

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:

Image for post

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

Image for post

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.

Image for post

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.

Image for post

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.

Image for post

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.

Image for post

After the first three steps, the project directory is as follows:

Image for post

Then we click the start button to add a parkour scene. See the Main.ts file for details

Image for post

.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

Image for post

Then we need to receive and process the message in the PlayerController of the 3d scene. Details as below:

Image for post

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!

Egretia Telegram: https://t.me/Egretia

Egretia Twitter: https://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Engine Update: Support Huawei Quick Game

Image for post

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

Image for post

2) After creating or importing is done, it will be shown on the list. Then developers can click the release settings

Image for post

3) Select the Huawei Quick Game to create the quick game

Image for post

4) After the creation, developers can click the button to release the game

Image for post

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

Image for post

• 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;
Image for post

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
Image for post

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.

Image for post

• 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.
Image for post
Image for post

More info about Huawei Quick Game: https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickgame-introduction

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram: https://t.me/Egretia

Egretia Twitter: https://twitter.com/Egretia_io

Egretia Website: https://egretia.io/

Egretia Pro is officially released!

Image for post

As one of our main products, Egretia Pro is designed to provide the developers with 3D rendering engine and simple 3D editor.

Image for post

1.The Neat and exquisite UI design

Egretia Pro allows developers to experience a brand-new interface as follows:

Image for post

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.

Image for post

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:

Image for post

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.

Image for post

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.

Image for post

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:

Image for post

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:

Image for post

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!

Egretia Telegram: https://t.me/Egretia

Egretia Twitter: https://twitter.com/Egretia_io

Egretia Website: https://egretia.io/