2

我想知道是否有人可以帮助我确保我的......呃...... 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 中处理重叠时一样 - 当您连续编码几个小时时可能会更有趣）。

谢谢你的脑洞......

4

2 回答 2

1

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

于 2011-04-19T04:03:46.947 回答
1

这不是 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);

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

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

尝试注释掉 MainContext.clearRect in drawFrame，而是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);
};
于 2011-04-19T12:23:39.113 回答