创建应用程序

简介

BeamNG.drive的用户界面和应用程序由AngularJS (1.5.8)框架编写的.

虽然不是必须步骤，但熟悉这个框架会很有帮助。在此上下文中，应用程序只是模块beamng.apps中的简单指令。

每个应用程序的三个重要组成部分是：

1. 一个包含应用所有代码的app.js文件
2. 一个包含应用信息的app.json文件
3. 一个在应用选择器中显示的app.png图像文件

app.js 文件

一个 BeamNG 应用的指令通常遵循以下结构：

angular.module('beamng.apps')
.directive('myApp', ['StreamsManager', function (StreamsManager) {
  return {
    template:  '[一些HTML内容]',
    replace: true,
    restrict: 'EA',
    link: function (scope, element, attrs) {
      // 应用中可选用的流列表
      var streamsList = [/* 此处填写流 */];

      // 使所需的流可用
      StreamsManager.add(streamsList);

      // 确保在关闭应用后进行清理
      scope.$on('$destroy', function () {
        StreamsManager.remove(streamsList);
      });

      scope.$on('streamsUpdate', function (event, streams) {
        /* 使用流值的代码 */
      });
    }
  };
}]);

上面的例子是一个使用vehicles'流的应用示例（到目前为止最常见的用例）。但用法不仅限于此，因为应用可以用于几乎任何事物。再次强调，代码必须包含在app.js 文件的link函数中, 例如:

angular.module('beamng.apps')
.directive('myApp', ['StreamsManager', function (StreamsManager) {
  return {
    template:  '<button ng-click="hello()">Click Me</button>',
    replace: true,
    restrict: 'EA',
    link: function (scope, element, attrs) {
      scope.hello = function () {
        // 在此处编写代码
      };
    }
  };
}])

有时，应用需要存储一些数据。在这种情况下，可以在应用文件夹中添加一个额外的settings.json文件以储存数据。而要使用该文件，指令必须稍作修改，就像这个例子一样：

angular.module('beamng.apps')
.directive('myApp', ['StreamsManager', function (StreamsManager) {
  return {
    template:  '[Some HTML Content]',
    replace: true,
    restrict: 'EA',
    // [1] 我们通过 require 引用了 bngApp 父控制器
    require: '^bngApp',
    // [2] 该控制器可作为 link 函数的第四个参数使用。
    link: function (scope, element, attrs, ctrl) {
      var streamsList = ['sensors'];

      StreamsManager.add(streamsList);

      // [3] 使用变量来保存设置
      var appSettings = null;

      // 当DOM准备就绪且控制器设置完毕后，获取已存储的设置。
      element.ready(function () {
        // [4] 调用控制器的getSettings()函数
        ctrl.getSettings()
          .then(function (settings) {
            appSettings = settings;
          })
      });

      scope.$on('$destroy', function () {
        StreamsManager.remove(streamsList);
        // [5] 完成后可选择保存（可能已修改的）应用程序设置
        ctrl.saveSettings(appSettings);
      });

      scope.$on('streamsUpdate', function (event, streams) {
        /* 使用流值的代码 */
      });
    }
  };
}])

app.json 文件

这个文件非常简单，只包含有关应用程序的信息，用于加载应用程序。然而，必须非常小心地处理字段名称，因为拼写错误或缺失字段可能会影响应用程序的正常运行。文件内容的形式如下：

{
  "name" : "My App",
  "author": "Me",
  "version": "0.1",
  "description": "Just a tutorial app",
  "directive": "myApp",
  "domElement": "<my-app></my-app>",
  "css": { "width": "150px", "height": "150px", "top": "200px", "left": "200px" },
  "preserveAspectRatio": true
}

必需字段是：

app.png 文件

这是用于在应用选择器视图中显示的图片。推荐尺寸为 250x120 像素。

使用您的应用

为了使您的应用在游戏中可见，请将包含应用文件的文件夹移动到您的用户文件夹的UI目录 (<Userfolder>\ui\modules\apps).

然后您的应用将出现在选择列表中。您可能需要关闭并重新打开列表一次以让修改生效。