PROSAGA码农传奇-边缘控制器-结合使用Adobe Edge Animate和AngularJS和AngularUI路由器

结合使用Adobe Edge Animate和AngularJS和AngularUI路由器

作者: 只怕再见是故人
发布时间: 2024-12-29 08:55:14 (8天前)

目前，我正在一个项目中，它将使用Adobe Edge Animate创建的多个动画合并到一个AngularJS应用程序中。想法是这些动画将充当游戏的视觉效果，我将根据玩家的输入来控制构图。经过一些实验才能达到此阶段，但是所有这些都运行良好。每当玩家选择退出当前视图并再次访问它时，我的问题就会开始。由于某些原因，这会导致Adobe Edge Animate Javascript API出现问题，并且合成文件无法加载。本质上，我只能加载一次合成，但不能再加载。每当我尝试第二次加载合成文件时，都会收到以下Javascript错误…
<pre><code>Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4872
Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4519
</code></pre>我目前正在从控制器内直接加载合成文件，如下所示…
<pre><code>.controller('GameTest', function($scope, $state) {
 AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
 scaleToFit: "width",
 centerStage: "none",
 minW: "0",
 maxW: "undefined",
 width: "2048px",
 height: "1134px"
 }, {dom: [ ]}, {dom: [ ]});
})
</code></pre>我也为此状态禁用了缓存…
<pre><code>.state('game-test', {
 cache: false,
 url: "/games/test",
 controller: 'GameTest',
 templateUrl: 'templates/games/test.html'
})
</code></pre>欢迎所有建议，感谢您的帮助！

如果浏览器再次处理相关* _edge.js的内容，则该问题似乎已解决。由于这些注入<head>时AdobeEdge.loadComposition(...)被调用（通过yepnope），并且似乎没有要问yepnope重新加载注入的Javascript的任何方法，我已经写了一个角小的服务，我可以用它来处理这个代替标准AdobeEdge.loadComposition(...)功能。本质上，它是一个包装器，将事先进行相关检查。

```
.service('$AdobeEdge', function() {
  var head = document.getElementsByTagName('head')[0],
    scripts = head.getElementsByTagName('script');

return { 
    loadComposition: function(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM) {
      // Determine the filename for our project
      var projectFile = projectPrefix + '_edge.js';
      var newScript = null;

// Iterate through each script tag in the header to search for our file
      angular.forEach(scripts, function(script, index, scripts) {

// Does the script src tag end with our project filename?
        if (script.src.substr(script.src.length - projectFile.length) == projectFile) {

// It's already loaded! Let's go about removing it and injecting a fresh script tag...
          script.remove();
          newScript = document.createElement('script');
          newScript.setAttribute('type', 'text/javascript');
          newScript.setAttribute('src', script.src);
          head.insertBefore(newScript, scripts[0]);

// Let's also delete the composition within the Adobe Edge API so that events
          // like 'compositionReady' are fired again when we call loadComposition()
          delete AdobeEdge.compositions[compId];
        }
      });

// Ultimately we always need to call loadComposition() no matter what
      AdobeEdge.loadComposition(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM);
    }
  }
})
```

使用此方法，我可以简单地在相关控制器中调用此服务，并以与正常情况类似的方式加载合成。在这种情况下...

```
.controller('GameTest', function($scope, $state, $AdobeEdge) {
  $AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
    scaleToFit: "width",
    centerStage: "none",
    minW: "0",
    maxW: "undefined",
    width: "2048px",
    height: "1134px"
  }, {dom: [ ]}, {dom: [ ]});
});
```

到目前为止，它一直都很棒！我将使用它构建我们项目中的其余游戏，并发布遇到的任何问题。

希望这可以节省别人很多的心痛！