以正确的顺序绘制一系列等距敌人或处理脏矩形？答案

【问题标题】：Drawing a series of isometric enemies in the correct order or dealing with the dirty rectangle?以正确的顺序绘制一系列等距敌人或处理脏矩形？
【发布时间】：2011-08-08 08:32:34
【问题描述】：

我想知道是否有人可以帮助我确保我的......呃...... Z-index（糟糕的双关语，你马上就会明白为什么）的顺序错误。我已经连续这样做了几个小时了，我的眼睛都快瞎了——但是——也许一夜之间在 Stack 上留下一个问题将有助于将其推向正确的方向。

我一直在编写https://github.com/AlexChesser/jsSprite 的代码，目前正在进行第 6 次测试。使用 W 键运行，A 和 D 向左和向右转：http://chesser.ca/jsSprite/06-brainnsss....php（Gettit？Z-Index？！搞笑）。

无论如何，如果你在屏幕上跑了一会儿，你就会注意到这一点。各个僵尸的白色方块/脏矩形与其他僵尸的方块重叠。在处理多个重叠的精灵时，如何确保它们都被绘制出来而不会扰乱任何其他精灵？

（你看到 z 是僵尸，但 z 索引就像你在 CSS 中处理重叠时一样 - 当你连续编码几个小时时可能会更有趣）。

感谢您的脑残……

【问题讨论】：

标签： html animation canvas sprite isometric

【解决方案1】：

如何在渲染之前按照每个僵尸的 y 坐标 Ypos 对数组 (Zarr) 进行排序？还是您正在解决（缺乏）透明度的问题？

【讨论】：

谢谢丹尼尔，我已经添加了一个排序测试并尝试了这个。正如西蒙所预测的那样，它没有奏效。在我的午休时间，我会尝试做下一个修复（我将不得不给他买啤酒......你能通过互联网做到这一点吗）？

【解决方案2】：

这不是 z-index 问题，你的僵尸本身还好。

你的问题确实出在drawFrame的第二行

drawFrame: function(){
  Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
  // I am trouble:
  MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);

每次绘制僵尸时，它都会清除僵尸曾经所在的主画布的一个矩形，这会影响附近的物体！

因此，您应该每次都清除整个画布。

尝试在drawFrame 中注释掉 MainContext.clearRect，然后在runloop 中添加一个，如下所示。它应该可以解决您的问题。

runloop = function(m) {
  // New clear put here!
  MainContext.clearRect(0,0,canvas.width,canvas.height);
  m.drawFrame();
  for (Z in Zarr) {  // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh... 
    Zarr[Z].pointTo(m);
    Zarr[Z].drawFrame();

    MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
  };
  MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};

【讨论】：

西蒙，我要请你喝一杯！再次感谢！
嘿，我很高兴人们正在制作 Canvas 游戏。我目前正在尝试制作一个 Canvas 游戏网站，因此认为值得的人越多越好。