Got the WebGLSprite to work with nested MovieClips.

app/lib/surface/WebGLLayer.coffee

@@ -66,7 +66,7 @@ module.exports = class WebGLLayer extends createjs.SpriteContainer
       if action.container
         containersToRender[action.container] = true
       else if action.animation
-        animationContainers = thangType.get('raw').animations[action.animation].containers
+        animationContainers = @getContainersForAnimation(thangType, action.animation)
         containersToRender[container.gn] = true for container in animationContainers
     
     spriteBuilder = new SpriteBuilder(thangType, {colorConfig: colorConfig})
@@ -76,6 +76,11 @@ module.exports = class WebGLLayer extends createjs.SpriteContainer
       frame = spriteSheetBuilder.addFrame(container)
       spriteSheetBuilder.addAnimation(containerKey, [frame], false)
 
+  getContainersForAnimation: (thangType, animation) ->
+    containers = thangType.get('raw').animations[animation].containers
+    for animation in thangType.get('raw').animations[animation].animations
+      containers = containers.concat(@getContainersForAnimation(thangType, animation.gn))
+    return containers
       
   renderSpriteSheet: (thangType, colorConfig, actionNames, spriteSheetBuilder) ->
     actionObjects = _.values(thangType.getActions())
@@ -142,13 +147,3 @@ module.exports = class WebGLLayer extends createjs.SpriteContainer
     scale = thangType.get('scale') or 1
     frame = spriteSheetBuilder.addFrame(bm, null, scale)
     spriteSheetBuilder.addAnimation(@renderGroupingKey(thangType), [frame], false) 
-      
-#  renderForSprite: (cocoSprite) ->
-#    rawData = cocoSprite.thangType.get('raw')
-#    groupKey = @renderGroupingKey(cocoSprite.thangType, cocoSprite.options.colorConfig)
-#    spriteBuilder = new SpriteBuilder(cocoSprite.thangType, cocoSprite.options)
-#    for animation in raw.animations ? []
-#      for shape in shapes
-#        shape = @spriteBuilder.buildShapeFromStore(shape.gn)
-#        key = groupKey = ':' + shape.gn
-#        frame = @spriteBuilder.addFrame(groupKey)

app/lib/surface/WebGLSprite.coffee

@@ -1,6 +1,8 @@
 SpriteBuilder = require 'lib/sprites/SpriteBuilder'
 
 module.exports = class WebGLSprite extends createjs.SpriteContainer
+  childSpriteContainers: null
+  
   constructor: (@spriteSheet, @thangType, @spriteSheetPrefix) ->
     @initialize(@spriteSheet)
     
@@ -11,6 +13,7 @@ module.exports = class WebGLSprite extends createjs.SpriteContainer
     @currentAnimation = actionName
     action = @thangType.getActions()[actionName]
     if action.animation
+      @childSpriteContainers = []
       @baseMovieClip = @buildMovieClip(action.animation)
       @mirrorMovieClip(@baseMovieClip, @)
       @framerate = (action.framerate ? 20) * (action.speed ? 1)
@@ -29,16 +32,7 @@ module.exports = class WebGLSprite extends createjs.SpriteContainer
     return
   
   mirrorMovieClip: (movieClip, spriteContainer) ->
-    movieClips = []
     spriteContainer.children = movieClip.children
-    for child, index in spriteContainer.children
-      if child instanceof createjs.MovieClip
-        movieClips.push(child)
-        childMovieClip = child
-        childSpriteContainer = new createjs.SpriteContainer(@spriteSheet)
-        spriteContainer.children[index] = childSpriteContainer
-        movieClips = movieClips.concat(@mirrorMovieClip(childMovieClip, childSpriteContainer))
-    return movieClips
 
   buildMovieClip: (animationName, mode, startPosition, loops) ->
     raw = @thangType.get('raw')
@@ -57,8 +51,7 @@ module.exports = class WebGLSprite extends createjs.SpriteContainer
       tween = createjs.Tween
       for func in tweenData
         args = $.extend(true, [], (func.a))
-        args = @dereferenceArgs(args, locals)
+        if @dereferenceArgs(args, locals) is false
-        if args is false
           console.log 'could not dereference args', args
           stopped = true
           break
@@ -88,6 +81,10 @@ module.exports = class WebGLSprite extends createjs.SpriteContainer
       animation = @buildMovieClip(localAnimation.gn, localAnimation.a...)
       animation.setTransform(localAnimation.t...)
       map[localAnimation.bn] = animation
+      childSpriteContainer = new createjs.SpriteContainer(@spriteSheet)
+      childSpriteContainer.movieClip = animation
+      childSpriteContainer.children = animation.children
+      @childSpriteContainers.push(childSpriteContainer)
     return map
 
   dereferenceArgs: (args, locals) ->
@@ -137,5 +134,12 @@ module.exports = class WebGLSprite extends createjs.SpriteContainer
       
     @currentFrame = newFrame
 
+    if @childSpriteContainers
+      for childSpriteContainer in @childSpriteContainers
+        movieClip = childSpriteContainer.movieClip
+        index = movieClip.parent.getChildIndex(movieClip)
+        movieClip.gotoAndStop(newFrame)
+        movieClip.parent[index] = childSpriteContainer
+
   getBounds: ->
     @baseMovieClip.getBounds()

test/app/lib/surface/WebGLSprite.spec.coffee

@@ -4,12 +4,13 @@ CocoSprite = require 'lib/surface/CocoSprite'
 ThangType = require 'models/ThangType'
 treeThangType = new ThangType(require 'test/app/fixtures/tree1.thang.type')
 ogreMunchkinThangType = new ThangType(require 'test/app/fixtures/ogre-munchkin-m.thang.type')
+ogreFangriderThangType = new ThangType(require 'test/app/fixtures/ogre-fangrider.thang.type')
 
 describe 'WebGLSprite', ->
   webGLSprite = null
   
   showMe = ->
-    canvas = $('<canvas width="600" height="400"></canvas>').css('position', 'absolute').css('index', 1000).css('background', 'white')
+    canvas = $('<canvas width="600" height="400"></canvas>').css('position', 'absolute').css('index', 1000)#.css('background', 'white')
     $('body').append(canvas)
     stage = new createjs.SpriteStage(canvas[0])
     stage.addChild(webGLSprite)
@@ -24,56 +25,81 @@ describe 'WebGLSprite', ->
     }
     createjs.Ticker.addEventListener "tick", listener
     
-  beforeEach ->
+  describe 'with Ogre Munchkin ThangType', ->
-    layer = new WebGLLayer()
+    beforeEach ->
-    ogreMunchkinThangType.markToRevert()
+      layer = new WebGLLayer()
-    ogreMunchkinThangType.set('renderStrategy', 'container')
+      ogreMunchkinThangType.markToRevert()
-    actions = ogreMunchkinThangType.getActions()
+      ogreMunchkinThangType.set('renderStrategy', 'container')
+      actions = ogreMunchkinThangType.getActions()
       
-    # couple extra actions for doing some tests
+      # couple extra actions for doing some tests
-    actions.littledance = {animation:'enemy_small_move_side',framerate:1, frames:'0,6,2,6,2,8,0'}
+      actions.littledance = {animation:'enemy_small_move_side',framerate:1, frames:'0,6,2,6,2,8,0'}
-    actions.onestep = {animation:'enemy_small_move_side', loops: false}
+      actions.onestep = {animation:'enemy_small_move_side', loops: false}
       
-    colorConfig = {team: {hue: 0, saturation: 1, lightness: 0.5}}
+      colorConfig = {team: {hue: 0, saturation: 1, lightness: 0.5}}
-    sprite = new CocoSprite(ogreMunchkinThangType, {colorConfig: colorConfig})
+      sprite = new CocoSprite(ogreMunchkinThangType, {colorConfig: colorConfig})
-    layer.addCocoSprite(sprite)
+      layer.addCocoSprite(sprite)
-    sheet = layer.renderNewSpriteSheet()
+      sheet = layer.renderNewSpriteSheet()
-    prefix = layer.renderGroupingKey(ogreMunchkinThangType, null, colorConfig) + '.'
+      prefix = layer.renderGroupingKey(ogreMunchkinThangType, null, colorConfig) + '.'
-    window.webGLSprite = webGLSprite = new WebGLSprite(sheet, ogreMunchkinThangType, prefix)
+      window.webGLSprite = webGLSprite = new WebGLSprite(sheet, ogreMunchkinThangType, prefix)
     
-  afterEach ->
+    afterEach ->
-    ogreMunchkinThangType.revert()
+      ogreMunchkinThangType.revert()
 
