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:

Egretia Twitter

Egretia Website:

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


> snippets code


> 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


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


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 {


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:

Egretia Twitter

Egretia Website: