Web 示例构建

[最近更新时间:2020/01/30]

本页介绍了使用 Visual Studio Code 在 Windows 上转换 Live2D Cubism SDK for Web 中包含的 TypeScript 示例项目的过程。

* 文章内容使用 Cubism 4 SDK for Web R1。
方法和步骤可能因 Cubism SDK 的版本而异。 

必要的东西

Live2D Cubism SDK for Web

SDK 本身。从“官方下载页”下载。

Node.js

JavaScript 执行环境。

Visual Studio 代码

这是本次使用的开发环境。该语言使用 TypeScript。

 

安装工作

1. Visual Studio Code

安装并启动 Visual Studio Code 后,打开 Cubism SDK for Web 的顶层文件夹,并将以下内容安装为扩展。

・ Chrome 调试器

开发工具。
它用于确认在 Google Chrome 上的执行。

 

它也可以通过在扩展程序的搜索窗口中键入“@recommended”来显示。

安装完成后重启编辑器使扩展生效。

 

2. Node.js

安装 Node.js 作为构建所需的每个包的管理和 JavaScript 的执行环境。
使用官方网站上的安装程序进行安装。
安装完成后,打开命令提示符

查看 npm 命令是否可用。
输出版本信息即为成功。

 

3.构建和执行所需的每个包,例如WebPack

安装所需的包以部署 Webpack Dev Server 并解析 TypeScript 和 JavaScript 依赖项。

在打开 Cubism SDK for Web 文件夹的 Visual Studio Code 上,按“ctrl + shift + P”,从“任务: 运行任务”到“npm: 您可以通过选择 install  --Samples / TypeScript / Demo” 来安装它。

 

 

建造

构建时,在 Visual Studio Code 上打开 Cubism SDK for Web 的顶层目录并打开它。

从菜单栏中,选择终端>运行构建任务... 或“ctrl + shift + B”以显示构建任务列表。“npm: 选择“build --Samples / TypeScript / Demo”等来执行构建。

 

构建完成后会在Samples/TypeScript/Demo文件夹下创建一个dist文件夹,里面会输出JavaScript文件(bundle.js)。

 

执行

如果构建成功,下一步就是运行它。

要检查执行,请打开 Cubism SDK for Web 的文件夹,在 Visual Studio Code 上按“ctrl + shift + P”,然后按“任务: 如果从“运行任务”中选择“npm: serve --Samples / TypeScript / Demo
一个简单的本地服务器将启动。

在本地服务器运行的情况下,按 F5 或从菜单栏中选择 Debug> Start Debugging 以启动 Debugger for Chrome 并进行调试。
当系统提示您仅第一次选择配置时,请选择带有源映射的远程网站。

 

浏览器启动成功,出现画面,显示模型。

你也可以使用 [npm: 您可以通过访问 [Serve 显示的地址] / Samples / TypeScript / Demo / 查看 index.html。

这时候如果有端口冲突,连接可能会被拒绝,所以
在这种情况下,请检查“/Samples/TypeScript/Demo/package.json”中“serve”项中指定的端口号是否冲突。

此外,如果您将 Debugger for Chrome 用于开发目的,则连接 URL 在“/.vscode/launch.json”的“url”项中指定,因此请同时检查。

© 2010 - 2022 Live2D Inc.