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/