Introduction to game development based on laya Air engine

What is HTML5?

HTML5 in a narrow sense

In the eyes of programmers,HTML5 is the fifth major revision of the new standard for Hypertext Markup Language (HTML). After 8 years of hard work, the standard was released by the World Wide Web Consortium in 2014 On October 29, 2016, it was announced that the HTML5 standard specification had finally been finalized. In the past few years, many developers have successively used some technologies of HTML5. Firefox, Google Chrome, Opera, Safari 4+, and Internet Explorer 9+ all support HTML5. What we saw after the announcement is "formal edition".

Generalized HTML5

In the eyes of more people, HTML5 refers to a browser-based web technology product. It is a web product or game that does not require downloading and installation, and can be used (played) with just one click. Usually HTML5 is referred to as H5. Although many people do not think HTML5 and H5 are the same thing, in fact, shortening HTML5 to H5 has become the mainstream among media and HTML5 practitioners.

Hot little games

In 2018, WeChat mini-games exploded. This was not only the emergence of products with monthly sales of tens of millions and billions, but also the crazy influx of developers and the rapid growth of products. At the same time, it also promoted the development of the game profit model that relies on advertising-based traffic monetization.

It also allows most developers who are not very good at making money from in-game purchases to have an opportunity to focus on making fun games, gain recognition from the majority of players, and monetize their traffic at the same time.

In addition, it also stimulated Baidu, QQ Mobile, Xiaomi, OPPO\ViVO and other mainstream platforms to join the mini-game camp. It's very hot.

But, are mini games H5? No.

Although the mini-game also has the characteristics of instant play, no need to download and install, and is compatible with most Canvas and Webgl interfaces, it is not standard HTML5. For example, the running environment of WeChat mini games is not the browser, nor can it be run in the browser, but the Runtime in the WeChat APP.

However, the LayaAir engine can be adapted to these small game platforms. It currently has an adaptation library for WeChat small games, an adaptation library for Baidu small games, and an adaptation library for QQ light games...... Therefore, developers using the LayaAir engine can not only develop HTML5 games, but also publish them as APP games (LayaAir engine), and can also adapt to various small gaming platform.

Opportunities and prospects of HTML5 games

Industry prospects

On PC, Flash has stopped being updated and maintained, and HTML5 has become the new mainstream standard.

On mobile devices, HTML5 games, or mini-games, have become extremely popular. Traffic portals on various platforms have been opened one after another and become a new strategic target.

In particular, HTML5 games using the LayaAir engine can also be released as APP Android APK packages, or put on the iOS appStore. Moreover, the arrival of the 5G era and the acceleration of network speed will solve the loading disadvantages of HTML5, but it will have the advantage of not jumping out of the traffic APP. Naturally, it will be welcomed by more traffic platforms.

In short, HTML5 is already popular. It will be even more popular in the future.

LayaAir

LayaAir is a full-platform 3D engine product released by LAYABOX in 2016, with a full-workflow and efficient development environment. Supports the development of 2D, 3D, VR and AR products. One development can be released as Web, mini-games, and Native APP products at the same time. It has over a million developers and serves many well-known companies. It is the leading domestic Web3D open source engine in the 3D market in the field of Web and mini games. Widely used in many 3D digital fields such as games, advertising and marketing, education, animation, metaverse, digital people, digital twins, smart cities, industrial control, simulations, national defense simulations, online displays (exhibitions, real estate, cultural tourism), etc. . The latest release of LayaAir 3.0 is the world's first AIGC 3D engine.

basic introduction

LayaAir implements 2D and 3D rendering based on the Web 3D graphics API, covering general engine capabilities such as network communication, events and interaction, multimedia playback, device interfaces, and component systems. It has core foundations such as an open programmable rendering pipeline, a full-platform (Web+Native) graphics engine architecture, next-generation PBR rendering flow, ClusterLighting multi-light technology, Forward+ rendering pipeline, and high-performance parallel renderer API access.

The LayaAir engine integrates efficient full-workflow tools such as project creation, visual editing (UI, scenes, animations, materials, particles, physics, blueprints, etc.), resource management, component management, plug-in extensions, and project release, and supports one-time development and full-platform release. , including: Web platform (browser, WebView), mini game platform (Bytedance mini games, WeChat mini games, OPPO mini games, vivo mini games, Xiaomi Kuai Games, Alipay mini games), Native APP platform (Android, iOS ).

By the end of 2022, LayaAir has more than one million professional developers, serving ByteDance, Huawei, OPPO, vivo, Xiaomi, Alibaba, Tencent, NetEase, 37 Interactive Entertainment, Xiaomi, Perfect World, Dianhun Network, Coslight Games, Tom Cat, Cheetah Mobile, Seventh Avenue, Palm Qu Technology, SenseTime, Elite Education, Tuyou and many other well-known companies.

Applicable fields

In addition to supporting full-platform game development such as 2D\3D\VR\AR web games, HTML5, and APP, it can also be used in many fields such as 3D digital technology, metaverse, application software, advertising, marketing, education, and medical care.

development path

• On June 30, 2016, the official version of LayaAir engine 1.0, which supports full-platform 2D/3D development and comes with a UI editor, was released.
• At the end of 2016, the first game "Endless Knight" developed based on LayaAir was launched. It is the world's first 3D ARPG commercial game masterpiece using WebGL graphics API.
• In 2017, a large number of 2D/3D large-scale games based on LayaAir were released:

1. On July 21, 2017, the 3D ARPG game using the well-known novel IP "Snow Eagle Lord" was launched on Tencent Play Bar. The exquisite original painting, gorgeous special effects, combined with the refreshing combat feeling and smooth native-level game performance made LayaAir 3D The engine has received many positive reviews from the industry.
2. On August 3, 2017, the Android version of "All People's Battle" developed by Tencent using the LayaAir engine was launched for public testing on WeChat and mobile QQ platforms.
3. On October 22, 2017, "Archangel's Sword H5" developed by Sanqi Interactive Entertainment using the LayaAir engine was released simultaneously on the Web, Android APP, and iOS APP. Revenue exceeded 100 million in the 24 days after its launch.

• The mini-game market exploded in 2018. As a Web3D game engine with many business cases in China, LayaAir's developer ecosystem increased from 100,000 in 2017 to more than 600,000 at the end of 2018, a net increase of more than 5 times.
• In 2018, "Archangel's Sword H5" released a WeChat mini-game version, marking that the LayaAir engine can support a 2D commercial masterpiece with a revenue of over 100 million.
• LayaAir 2.0 started internal testing on July 5, 2018, and opened public testing on September 15, 2018, fully investing in the research and development of the leading domestic Web3D engine.
• In 2018, there were more than 300 LayaAir 3D engine mini-game cases, including well-known cases such as "Pig Run", "Dancing Line", "Football for All", and "Tencent Table Tennis".
• From 2019 to 2022, LayaAir 2.0 maintains the industry leadership position of Web3D game engine, supporting the development of a large number of 2D and 3D hit products, such as "Eradication of the Virus", "National Gun God Border King", "Cross Fire - Gun Battle King", " "300 Battle", "My Big Sword is 40 Meters", "7th Armored Division", etc.
• On November 8, 2022, LayaAir 3.0 started internal testing. In addition to AI code generation, image generation and other capabilities, 3.0 has filled LayaAir's shortcomings in the 3D editor, completely realizing one-stop development of 2D/3D games and establishing a complete workflow from engine to tool chain. In the underlying engine design layer, LayaAir 3.0 supports a new generation of graphics API - WebGPU. The Native APP layer supports C++ engine algorithms and rendering, as well as developer-defined C++ algorithms.
• On June 30, 2023, LayaAir 3.0 was officially released and is the world’s first AIGC 3D engine.

Product advantages

Deep integration of AI technology

LayaAir 3.0 IDE deeply integrates the latest AI technology, providing users with intelligent help, personalized services and various AIGC functions through a simple text or voice interface, creating AIGC 3D work that is required for project management, planning, art, and programming functions. flow. Relevant AIGC functions include:

Generate AI-like functions

• Logic generation: code generation, blueprint generation, other script generation
• 3D material generation: 3D model generation, model surface reduction, texture generation, billboard generation, sky ball
• 3D character generation: character generation, character real-time expression
• 3D scene generation: scene auxiliary editing, wild giant scene generation
• 2D and UI generation: UI2D material generation, 2D picture generation, automatic generation of UI and scripts based on drafts
• Audio generation: music, sound effects and speech generation

In-engine AI features:

• Rendering: ray tracing AI, small image to large image

In-game AI features

• Virtual players: chatable, non-NPC teammates

Develop assistive AI features:

• Game Testing: Automate Game Testing with AI
• AI project knowledge robot

Ultimate performance

Excellent performance has always been the core pursuit of LayaAir engines, and the goal is to always remain the industry leader.

Leading Web 3D Engine

LayaAir launched its 3D engine in 2016. After years of business case technology accumulation, it is the most mature domestic open source 3D engine based on Web graphics API. It has always been a leader in open source 3D engines in the field of Web and mini games.

Mature and rich tool chain

It has a complete engine and integrated development environment ecosystem. Supports UI editor, 3D scene editor, 3D material editor, 3D particle editor, 3D blueprint editor, animation editor (2D+3D), physical editor (2D+3D), plug-in system, resource mall, etc. Supports the separation of code and art design.

Full platform release

One development can simultaneously release the Web platform (browser, WebView), mini game platform (Bytedance mini games, WeChat mini games, OPPO mini games, vivo mini games, Xiaomi Kuai Games, Alipay mini games), and Native APP platform (Android , iOS).

Wide range of applications

It is suitable for many 3D digital fields such as games, advertising and marketing, education, animation, metaverse, digital people, digital twins, smart cities, industrial control, simulation, national defense simulation, online display (exhibition display, real estate, cultural tourism), etc.

1. LayaAir IDE

Both LayaAirIDE 1.0 and 2.0 are developed by the LayaAir engine and are based on the LayaAir UI system to implement visual UI editing, animation editing, code editing and other functions. They look no different from native desktop software!

2. Burberry WeChat H5 Advertisement

The New Year advertisement for the luxury brand Burberry, developed by Shanghai Biyi using the LayaAir engine, appeared on WeChat Moments and became a hot topic for a while. The entire H5 integrates elements such as personal customization, product display, and New Year greeting advertisements, integrating exquisite picture quality, smooth experience, and excellent video playback performance, showing Burberry's British elegance.

3. Shenzhen Metro Line Map

In 2016, in order to facilitate citizens' travel, Shenzhen Metro used the LayaAir engine to create an online subway operation network route map, which allows citizens to check the travel and transfers between stations in real time, allowing citizens to clearly plan their travel routes.

LayaAir function introduction

The LayaAir engine mainly includes two core parts: engine library and LayaAir IDE.

LayaCloud and LayaNative are the ecological combination parts of the engine

LayaAir2.0 engine library function

The LayaAir 2.0 engine not only maintains the original functions of 1.0, such as:

Sprites, vector graphics, text, rich text, bitmap fonts, animation, bones, audio and video, filters, events, loading, easing, time, network, UI system, physics system, TiledMap, prtocol and other APIs;

It also adds built-in box2D physics engine, component support, and more than 150 3D functions, such as:

The main new official materials include PBRStandardMaterial, PBRSpecularMaterial and UnlitMaterial materials.

In terms of texture, a variety of texture parameter configurations (mipmap, format, wrapModeU, wrapModeV, filterMode, anisoLevel) are added, a texture upload pixel interface is added, and GPU texture compression is added.

In terms of animation, the Animator animation fusion function crossFade is added, the animation multi-layer mixed playback is added, the animation update mechanism is adjusted to real-time interpolation, which greatly reduces the memory and animation fluency performance, and a variety of material attribute animations are added

Support the development of 2D and 3D products, and support simultaneous publishing for Web (browser, webView), Native APP (IOS, Android), mini games (WeChat, Mobile QQ, Baidu, Toutiao, Douyin, Xiaomi, OPPO, vivo, Huawei ), and other versions.

LayaAir2.0 IDE functions

LayaAir2.0 IDE mainly includesproject management, code development editor< a i=4>, Visual editor, Third-party tool chain support toolWait.

The main functions include:

• code development
• UI and scene editor
• Scene management (new in 2.0)
• Particle Editor
• animation editor
• Physics Editor (new in 2.0)
• Component support (new in 2.0)
• 3D support (new in 2.0)
• LayaCloud project support (new in 2.0)
• Script extension
• Default
• APP packaging
• JS obfuscation and compression
• Third-party tool chain conversion tools (Unity3D, TiledMap, Spine, Keel...)

Laya2.0 IDE is compatible with the writing method of LayaAir 1.x version. In 2d projects, the original project can be upgraded to the 2.0 engine without much change (it is recommended to back up before upgrading)

Laya2.0 IDE is developed by mounting component scripts and scene management. Scenes and page components are edited in the IDE. By adding scripts, project development is more conducive to the collaborative work of programs, art, and planning, and it is also helpful for first-time contacts. For Laya developers, it is easier to get started and the development method is more friendly.

LayaNative function

LayaNative is a complete development solution for the development, testing, and release of mobile native apps for the LayaAir engine, but it is not limited to the LayaAir engine. Based on LayaPlayer as the core runtime, LayaNative uses the reflection mechanism and channel docking solution to provide developers with secondary opening and channel docking on the native App, and provides testers and construction tools to package and publish HTML5 projects for developers. Conveniently turned into a native App.

LayaNative2.0 has undergone code reconstruction, and its performance has been greatly improved compared to version 1.0.

1. Compare LayaNative1.0

	2D	3D
Android	Increase 10%	90% improvement
IOS	13% improvement	270% improvement

2. Compare with other domestic general runtime engines

	2D	3D
Android	85% improvement	90% improvement
IOS	240% improvement	270% improvement

In terms of expansion

1. LayaNative 2.0 supports single-threaded and dual-threaded modes. Developers decide which mode to use based on the actual test results of their own projects.

Single-threaded mode: JS and Render run in one thread.

• • Advantages: No delay in operation (for example: touch, button).
  • Disadvantages: Performance is not as good as dual-threaded mode.

Dual-threaded mode: JS and Render run in separate threads.

• • Advantages: Higher performance than single-threaded version.
  • Disadvantages: There will be a half-frame delay for operations, up to one frame (for example: touch, button press).

2. Supports graphics card texture compression, which not only improves rendering efficiency but also reduces video memory usage.

3. Optimized secondary development, easier to understand and convenient for developers to use.

In terms of ease of use, provide more convenient debugging functions

Android platform can debug JavaScript on real machine

In the LayaNative1.0 version, you can only call the console.log or alert function to debug the JavaScript code in the project. In layaNative2.0 version, debugging JavaScript code using Chrome browser is officially supported. You can add breakpoints, code tracking and other functions to the code in Chrome's debugger.

Test App supports scanning QR code to start projects

In order to allow developers to debug and develop faster, the new version of the test App adds the function of scanning the QR code to launch the App, eliminating the need to manually enter the URL during debugging.

other

For a more detailed introduction to the new features of 2.0, you can view Layabox’s WeChat public account article:https://mp.weixin.qq.com/s/lHI3tCozcFd_8fZ1PFJ8Xg

