EaselJS turbomedia reversibility through an exposure sheet

Question

So, I recently discovered EaselJS (and more generally CreateJS) and I'm trying to figure out a way to make turbomedia (ie this kind of thing) with it.

At the current time, I'm working on reversibility. A turbomedia tells its story through a series of states/frames, and a key feature is the ability to move back and forth between these frames at will (usually through keystrokes). In order to achieve this property of reversibility, I need states to be independent from previous events (ie state #2 must be the same whether it's reached from state #1 or state #3).

Until recently, I'd simply work with single bitmaps (such that each state would correspond to one existing file) so the problem would never present itself. However, now I'd like the ability to have states be compositions made out of multiple images (since this allows a lot more flexibility). Thus, a state might be described by the array ["sky3", "ground2", "character5"], meaning "this state contains the images stored in sky3, ground2 and character5".

The problem I'm hitting is twofold.

First, I need the ability to compare array contents so that whenever the current state changes, the new state is compared with the previous one and images are swapped around as needed (ie going from ["sky1", "kid1"] to ["sky2", "kid1"] will remove sky1 from the stage, add sky2, and keep kid1 since it's present in both states). This is to preserve animation timings across states, and to try and make transitions lighter (although I'm not sure that's needed?).

But I have no idea how to compare arrays contents like this.

The second problem is probably much simpler, but I lack experience with Javascript and honestly I have no idea what I'm doing wrong. I am unable to target the content of my states. Here is my 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();

So yeah, for now I'm pretty much stuck. Any suggestion?

Answer 1

You are not referring to the instances properly.

1. Your calcState will be a string (such as "state1"), and not a reference to the variable state1. You could use bracket access to reference it:

Example:

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

2. Even if your reference the state arrays correctly, they just contain strings themselves, so you would be adding "terra1" to the stage, and not the instance terra1. You can use bracket access here too, but a better way is to actually add the instances to your state arrays instead:

Example:

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

I recommend using console.log() to output the values calcState, as well as the calcstate[i] in your for loop, which should shed some light at what your are looking at.

An easier way to handle this would to make a states array, which has 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]; 

Hope that helps.