EaselJS spritesheet 动画使背景消失

Posted 2023-03-25

【中文标题】EaselJS spritesheet 动画使背景消失

【英文标题】：EaselJS spritesheet animation makes background disappear

【发布时间】：2013-03-17 06:33:57

【问题描述】：

我正在使用 EaselJS 开发一款游戏，我仍在尝试这个很棒的库提供的功能。

我可能需要的是 Alphamaskfilter 类和 Spritesheet 类。

目前，我有一个这样的画布：

<canvas id = 'container3' width = 320px; height = 480px; 
style = 'outline: 2px solid; margin-right: 10px;float:left;'></canvas>

在我的脚本中，我画了一个蓝色的矩形：

var ctx3 = document.getElementById('container3').getContext('2d');
ctx3.beginPath();
ctx3.rect(0,0,320,480);
ctx3.fillStyle = 'blue';
ctx3.fill();

所以现在我有一个蓝色的 320*480 画布。现在我有一个可以在上面设置动画的精灵表， 这是我写的精灵和代码： http://i.imgur.com/XumDvic.png

PS：精灵帧是 200*200 仅供参考。

stage = new createjs.Stage(document.getElementById('container3'));
var test = new Image();
test.src = 'trans_blackball.png';

test.onload = function()
            var sprite = new createjs.SpriteSheet(
                images: [test],
                frames: width: 200, height: 200,
                animations: 
                    born: [0,3,0]
                
            );

            var animation = new createjs.BitmapAnimation(sprite);
            animation.gotoAndPlay("born");
            animation.x = 10;
            animation.y = 10;
            animation.currentFrame = 0;

            stage.addChild(animation);

            createjs.Ticker.addListener(window);
            createjs.Ticker.useRAF = true;
            createjs.Ticker.setFPS(10);




function tick()
   stage.update();

好的，我的问题是：我希望在蓝色背景（矩形）上有一个放大的黑色圆圈的动画，但我得到的是首先画布是蓝色的，但是在某个小秒后，整个画布变白了，并且动画在白色背景上运行，这是什么原因，我该如何解决？

这里有两点可能会有所帮助：

我正在使用 chrome，我使用 F12 和控制台检查，画布的 fillStyle 仍然是蓝色，即使它在精灵动画开始后显示为白色

如果我将画布背景属性设置为蓝色而不是在其上绘制蓝色矩形，一切都很好！

<canvas id = 'container3' width = 320px; height = 480px; 
style = 'background: blue; outline: 2px solid; margin-right:
10px;float:left;'></canvas>

但显然这不是我想要的……

不使用原生 canvas rect 而是使用 EaselJS 的 Shape 来绘制 rect 也可以解决这个问题：

var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 320, 480);
stage.addChild(shape);

但我还是想知道为什么原生的矩形绘图代码不起作用...

请说出我糟糕的英语，感谢您的阅读和任何帮助的尝试...如果情况有任何不清楚的地方，我可以详细说明...谢谢！

【参考方案1】：

createjs.Stage.update() 默认会在渲染新帧之前清除画布内容。

原因一方面是canvas 的技术行为，画布基本上只是一个像素图像，你不能拥有真正的“层”并说“我只想删除/更新这个对象" - 您只需修改框架的扁平像素或删除所有内容并重新绘制它（这更安全，更容易实现，并且实际上性能足够快。另一方面，一致使用 a 是有意义的像 EaselJS 这样的框架，有些部分不做框架，有些部分不做，这会导致最后一团糟。

因此，正确的解决方案是使用 3.

您可以设置myStage.autoClear = false; 以防止舞台在每个update() 上autoClearing 画布，但我认为在这种情况下这不适合您的需求。

【参考方案2】：

我建议改为使用 EaselJS Shape 类来制作你的蓝色盒子。如果它是 EaselJS 显示列表的一部分，它将与其他内容一起绘制。

javascript var shape = new createjs.Shape(); shape.graphics.beginFill("blue").drawRect(0,0,320,480); stage.addChild(shape);