preface

In my last article “Making a small wechat game from Scratch – Playing a band of tiles”, I made a small wechat game playing a band of tiles by using pure native Canvas and Matter physics engine. At the end of the article, I mentioned that I would write an article on making H5 games by using a professional game engine in the future

This article is for that purpose. At present, there are two mainstream mature H5 game engines in China, namely Laya and Egret, among which Egret was released earlier and has been very mature until now, with quite a number of commercial game cases. Laya was a later H5 game engine that claimed the fastest performance and had many commercial games. There are plenty of articles on the Internet comparing the two, but the languages and features are pretty much the same, no matter which one you choose

demo

You can scan the browser/wechat to experience the trial, or directly access cheneyWeb.github. IO /laya-hitmol… Play the game

engine

Laya was chosen for the following reasons

• LayaAir is lighter, and one IDE covers almost all the supporting features of H5 game development
• Laya engine was launched late, and referred to the design advantages of many engines. The overall API design was simple and efficient
• Support one-click export of wechat applets
• Laya official document is detailed and comprehensive, the forum is highly active, and there are detailed video tutorials, the case of this article is based on its video tutorial “Laya engine official combat teaching – JS version Whack-a-Mole” decomposition and reconstruction restore

Engines and Primitives

In fact, the game engine is ripe to use for many years abroad, but domestic H5 using game engine development has not been rolled out large area, big reason is because most of the front end game on the self-important, if there are no specific guidelines and game development of systematic study, in the face of the game engine used, one thing is very difficult

From the simplest point of view, I’ll explain the differences and advantages of using a game engine compared to native development

• Visualizations/audio/animation/special effects loading and tweaking. This is one of the most obvious differences between using a game engine and traditional native development. It allows game developers to focus on the presentation of game elements, rather than how they are loaded and used in the game
• Full code files are automatically managed, referenced, and packaged so that game developers don’t have to worry about all sorts of messy tool introductions. In Laya, class files in code can be used at will without tedious introductions
• A large number of wrapped loop animation apis, logic apis, and so on, reduced the amount of code in the game. The actual amount of code in the whac-a-Mole game described in this article is only about 200 lines, which is very small
• Multi-clock adaptation support and unified input events make H5 games only need to write a set of interactions, whether PC browser or mobile touch, can be easily done
• Extremely high development efficiency. In my own experience, using game engine development can be more than ten times more efficient than native development, which is only one tenth of the development time of the same native game

practice

In fact, the practical process of this article is difficult to write, because unlike my previous articles, it can be gradually implemented through code presentation and analysis. It is interesting to note that only 30% of the game engine development time is spent coding and the rest is spent designing the game using the IDE

In my opinion, game development is also the development that most closely follows the idea of object-oriented programming, which is hard to describe in words, but I will try to describe in a simple way the whole process of making a game using a game engine. Right

In addition, it should be noted that in the official Laya tutorial, the JS version of Whackmole was written by ES5, which would be a bit redundant and complicated, so I reconstructed all of it by ES6, looking more concise and fresh

The game entry

Any game has entry program. The entry of Laya game is very simple. You only need to initialize the engine, and then load version control and resources, and then you can start the game interface

class LayaApp {
    constructor() {
        // Initialize the engine
        const WebGL = laya.webgl.WebGL
        Laya.init(800.600, WebGL)
        // Set the version control type to use file name mapping
        Laya.ResourceVersion.type = Laya.ResourceVersion.FILENAME_VERSION
        // Load the version information file
        Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this.this.beginLoad))
        // Set the stage property
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER
        Laya.stage.alignW = Laya.Stage.ALIGN_CENTER
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE
        Laya.stage.bgColor = "#ffffff"
    }
    // Load resources
    beginLoad() {
        Laya.loader.load("res/atlas/ui.atlas", Laya.Handler.create(this.this.onLoaded), null, Laya.Loader.ATLAS)
    }
    // The load completes the callback
    onLoaded() {
        // Start the game screen
        LayaApp.gameStartView = new GameStartView()
        Laya.stage.addChild(LayaApp.gameStartView)
    }
}

