当前位置: 首页 > Web前端 > JavaScript

教TS-JS小白学习Puerts(一)——将Puerts集成到Unity项目中

时间:2023-03-27 12:07:29 JavaScript

使用Puerts所需的JS/TS/Node.js知识c#runtime执行的js运行环境。ts是js的扩展语法,ts不能直接执行(暂时),实际执行的其实是ts生成的js代码。Typescript中文官方学习资料Node.js:Node.js是一个在计算机命令行环境下执行js的运行环境。在我的理解中,Node.js和js语言的关系类似于.net和c#的关系。为了将ts生成为js,你需要在你的开发电脑上安装Node.js。Node.js中文网址。只需下载长期支持版本。npm包管理器:npm的全称是NodePackageManager。安装好Node.js后,电脑中就会出现npm命令。npminstall命令可以从npm网站下载并安装常用的js依赖包。npmrun命令可以执行package.json中配置的快捷命令。npm命令官方文档package.json官方文档首先写一个HelloWorldPuerts运行原理是在运行时将js文件的内容作为字符串传递给JsEnv对象。因此,我们应该将ts文件存放在Unity工程的Assets文件夹外,避免Unity为ts生成.meta,而在Assets文件夹中生成ts生成的js文件,供Unity在运行时加载。我们先创建一个和Assets文件夹同级的TsProj文件夹,在命令行运行cd到这个文件夹,运行npminit命令,回车直到命令运行结束,会创建一个package.json文件。接下来安装依赖,运行命令npminstalltypescript@types/nodewebpack-cli,会创建一个node_modules文件夹,里面存放了typescript、@types/node、webpack-cli这三个依赖包及其各自的依赖包,其中typescript依赖包中包含一个tsc可执行文件,这是一个从ts生成js的命令文件。其他依赖包后面会解释。这时候打开package.json,你会看到里面多了dependencies字段,里面列出了刚刚安装的依赖包和版本信息。另外同级会有一个自动生成的package-lock.json文件。该文件用于锁定本次安装的所有依赖包的具体版本号,必须保留。如果你使用git,也必须一起提交。接下来,我们手动创建一个名为tsconfig.json的文本文件,其中包含以下内容true,"typeRoots":["node_modules/@types"],"moduleResolution":"node","outDir":"../Assets/Resources"}}这个文件会告诉tsc命令如何生成js文件,比如outDir指定构建路径等等。tsconfig.json官方中文文档这里我们选择Assets/Resources文件夹下js文件的生成路径。这是为了方便Unity加载本文示例中的代码。在实际项目中,我们会更多的时候生成js代码来进行热更新。等待在Assets/StreamingAssets或者其他位置打包成一个AssetBundle,我会在后面的文章中详细说明。然后我们手动编辑package.json文件,在scripts字段添加如下内容..."scripts":{"dev":"tsc--watch","build":"tsc"},...heredev和build定义了两个npmrun快捷命令。例如,在命令行中运行TsProj文件夹下的npmrundev,相当于运行tsc--watch。即使你电脑系统的全局环境中不存在tsc命令,npm也会自动去当前文件夹/.bin文件夹下的node_modules中寻找tsc可执行文件。而这个tsc--watch命令的作用是将当前文件夹下的所有ts文件按照tsconfig.json中指定的规则生成js文件。--watch表示实时监控当前文件夹中的文件变化,并立即重新生成变化的文件。这种机制很适合写代码的时候开启,边写边生成,实时生效。这就是为什么我们使用快捷词dev来表示此命令的原因。npmbuild对应的实际命令是tsc,只生成js,不监听变化。准备工作就绪,现在可以开始编写ts代码了,创建一个index.cts文件,写入如下内容:console.log("helloworld");ts/js语言习惯中常用index这个词来表示程序的入口。为什么后缀要用.cts而不是.ts?因为.ts生成的js文件的名字是.js,又因为本例中Puerts默认的Loader只能在Unity的Assets/Resources文件夹下生成js文件,使用Resources.Load函数加载文本资源,并且因为Resources.Load无法识别带有.js后缀的文本资源。因此,使用.cts生成的js文件的名称为.cjs,这是为了方便识别Resources.Load函数。同时,在Node.js的命名标准中,.cjs表示使用常规js语法编写的js代码,.mjs表示使用新的es6语法编写的模块化js代码。所以使用.cts/*.cjs正好符合标准,满足这里的需求。在后续的文章中,我将介绍如何使用自定义加载器加载Puerts中的文本资源。然后你可以使用看起来正常的.ts和.js。接下来生成js,在命令行执行npmrundev。此时命令行窗口进入持续监控状态,所以后续开发时不要关闭该窗口。如果需要运行其他命令,请打开一个新窗口。此时查看Assets/Resources文件夹,应该已经出现了index.cjs文件和index.cjs.map文件。.map文件用于记录开发环境中js代码和ts代码中符号和行号的映射关系。通常在程序报错时使用。ts端的配置和代码生成完成,接下来就是返回Unity了。将Puerts插件导入到Unity项目的Assets/Plugins文件夹中。我使用的是直接从github上下载的v8版本的1.4.0release。在Unity中打开一个空场景,在主摄像头上挂一个Test.cs脚本作为程序入口,在里面写入如下代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingPuerts;publicclassTest:MonoBehaviour{私人JsEnv_jsEnv;voidStart(){_jsEnv=newJsEnv();_jsEnv.ExecuteModule("index.cjs");}}此时查看Unity控制台输出。要把Puerts放到商业项目的开发流程或生产环境中,需要定制很多功能,比如ts文本资源的打包和热更新,ts和c#的互调和调用,提示文件和绑定代码的生成,Inspector面板拖拽赋值等等。下一篇我们将从ts与c#的互调开始慢慢讲起。