-  it 'has gotoAndPlay, gotoAndStop, and paused like a MovieClip or Sprite', ->
+    it 'has gotoAndPlay, gotoAndStop, and paused like a MovieClip or Sprite', ->
-    webGLSprite.gotoAndPlay('move_fore')
+      webGLSprite.gotoAndPlay('move_fore')
-    expect(webGLSprite.baseMovieClip).toBeDefined()
+      expect(webGLSprite.baseMovieClip).toBeDefined()
-    expect(webGLSprite.paused).toBe(false)
+      expect(webGLSprite.paused).toBe(false)
-    webGLSprite.gotoAndStop('move_fore')
+      webGLSprite.gotoAndStop('move_fore')
-    expect(webGLSprite.paused).toBe(true)
+      expect(webGLSprite.paused).toBe(true)
   
-  it 'is paused when the action is a single frame', ->
+    it 'is paused when the action is a single frame', ->
-    webGLSprite.gotoAndPlay('idle')
+      webGLSprite.gotoAndPlay('idle')
-    expect(webGLSprite.paused).toBe(true)
+      expect(webGLSprite.paused).toBe(true)
       
-  it 'has a tick function which moves the animation forward', ->
+    it 'has a tick function which moves the animation forward', ->
-    webGLSprite.gotoAndPlay('move_fore')
+      webGLSprite.gotoAndPlay('move_fore')
-    webGLSprite.tick(100) # one hundred milliseconds
+      webGLSprite.tick(100) # one hundred milliseconds
-    expect(webGLSprite.baseMovieClip.currentFrame).toBe(webGLSprite.framerate*100/1000)
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(webGLSprite.framerate*100/1000)
       
-  it 'will interpolate between frames of a custom frame set', ->
+    it 'will interpolate between frames of a custom frame set', ->
-    webGLSprite.gotoAndPlay('littledance')
+      webGLSprite.gotoAndPlay('littledance')
-    webGLSprite.tick(1000)
+      webGLSprite.tick(1000)
-    expect(webGLSprite.baseMovieClip.currentFrame).toBe(6)
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(6)
-    webGLSprite.tick(1000)
+      webGLSprite.tick(1000)
-    expect(webGLSprite.baseMovieClip.currentFrame).toBe(2)
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(2)
-    webGLSprite.tick(500)
+      webGLSprite.tick(500)
-    expect(webGLSprite.baseMovieClip.currentFrame).toBe(4)
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(4)
-    webGLSprite.tick(500)
+      webGLSprite.tick(500)
-    expect(webGLSprite.baseMovieClip.currentFrame).toBe(6)
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(6)
   
-  it 'emits animationend for animations where loops is false and there is no goesTo', ->
+    it 'emits animationend for animations where loops is false and there is no goesTo', ->
-    fired = false
+      fired = false
-    webGLSprite.gotoAndPlay('onestep')
+      webGLSprite.gotoAndPlay('onestep')
-    webGLSprite.on('animationend', -> fired = true)
+      webGLSprite.on('animationend', -> fired = true)
-    webGLSprite.tick(1000)
+      webGLSprite.tick(1000)
-    expect(fired).toBe(true)
+      expect(fired).toBe(true)
+
+  describe 'with Ogre Fangrider ThangType', ->
+    beforeEach ->
+      layer = new WebGLLayer()
+      ogreFangriderThangType.markToRevert()
+      ogreFangriderThangType.set('renderStrategy', 'container')
+      colorConfig = {team: {hue: 0, saturation: 1, lightness: 0.5}}
+      sprite = new CocoSprite(ogreFangriderThangType, {colorConfig: colorConfig})
+      layer.addCocoSprite(sprite)
+      sheet = layer.renderNewSpriteSheet()
+      prefix = layer.renderGroupingKey(ogreFangriderThangType, null, colorConfig) + '.'
+      window.webGLSprite = webGLSprite = new WebGLSprite(sheet, ogreFangriderThangType, prefix)
+  
+    afterEach ->
+      ogreFangriderThangType.revert()
+  
+    it 'has gotoAndPlay, gotoAndStop, and paused like a MovieClip or Sprite', ->
+      webGLSprite.gotoAndPlay('move_fore')
+      webGLSprite.tick(100) # one hundred milliseconds
+      expectedFrame = webGLSprite.framerate*100/1000
+      expect(webGLSprite.baseMovieClip.currentFrame).toBe(expectedFrame)
+      for child in webGLSprite.childSpriteContainers
+        expect(child.movieClip.currentFrame).toBe(expectedFrame)
+      showMe()