// Instantiate the game application
new LayaApp()
Copy the code

I struggled with the following part of the description because I really didn’t know how to express it in text. If I had to write down every step of the development of the game, I would have posted hundreds of pictures and written ten times more words than the game code. I guess that’s why Laya officially uses video tutorials to guide beginners to get started

In fact, the purpose of this article is to give beginners a general idea of the H5 game engine, so the following content is more about the powerful effects of the H5 game engine. After reading this article, go to the official Laya video tutorial, you may get twice the result with half the effort

The resource reference

Laya’s resource manager only needs to place the resource files in the resource association path, it can easily load all the resource files, for the next step of visual editing game interface to Laya foundation, the specific IDE operation method please refer to LayaAir IDE – resource manager

Interface implementation

Once the resource files are introduced, we can create the game interface we want, first creating the UI, then dragging and dropping resources onto the UI, then laying them out or arranging hierarchies, and finally setting up attributes for the interface elements we want. This last step is crucial, because it’s the bridge between visual design and code. Using the var attribute or the name attribute, you can use the corresponding interface elements in your code, which is very simple and convenient. This is a very important step for the game engine to greatly increase productivity. See LayaAir IDE – UI Scenario Editor for details about IDE operations

/** * Start interface class */
class GameStartView extends ui.GameStartUI {
    constructor() {
        super(a)// Center display
        this.centerX = 0
        this.centerY = 0
        // Start the event
        this.startBtn.on(Laya.Event.CLICK, this.this.onStartGame)
    }
    onStartGame() {
        // Remove the boot screen
        this.removeSelf()
        // Load the game interface
        if(! LayaApp.gameView) { LayaApp.gameView =new GameView()
        }
        LayaApp.gameView.gameStart()
        Laya.stage.addChild(LayaApp.gameView)
    }
}
Copy the code

This. StartBtn is not defined in the entire class code, but it can be used directly.

The reason is that in Laya’s design panel, when we create the startup interface, we have already set the var attribute for the startup button, so we can use it directly in the code, and Laya encapsulates the API, we can further directly use the button event response

This is just one example of how a game engine can relate design elements to coding logic

The elves implementation

Often in addition to static interface elements in the game, there will be a lot of animation, and even special effects and so on complex elements, which are by the game engine can do visual editing, hammer of whack-a-mole animation, for example, we can make by a simple sequence frame animation, and then by setting properties for it, You can refer to LayaAir IDE – UI page, particle, animation, script new panel for more details

/** ** hammer */
class Hammer extends ui.HammerUI {
    constructor() {
        super(a)this.visible = false
    }
    // Start using
    start() {
        this.visible = true
        Laya.Mouse.hide()
        Laya.stage.on(Laya.Event.MOUSE_DOWN, this.this.onMouseDown)
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this.this.onMouseMove)
        this.onMouseMove()
    }
    // Stop using it
    end() {
        this.visible = false
        Laya.Mouse.show()
        Laya.stage.off(Laya.Event.MOUSE_DOWN, this.this.onMouseDown)
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this.this.onMouseMove)
    }
    onMouseDown() {
        this.hit.play(0.false)
    }
    onMouseMove() {
        this.pos(Laya.stage.mouseX - this.width / 2, Laya.stage.mouseY - this.height / 2)}}Copy the code

What I want to show here is the game engine’s encapsulation of interactive apis. In Laya, there is a unified API for all interactive events, and it is so simple that developers hardly need to worry about PC or mobile adaptation

Release build

Finally, when the game is coded and tested, the entire game can be packaged easily through the IDE’s one-click publishing feature

The project source code for this article is attached at the end of this article, which contains details that cannot be described in detail due to the limited space in this article

Thank you for reading and hope you found this article helpful 🙂

Author: CheneyXu

Making: laya – hitmole

About: XServer official website