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 Engine Upgrade: Support Bytedance’s Mini Games

Image for post

Support Bytedance’s Mini Games

Image for post

Kind reminder:

To execute, developers shall use the latest version of Egretia engine and Egretia Launcher

Egretia Compiler

In this case, developers only need to install the latest version of Launcher and download Egretia Compiler in the [Tools] tab, which can be used more easily without executing the npm install command in each project.

Besides, here is an update on webpack:

• legacy mode

o Fix the decorator sorting problem;

o Fix the error of namespace;

o Fix the problem that the global enumeration cannot be accessed;

o Add sourcemap;

o Fix the compilation error caused by .d.ts in the src folder;

o Modify the .ts matching rules in legacy mode and adopt the configuration in tsconfig.json instead of hard-coded the src folder;

• Linux platform support;

• Fix the problem that Egretia.is returns incorrect results after compilation;

• Optimize the output volume which has been reduced about 20%

• Add typescript.tsconfigPath;

Egretia UI Editor

• Add right click to resource library -> copy resource name;

• Exml source code supports formatting;

• Support drag the skin by pressing the right button;

• The resource manager supports deleting files through the Delete key;

• The right-click menu item displays the corresponding shortcut keys;

• The interface can be zoomed by the mouse wheel in the preview state;

• Adjust the step length of the size & position part of the attribute item to 1, which is more user-friendly;

•To change the shortcut skin of Button by dragging and dropping resources to the input box

• The custom components are sorted alphabetically for easy search;

• The component frame is drawn by canvas, and the skin editing is smoother;

• Fix that clicking may cause the component level to be changed in some cases

• Fix that frequent changes to the component location may cause the editor to crash;

• Fix the issue that the list in the Ctrl+P shortcut to open the file is not updated synchronously after the file is changed

• Fix the problem that the interface is not updated in real time after changing the component skin;

Document

• Optimize the page loading speed from an average of 2 seconds to an average of 300 milliseconds

• Upload multiple documents and remove some outdated documents

  • All the sample codes in the document are written in ES2015 version, e.g. declare Variables with let and const

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 7

This is the seventh part of Egretia Engine tutorial, showing how to build a space shooter game!

Part 1 https://bit.ly/32xy7r3

Part 2 https://bit.ly/2CV2CfC

Part 3 https://bit.ly/39uicLD

Part 4 https://bit.ly/3jJui8p

Part 5 https://bit.ly/31boR9Q

Part 6 https://bit.ly/31mFM9j

Demonstration

> Implementation of RES resources loading

Image for post

Main

Image for post

>Implementation of Resources loading

Image for post

Main

public menu:MainMenu;
public canvasIndex:number; // Interface index

Construct:

this.game= null;

this.addChild(this.menu);

this.canvasIndex=10; //10menu 20game 30over

Main

Add the following codes to touchdown,touchMove,touchup and update:

switch(this.canvasIndex)

{

case 10:

this.menu.touchDown(e);

break;

case 20:

this.game.touchDown(e);

break;

}

public loadingView;

private async loadResource() {

try {

this.loadingView = new LoadingUI();

this.stage.addChild(this.loadingView);

await RES.loadConfig(“resource/default.res.json”, “resource/”);

//menu belongs to the name of group and its background is saved in its group

await RES.loadGroup(“menu”, 0, this.loadingView); this.stage.removeChild(this.loadingView);

}

catch (e) {

console.error(e);

}

}

Mainmenu

public async touchDown(e:egret.TouchEvent)

{

//=null means there are no constructor or no resources loading. Then the interface starts to load

if(this.main.game == null){ // add the loading interface to the scene

this.stage.addChild(this.main.loadingView);

//read the resources

await RES.loadGroup(“game”, 0, this.main.loadingView);

//remove the interface

this.stage.removeChild(this.main.loadingView);

//construct the game interface after loading

this.main.game = new MainGame(this.main);

}

this.main.removeChild(this);

this.main.game.reset(0); // 0 is the game level

this.main.addChild(this.main.game);

this.main.canvasIndex = 20;

}

Loading

// add the loading interface to scene
this.stage.addChild(this.main.loadingView);
//read the resources
await RES.loadGroup(“game”, 0, this.main.loadingView);
//remove the interface
this.stage.removeChild(this.main.loadingView);

>Add the images in interfaces

Image for post

Create LoadingUI2

Image for post

Main

loadResource()

this.loadingView = new LoadingUI2();

Image for post

MainMenu

Image for post

> Singleton Pattern and Create JSON

An implementation of the singleton pattern must:

ensure that only one instance of the singleton class ever exists;

and provide global access to that instance.

JSON is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a language-independent data format and a very common data format, with a diverse range of applications.

> Basic concepts of game design and game development:Separate data and logic

{
“playV”: 30, ”:”player’s speed”,
“zdV”: 10, ” :” Bullet rotational speed”
}

Create JSON file and import resources

Image for post

What are the coolest projects you saw from people using Egretia engine?

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 6

This is the sixth part of Egretia Engine tutorial, showing how to build a space shooter game!

Part 1 https://bit.ly/32xy7r3

Part 2 https://bit.ly/2CV2CfC

Part 3 https://bit.ly/39uicLD

Part 4 https://bit.ly/3jJui8p

Part 5 https://bit.ly/31boR9Q

Demonstration

>Lasers

public dx:number;

public dy:number; // Offset value based on player coordinates

public static fi:number = 0 ; // animation frames of laser

//Type

case 10:

//build a picture frame

this.im=Main.createBitmapByName(“pzd4”+ZD.fi+”_png”);

/insert a picture after every shooting

ZD.fi++;

if(ZD.fi >= 10) ZD.fi = 0;

this.addChild(this.im);

//shoot once every pass of main loop, the distance is 80

this.vy = -80; //-80 upwards

this.vx = 0 ;

this.dx = this.dy = 0 ;

this.n = 0;

break;

update():

//the special one will be scheduled in advance and automatically executed. The “return” will show up when it finishes.

if(this.id == 10){

//the distances between planes and them

this.dx +=this.vx;

this.dy +=this.vy;

//offset value:base value+offset

// coordinates of laser is base coordinates and changes

this.x = this.game.player.x + this.dx;

this.y = this.game.player.y + this.dy;

// test whether it’s off-screen

if(this.y < -100 ){

this.vis = false;

}

return;

}

>Tracking bullet

Demonstration

Version:1.0 StartHTML:000000275 EndHTML:000053955 StartFragment:000021508 EndFragment:000053873 StartSelection:000021508 EndSelection:000053869 SourceURL:https://medium.com/egretia/create-a-space-shooter-game-egretia-engine-tutorial-for-beginners-part-6-a93d80fc08de Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 6 | by Egretia Io | Egretia | Aug, 2020 | Medium

1)NPC:

NPCManager

//obtain NPC

public getNPC():NPC{

//length>0,NPC exists; if no, bounce off

if(this.nm.length > 0 ){

//if there is npc, choose one randomly

let npc = this.nm[Math.floor(Math.random()* this.nm.length)]

// decide whether NPC stays in the screen or not

if(npc.x > 0 && npc.x < 480 && npc.y > 0 && npc.y < 800){

return npc;

}

}

//no findings, null

return null;

}

2)calculate the angle to hit NPC
3)update the angle

Apply
public npc:NPC; //the target

/track the bullet

case 20:

this.im = Main.createBitmapByName(“pzd1_3_png”);

this.npc = null;

break;

update()

// the special one will be scheduled in advance and automatically executed. The “return” will show up when it finishes.

if(this.id == 20){

let bn = 0 ; //target angle: upward

if(this.npc == null){

this.npc = this.game.nm.getNPC();

}else{

bn = Math.atan2(this.npc.x -this.x,this.y-this.npc.y);

// This angle is in radians, which will be converted into angle values

bn = bn * 180/ Math.PI;

}

//N angle limit: -180°~180°

while(this.n <= -180)

this.n += 360;

while(this.n > 180)

this.n -= 360;

//if the angle difference is below 5, the two angles are approximately identical

if(Math.abs(this.n — bn) < ZD.VN){

this.n = bn;

}else{

//

if(this.n < bn){

if(this.n < bn — 180)

this.n -= ZD.VN;

else

this.n += ZD.VN;

}else{

if(this.n > bn + 180)

this.n += ZD.VN;

else

this.n -= ZD.VN;

}

}

// convert into angle values

// refresh the speed and angle

this.vx = this.v * Math.sin(this.n * Math.PI / 180);

this.vy= -this.v * Math.cos(this.n * Math.PI / 180);

this.im.rotation = this.n;

this.x +=this.vx;

this.y +=this.vy;

//test the border

if(this.x < -100 || this.x > 580 || this.y < -100 || this.y > 900){

this.vis = false;

}

return;

}

while(this.n <= -180)

this.n += 360;

while(this.n > 180)

this.n -=360;

//track the bullet

this.t++;

if(this.t >= 10){

this.game.zm.create(20,this.x,this.y,15,135,this.game);

this.game.zm.create(20,this.x,this.y,15,-135,this.game);

this.game.zm.create(20,this.x,this.y,15,45,this.game);

this.game.zm.create(20,this.x,this.y,15,-45,this.game);

this.t = 0 ;

}

> The cases of players

0 exit the game
1 playing the game
10 win the game and wait
11 win the game and exit

switch(this.m){

case 0 :

this.y -=this.v;

if(this.y <= 400){

this.m =1;

this.t = 0 ;

}

break;

case 1 :

this.fire();

this.movePlayer();

break;

case 10:

this.t++;

if(this.t >= 20){

this.t = 0;

this.m = 11;

}

break;

case 11:

this.y -=this.vy;

this.vy +=3;

if(this.y < -200){

// the switch of winning the game

}

break;

}

MovePlayer

public movePlayer(){

if(this.isDown == true ){

let a = this.ny — this.oy;

let b = this.nx — this.ox;

let c = Math.sqrt(a*a + b*b);

if( c > this.v){

this.vx = this.v*b/c;

this.vy = this.v*a/c;

this.ox += this.vx;

this.oy += this.vy;

}else{

this.vx = b;

this.vy = a;

this.ox = this.nx;

this.oy = this.ny;

}

// plane will set off at the speed

this.x +=this.vx ;

this.y +=this.vy ;

//test the border

if(this.x < 0)

this.x = 0;

else if(this.x > 480)

this.x = 480;

if(this.y < 0)

this.y = 0;

else if(this.y > 800)

this.y = 800;

}

else{

this.vx = 0;

}

if(this.vx < 0 ){

//fly towards the left side:

if(this.fi > -2)

this.fi — ;

}else if(this.vx > 0)

{

if(this.fi < 2)

this.fi++;

}

else{

this.fi = 0 ;

}

this.resetFI();

}

>public isHit(x:number , y:number):boolean{}

public isHit(x:number , y:number):boolean{

// this.x this.y is the center of a circle, 60 is radius

// Formula of the distance between two points

if(this.bhT > 0 ){

if((this.x -x )*(this.x -x ) + (this.y -y )*(this.y — y ) < 60*60){

return true;

}

return false;

}

if(this.m !=1)

return false;

if(Math.abs(this.x — x) < 20 && Math.abs(this.y -y )<20){

//death of players

return true;

}

return false;

}

add

public dead(){

for(let i = 0 ; i < 10 ; i++){ //ring

let dn =Math.random()*Math.PI * 2;

for(let j = 0 ; j < 15 ; j ++) //the bombs of each ring

{

this.game.tm.create(0,

this.x + (i+1)*30* Math.sin(dn+Math.PI*2*j/15),

this.y + (i+1)*30* Math.cos(dn+Math.PI*2*j/15),

i,Math.random() * 10 +5,this.game);

}

}

this.x = 240;

this.y = 1000;

this.m = 0 ;

this.t = 0;

}

> Players’ Shield

public bh:egret.Bitmap; // shield photo
public bhT:number; // shield timer: last 3 seconds
this.bh.anchorOffsetX = this.bh.width/2;
this.bh.anchorOffsetY =this.bh.height/2;
this.addChild(this.bh);
this.bh.scaleX = this.bh.scaleY = 0.5;
this.bhT = 60; // three seconds for 60 passes of main loop

Update;
//shield effective time>0. Visible = false when it comes to 0

if(this.bhT > 0 ){

this.bhT — ;

if(this.bhT <=0){

this.bh.visible = false;

}

}

NZDManager

if(this.game.player.isHit(one.x , one.y) ==true ){

one.vis = false;

if(this.game.player.m == 1 && this.game.player.bhT <= 0 ){

this.game.player.dead();

}

}

this.bhT = 60;
this.bh.visible = true;

> Win the game and Game level switch

BOSS0

public dead(){

for(let i = 0 ; i < 10 ; i++){ //ring

let dn =Math.random()*Math.PI * 2;

for(let j = 0 ; j < 15 ; j ++) //the number of bombs of each ring

{

this.nm.game.tm.create(0,

this.x + (i+1)*30* Math.sin(dn+Math.PI*2*j/15),

this.y + (i+1)*30* Math.cos(dn+Math.PI*2*j/15),

i,Math.random() * 10 +5,this.nm.game);

}

}

this.nm.game.player.win();

}

//pass

public win(){

this.t = 0 ;

this.m = 10; //Player will fly off the screen after victory

}

2)Level switch
Maingame:

apply public level:number; // to figure out the current level
construct:this.level = 0;

Maingame:

public reset(level:number)

{

this.level = level;

this.player.reset();

this.bg.reset();

this.nm.reset();

}

BG

public reset(){

switch(this.game.level){

case 0:

for(let i = 0 ; i < 2; i ++){

this.bg[i].texture = RES.getRes(“bg11_jpg”);

}

break;

case 1:

for(let i = 0 ; i < 2; i ++){

this.bg[i].texture = RES.getRes(“bg31_jpg”);

}

break;

}

}

NPCManager

//clean out

public reset(){

//the total length. To find out all the bullets by circulation

for(let i = 0 ; i < this.nm.length ; i++){

//find out every bullet

let one = this.nm[i];

this.removeChild(one);

this.nm.splice(i ,1);

i — ;

}

this.t =0;

this.cID = 0;

}

Player

public dead(){

for(let i = 0 ; i < 10 ; i++){ //rings

let dn =Math.random()*Math.PI * 2;

for(let j = 0 ; j < 15 ; j ++) //the number of bombs for each ring

{

this.game.tm.create(0,

this.x + (i+1)*30* Math.sin(dn+Math.PI*2*j/15),

this.y + (i+1)*30* Math.cos(dn+Math.PI*2*j/15),

i,Math.random() * 10 +5,this.game);

}

}

this.x = 240;

this.y = 700;

this.m = 0 ;

this.t = 0;

this.bhT = 60;

this.bh.visible = true;

}

public reset(){

this.isDown = false;

this.x = 240;this.y = 1000;

this.m = this.t = 0;

this.bhT = 60; //it will take 3 seconds for 60 passes of main loop

}

What are the coolest projects you saw from people using Egretia engine?

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 5

This is the fifth part of Egretia Engine tutorial, showing how to build a space shooter game!

Part 1 https://bit.ly/32xy7r3

Part 2 https://bit.ly/2CV2CfC

Part 3 https://bit.ly/39uicLD

Part 4 https://bit.ly/3jJui8p

Demonstration

Image for post
Image for post
Image for post

Programming

>Explosion

1)TX

public id:number; //Type

public vis:boolean; //vis is necessary in Factory pattern

public fi:number; //which animation frame it will play

public t:number; //timer, such as three passes of main loop

public m:number; //state

public l:number; //how long it will last

public tm:TXManager; // parent pointer

Constructor:

if(this.t > 0){

// it will be invisible in the storage system

//0 means “Get ready”, 1 means “Play”

this.visible = false;

this.m = 0;

}else{

this.visible = true;

this.m = 1 ;

}

TX

“`c

class TX extends egret.Sprite{

public im:egret.Bitmap;

public id:number; //Type

public vis:boolean; // vis is necessary in Factory pattern

public fi:number; // which animation frame it will play

public t:number; // timer, such as three passes of main loop

public m:number; //state

public l:number; // how long it will last

public tm:TXManager; // parent pointer

public constructor(id:number,x:number, y:number,

t:number,l:number,tm:TXManager) {

super();

this.id = id;

this.x = x ;

this.y = y;

this.t = t;

this.l = l;

this.m = 0;

this. fi = 0 ;

this.vis = true; // =false , the objects will disappear in the factory

this.tm = tm;

this.im = Main.createBitmapByName(“tx1_1_png”);

this.anchorOffsetX = this.im.width/2;

this.anchorOffsetY = this.im.height/2;

this.addChild(this.im);

if(this.t > 0){

//it will be invisible in the storage system

//0 means “Get ready”, 1 means “Play”

this.visible = false;

this.m = 0;

}else{

this.visible = true;

this.m = 1 ;

}

}

public update(){

switch(this.m ){

//

case 0:

//timer

this.t — ;

if(this.t <=0 ){

//explode

this.visible = true;

this.m = 1; //play

}

break;

case 1 :

//start the animation

this.fi++;

//

if(this.fi >= this.l){

this.vis =false; //object destruction

}else{ //if it’s not over, switch frame

//switch frame: fi from 0 to 9,

//10 is the number of photos, fi is the animation frame, 1 is the length

this.im.texture = RES.getRes(“tx1_”+Math.floor(this.fi*10/this.l + 1)+”_png”);

}

}

}

}

TXManager

class TXManager extends egret.Sprite{

public tm:Array<TX>; //Array: to add or remove objects

public game:MainGame;

public constructor(game:MainGame) {

super();

this.game = game;

this.tm = new Array();

}

//each create needs one new

public create(id:number,x:number,y:number,t:number,l:number,game:MainGame){

//create bullet

let one = new TX(id,x,y,t,l,this);

// add to the world

this.addChild(one);

//put it at the end of array

this.tm.push(one);

}

//find out and update all the bullets

public update(){

//the total length of storage system. Find out all of bullets by loop

for(let i = 0 ; i < this.tm.length ; i++){

// find out each bullet

let one = this.tm[i];

one.update();

//the extra bullets need to be removed

// bullets are out of screen ,vis == false.remove

if(one.vis == false){

//remove it from the scene firstly

this.removeChild(one);

//then remove it from storage system

this.tm.splice(i ,1);

//remove an object,length -1

i — ;

}

}

}

}

ZDManager

if(npc.hp <= 0 ){

for(let k = 0 ; k < 10 ; k ++){ //-50 to +50

this.game.tm.create( 0, npc.x + Math.random()*100 -50 ,

npc.y + Math.random()*100 -50 ,

Math.floor(Math.random() * 5), 10,this.game);

}

npc.vis = false;

Image for post

>Effects of explosion

Add the following codes to NPC0,1

public dead(){

for(let k = 0 ; k < 10 ; k ++){

this.nm.game.tm.create( 0, this.x + Math.random()*100–50 ,

this.y + Math.random()*100–50 ,

Math.floor(Math.random() * 5), 10,this.nm.game);

}

}

then

Image for post

>BOSS0

class BOSS0 extends NPC{

public im:egret.Bitmap;

public m:number;

public t:number;

public constructor(x:number,y:number,nm:NPCManager) {

super(nm);

this.x = x ;this.y = y;

this.im = Main.createBitmapByName(“boss50_png”);

this.im.anchorOffsetX = this.im.width/2;

this.im.anchorOffsetY = this.im.height/2;

this.addChild(this.im);

this.m = this.t = 0;

this.hp = 1000;

}

public update(){

}

public isHit(x:number,y:number):boolean{

return false;

}

public dead(){

}

}

Add BOSS

switch(this.m){

//where boss stops

case 0:

this.y+=10;

if(this.y >= 150){

this.t = 20 ;

this.m = 1;

}

break;

//break

case 1:

this.t — ;

if(this.t <=0){

this.m = 10;

this.t = 0 ;

}

break;

//set off the bullet

case 10:

this.t++;

// fire a single bullet every three passes of main loops

if(this.t % 3 == 0 ){

for(let i = 0 ; i < 5 ; i++){

//bullets in five rows

//160+i*10 fire a single bullet every angle of 10

this.nm.game.nzm.create(1, this.x, this.y, 10 ,160+i*10,this.nm.game );

}

}

if(this.t >= 20){

this.t = 10;

this.m = 1;

}

break;

}

Single bullet

Image for post

Round-shaped bullet

Image for post

//fire the bullet

case 10:

this.t++;

//fire a single bullet every three passes of main loop

if(this.t % 3 == 0 ){

for(let i = 0 ; i < 36 ; i++){

//bullets in five rows

//160+i*10 fire a single bullet every angle of 10

this.nm.game.nzm.create(1, this.x, this.y, 10 ,160+i*10,this.nm.game );

}

}

if(this.t >= 20){

this.t = Math.random()* 20 + 10;

this.m = 1;

}

break;

Swirl Bullet

Image for post

case 11:

this.t++;

// the angle of bullets will change as t++ alters

this.nm.game.nzm.create(1, this.x, this.y, 10 ,180+this.t*10,this.nm.game ); //

Counterclockwise

this.nm.game.nzm.create(1, this.x, this.y, 10 ,180 — this.t*10,this.nm.game ); // clockwise

//fire the bullet every angle of 10

if(this.t >= 36){

this.t = Math.random()* 20 + 10;

this.m = 1;

}

break;

Matrix bullet

Image for post
Image for post
Image for post

case 12:

this.t++;

//15,16,17,18,19 fire 5 bullets

if(this.t % 20 > 14){

for(let i = 0 ; i < 5 ; i++){

// fire a row every 20 degrees, 5 bullets from 130 degrees

//this.t/10,the result of top ten:10,11,12,13 when it comes to 1,the length = roundness*20

this.nm.game.nzm.create(1,this.x,this.y,10,Math.floor(this.t/20)*20 +130+i*5,this.nm.game );

// fire 5 bullets at 135 degree

}

}

if(this.t >= 100){

this.t = Math.random() * 20 + 10;

this.m =1 ;

}

break;

Whip-shaped bullets

Image for post

// Whip bullet

case 13:

this.t++;

// the speed will increase as the time changes

this.nm.game.nzm.create( 1, this.x — 50, this.y, 6 + this.t *2 ,190 — this.t,this.nm.game );

this.nm.game.nzm.create( 1, this.x+50, this.y, 6 + this.t *2 ,170 + this.t,this.nm.game );

if(this.t >= 10){

this.t = Math.random() * 20 + 10;

this.m =1 ;

}

break;

Bullets Based on Orientation

Image for post

Code:

Image for post

// if n is null or empty, there is no value assigned

if(!n){

n = Math.atan2(this.game.player.x — x,y — this.game.player.y);

//note: convert the radians to degrees

n = n * 180/Math.PI;

}

BOSS0

//bullets based on orientation

case 14 :

this.t++;

// fire the bullets every ten passes of main loop

if(this.t % 10 > 4){

this.nm.game.nzm.create( 1, this.x — 50, this.y, 15);

}

if(this.t >= 50){

this.t = Math.random() * 20 + 10;

this.m =1 ;

}

break;

Random bullets

case1 this.m = Math.floor(Math.random() * 5 ) + 10; //random bullets

>Collision detection of irregular shapes

Image for post

W 146 H166 73,83 pixels

Image for post

What are the coolest projects you saw from people using Egretia engine?

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 2

This is the second part of Egretia Engine tutorial, showing how to build a space shooter game!

Part 1 https://bit.ly/32xy7r3

Demonstration

Programming

>Bullet

Image for post

Speed principle:

Image for post

Error

Image for post

Wrong code

Image for post

Correction:

1this.bg = new BG(this);

2this.player = new Player(this);

3// x,y, speed,angle

4this.zd = new ZD(this.player.x,this.player.y, 20 ,30,this);

5

6this.addChild(this.bg);

7this.addChild(this.zd);

8this.addChild(this.player);

9

>Factory Pattern

Core: objects creation

In Factory pattern, we create object which will be stored in the factory’s storage system.

New object creation will be allocated and returned in the storage system, but the objects will be removed when certain conditions are met.

If you use the factory pattern to manage object, the object must have a property:

The visible (vis) property: The boolean type represents whether it can still be stored in the factory.

vis== false. This object will be removed in order to ensure that storage system is not full

vis == true means that it can be stored.

Bullet update:

Image for post

>ZDManager

1public create(x:number,y:number,v:number,n:number,game:MainGame){

2 //create bullet

3 let one = new ZD(x,y,v,n,game);

4 //add

5 this.addChild(one);

6 // to the end of array

7 this.zm.push(one);

8 //

9 }

Update principles

1public update(){

2 // the total length

3 for(let i = 0 ; i < this.zm.length ; i++){

4 // find each bullet

5 let one = this.zm[i];

6 one.update();

7 // remove the extra bullets

8 // if bullet is off the screen ,vis == false, remove

9 if(one.vis == false){

10 //remove it from the scene

11 this.removeChild(one);

12 //remove it from the storage system

13 this.zm.splice(i ,1);

14 //remove one item, the length -1

15 i — ;

16 }

17 }

18}

Maingame update principles

1 public update()

2 {

3 this.bg.update();

4 this.player.update();

5 this.zm.update();

6 //time interval

7 this.t++;

8 if(this.t >= 4){

9 //after the creation is called, the bullet will occur

10 //add two more ballistic paths, there are five paths in total

11 this.zm.create(this.player.x,this.player.y,20,0, this );

12 this.zm.create(this.player.x,this.player.y,20,-15, this );

13 this.zm.create(this.player.x,this.player.y,20,-30, this );

14 this.zm.create(this.player.x ,this.player.y,20,15, this );

15 this.zm.create(this.player.x,this.player.y,20,30, this );

16 this.t = 0;

17 }

18 }

What are the coolest projects you saw from people using Egretia engine?

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 3

This is the third part of Egretia Engine tutorial, showing how to build a space shooter game!

Part 1 https://bit.ly/32xy7r3

Part 2 https://bit.ly/2CV2CfC

Demonstration

Programming

>Different types of bullets

Image for post

>Frame in Animation(bullets)

Image for post

>Bullet control

Image for post

> Increase players’ shooting techniques

Image for post

What are the coolest projects you saw from people using Egretia engine?

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/

Create A Space Shooter Game | Egretia Engine Tutorial For Beginners Part 1

Have you built a game by using Egretia engine? Here is an example from our developer community.

Demonstration

Image for post

Programming

>Make a scrolling background

class BG extends egret.Sprite{

public bg:egret.Bitmap[] = [];

public fg:egret.Bitmap; //foreground

public vy:number; //scroll speed

public game:MainGame; //previous pointer

public constructor(game:MainGame) {

super();

this.game = game;

for(let i = 0 ; i < 2; i ++){

this.bg[i] = Main.createBitmapByName(“bg11_jpg”);

this.addChild(this.bg[i]);

//background position

this.bg[i].y = 0 — i* this.bg[i].height;

}

this.vy = 10; //scroll speed

}

public update(){

for(let i = 0 ; i < 2; i++){

//scroll down

this.bg[i].y+=this.vy;

// background images will be repeated once they move off the screen

if(this.bg[i].y > 800){

// the height of the background images indicates how much to scroll

this.bg[i].y -=2*this.bg[i].height;

}

}

}

}

The foreground is randomly composed of three different images

public resetFG(){

//Random 0~2 0 high ladder,1,2

let id = Math.floor(Math.random()*3);

switch(id){

case 0 :

this.fg.texture = RES.getRes(“bg12_png”);

if(Math.random()*100 < 50){// conspectus of 50%, left or right

this.fg.scaleX = -1;

this.fg.x = 480;

}else{

this.fg.scaleX = 1;

this.fg.x = 0;

}

break;

case 1:

this.fg.texture = RES.getRes(“bg13_png”);

this.fg.x = 480 — Math.random()*184;

this.fg.scaleX = 1;

break;

case 2 :

this.fg.texture = RES.getRes(“bg13_png”);

this.fg.x = Math.random() * 184;

this.fg.scaleX = -1;

break;

}

this.fg.y = -500 — Math.random()*100;

}

>Players control

Image for post

Trajectory principle:

Image for post
Image for post

What are the coolest projects you saw from people using Egretia engine?

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 Bi-weekly Report XXXII

Image for post

Summary:

》The new version of Egretia Engine release!

》Bitcoin Pizza Party

》YouTube Review of EGT

Image for post

Technology Development

Egretia Engine Upgrade! A big boost in compiling speed!

Here we will introduce some features, including JavaScript Module Support, upgraded EUICompiler and Inspector updates

JavaScript Module Support (beta)

We allow developers to use JavaScript module and meanwhile provide a webpack packager which can package the multiple files of JavaScript module into one file so that it can run on the previous browser without supporting JavaScript.

The Upgraded EuiCompiler (beta)

The UI and related logic are one of the most workload-intensive parts in games developed by Egretia Engine. In the new version, we have comprehensively improved the UI development experience and upgraded UIEditor whose internal code structure is much clearer and more extensible.

Inspector Updates

1.Fix the error that TOUCH_END event doesn’t work

2.Fix the issue that selection is still available when it shows visible=false

3.Fix the problem that it cannot be parsed correctly when there are special symbols in the URL path of the game.

Community

EGT Bounty Campaign

To celebrate Bitcoin Pizza Day, Egretia has given away 18,888 EGT *1 and 8,888 EGT *2 which attracted many participants to share their bitcoin stories in our telegram community. In the coming future, Egretia will adopt the incentive mechanism to encourage more people to interact with us and foster a robust gaming ecosystem.

Image for post

YouTube Review of EGT

Here comes a Russian video regarding Egretia for our overseas community, check it out: https://twitter.com/Egretia_io/status/1277801690343735296?s=20

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/