EaselJS turbomedia 通过曝光的可逆性 sheet

Question

所以，我最近发现了 EaselJS（更普遍的是 CreateJS），我正试图找出一种方法来制作 turbomedia（即 this kind of thing）。

目前，我正在研究可逆性。 turbomedia 通过一系列 states/frames 讲述它的故事，一个关键特性是能够随意在这些帧之间来回移动（通常通过按键）。为了实现这种属性的可逆性，我需要状态独立于之前的事件（即状态 #2 必须相同，无论它是从状态 #1 还是状态 #3 到达的）。

直到最近，我只是使用单个位图（这样每个状态都对应一个现有文件），因此问题永远不会出现。但是，现在我希望能够让状态成为由多个图像组成的组合（因为这样可以提供更大的灵活性）。因此，状态可能由数组 ["sky3", "ground2", "character5"] 描述，意思是 "this state contains the images stored in sky3, ground2 and character5".

我遇到的问题是双重的。

首先，我需要比较数组内容的能力，以便每当当前状态发生变化时，都会将新状态与前一个状态进行比较，并根据需要交换图像（即从 ["sky1", "kid1"] 到 ["sky2", "kid1"] 将从舞台上删除 sky1，添加 sky2，并保留 kid1，因为它在两种状态下都存在）。这是为了保留跨状态的动画时间，并尝试使过渡更轻松（尽管我不确定是否需要这样做？）。

但我不知道如何像这样比较数组内容。

第二个问题可能更简单，但我缺乏 Javascript 的经验，老实说我不知道我做错了什么。我无法定位我的状态的内容。这是我的 init():

stage = new createjs.Stage("testing");
currentstate = 1;

terra1 = new createjs.Bitmap("terra1.png");
terra2 = new createjs.Bitmap("terra2.png");

bullet1 = new createjs.Bitmap("bullet1.png");
bullet2 = new createjs.Bitmap("bullet2.png");

state1 = ["terra1"];
state2 = ["terra2", "bullet1"];
state3 = ["terra2", "bullet2"];

calcstate = "state" + currentstate;
    // Call the first state (at least that's what I'm going for).
console.log(calcstate);
    // This returns "state1". I want it to return ["terra1"] since that's the 
    //content of state1.
for (i = 0; i < calcstate.length; i++) {
    stage.addChild(calcstate[i]);
    // Currently useless since previous code doesn't work, but would be the 
    // function to "create the first stage".
};

stage.update();

所以，是的，现在我几乎被困住了。有什么建议吗？

Answer 1

您没有正确引用这些实例。

您的 calcState 将是一个字符串（例如 "state1"），而不是对变量 state1 的引用。您可以使用括号访问来引用它：

示例：

this[calcState]
// OR, depending on your scope
window[calcState]

即使您正确引用了状态数组，它们本身也只包含字符串，因此您将向舞台添加 "terra1"，而不是实例 terra1。您也可以在这里使用括号访问，但更好的方法是实际将实例添加到您的状态数组：

示例：

state1 = [terra1];
state2 = [terra2, bullet1];
state3 = [terra2, bullet2];

我建议使用 console.log() 来输出值 calcState，以及 for 循环中的 calcstate[i]，这应该会阐明您正在查看的内容。

一个更简单的处理方法是创建一个状态数组，其中包含 sub-elements:

states = [
    [terra1],
    [terra2, bullet1],
    [terra2, bullet2]
];

// Refer to your states. Note that calcState should be 0-2 and not 1-3
states[calcState][i];

希望对您有所帮助。

EaselJS turbomedia 通过曝光的可逆性 sheet

EaselJS turbomedia reversibility through an exposure sheet

javascript

arrays

easeljs

createjs