Question

我很想知道是否有人可以帮助我确保我......呃...... Z-index（坏双关语，你会在一瞬间看到原因）是错误的顺序。我现在已经连续几个小时这样做了，而且我的眼睛很快 - 但是 - 也许 - 一夜之间在Stack上留下一个问题将有助于推动这个朝着正确的方向发展。

我一直在研究https://github.com/AlexChesser/jsSprite的代码，我就是第6次测试。使用W键运行，A和D左右转：http://chesser.ca/jsSprite/06-brainnsss....php（Gettit？Z-Index？！Hilarious）。

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

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

谢谢你 Brainsss ......

Answer 1

如何在渲染之前按每个僵尸的y坐标Zarr对数组（Ypos）进行排序？或者你是否解决了（缺乏）透明度的问题？

Answer 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);
};

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

2 个答案: