Egret is what

Egret is a great tool to help you develop your H5 games. Maybe you’ve written some small games in native JS, but it was extremely inefficient. I’ve done this with CreateJS, but it’s too complicated for me, so I need to learn to use the more advanced tool 💪 (egret). It is a great release of your hands, can help you better and faster development of a small game (who uses who knows 😋). I’m not going to compare it to other game engines here, it’s like React and Vue, it doesn’t matter which one you choose, as long as you’re good with one.

How do you learn? In fact, the official website documentation has been written very detailed and very clear, there are examples and tutorials, but you will not read half a moment, a few eyes will 😪😪😪… But never mind, as long as you’ve watched this tutorial, you’ve stepped through the door to the world of Egret (great blowing, actually barely touching the threshold 😂).

So the goal of this article is to get you up to speed on egret and having your own project, show you some things you need to know to get started, and the rest you can scroll through the documentation… Ok 👌, here we go 🚗🚗🚗.

The official documentation address: developer.egret.com/cn/docs/pag…

Environment preparation (don’t think this step is too fancy, it’s just a download)

Step 1: All things download first, we just click the following link to download and then install. Engine EgretLauncher library management tool: www.egret.com/products/en…

Step 2: Open EgretLauncher, switch to the engine panel, and click the latest stable version of the engine to download, as shown below:

Step 3: Switch to the tools panel and click Install Egret Wing 3 (editor). This may require an account to log in. If you don’t have one, just sign up.

Create a project quickly

Ok, so that’s all you need to download. Now we will create our own project as quickly as possible. Open EgretLauncher, switch to project panel, click Create Project, a dialog box will pop up, enter the project name, select the project address, select fixedWidth for zoom mode (showAll adaptation mode is not supported in small games, fixedWidth is recommended), and leave the rest unchanged. Click the bottom right corner to create. Such a project is born (just as vue Init initializes the project).

Then open the project with Egret Wing 3 (editor) and regardless of what it says, click on the debug icon in the top left corner (the one that looks like ladybug 🐞) to run the project. In the pop-up game screen, you can see that the background image is elongated (because the zooming mode is changed to fixedWidth). It doesn’t matter if you don’t understand it, because the original thing is usually redundant, and the rest of it will be deleted.

At this point, the project is created and the tutorial is over (this person needs to beat 😠😠😠). Next, I will explain the two commonly used directories in the project (in fact, a lot of things we do not need to care about, and vue is quite similar). I feel like writing games, setting and logic are the most important. The most important part of the scenario is the resource, which is represented in the Resource folder, and the logic in the SRC folder. Let’s take a quick look at the Resource directory.

The resource directory

As shown in the picture above, this folder is mainly used to store all the resources used in the project (audio, video, pictures, etc.), we just need to drag or copy the materials used into the folder, and there is no need to care about other things, Egret has handled all of them for us. If there are too many resources, you can create several folders in the Resource directory and divide them into classes to make it clearer. Note that the resource name should be unique because ultimately we all read the resource the same way (i.e., the same API,RES.getRes('resourceName'), the parameter is the resource name).

In the blue part of the figure above, there are commonly used components (such as buttons), such as the element component introduced in Vue. But there is a big difference is that this is a game, the general game will have its own unique design, these built-in components are not necessary, to exaggerate if your game is written with its own components, then every game style is the same, how to attract the attention of the player. So you can take a look at the built-in components and either delete them or ignore them, but it’s not necessary.

And then there isdefault.res.jsonThis file, for now, you just need to know that it’s a description of all the resources that we’re importing, so don’t worry too much about it.

SRC directory

This directory is much simpler, we only need to focus on the entry file main. ts, and forget the other files, at least I haven’t touched these files since I wrote two or three game demos 🤷♀️🤷♂️.

As shown above, we only need to look at the two main steps in this file. One is resource loading (which you don’t have to worry about because you don’t have to touch it when you’re writing code, but check it out). The other is where we really look, where we actually write the code. increateGameSceneThe main thing in this method is to add elements (such as background, rectangle, icon, text, etc.) to the image. It’s like createJS (a Canvas library, just like jQuery for JS). You create a new object, set various properties, and then add it to the container or stage. So this is the idea.Of course, if the game logic is more complex, we can create a new TS file in the SRC directory. If the game logic is less, it is ok to write directly in this function. With Egret you don’t have to worry about how resources are loaded and handled (that’s a big deal 👏👏👏), we can just focus on writing the game logic (atcreateGameSceneIt is a great experience to reduce the burden of developers.

The most commonly used apis (must master, others slowly)

About text

let label:egret.TextField = new egret.TextField(); 
label.text = "hello world!"; 
Copy the code

About the picture

let img:egret.Bitmap = new egret.Bitmap();
img.texture = RES.getRes("imgName");
Copy the code

About the shape

// Draw a red rectangle
let shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000.1);
shp.graphics.drawRect( 0.0.100.200 );
shp.graphics.endFill();
Copy the code

About the sound

let sound:egret.Sound = RES.getRes("mp3Name");
sound.play();
sound.stop();
Copy the code

About the event

// Touch events (equivalent to clicking)
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
Copy the code

About the timer

// The parameters are time interval (ms) and execution times
let timer:egret.Timer = new egret.Timer(500.5); 
// Trigger while timing
timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this);
// The timer ends the trigger
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this);
// Start the timer
timer.start();
// Pause the timer
timer.stop();
// Restart the timer
timer.reset();
Copy the code

About Data Storage

// Store data
let key:string = "score";
let value:string = "100";
egret.localStorage.setItem(key, value);
// Read the data
let score:string = egret.localStorage.getItem(key);
// Remove data
egret.localStorage.removeItem(key);
// Clear all data
egret.localStorage.clear();
Copy the code

Tips:

1, write code needs to use TS (standard JS) for development. Egret game is 30 frames by default. Most apis start with Egret, and RES is used to read resources. 4, sometimes you changed the code does not take effect or suddenly error, don’t panic, try to restart the method. 5. The unit of length is pixels. 6. Each Egret should have one and only one stage (the Stage object). The stage is the most fundamental display container in Egret’s display architecture. The origin of the stage coordinates is in the upper left corner.

conclusion

The above is you must learn the engine to master a few knowledge points, if you have time, or suggest you put the document roughly over, at least you know what exists, later when you use to find the document to look at writing, is also ok. Of course, all talk and no practice of fake handle, I have been nagging for a long time, you probably still can’t write it, which is quite normal, neither can I, the purpose of this article is just to give you a preliminary impression of Egret, and I will write some tutorials on small games (be sure to practice a few small games, this is the key), after this process, You’ll be able to write your own little games (😏).