# 【Decentraland Editor】
Decentraland Editor 基于 Visual Studio Code，是一款功能强大且用户友好的内容创建工具，一站式构建和调试交互式场景。一起来探索首个版本。

By [Decentraland 中文社区](https://paragraph.com/@decentraland-2) · 2022-12-26

---

![](https://storage.googleapis.com/papyrus_images/9aaafba15e43c9cf4401da5181aa391095ab408c7ab1dc8bbcb737657e449e6a.png)

_2022-12-23_

首次在 [SDK7 宣言](https://decentraland.org/blog/announcements/a-new-decentraland-sdk-is-on-the-horizon-the-sdk-7-manifesto/#:~:text=Paving%20the%20way%20for%20the%20Decentraland%20Editor%3A)中宣布，Editor 是一种一体式内容创建工具，旨在取代场景 [Builder](https://builder.decentraland.org/)，这将允许更强大且易于访问的场景创建。最终，它将成为一个可供任何程度的创作者使用的工具，将可视化界面与代码编辑功能相结合。在其最终版本中，创作者甚至无需使用任何代码即可构建交互式场景，通过纯视觉过程进行创作。技术和非技术创作者都会发现，通过使用编辑器而不是构建器或 CLI（命令行界面），创作过程得到了极大的改善！

如今，编辑器的第一个正式版本正在推出。这是将发布的三个连续更高级版本中的第一个，每个版本都带来新功能：

*   [Editor Version 1](https://marketplace.visualstudio.com/items?itemName=DecentralandFoundation.decentraland)：提升开发体验
    
*   Editor Version 2：将美术管道与开发人员管道分开
    
*   Editor Version 3：无需代码即可创建交互式场景
    

一旦以前的版本坚如磐石，这个分阶段发布将允许编辑器贡献者测试、迭代和开始添加新功能。

如何安装 Editor
-----------

Decentraland Editor 是作为 Visual Studio Code 的扩展开发的

**1** 您必须先下载 [Visual Studio Code](https://code.visualstudio.com/)。

**2** 将 [Decentraland Editor 扩展](https://marketplace.visualstudio.com/items?itemName=DecentralandFoundation.decentraland)安装到 Visual Studio Code 中。

Editor 背后的历史
------------

在使用 Editor 之前，可以使用 Builder 和 SDK 创建 Decentraland 场景。这不仅是一个只有经验丰富的编码人员才能使用的技术性很强的过程，而且也不是很方便。在 Builder 本身中，创作者只能定位项目并通过“智能项目”添加一些交互性。如果他们想要修改这些智能项目，他们必须使用 SDK 和 CLI 通过代码来完成，然后将其导入回 Builder。在不同程序之间来回跳转并不能带来顺畅的开发体验。

根据 Editor 最终版本的计划，即使没有编码背景的人也应该可以访问 Decentraland 的开发场景。开发过程也应该变得轻松无压力，一切在同个地方发生。

版本 1 发布功能
---------

Decentraland Editor 的第 1 版现已发布。与使用 CLI 相比，它侧重于改善开发人员体验。关于第一个版本的一些改进、功能和属性是：

*   **易于安装**：您只需要在您的 VSCode 应用程序上安装一个扩展。不需要其他依赖项，例如 NodeJS 或 Decentraland CLI。请参阅[文档](https://docs.decentraland.org/creator/development-guide/installation-guide/)。
    

![](https://storage.googleapis.com/papyrus_images/6254dbaf81b78e1a87b556cf2f1846210404f5a75c92a66e87afc35687abd7a9.jpg)

*   **无命令行**：编辑器消除了与命令行交互的需要，消除了摩擦。这些工具提供的所有功能现在都可以通过 UI 按钮使用。但是，命令行工具仍然可以作为具有非常特殊需求的高级用户的一个选项。
    
*   **通过图形界面创建/运行/发布/预览场景：**
    
    *   **创建**：只需点击几下，您就可以建立一个新的 Decentraland 场景项目。
        

![](https://storage.googleapis.com/papyrus_images/c69ef845b236c127681fb869e825e3f38d565e179c94784f40be91a52c5ca242.jpg)

*   **在 Editor 中运行场景**：预览查看器不是打开浏览器窗口，而是作为编辑器中的选项卡打开。这不仅仅是一个舒适的问题，它使我们能够访问 Visual Studio Code 的更高级的调试功能。
    

![](https://storage.googleapis.com/papyrus_images/fee330da8e1ce125506d8f3bac76f04022c1139e70041e01025c2d7684ef0c31.jpg)

*   **发布**：单击“Publish Scene”（发布场景）以在 Visual Studio Code 中打开一个新选项卡，显示有关您要发布的内容和发布位置的信息。
    

![](https://storage.googleapis.com/papyrus_images/9ae0cc6cc952167010f21a51ff4b51e0bb0db1b4b0aedfa345e387d78fcb14d9.jpg)

*   **集成调试器**：现在您可以在场景代码中添加断点！运行预览时，只要代码通过断点，它就会暂停执行。调试面板打开，显示所有的当前值。这对于验证给定时间点的数据是否符合您的预期特别有用。您还可以手动修改任何变量的值，并使用这些新变量使用蓝色播放按钮恢复执行。这非常适合测试极端情况并确保场景在每个场景中都按预期运行，否则可能很难重现。
    

![](https://storage.googleapis.com/papyrus_images/c49fd124396b86093c318efd9e6946d897f62cd89b309d72d1c726abfbf7b5c3.jpg)

结论
--

Decentraland Editor 是一个功能强大且用户友好的工具，在其最终版本中，所有程度的创作者都可以轻松开发交互式场景。它建立在流行的 Visual Studio Code 之上，并具有新的调试功能，它正在成为任何希望在 Decentraland 中创建引人入胜的内容的人的必备工具。浏览其[源代码](https://github.com/decentraland/editor/)、阅读[文档](https://docs.decentraland.org/creator/development-guide/editor/)或立即[试用](https://docs.decentraland.org/creator/development-guide/installation-guide/)！

**DCL基金会全球社区： 【**[**Official Website**](https://decentraland.org/)】 【[**Telegram**](https://t.me/decentralandTG)】 【[**Blog**](https://blog.decentraland.org/)】 【[**Twitter**](https://twitter.com/decentraland)】 【[**Discord**](https://decentraland.org/discord/)】

**DCL中文社区： 【**[**Medium**](https://medium.com/@decentralandcn)**】用户指南 【**[**电报群**](https://t.me/+BtB90_SKDeQ4OGQ1)**】 【**[**推特**](https://twitter.com/decentralandcn)】 **【**[**微博**](https://weibo.com/decentralandcn)**】** 【**微信群**】请加微信ID ChinWaan 【**微信公众号**】manalandcn

---

*Originally published on [Decentraland 中文社区](https://paragraph.com/@decentraland-2/decentraland-editor-decentraland-editor-visual-studio-code)*
