digitalfruit / limejs Goto Github PK

at first I thought it was not working at all, but eventually (in one of your test games) the splash screen showed up -- very slowly. Here's my version of Chrome 9.0.597.84

what's the problem?

lime.scheduleManager.dispatch_ = function(delta){
var i = this.taskStack_.length;
while (--i >= 0) {
this.taskStack_[i].step_(delta);
}

if ( this.taskStack_[i].step_(delta); ) have del one , the length of taskStack already changed.the problem Appear in example code of zlizer

I want to use scheduleManager.callAfter like this:
var timeOut = 500;
function callBack() {
doSomething();
timeOut-=20;
setTimeout(callBack,timeOut);
}
setTimeout(callBack,timeOut);
It can't work!
I have to do like this:
ForkFruit.Game.prototype.reload = function(dt) {
this.changeSpeed();
lime.scheduleManager.callAfter(this.reload2, this, ForkFruit.RELOAD_TIME);
//setTimeout(this.reload,ForkFruit.RELOAD_TIME);
};
ForkFruit.Game.prototype.reload2 = function(dt) {
this.changeSpeed();
lime.scheduleManager.callAfter(this.reload, this, ForkFruit.RELOAD_TIME);
//setTimeout(this.reload,ForkFruit.RELOAD_TIME);
};
I have to write two callback function(reload reload2);
Oh,Thank you read it; My English is poor ,do you understant?

what do you think about additional options like --version in order to set specific versions from within the build command which could be displayed in a label, for instance
or
a --demo flag setting a var which could be checked from within the code in order to build a full version or a demo version from the same code base, similar to the goog.DEBUG flag? the demo flag would be accessible through the DOM though, so you could switch between those versions depending on the implementation but the demo flag would be opted out in adv opt mode i think

I'm evaluating limeJS for a project and was able to rapidly prototype something very nice with more of a game flavor.

Unfortunately, I need a basic set of UI widgets as the other half of my project. Some examples: List Boxes, Popup Menus, Checkboxes, Sliders, Tab container, text input.

I understand this could be a lot of work. In the short term, is there any way limeJS can easily leverage the suite of UI Widgets that are available in the Google Closure framework limeJS is built on?

Hi LimeJS-Team,

We have a problem regarding the use of sprites in lime.js.
When we turn on the canvas renderer, there appear thin white lines around our .png files.

https://github.com/Fannon/IA6.Medienprojekt/tree/master/client/obacht

Kind regards,
Martin

When you have an old version of LimeJS and you run 'git pull' it does not update the google closure folder neither the bin/external, so, after run the command you should delete the closure folder and the external folder and run bin/limejs.py update.

Calling setHidden(true) on layer does not clear event listeners on children.

Solution 1:
Calling setHidden(true) on layer should also call setHidden(true) on children objects. This would need extra value to see if call was inherited to have correct behavior on setHidden(false).

Solution 2:
Rewrite getHidden() method to scan all the parents and return true if one of them is hidden. Simpler but has performance penalty.

Originated from: http://groups.google.com/group/limejs/browse_thread/thread/08688d9c605f0a5a#

Hello,

I have a simple scenario that has a box moving to the right then reseting back to the beginning. This animation is on a loop. The animated box is a child of the background...

If you run in chrome, when the box resets, the background jitters. But if you run in safari version 5.1.7 the background jitters and the label also jitters.

The animation of the child box should have no effect on its parent or a fellow child box label.

I posted a repro case on pastebin: http://pastebin.com/228NxAhv

Thanks,
Nick

Please see this thread in the forums for greater detail: https://groups.google.com/forum/?fromgroups=#!topic/limejs/TSEMRRwxYaA

now, when i add a new animation when a event trigger. the old animation will be stop.

so, could i add any temp animation to a animation sequence when that animation sequence was running?

ui checkbox request

I changed the fps of the demo pong and run it in Firefox. However, the fps didn't change.

lime.scheduleManager.setDisplayRate(1000 / 80);

And I run the unit test. It failed.

18:05:04.615 testScheduleWithDelay : PASSED
18:05:04.622 testScheduler : FAILED (run individually)
18:05:04.623 ERROR in testScheduler
Calls after 1000ms.
Expected 30 (Number) but was 150 (Number)

limejsgit/closure/closure/goog/testing/asserts.js:375
limejsgit/lime/tests/schedulemanager.htm:54
(unknown)
(unknown)
(unknown)
(unknown)
(unknown)
(unknown)
18:05:04.623 Done

Their appears to be no support to set a label's style so the italicized version of a font is accessible.

I would like to do something like
this.appendChild(
new lime.Label()
.setText('Some Text')
.setFontFamily('SomeFontWithItalicStyleAvailable')
.setFontWeight('200')
.setStyle('italic')
);

audio.js in the audiomap branch has valuable functions which are not related to the audiomap stuff and are missing in the master branch, e.g set/getVolume

Hey.
I am trying to start the Roundball demo on my Samsung galaxy 10.1 tab
But the game is just not starting,
I have try it via Android´s default browser and Firefox,
via Firefox i can see the game but the layout is all over the place, and I can´t play it(no buttons)...

Hi LimeJS-Team,

we have a problem regarding working as a team with LimeJS and GitHub.

The situation so far is that our team – multiple programmers working on Windows, MacOS and Linux – work together on a LimeJS-project in a Git-repository.
Link: https://github.com/Fannon/IA6.Medienprojekt
Path: client/obacht

The problem: We can't update the dependencies (deps.js file). Everytime when we do the "python bin/lime.py update" command everything seems to work fine. But when we look into the deps.js file, we see that nothing has changed.

There's one exception: The guy that set up the LimeJS-project in our repository is the only one who can update the dependencies.

Can you please help us! We would appreciate that so much!

Best regards,
Martin

Stuff my terminal says:
el-moalo:client martin_hofmann$ python bin/lime.py update
Updating Closure deps file
python /Users/martin_hofmann/Studium/6.Semester/Projekt/GitHub/IA6.Medienprojekt/client/closure/closure/bin/build/depswriter.py --root_with_prefix="/Users/martin_hofmann/Studium/6.Semester/Projekt/GitHub/IA6.Medienprojekt/client/closure/ ../../" --root_with_prefix="/Users/martin_hofmann/Studium/6.Semester/Projekt/GitHub/IA6.Medienprojekt/client/lime/ ../../../lime/" --root_with_prefix="/Users/martin_hofmann/Studium/6.Semester/Projekt/GitHub/IA6.Medienprojekt/client/box2d/src/ ../../../box2d/src/" --output_file="/Users/martin_hofmann/Studium/6.Semester/Projekt/GitHub/IA6.Medienprojekt/client/closure/closure/goog/deps.js"

in Chrome, sometimes the animation will keep flashing, looks like it is trying to renew the animation images. But it is hard to debug, as it is sometimes normal,sometimes flash.
If you run chrome in ipad and go to http://qyapp.cn/liyusheng/wolf_compiled, you will see the flashing.

Since version 10 there is requestAnimationSupport in IE:
http://msdn.microsoft.com/en-us/library/IE/hh773174(v=vs.85).aspx
It may be a good idea to support this in limejs.

After LimeJS started using CSS3 3D Transforms by default, some problems appeared on Android 2.3. The page stopped scaling to the dimensions of the screen and some animations started occurring out of place.

This is happening because Android 2.3 and earlier do not support 3D Transforms: http://caniuse.com/#feat=transforms3d

Currently, 3D transforms is being applied to all nodes by default (since pull request #41).
To disable it completely it is necessary to use setAllow3DCSSTransforms on all nodes or to override getCSS3DTransformsAllowed to always return false.

Both solutions are not practical. A method to disable 3D transforms for all nodes at once should be added or it should be detected if the device actually supports 3D Tranforms before enabling it.

the build fails if you try to create a map file á la -m "map file.txt"
I know spaces in file names should be avoided but here's a quick fix to that one ;)

lime.py - line 291: call+=" -f --formatting=PRETTY_PRINT -f --create_source_map='"+options.map_file+"'"

The SlideIn and MoveIn Transitions seem to behave exactly the same. The opt_movein parameter is undefined in the SlideIn constructor called by the MoveIn constructor.

I updated LimeJS tonight (+ deleted Closure so it's updated too) and the build with advanced optimizations generates code with a bug. More precisely, it contains a "c = new void 0(c,b)" and I guess it means a new object is created but the object's symbol is not defined. However, a simple build, or even using the file without building it works. It may mean that a require is missing somewhere... but I don't know the code of LimeJS enough to dig into it.

Steps:

rm -Rf closure bin/external
git pull
bin/lime.py init
bin/lime.py create helloworld
# at this point, the app works
bin/lime.py build helloworld -o helloworld/helloworld.min.js -a
# edit helloworld/helloworld.html to only use the new JS file, the app doesn't work anymore

on ubuntu 10.4 with chrome version 9.0.597.84 beta

The demos halt at radial gradient with "starting" at the center.

Chrome gives this error msg in the console:
Uncaught TypeError: Property 'scrollTo' of object [object DOMWindow] is not a function

If open http://http://qyapp.cn/liyusheng/audiotest in a browser in PC, it will play audio automatically. But if open it in a browser(like safari, chrome) in ipad, it won't play audio until you touch the screen twice.

Hi,

I'm not able to replace scenes using director.replaceScene() when
using scenes defined with the Canvas renderer: new
lime.Scene().setRenderer(lime.Renderer.CANVAS);

I just get a blank screen. There is canvas element but it shows
nothing. It does work when I switch scenes with
director.pushScene().

If I remove the CANVAS renderer it works fine with replaceScene().

Is there a way to replace scenes that use the canvas? for a few scenes
it doesn't matter to have the rest hidden, but for too many of them it
could be too resource consuming.

I've tried using layers that are rendered as CANVAS, and doing layer.setDirty(255) after director.replaceScene.

Code below, as you can see if I remove the CANVAS rendering part it works fine.

//set main namespace
goog.provide('chapter6');


//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Sprite');
goog.require('lime.fill.LinearGradient');
goog.require('lime.Label');
goog.require('goog.math');
goog.require('lime.Layer');
goog.require('lime.GlossyButton');



// entrypoint
chapter6.start = function(){

    var director = new lime.Director(document.body,480,320);
    director.makeMobileWebAppCapable();
    director.setDisplayFPS(false);

    var initialScene = new lime.Scene().setRenderer(lime.Renderer.CANVAS);
    var gameScene = new lime.Scene().setRenderer(lime.Renderer.CANVAS);

    // inital scene //////
    var initialLayer = new lime.Layer().setPosition(30,30).setRenderer(lime.Renderer.CANVAS);

    var initialContainer = new lime.Sprite().setPosition(0,0).setSize(420,260).setFill('#EEE0E5').setAnchorPoint(0,0);

    var initialTitle = new lime.Label().setText('WELCOME').setFontFamily('Arial').setFontColor('#000000').
        setFontSize(20).setAnchorPoint(0,0).setPosition(150,60);

    var startButton = new lime.GlossyButton().setSize(200,60).setPosition(200,150).setText('Start').setColor('#00CD00'); 

    initialLayer.appendChild(initialContainer);
    initialLayer.appendChild(initialTitle);
    initialLayer.appendChild(startButton);

    initialScene.appendChild(initialLayer);




    // game scene //////////////////////////////////////////////

    var gameLayer = new lime.Layer().setPosition(0,0).setRenderer(lime.Renderer.CANVAS).setAnchorPoint(0,0);

    //grass
    var grass_gradient = new lime.fill.LinearGradient().setDirection(0,0,1,-1)
        .addColorStop(0,'#7CCD7C').addColorStop(0.5, '#00FF00');

    var grass = new lime.Sprite().setSize(480,320).setPosition(0,0).
        setAnchorPoint(0,0).setFill(grass_gradient);


    goog.events.listen(startButton, ['mousedown', 'touchstart'], function(e) {
        director.replaceScene(gameScene);
        gameLayer.setDirty(255);
    });



    gameLayer.appendChild(grass);

    gameScene.appendChild(gameLayer);
    director.replaceScene(initialScene);

}

You could make use of the Closure Library's xhrio.
Even goog.dom.xml.loadxml could come in handy in this file, I think...

The following code demonstrates the issue. The button text increments by 2 with every button click in ie9, but by 1 in other browsers:

   //set main namespace
   goog.provide('helloworld');
   //get requirements
   goog.require('lime.Director');
   goog.require('lime.Scene');
   goog.require('lime.Layer');
   goog.require('lime.GlossyButton');

  // entrypoint
        helloworld.start = function(){

    var director = new lime.Director(document.body,1024,768),
        scene = new lime.Scene(),
        button = new lime.GlossyButton().setPosition(50,50).setSize(100,100).setText("0");

    scene.appendChild(button);

    this.clickCount = 0;

    goog.events.listen(button, lime.Button.Event.CLICK, 
        function(e){
            this.clickCount++;
            button.setText(this.clickCount);            
        }
    , true, this);
    // set current scene active
    director.replaceScene(scene);

}


//this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('helloworld.start', helloworld.start);

i'm seeing a weird glitch during the first pass of an animation -- after the end of the moveTo(), when i fire off the next moveTo() the object jumps out of place, then back into place, before continuing its animation. this only happens on the first pass. subsequent passed work as expected.

i've seen this glitch with firefox, chrome, and safari.

var director = new lime.Director(document.body, 1024, 768);
var scene = new lime.Scene();

var circle = new lime.Circle()
    .setSize(50, 50)
    .setFill(255, 150, 0)
    .setPosition(100, 100);

scene.appendChild(circle);

var moveRight = new lime.animation.MoveTo(874, 100)
    .setSpeed(1)
    .setEasing(lime.animation.Easing.LINEAR);

var moveLeft = new lime.animation.MoveTo(100, 100)
    .setSpeed(1)
    .setEasing(lime.animation.Easing.LINEAR);

goog.events.listen(moveRight,lime.animation.Event.STOP, function () {
    setTimeout(function () {
        circle.runAction(moveLeft);
    }, 500);
});

goog.events.listen(moveLeft,lime.animation.Event.STOP, function () {
    setTimeout(function () {
        circle.runAction(moveRight);
    }, 500);
});

// set current scene active
director.replaceScene(scene);
circle.runAction(moveRight);

Hi,

We are using a div as a parent container for the director class. And when the div is positioned at for example top: 1000px, and the user need to scroll down to start playing the game, the e.screenPostion does not take scrollOffset into account. So, all the buttons and sprites do not respond to the click event because of the hitTest method using e.screenPosition.

I've found a fix for this @ http://www.quirksmode.org/js/events_properties.html and added it to events/eventdispatcher.js.

starting at line 119:

else {
// screenPosition does not take scrollOffset into account!
//ee.screenPosition = new goog.math.Coordinate(e.clientX, e.clientY);
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
ee.screenPosition = new goog.math.Coordinate(posx, posy);
doBreak = 1;
}

Is there a way to overwrite this function in our application? Or should this be added to the limejs core?

Thank you & keep up the good work!

Wouter

is the audiomap branch ever going to be merged to the master again?
the last time I used limejs, I needed the audio stuff and cloned that branch
now I'm back on my project and need to update limejs
how is audio handled at the current state of limejs?
has the audiomap branch been merged manually somewhere and it's just not marked in the commit history or something?
the audio is kind of an issue in my app on various browsers and devices...

I've been trying out helloworld and box2d_2 with the bouncy balls and the circles seem to be cut off towards wherever they're animating. Is there a way to avoid this graphic artifact?

I'm using Windows 7, Chrome 18.0.

the error is
XMLHttpRequest cannot load file:///home/ustc/syncsoft/limejs/lime/demos/tests/assets/tromboon_sample.mp3. Cross origin requests are only supported for HTTP.

please see the attached screen shot

It was also mentioned at Google groups but no reply.

lime.animation.MoveTo(x, y) flickers at latest Firefox (both mac, win versions).

You can see issue at roundball demo game and limejs's tests (anim3.js, anim4.js)

Why is the caching logic in the preloader template only for webkit browsers and not for firefox etc.?

In chrome 20 the animation runs well, but in chrome 21 a very ugly white line (1 pixel wide) will appear when running MoveTo or ScaleTo animation. FadeTo does not have this problem.

According to the documentation, lime.animation.Animation.addTarget returns the object instance itself. But, lime.animation.Loop's implementation of addTarget returns nothing.

I started to play a bit with Lime as part of research about JS gaming frameworks. I'm trying to create very simple game with Django on backend. My path for javascript files is /static/js/. Right now, I clone Lime as submodule to this folder and run bin/lime.js for all the additional cloning. Right now, I see 2 problems with this approach:

• submodule - they are usually trouble, for one reason or another. It takes just one person to screw up the repo.
• lime.py being amongst static files - it is potential security risk and i'd feel much more comfortable if i had the file in root directory

I personally would split lime repo into multiple parts:

• framework itself
• demos (let's face it, most of the people will just want remove them anyway)
• lime.py + other utilities (I'll talk about that in a bit)

Main goal would be to split lime.py and create dependencies file and config for it. You could put Closure, Box2d etc into deps file in similarly to requirements.txt in pip. In config you could set default path for your JS libraries (in my case /static/js/) amongst other things (path of your real lime app etc).

So, if I wanted to install lime and its dependencies, I'd just download lime.py and its configs (let's call it limejs-utilities for example), change paths in config and run a simple command as it's done now. I think it'd be more comfortable for users this way. Although, there would still be need for submodule (lime-utilities), I'd be much more comfortable having just few files this way instead of whole framework.

Now why I don't just do most of this manually right now? I could copy lime.py to root, change paths in it and be happy, but it breaks submodule right away and I can't update limejs itself as easily afterwards. Maybe solution would be to just copy all files instead of creating submodule, but that isn't really as comfortable as it could be.

I'd be happy to participate with these changes if you people are ok with it.

Possibly related: #90, #23

I'm using Chrome Version 27.0.1453.110 and Safari Version 6.0.5 (8536.30.1) on OSX 10.8.4. I'm using tiled to build my game levels and I can only get reliable rendering if I use dom rendering (which is too slow). My character sprite nearly always shows up in canvas rendering mode, but my tiled maps rarely do.

When the game renders in canvas mode, I can verify that there are canvases that appear to be the proper size and position, but they are blank. #23 documented that I can call layer.setDirty(255), but that doesn't seem to have any affect. The one thing that will get the canvases to render reliably is if I set a breakpoint in my code and then hit the play button. For whatever reason, that fixes it. I thought it was maybe a timing issue, so I experimented with initializing the game late with setTimeout, but none of the various experiments I tried with that method worked.

The easiest way to reproduce the problem is through lime/demos/tiled1.js. When I ran that file in chrome, I saw that there were canvases, but that they were blank.

I noticed I have some failing unit tests which may have something to do with it.

So, I've been messing with LimeJS and I have noticed that the animation are choppy. I am noticing this on desktop Chrome, and I can repro this by using Demo/Tests/Anim4 and replacing the code with the following.

It's almost as if there are rounding bugs within the position calculation to the screen. I am currently not sure how to fix tihs, but I may take a stab at it. This whole framework breaks down if we can't do smooth animation.

stringa

var circle2 = new lime.Circle()
    .setSize(250, 250)
    .setFill(255, 150, 0)
    .setPosition(100, 200);

scene.appendChild(circle2);

var moveRight2 = new lime.animation.MoveTo(874, 200)
    .setDuration(2).setEasing(lime.animation.Easing.LINEAR).enableOptimizations();

var moveLeft2 = new lime.animation.MoveTo(100, 200)
    .setDuration(2).setEasing(lime.animation.Easing.LINEAR).enableOptimizations();

circle2.runAction(new lime.animation.Loop(
   new lime.animation.Sequence(
        moveRight2, //new lime.animation.Delay().setDuration(1),
        moveLeft2 //new lime.animation.Delay().setDuration(1)
   )
));

Hey,
Just wanted to submit a patch that fixes a few issues that the closure compiler complains about. Could not find any e-mail to contact you with, so here is the patch.

commit 45148698385d98fe7c09aa63af169479ef689853
Author: Anders Lauritsen 
Date:   Thu Jun 9 14:06:21 2011 +0200

    Fixed a few issues found by closure compiler.

diff --git a/lime/src/animation/keyframeanimation.js b/lime/src/animation/keyframeanimation.js
index 37c8efd..8215385 100644
--- a/lime/src/animation/keyframeanimation.js
+++ b/lime/src/animation/keyframeanimation.js
@@ -149,6 +149,7 @@ lime.animation.KeyframeAnimation.prototype.updateAll = function(t,targets) {
     if (this.numFramesLoaded_ < this.frames_.length_) return;
     var dt = this.dt_;
     var delay_msec = Math.round(this.delay * 1000);
+    var nextImage = null;
     
     var i = targets.length;
     while (--i >= 0) {
diff --git a/lime/src/animation/moveto.js b/lime/src/animation/moveto.js
index 178b4ff..6af4573 100644
--- a/lime/src/animation/moveto.js
+++ b/lime/src/animation/moveto.js
@@ -37,7 +37,7 @@ lime.animation.MoveTo.prototype.scope = 'move';
  */
 lime.animation.MoveTo.prototype.setSpeed = function(speed) {
     this.speed_ = speed;
-    delete speedCalcDone_;
+    delete this.speedCalcDone_;
     return this;
 };
 
diff --git a/lime/src/node.js b/lime/src/node.js
index 3a5882d..671e8e8 100644
--- a/lime/src/node.js
+++ b/lime/src/node.js
@@ -1084,6 +1084,7 @@ lime.Node.prototype.getScene = function() {
  * Handle removing Node from DOM tree
  */
 lime.Node.prototype.wasRemovedFromTree = function() {
+    var child;
     
     if(!this.dependencySet_){
         this.removeDependency(this.getParent());

On Android 4.0 sometimes the game is positioned incorrectly on the page and gets stuck half way the screen. This happens only sometimes when the page loads or when the orientation changes. It does not happen on earlier Android versions, neither in 4.1 because it uses Chrome as the default browser.

For instance, this problem can be observed on a Android 4.0 device or emulator running the LimeJS demo games.

I think that is happening because the browser is reporting incorrectly the height of the page during the resize and orientationchange events. Those events are being fired before the page is fully loaded or rotated.

First of all thank you for an excellent library! I really like that it's based upon closure.

I'm thinking about creating a game with a lot of keyframe animation. For performance I'd like to put the keyframes into a single sprite sheet. Do you think you could add support for sprite sheets in KeyframeAnimation, so in addFrame I can pass in not only the image path but also an optional x and y offset?

Thanks.

currently every time a new namespace is added by a new js file, the central deps.js needs to get updated. Is it possible to separate the game namespace dependency from closure dependency? say each game has its own deps.js. then it only needs to update its deps.js and don't interrupt other games.

I cannot figure out exactly where these warnings are coming from. This issue was resolved for jquery apparently: http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery

Running in Chrome for OSX 17.0.928.0 dev.

Hi it's us again,

we created spritesheets with "texture packer pro". most of the time they don't work on google chrome if the renderer is set to "canvas". sometimes they work. if we switch the renderer to DOM everything is there, but very laggy. so, this is not an option for us.

https://github.com/Fannon/IA6.Medienprojekt/tree/master/client/obacht

Example: File World.js - Lines 56-63.

original post:
https://groups.google.com/forum/?fromgroups=#!searchin/limejs/lime.parser.json/limejs/QjcDpcCzwWw/sP2PqlRvJLcJ

Hi,

I'm trying to teach myself LimeJS to make a game with sprites, and since I'm not on a Mac, I decided to use TexturePacker and JSON instead of Zwoptex. As my first project I decided to recreate lime/demos/tests/frame4.js which is the game with the blue monsters.

I recreated the sprite sheet and published it as JSON (array), made it an asset with gensoy and updated, but when I tried the game, I got the error message (in Opera Dragonfly) that it couldn't find the frames. I did some snooping around, and it turned out the JS file generated by gensoy had this structure:

{ // Level 1
 "frames":
   [ // Level 2
      {associative array of sprite information including file name}, // Level 3
   ],
 "meta": ...
}

The file lime/src/helper/parser/json.js however says:

var dict = {};
    var root = data['frames'];
    for(var i in root){
        var frame = root[i];
...
        dict[i] = [new  goog.math.Rect(frame['frame']['x'],frame['frame']['y'],w,h),
...
            ];
    }
    return dict;

I.e., it's expecting the value of the "frames" key to be an associative array wherein the keys are filenames, but level 2 of the structure is actually a list. I changed dict[i] to dict[frame['filename']] on line 25 of json.js, and that solved the problem, and I was able to recreate the game with the blue monsters.

Now my question is whether this is a problem with how TexturePacker generates JSON files, how gensoy makes the assets, or how json.js parses the assets (in which case my solution would appear to be the correct fix).

Or did I just miss some vital step somewhere?