If there are bugs or suggestions about the engine and tools during the development process, please visit the community to submit them:http://ask.layabox.com

 LayaAir engine quick start guide [must read for newbies]

For developers who are new to the LayaAir engine, this article provides some learning guidelines. Welcome to read.

1. How to choose a development language

Since the LayaAir engine supports development in three languages: ActionScript3 (AS3), TypeScript (TS), and JavaScript (JS), which language is better? It often confuses novices who are new to the engine. Here is a brief introduction.

About JS language

What everyone needs to pay attention to is that although JS language is easier to get started, as a weakly typed language, the difficulty of development and debugging, as well as the management of large projects and multi-person collaboration, are not as good as TS and AS3, which can be detected in IDEs. Types and grammatical languages. When there are more and more codes, once JS is accidentally written incorrectly, there will be no prompt in the IDE. The problem will only be discovered when running. Developers often spend a lot of time just to check a small mistake. Time costs. Therefore, although JS language development is supported, it is not recommended to use this language for the development of medium-sized or large-scale projects.

About TS language

TS language is the officially recommended development language of the LayaAir engine. It is also the language used by the LayaAir engine source code starting from the 2.2 engine. In the official 2.0 engine video teaching, only TS language will be used for teaching.

About AS language

AS language is the engine source code language before LayaAir version 2.2. AS3 language was once the dominant language in the era of web games, but since Adobe officially announced that it will abandon Flash, it also means that the language will also enter a situation where no one is maintaining it. Those new language features are naturally difficult to support. There is no doubt that continuing to use this language will hinder the engine. Therefore, the source code language of the LayaAir engine has been changed, but the 2.X engine and AS language version will still remain compatible and maintained. But 3.x will definitely give up support for this language in the future. Therefore, it is recommended that developers do not use AS language when creating new projects.

Local development environment reminder

Although many developers have installed the global development environment of TS, in this article, it is still recommended that developers execute the npm local environment installation command again under the shell command line of VSCode npm install to ensure the normal operation of engine compilation.

The Gulp global environment also needs to be installed. LayaAir developers will basically install it. If not, you can check the official Layabox documentation, which I won’t go into here.

VSCode related documents: "VSCode Efficient Development Workflow Configuration Guide"

3.3 LayaAir source code project structure description

Use VSCode to open the cloned LayaAir engine directory. After installing the local development environment, the root directory structure is as shown in the figure below.

 3.3.1 binmemory

The bin directory is the running directory after source code compilation. It is used for quick switching and debugging of engine examples, including two compilation methods for js library debugging. tsc androllUp. By viewing and debugging the test example DEMO here, verify whether the engine has any bugs that affect its operation.

General resource directoryres and 3D physics js will not be explained in detail here, let’s focus on ittsc androllup entry file.

tsc debugging related

tsc debugging mode is the default debugging mode configured for the LayaAir open source project. When using F5 to debug in VSCode, it will automatically compile in tsc mode, and the released js will be in bin /tsc directory. indexTSC.html is a sample entry file for tsc mode. rollUp debugging related

Compared with the single file compilation of tsc, rollUp compilation will form a complete js library.

If you want to use rollup compilation, you need to install the rollup global environment first. The command is npm i rollup -g.

Prepare the rollup environment, enter the src/samples directory under the VSCode shell command line, and execute rollup -c, you can compile and generate rollup’s js engine and sample library.

It should be noted that if you use rollup compilation for the first time, it is normal for the compilation to take four to five minutes, or even more than ten minutes. This will vary due to differences in computer performance. If it gets stuck, wait a while and do not terminate directly. After the first compilation cache, subsequent compilations will be faster.

After compilation, we see the structure related to the rollup example in the bin directory as shown below.

bundle.js is a js library that integrates engines and examples, indexRollUp.html is rollup Sample entry file for debug mode.

Run entry file

Whether it is tsc compilation mode or rollup compilation mode, developers can choose either one.

After compilation, it is recommended to use anywhere to start a local web service. Command anywhere port number, define the port number yourself, as long as there is no conflict,

If anywhere is not installed locally, you can install it with the command: npm i anywhere -g

After the web service is running. Press the URL in the command line to access it in the chrome browser, and click on the html entry file corresponding to the tsc compilation mode or rollup compilation mode.

3.3.2 srcmemory

The src directory includes engine source code, engine test case source code, plug-in source code, etc.

buildtools

The internal rollup plug-in tool used by the engine team for testing. Currently, developers do not need to pay attention.

casetest

The project used by the engine team to build automatic engine testing is currently still under development and adjustment, and may be renamed in the future. Developers do not need to pay attention.

extensions

The engine plug-in source code directory currently only hasdebugtool plug-in.

generateDoc

Project source code used to generate engine API documentation. Drag and drop run.bat in this directory to the command line and execute it directly to generate the API document. The generated API documentation is under doc.

layaAir

LayaAir engine source code directory. Bug modifications and function additions to the engine are all done here. Finally, the js library is generated for use through the compilation tool.

publishTool

Directory that stores AS compilation tools, as well as generated AS engine shell files and d.ts files for code prompts.

Enter the directory at the same level aspublish.bat from the command line, and run publish in the directory. bat can be released and generated.

samples

The source code project directory of the engine test case. The test DEMO in the bin directory comes from the compilation of the project source code here.

Files in the root directory

gulpfile.js file

Publish the gulp task file for js.

LICENSE file

Statement on the use of Layabox engine software

package.json file

npm's package.json configuration, here is the description information of the LayaAir source code project, describing the project's git warehouse address, community address, shell command entry, engine author, minimum version of the project's dependent environment, etc.

Let’s focus on the three script commands currently built into package.json, which are bat execution and engine source code compilation in the publishTool and generateDoc directories.

Before we knew how to enter the directory to executeXX.bat, through the shell command entry configured in package.json, you can also Executenpm run script name in the root directory to call the relevant script.

For example, npm run build will execute publish.bat, npm run buildDoc will execute the run.bat of the document, npm run compile will compile the engine source code. As shown below.

4. About LayaAir engine source code compilation

In the previous section, we have briefly mentioned compilation related commands. This section will focus on the way the engine is compiled into a js library.

During daily development, developers can use F5 for engine compilation. Because we have set the F5 debugging configuration file ( launch.json) to node mode by default and set LayaAirBuild 's gulp task.

This is actually the same as the shell command we mentioned beforenpm run compile. Open the package.json configuration file and you can see the gulp pointed to by compile The task is also LayaAirBuild.

In order to further understand the gulp task of LayaAirBuild, we directly open the root directorygulpfile.js.

At this time, you can see that the LayaAirBuild task has been executed againtsc and LayaAirShaderCopyThese two gulp tasks.

By looking atgulpfile.jstsc and LayaAirShaderCopyTask. We can see that the gulp task named tsc is called by calling the local tsc.cmd to compile the engine and examples. The gulp task named LayaAirShaderCopy is used to copy shader related files.

Unless it is the first compilation, the gulp task LayaAirBuild must be executed, that is to say Both the tsc and LayaAirShaderCopy tasks must be executed. In the subsequent daily compilation, if the shader does not change, just execute the gulp compilation task of the example and engine (tsc). If it is rollup compilation mode, in the src/samples directory, execute the shell command rollup -c, you can also compile examples and engines.

If the example has not changed, then we can also just compile the engine and use the shortcut keys in vscode Ctrl +  Shift + B Open the task panel and select tsc :Build - src/layaAir/tsconfig.json to compile.

summary:

At this point, we have a preliminary understanding of laya Air2.0. Next, we will introduce the basics of laya, including its basic concepts, text, bitmaps, vector graphics, etc.