许多精灵的 EaselJs 性能问题 类

Question

请问easeljs 对很多sprite class 对象是否有性能问题？从我的 codepen demo 看来，它非常滞后......下面的代码如下：

              var $window = $(window),
          wh = $window.innerHeight(),
          ww = $window.innerWidth();

          var stage = new createjs.Stage("sceneStage");
          var w, h, drone;
          var runnerSprite2, runnerContainer, drone2, droneContainer, robot;
          var robot__movement_speed = 1;
          var building_right, building_left;


          var queue        = new createjs.LoadQueue(),
          $state       = $('#state'),
          $progress    = $('#progress'),
          $progressbar = $('#progressbar .bar');



          queue.on('complete',     onComplete);
          queue.on('error',        onError);
          queue.on('fileload',     onFileLoad);
          queue.on('fileprogress', onFileProgress);
          queue.on('progress',     onProgress);


            queue.loadManifest([
              {
                id: '2',
                src: 'images/sprite_robot_test_plus_toss.png'
              },
              {
                id: '3',
                src: 'images/Drones-Hovering-Loop-12fps.png'
              },
              {
                id: '4',
                src: 'images/sprite_robot_plus_toss.png'
              },
              {
                id: '5',
                src: 'images/sprite_protestor.png'
              }
            ]);



            function onComplete(event) {
              console.log('Complete', event);
              $state.text( $state.text() + '[All loaded]' );
              $progressbar.addClass('complete');
              $('#mainContainer').addClass('hide');
              $('#drone').removeClass('hidden');
              loadScenes();
            }

            function onError(event) {
              console.log('Error', event);
              $state.text( $state.text() + '[' + event + ' errored] ');
            }

            function onFileLoad(event) {
              console.log('File loaded', event);
              $state.text( $state.text() + '[' + event.item.id + ' loaded] ');
            }

            function onFileProgress(event) {
              console.log('File progress', event);
            }

            function onProgress(event) {
              var progress = Math.round(event.loaded * 100);

              console.log('General progress', Math.round(event.loaded) * 100, event);
              $progress.text(progress + '%');
              $progressbar.css({
                'width': progress + '%'
              });
            }


          function loadScenes() {

            // grab canvas width and height for later calculations:
            stage.canvas.width = window.innerWidth;
            stage.canvas.height = window.innerHeight;
            w = stage.canvas.width;
            h = stage.canvas.height;


            //----- Drones --------//
            var data = new createjs.SpriteSheet({
              "images": ["images/Drones-Hovering-Loop-12fps.png"],
              "frames": {"regX": 0, "height": 262, "count": 25, "regY": 0, "width": 250},
              "animations": {
                "idle": [0, 24],
                "stun": [0, 0]
              },
              framerate: 24
            });
            drone = new createjs.Sprite(data, "idle");
            drone.setBounds(null, null, 250, 262);
            drone.y = h - drone.getBounds().height;
            drone.x = w - drone.getBounds().width; 
            building_right = drone;

            var drone_left = new createjs.Sprite(data, "stun");
            drone_left.setBounds(null, null, 250, 262);
            drone_left.regX = 250;
            drone_left.y = h - drone_left.getBounds().height;
            drone_left.x = drone_left.regX; 
            building_left = drone_left;


            droneContainer = new createjs.Container();
            droneContainer.addChild(drone, drone_left);
            stage.addChild(droneContainer, runnerContainer);

            var robot_walk_left_arry = [], 
            robot_walk_right_arry = [];

            for(var i = 14; i< 50; i++) {
              robot_walk_left_arry.push(i);
            }
            for(var i = 49; i > 13; i--) {
              robot_walk_right_arry.push(i);
            }
            console.log(robot_walk_right_arry);
            var robot_data = new createjs.SpriteSheet({
              "images": ["images/sprite_robot_test_plus_toss.png"],
              "frames": {"regX": 0, "height": 540, "count": 83, "regY": 0, "width": 810},
              "animations": {
                idle: {
                  frames: [0,1,2,3,4,5,6,7,8,9,10,11,12,11,10,9,8,7,6,5,4,3,2,1]
                },
                walk_left: {
                  frames: robot_walk_left_arry,
                  speed: 1 * robot__movement_speed 
                },
                walk_right: {
                  frames: robot_walk_right_arry,
                  speed: 1 * robot__movement_speed
                },
                toss_left: [50, 82, "idle", 0.8 * robot__movement_speed]
              },
              framerate: 24
            });
            robot = new createjs.Sprite(robot_data, "idle");
            robot.setBounds(null, null, 810, 540);
            robot.regX = 405;
            robot.x = (w - robot.getBounds().width);
            robot.y = h - robot.getBounds().height;
            robot._body_dimen = 162;
            stage.addChild(robot);

            var protestor_data = new createjs.SpriteSheet({
              "images": ["images/sprite_protestor.png"],
              "frames": {"regX": 0, "height": 216, "count": 39, "regY": 0, "width": 384},
              "animations": {
                idle: {
                  frames: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
                },
                recovery: [33, 38, "idle", 1],
                nudge: [15,33, "recovery", 1]
              },
              framerate: 24
            });
            var protestor = new createjs.Sprite(protestor_data, "idle");
            protestor.setBounds(null, null, 384, 216);
            protestor.x = 200;
            protestor.y = h - protestor.getBounds().height;

            stage.addChild(protestor);

            drone_left.on("click", function() {
              tweenthis(robot, robot.x, "left");
            });
            drone.on("click", function() {
              tweenthis(robot, robot.x, "right");
            });

            createjs.Ticker.framerate = 30;
            createjs.Ticker.timingMode = createjs.Ticker.RAF;
            createjs.Ticker.addEventListener("tick", tick);
            // createjs.Ticker.on("tick", stage);

          }

          function handleClick(evt, data) {
              console.log('test');
          }

          function tick(event) {
            stage.update(event);
          }

通常我只用 3 个不同的精灵图像创建 4 个精灵 classes。但是没想到运行这么卡。

Answer 1

抗议者图像的大小似乎是 8k x 8k 像素（显然只有顶部填充）...解压后大约有 192 MB...这会降低任何引擎...确保您的动画图片打包更有效，尺寸更合理...