Databases
StackOverflow2013
Postsdbo
POFlipped SpriteSheet animation using EaselJS after preloading the image
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlipped SpriteSheet animation using EaselJS after preloading the image
    primarykey
    data
    text
    <p>I'm trying to flip horizontally the sprites from a SpriteSheet animation. I'm starting from <a href="http://www.createjs.com/#!/EaselJS/demos/spritesheet" rel="nofollow">this example</a> </p> <p>I've added the flipped frames right after creating the <strong>SpriteSheet</strong></p> <pre class="lang-js prettyprint-override"><code> var ss = new createjs.SpriteSheet(spriteSheet); createjs.SpriteSheetUtils.addFlippedFrames(ss, true, false, false); grant = new createjs.BitmapAnimation(ss); ... </code></pre> <p>And I always get this error :</p> <pre><code>Uncaught TypeError: Cannot read property 'length' of null (SpriteSheetUtils.js l.174) </code></pre> <p>I've seen that someone has got the same problem in this <a href="https://github.com/CreateJS/EaselJS/issues/126" rel="nofollow">github thread</a> And fixed it using the preload mecanism.</p> <p>The example is also using the preload so I've tried to call the addFlippedFrames after the resource loading, but I'm still seeing the same error.</p> <p>Does anyone have a clue for me ? how can I use addFlippedFrames ?</p> <p><strong>EDIT :</strong> here is the code I tried : </p> <p>Init the stage with my spritesheet : </p> <pre><code> spriteSheet = new createjs.SpriteSheet({ "animations": { "none": [0, 0], "run": [0, 25], "jump": [26, 63] }, "images": ["characters/grant/runningGrant.png"], "frames": { "height": h, "width": w, "regX": 0, "regY": 0, "count": 64 } }); sprite = new createjs.BitmapAnimation(spriteSheet); sprite.x = startPosition.x; sprite.y = startPosition.y; // Add the sprite to the stage. stage.addChild(this.sprite); </code></pre> <p>Then use the preload like this : </p> <pre><code>var manifest = [{ src: "characters/grant/runningGrant.png", id: "grant" } ]; var loader = new createjs.LoadQueue(false); loader.onFileLoad = handleFileLoad; loader.onComplete = onResourcesLoaded; loader.loadManifest(manifest); </code></pre> <p>and the callback functions : </p> <pre><code>handleFileLoad = function(event) { assets.push(event.item); }; onResourcesLoaded = function() { for (var i = 0; i &lt; assets.length; i++) { var item = assets[i]; var id = item.id; var result = loader.getResult(id); if (item.type == createjs.LoadQueue.IMAGE) { var bmp = new createjs.Bitmap(result); //does this Bitmap creation trigger the real bitmap loading ? //is this loading asynchrous which would explain my problem. //in this case, how can I manage the loading callback ? } } //I would expect here to have the image fully loaded but its not //A timeout of 2 seconds makes the addFlippedFrames works. setTimeout(function(){ createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false); sprite.gotoAndPlay("run_h"); //I think "run_h" is used to launch the flipped version of "run" }, 2000); }; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGuian
    1. USGuian
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. USMenencia
      1. VTFavorite
    3. VO
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COCan you share your specific example via jsfiddle? I have had the same issue and in my case the issue was that the image wasn't loaded yet. As a very quick&dirty test you could use a timeout of 1 or 2 seconds before executing the `addFlippedFrames` (just for testing)
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. USolsn
    2. COyep it works after a timeout of 2 seconds ... :/
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. USGuian
    3. COI tried to create a JSFiddle with my example but getting a DOM SECURITY exception :/ you can see it here : http://jsfiddle.net/2K6SX/5/
      singulars
      1. POFlipped SpriteSheet animation using EaselJS after preloading the image
      1. USGuian
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload