Question

我正在绘制一个简单的面板（使用Phaser.Graphics），其中包含预定义数量的列表条目列表（也使用Phaser.Graphics绘制）。每个列表条目的大小是动态计算的，以适合面板大小。

我的列表条目的宽度（+ - ）与面板的宽度相同。为了获得高度，我将面板的高度除以列表条目的数量和它们的边距大小。

结果几乎是准确的，但我仍然在最后一个列表条目下面得到一些额外的或丢失的一些像素。所以我想我的计算不正确或缺少某些东西......

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'phaser-example', {
  create: create
});

var panel = null;
var listItems = 3
var listEntries = [];

function create() {
  createPanel(game.world.centerX, game.world.centerY, game.world.width - 50, game.world.height - 100);
  createList(panel);
}

function createPanel(x, y, width, height) {
  panel = game.make.graphics(0, 0);
  panel.position.x = x - (width / 2);
  panel.position.y = y - (height / 2);
  panel.lineStyle(2, 0x999999, 0.4);
  panel.beginFill(0x0d1a26, 0.6);
  panel.drawRect(0, 0, width, height);
  panel.endFill();
  game.world.add(panel)
}

function createList(parent) {
  let child;
  let margin = 5;
  let width = parent.width - parent.lineWidth; //// - borders width? ////
  let height = (parent.height - ( listItems * (margin * 2) )) / listItems;
  let centerX = ((parent.width - width) / 2) - 1; /// - left-border width? ///

  let prev_pos = 0;
  for (let e = 0, e_l = listItems; e < e_l; e++) {

    listEntries[e] = this.game.make.graphics(0, 0);
    createListEntry(listEntries[e], width, height);
    child = parent.addChild(listEntries[e]);

    child.position.x += centerX;
    if (e > 0) {
      child.position.y += prev_pos + (margin * 2);
    } else {
      child.position.y += prev_pos + margin;
    }
    prev_pos = child.position.y + height;
    console.log(child.position.y)
  }
}

function createListEntry(entry, width, height) {
  entry.clear();
  entry.lineStyle(2, 0x999999, 0.5);
  entry.beginFill(0x0d1a26, 0.7);
  entry.drawRect(0, 0, width, height);
  entry.endFill();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<html>

<head>
  <style>
    canvas {
      position: relative;
      margin: 0 auto;
    }
  </style>
</head>

<body>
</body>

</html>

Answer 1

像素的整数。

从内存Phaser（大约2 - 3年前的版本）将使用javascript中的优化将所有渲染坐标转换为整数。

如果你给它加倍它会使它们落地（或者我可以记住哪一个）。由于您的位置prev_pos占据的分数与面板的实际位置不匹配。

简单的解决方法是仅提供Phaser整数。在这种情况下，使用prev_pos = Math.ceil(child.position.y + height);

进行汇总

固定？

您的代码稍微更改了评论。

＆＃13;

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'phaser-example', {
  create: create
});

var panel = null;
var listItems = 3
var listEntries = [];

function create() {
  createPanel(game.world.centerX, game.world.centerY, game.world.width - 50, game.world.height - 100);
  createList(panel);
}

function createPanel(x, y, width, height) {
  panel = game.make.graphics(0, 0);
  panel.position.x = x - (width / 2);
  panel.position.y = y - (height / 2);
  panel.lineStyle(2, 0x999999, 0.4);
  panel.beginFill(0x0d1a26, 0.6);
  panel.drawRect(0, 0, width, height);
  panel.endFill();
  game.world.add(panel)
}

function createList(parent) {
  let child;
  let margin = 5;
  let width = parent.width - parent.lineWidth; //// - borders width? ////
  let height = (parent.height - ( listItems * (margin * 2) )) / listItems;
  let centerX = ((parent.width - width) / 2) - 1; /// - left-border width? ///

  let prev_pos = 0;
  for (let e = 0, e_l = listItems; e < e_l; e++) {

    listEntries[e] = this.game.make.graphics(0, 0);
    createListEntry(listEntries[e], width, height);
    child = parent.addChild(listEntries[e]);

    child.position.x += centerX;
    if (e > 0) {
      child.position.y += prev_pos + (margin * 2);
    } else {
      child.position.y += prev_pos + margin;
    }
    // The new expression               
    prev_pos = Math.ceil(child.position.y + height);
    //.........^^^^^^^^^^.........................^
    // the added code.
  }
}

function createListEntry(entry, width, height) {
  entry.clear();
  entry.lineStyle(2, 0x999999, 0.5);
  entry.beginFill(0x0d1a26, 0.7);
  entry.drawRect(0, 0, width, height);
  entry.endFill();
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<html>

<head>
  <style>
    canvas {
      position: relative;
      margin: 0 auto;
    }
  </style>
</head>

<body>
</body>

</html>

＆＃13;

垂直排序对象与它们之间的边距空间

1 个答案:

像素的整数。

固定？