diff --git a/en/publish/publish-huawei-quick-games.md b/en/publish/publish-huawei-quick-games.md index 1c923ad1b..14a494dba 100644 --- a/en/publish/publish-huawei-quick-games.md +++ b/en/publish/publish-huawei-quick-games.md @@ -2,7 +2,7 @@ ## Environment Configuration -- Download [Huawei Quick APP Loader](https://developer.huawei.com/consumer/en/service/hms/catalog/fastgame.html?page=fastapp_fastgame_devprepare_install_tool) and install it on your Android device (Android Phone 6.0 or above is recommended) +- Download [Huawei Quick APP Loader](https://developer.huawei.com/consumer/en/service/hms/catalog/fastgameRuntime.html?page=fastapp_fastgameRuntime_devprepare_install_tool) and install it on your Android device (Android Phone 6.0 or above is recommended) - Install [nodejs-8.1.4](https://nodejs.org/en/download/) or above, globally. @@ -140,4 +140,4 @@ After the build is complete, the generated subpackages and main package are merg ## Related Reference Links -[Huawei Quick Game development documentation](https://developer.huawei.com/consumer/en/service/hms/catalog/fastgame.html?page=fastapp_fastgame_introduction) +[Huawei Quick Game development documentation](https://developer.huawei.com/consumer/en/service/hms/catalog/fastgameRuntime.html?page=fastapp_fastgameRuntime_introduction) diff --git a/en/scripting/assets/setting-vscode.png b/en/scripting/assets/setting-vscode.png new file mode 100644 index 000000000..fd0f6275f Binary files /dev/null and b/en/scripting/assets/setting-vscode.png differ diff --git a/en/scripting/typescript.md b/en/scripting/typescript.md index 3229c7ea2..1c73bc062 100644 --- a/en/scripting/typescript.md +++ b/en/scripting/typescript.md @@ -8,8 +8,6 @@ For more information on how to use TypeScript, please visit [TypeScript official Many of Cocos Creator users used to use other strong type programming language (such as C++ / C#) to write game, so they hope to use strong type language to enhance the project in the larger scale team when developing games with Cocos Creator. -From v1.5 version on, Cocos Creator supports using TypeScript in the project as a script language. Users' source code can be all TypeScript, or TypeScript and JavaScript mixed. - As with other JavaScript scripts, the TypeScript file (`.ts`) in the project `assets` directory will be compiled into an ES5 JavaScript script that is compatible with the browser standard once created or modified. The compiled script is stored in the `library` directories in the project folder. ## Setup @@ -24,11 +22,13 @@ When editing the TypeScript script, we recommend using Microsoft's [VS Code](htt ### Add a TypeScript setting to an existing project -If you want to add a TypeScript script to the original project and get the full support of the IDE such as VS Code, you need to execute the '`Developer -> VS Code Workflow -> Update VS Code API Source` and `Developer -> VS Code Workflow -> Add TypeScript Config` in the main menu. This will add `creator.d.ts` and `tsconfig.json` file to your project root directory. `creator.d.ts` declares all APIs for the engine and is used to support VS Code's intellisense and auto complete. `tsconfig.json` is used to set the TypeScript project configuration and can be further customized by referring to the official [tsconfig.json instructions](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). +If you want to add a TypeScript script to the original project and get the full support of the IDE such as VS Code, you need to execute the **Developer -> VS Code Workflow -> Update VS Code API Source** and **Developer -> VS Code Workflow -> Add TypeScript Config** in the main menu. This will add `creator.d.ts` and `tsconfig.json` file to your project root directory. `creator.d.ts` declares all APIs for the engine and is used to support VS Code's intellisense and auto complete. `tsconfig.json` is used to set the TypeScript project configuration and can be further customized by referring to the official [tsconfig.json instructions](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). + +![](assets/setting-vscode.png) ### Create a TypeScript script in the project -As with creating a JavaScript script, you can create a new `.ts` file directly in the text editor, or create via Assets panel's context menu, right-click on a folder and select `New -> TypeScript`. +As with creating a JavaScript script, you can create a new `.ts` file directly in the text editor, or create via Assets panel's context menu, right-click on a folder and select **Create -> TypeScript**. ## Declare CCClass with TypeScript @@ -62,56 +62,55 @@ The decorator uses the `@` character as the marker, the decorator is mainly used ### More property declaration example -Declare value types: +- Declare value types -```typescript -@property({ - type: cc.Integer -}) -myInteger = 1; + ```typescript + @property({ + type: cc.Integer + }) + myInteger = 1; -@property -myNumber = 0; + @property + myNumber = 0; -@property -myText = ""; + @property + myText = ""; -@property(cc.Node) -myNode: cc.Node = null; + @property(cc.Node) + myNode: cc.Node = null; -@property -myOffset = new cc.Vec2(100, 100); -``` + @property + myOffset = new cc.Vec2(100, 100); + ``` -Declare arrays +- Declare arrays -```typescript -@property([cc.Node]) -public myNodes: cc.Node[] = []; + ```typescript + @property([cc.Node]) + public myNodes: cc.Node[] = []; -@property([cc.Color]) -public myColors: cc.Color[] = []; -``` + @property([cc.Color]) + public myColors: cc.Color[] = []; + ``` -Declare getset +- Declare getset -```typescript -@property -_width = 100; + ```typescript + @property + _width = 100; -@property -get width () { - return this._width; -} + @property + get width () { + return this._width; + } -@property -set width (value) { - cc.log('width changed'); - return this._width = value; -} -``` + set width (value) { + cc.log('width changed'); + this._width = value; + } + ``` -Note：The public, private modifiers of TypeScript does not affect the default visibility of the member in the **Properties** panel, and the default visibility still depends on whether the member variable name begins with an underscore. +**Note**: The public, private modifiers of TypeScript does not affect the default visibility of the member in the **Properties** panel, and the default visibility still depends on whether the member variable name begins with an underscore. ## Intellisense @@ -175,7 +174,7 @@ When you enter `this.myModule.`, you will be prompt the properties declared in ` ![Auto complete](assets/auto-complete.gif) -__Node: If the declared property is modified to an Array type, but it does not take effect in the editor. Please Reset the component through the component menu.__ +**Node: If the declared property is modified to an Array type, but it does not take effect in the editor. Please Reset the component through the component menu.** ![Reset component](assets/reset-component.png) @@ -227,16 +226,18 @@ So for typescript scripts that contain namespaces, we can neither compile and mo } ``` -4. Press `Ctrl/Cmd + Shift + P`, enter `task` in Command Palette and select `Tasks: Configure Task Runner`. In the pop-up dialog box, select `TypeScript - tsconfig`. This will create a new `tasks.json` profile under the `. Vscode` folder and configures the task of compiling the ts script specified in the project according to `Tsconfig.json`. +4. Press **Ctrl/Cmd + Shift + P**, enter `task` in Command Palette and select `Tasks: Configure Task Runner`. In the pop-up dialog box, select **TypeScript -> tsconfig**. This will create a new `tasks.json` profile under the `.vscode` folder and configures the task of compiling the ts script specified in the project according to `tsconfig.json`. + ![build task](assets/build-task.jpg) -5. Now you can write a ts script containing namespaces in the `namespace` directory. By pressing `Ctrl/Cmd + Shift + B` to trigger the default build task after programming, the script content in `namespace` is compiled into the specified file in the `assets` directory. Each time you modify a script in `namespace`, you should perform a build task to update the compiled file. + +5. Now you can write a ts script containing namespaces in the `namespace` directory. By pressing **Ctrl/Cmd + Shift + B** to trigger the default build task after programming, the script content in `namespace` is compiled into the specified file in the `assets` directory. Each time you modify a script in `namespace`, you should perform a build task to update the compiled file. 6. Return to the Creator editor, select the newly generated namespace script `Namespace.js` in the explorer and set `import as plugin` in the property check, avoid further compiler encapsulation of the script by the editor. This is the complete workflow for using the Typescript namespace in Creator. ## Update engine interface declaration data -Each new version of Creator will update the engine interface statement, so after upgrading the Creator, it is recommended to update existing project `creator.d.ts` file to the latest. Go through the main menu 'Developer -> VS Code Workflow -> Update VS Code API Source` to complete the update. +Each new version of Creator will update the engine interface statement, so after upgrading the Creator, it is recommended to update existing project `creator.d.ts` file to the latest. Go through the main menu **Developer -> VS Code Workflow -> Update VS Code API Source** to complete the update. --- diff --git a/zh/scripting/assets/setting-vscode.png b/zh/scripting/assets/setting-vscode.png new file mode 100644 index 000000000..fd0f6275f Binary files /dev/null and b/zh/scripting/assets/setting-vscode.png differ diff --git a/zh/scripting/typescript.md b/zh/scripting/typescript.md index b83ab3822..c1b3e1bfe 100644 --- a/zh/scripting/typescript.md +++ b/zh/scripting/typescript.md @@ -8,8 +8,6 @@ TypeScript 是一种由微软开发的自由和开源的编程语言。它是 Ja Cocos Creator 的很多用户之前是使用其他强类型语言（如 C++/C#）来编写游戏的，因此在使用 Cocos Creator 的时候也希望能够使用强类型语言来增强项目在较大规模团队中的表现。 -从 v1.5 版本开始 Cocos Creator 支持在项目中使用 TypeScript 编写脚本，用户的源码可以完全使用 TypeScript，或者 TypeScript 和 JavaScript 混合使用。 - 和其他 JavaScript 脚本一样，项目 `assets` 目录下的 TypeScript 脚本（.ts 文件) 在创建或修改后激活编辑器，就会被编译成兼容浏览器标准的 ES5 JavaScript 脚本。编译后的脚本存放在项目下的 `library`（还包括其他资源）目录。 ## 使用准备 @@ -24,11 +22,13 @@ Cocos Creator 的很多用户之前是使用其他强类型语言（如 C++/C# ### 在已有项目中添加 TypeScript 设置 -如果希望在原有项目中添加 TypeScript 脚本，并获得 VS Code 等 IDE 的完整支持，需要执行主菜单的 `开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据` 和 `开发者 -> VS Code 工作流 -> 添加 TypeScript 项目配置`，来添加 `creator.d.ts` 和 `tsconfig.json` 文件到你的项目根目录中。`creator.d.ts` 声明了引擎的所有 API，用于支持 VS Code 的智能提示。`tsconfig.json` 用于设置 TypeScript 项目环境，您可以参考官方的 [tsconfig.json 说明](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 进行定制。 +如果希望在原有项目中添加 TypeScript 脚本，并获得 VS Code 等 IDE 的完整支持，需要执行主菜单的 **开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据** 和 **开发者 -> VS Code 工作流 -> 添加 TypeScript 项目配置**，来添加 `creator.d.ts` 和 `tsconfig.json` 文件到你的项目根目录中。`creator.d.ts` 声明了引擎的所有 API，用于支持 VS Code 的智能提示。`tsconfig.json` 用于设置 TypeScript 项目环境，您可以参考官方的 [tsconfig.json 说明](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 进行定制。 + +![](assets/setting-vscode.png) ### 在项目中创建 TypeScript 脚本 -和创建 JavaScript 脚本一样，你可以直接在文本编辑器里新建 `.ts` 文件，或通过编辑器的 **资源管理器** 的创建菜单，右键点击一个文件夹，并选择 `新建 -> TypeScript`。 +和创建 JavaScript 脚本一样，你可以直接在文本编辑器里新建 `.ts` 文件，或通过编辑器的 **资源管理器** 的创建菜单，右键点击一个文件夹，并选择 **新建 -> TypeScript**。 ## 使用 TypeScript 声明 CCClass @@ -62,56 +62,55 @@ export default class NewClass extends cc.Component { // ES6 Class 声明语法 ### 更多属性类型声明方法 -声明值类型 +- 声明值类型 -```typescript -@property({ - type: cc.Integer -}) -myInteger = 1; + ```typescript + @property({ + type: cc.Integer + }) + myInteger = 1; -@property -myNumber = 0; + @property + myNumber = 0; -@property -myText = ""; + @property + myText = ""; -@property(cc.Node) -myNode: cc.Node = null; + @property(cc.Node) + myNode: cc.Node = null; -@property -myOffset = new cc.Vec2(100, 100); -``` + @property + myOffset = new cc.Vec2(100, 100); + ``` -声明数组 +- 声明数组 -```typescript -@property([cc.Node]) -public myNodes: cc.Node[] = []; + ```typescript + @property([cc.Node]) + public myNodes: cc.Node[] = []; -@property([cc.Color]) -public myColors: cc.Color[] = []; -``` + @property([cc.Color]) + public myColors: cc.Color[] = []; + ``` -声明 getset +- 声明 getset -```typescript -@property -_width = 100; + ```typescript + @property + _width = 100; -@property -get width () { - return this._width; -} + @property + get width () { + return this._width; + } -@property -set width (value) { - cc.log('width changed'); - return this._width = value; -} -``` + set width (value) { + cc.log('width changed'); + this._width = value; + } + ``` -注意：TypeScript 的 public, private 修饰符不影响成员在 **属性检查器** 中的默认可见性，默认的可见性仍然取决于成员变量名是否以下划线开头。 +**注意**：TypeScript 的 public, private 修饰符不影响成员在 **属性检查器** 中的默认可见性，默认的可见性仍然取决于成员变量名是否以下划线开头。 ## 完善的智能提示功能 @@ -175,13 +174,13 @@ export class MyUser extends cc.Component { ![auto complete](assets/auto-complete.gif) -__注意：如果将已声明属性修改为数组类型，但是在编辑器中却未生效。那么请通过组件菜单对组件进行重置。__ +**注意：如果将已声明属性修改为数组类型，但是在编辑器中却未生效。那么请通过组件菜单对组件进行重置。** ![Reset component](assets/reset-component.png) ## 1.10 版本之后的特殊类型 -在 v1.10 包括之后的版本，Creator 对资源类型进行了部分调整。`cc.Texture2D`, `cc.AudioClip`, `cc.ParticleAsset` 类型数据在 ts 中的声明一定要按照以下的格式进行声明： +在 v1.10 包括之后的版本，Creator 对资源类型进行了部分调整。`cc.Texture2D`、`cc.AudioClip`、`cc.ParticleAsset` 类型数据在 ts 中的声明一定要按照以下的格式进行声明： ```typescript @property({ @@ -205,10 +204,12 @@ Creator 中默认所有 assets 目录下的脚本都会进行编译，自动为 ### 命名空间工作流程 -1. 在项目的根目录下（assets 目录外），新建一个文件夹用于存放我们所有包含命名空间的 ts 脚本，比如 `namespaces`。 +- 在项目的根目录下（assets 目录外），新建一个文件夹用于存放我们所有包含命名空间的 ts 脚本，比如 `namespaces`。 + ![namespace folder](assets/namespace-folder.jpg) -2. 修改 `tsconfig.json` 文件，将刚创建的 `namespace` 文件夹加入到 `include` 字段中，表示我们将会通过 VSCode 编译这部分文件。 -3. 在 `tsconfig.json` 的 `compilerOptions` 字段中，加入 `outFile` 字段，并设置一个 `assets` 文件夹下的文件路径。通过这些设置，我们会将所有 `namespace` 目录下的 ts 文件编译到 `assets` 目录下的某个 js 文件中。 + +- 修改 `tsconfig.json` 文件，将刚创建的 `namespace` 文件夹加入到 `include` 字段中，表示我们将会通过 VSCode 编译这部分文件。 +- 在 `tsconfig.json` 的 `compilerOptions` 字段中，加入 `outFile` 字段，并设置一个 `assets` 文件夹下的文件路径。通过这些设置，我们会将所有 `namespace` 目录下的 ts 文件编译到 `assets` 目录下的某个 js 文件中。 ```json { @@ -225,18 +226,17 @@ Creator 中默认所有 assets 目录下的脚本都会进行编译，自动为 } ``` -4. 按下 `Ctrl/Cmd + Shift + P`，在 Command Palette 里输入 `task`，并选择 `Tasks: Configure Task Runner`。在弹出的对话框里选择 `TypeScript - tsconfig`。这将在 `.vscode` 文件夹下新建一个 `tasks.json` 配置文件，并配置根据 `tsconfig.json` 来编译项目中指定的 ts 脚本的任务。 +- 按下 **Ctrl/Cmd + Shift + P**，在 Command Palette 里输入 `task`，并选择 `Tasks: Configure Task Runner`。在弹出的对话框里选择 **TypeScript -> tsconfig**。这将在 `.vscode` 文件夹下新建一个 `tasks.json` 配置文件，并根据 `tsconfig.json` 来编译项目中指定的 ts 脚本的任务。 ![build task](assets/build-task.jpg) -5. 现在你可以在 `namespace` 目录下书写包含命名空间的 ts 脚本了，编程完成后按下 `Ctrl/Cmd + Shift + B` 触发默认构建任务，就会将 `namespace` 里的脚本内容编译到 `assets` 目录下的指定文件里。每次修改 `namespace` 中的脚本后，都应该执行构建任务来更新编译后的文件。 -6. 回到 Creator 编辑器，在资源管理器里选中刚生成的 namespace 脚本 `namespace.js`，在属性检查里设置 「导入为插件」。避免编辑器对该脚本进行进一步的编译封装。 +- 现在你可以在 `namespace` 目录下书写包含命名空间的 ts 脚本了，编程完成后按下 **Ctrl/Cmd + Shift + B** 触发默认构建任务，就会将 `namespace` 里的脚本内容编译到 `assets` 目录下的指定文件里。每次修改 `namespace` 中的脚本后，都应该执行构建任务来更新编译后的文件。 +- 回到 Creator 编辑器，在资源管理器里选中刚生成的 namespace 脚本 `namespace.js`，在 **属性检查器** 中设置 **导入为插件**。避免编辑器对该脚本进行进一步的编译封装。 这就是在 Creator 里使用 TypeScript 命名空间的完整工作流程。 ## 更新引擎接口声明数据 -Creator 每个新版本都会更新引擎接口声明，建议升级了 Creator 后，通过主菜单的 `开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据` 来更新已有项目的 `creator.d.ts` 文件。 +Creator 每个新版本都会更新引擎接口声明，建议升级了 Creator 后，通过主菜单的 **开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据** 来更新已有项目的 `creator.d.ts` 文件。 --- Cocos Creator 中对 TypeScript 的支持参考了很多 [Creator TypeScript Boilerplate](https://github.com/toddlxt/Creator-TypeScript-Boilerplate) 项目的设置和做法，在此特别感谢。另外这个项目中也包含了很多关于使用 TypeScript 项目的工作流程和高级功能，可供参考。 -