Egret production of third-party libraries

Creating a third-party libraries

Two TypeScript library

Three JavaScript libraries

Four third-party libraries produced in large-scale practical application in RPG

reference:

aims:

The purpose of this paper is made into the framework of existing games third-party libraries, reducing compile time. I do not want others to see the source code, reducing readability.

Creating a third-party libraries

In any folder, create a folder I have here a test, shift + right, open a command line window, type

egret create_lib demo

In the test folder will generate a demo folder, there are package.json and tsconfig.json file

New demo in src folder, bin, typings, libs folder.

Two TypeScript library

The method is to use a third-party library documentation .ts

Ts files into the src folder, where I spent several class management framework used. Scene management, layer management, incident management etc. as a test.

Modify pagckage.json

{
	"name": "demo",              
	"compilerVersion": "5.2.22"  
}

Modify tsconfig.json file

{ 
	"CompilerOptions": { 
		"target": "ES5", 
		"noImplicitAny": false, 
		"sourceMap": false, 
		"declaration": true, // whether to generate .d.ts file, if the library is typescript set to true, If the javascript library is set to false 
		"the outFile": "bin / demo.js", 
		"allowJs": false // whether to allow the compiler js file. If typescript library set to false, if the javascript library is set to true 
	}, 
	"Files": [// libs is dependent egret library, you can use .d.ts file, because the management class used eui, egret. Stage and so on. 
		"libs / egret.d.ts", 
		"libs / eui.d.ts", 
		"src / BaseSingleClass.ts", 
		"src / LayerManager.ts", 
		"src / EventManager.ts", 
		"src / BaseScene.ts "

Instead of the direct use of files may include

{
	"compilerOptions": {
		"target": "es5",
		"noImplicitAny": false,
		"sourceMap": false,
		"declaration": true,
		"outFile": "bin/demo.js",
		"allowJs": false
	},
	
	"include":["src","libs"]
}

Command line input

egret build demo

It generates the following documents in the bin folder

Egret a new project, called the project, to use this third-party libraries

EgretProperties.json modify the project file, and add references to third-party libraries, and compiled once engine.

Use EventManager event class I wrote in code, successfully exported "trigger event." Represent third-party libraries can be used normally.

    protected createGameScene(): void {
        EventMananger.getInstance().addEvent("test", this.onTestHandler, this);  //监听test事件
        EventMananger.getInstance().sendEvent("test");                           //派发test事件
    }

    public onTestHandler(){
        console.log("触发事件");  //打印触发事件
    }

三 JavaScript库

该方法是将.js文件制作成第三方库

这里我们直接使用上文中导出的demo.js和demo.d.ts做为例子

将demo.js放到src目录下

将demo.d.ts放到typings目录下

修改package.json文件

{
	"name": "demo222",
	"compilerVersion": "5.2.22",
	"typings":"typings/demo.d.ts"
}

修改tsconfig.json文件

{
	"compilerOptions": {
		"target": "es5",
		"noImplicitAny": false,
		"sourceMap": false,
		"declaration": false,       //false  不生成.d.ts文件
		"outFile": "bin/demo.js",   
		"allowJs": true             //true  允许编译js文件
	},
	
	"include":["src","libs"]
}

命令行输入

egret build demo

bin文件夹下生成

第三方库使用方法同上文，这里不再说了。

四第三方库制作在大型RPG中的实际应用

这里我找了个传奇游戏的源码，因为源码比较早，所以它的第三方库的制作是旧版。但是原理还是一样的，我们看一下第三方库的制作在大型rpg中的应用。

项目中，游戏每一个模块modules，都被制作成了一个第三方库，如下图：

第三方库制作后，.d.ts和js和min.js文件被放在了libs目录下，并在index.html中被引用。