javascript游戏精灵定位

时间:2016-02-20 03:19:56

标签: javascript cocos2d-js

我试图创建一个国际象棋棋盘,并将其放置在屏幕中间,到目前为止我无法将其直接放在中心。我不想将位置硬编码到屏幕上,因为我将处理不同的屏幕尺寸。

    var winsize = cc.director.getWinSize();
    var centerpos = cc.p(winsize.width / 2, winsize.height / 2);

    for (i=0; i<64; i++){
        var tile = cc.Sprite.create(res.tile_png);
        this.addChild(tile,0);
        tile.setPosition(winsize.width+i%8*50/-10, winsize.height-Math.floor(i/8)*50);

    }

但是瓷砖和定位完全关闭

2 个答案:

答案 0 :(得分:1)

@ jumpman8947,如果你使用的是Cocos2d js,也许你有类似的行:cc.view.setDesignResolutionSize(480, 320, cc.ResolutionPolicy.SHOW_ALL);

在这种特殊情况下,游戏可以扩展到任何场景,但仍然以480x320的分辨率运行,所以无论你使用什么屏幕重建,科科世界的中心总是cc.p(240, 160)所以不管是什么窗口大小或屏幕分辨率,游戏的分辨率保持不变

您可以在此处(以及官方js-doc)阅读有关解决方案政策的更多信息: http://www.cocos2d-x.org/wiki/Multiple_Resolution_Policy_for_Cocos2d-JS 另请注意,Cocos中的Sprite位置是精灵的中心位置,而不是左下角

答案 1 :(得分:0)

在你的问题中,并不完全清楚你想要什么。但是,我做了一些假设。我的解决方案的解释嵌入在下面的代码中的注释中。

// var winsize = cc.director.getWinSize();
// Here is some example hard-coded return values:
var winsize = {width: 600, height: 400};
// You can change these numbers to see how they influence
// the outcome.

// var centerpos = cc.p(winsize.width / 2, winsize.height / 2);
// This line doesn't seem relevant for the question you asked.
// Or, rather, the following calculations will result in the tiles
// being centred on the screen anyway, so this calculation here
// is unnecessary.

// Being a chess board, I assume that you want the tiles to be square,
// i.e. to have the same width and height.
// If so, first find out which is the minimum dimension
// and calculate the tile size as being 1/8 of that.
var minDimn = Math.min(winsize.width, winsize.height);
var tileSize = minDimn / 8;

// Find out how far in from the left and how far down from the top
// you need the upper left corner of the upper left tile to start.
// This assumes that you don't need any "margin" around the board.
// (If you do need such a "margin", basically subtract it twice
// from each of winsize.width and winsize.height above.)
// Start with default values of 0 for each, but then add in the
// excess for the longer dimension, but divide it by two
// because that excess will be split between either
// the top and bottom or the left and right.
var xStart = 0, yStart = 0;
if (winsize.width > winsize.height) {
  xStart = (winsize.width - winsize.height) / 2;
} else if (winsize.height > winsize.width) {
  yStart = (winsize.height - winsize.width) / 2;
}

// Instead of looping through all 64 positions in one loop,
// loop through all the horizontal positions in an outer loop
// and all the vertical positions in an inner loop.
for (i = 0; i < 8; i++) {
  // For the horizontal dimension, calculate x for each tile
  // as the starting position of the left-most tile plus
  // the width of the tile multiplied by the number of tiles (0-based)
  var x = xStart + i * tileSize;
  // Now the inner loop
  for (j = 0; j < 8; j++) {
    // Same type of calculation for the y value.
    var y = yStart + j * tileSize;
    // You can see the values in this demo here.
    document.write("<pre>(" + x + ", " + y + ")</pre>");

    // The following two lines don't seem to be relevant to the question.
    // var tile = cc.Sprite.create(res.tile_png);
    // this.addChild(tile,0);
    
    // Use your calculated values in your function call.
    // tile.setPosition(x, y);
  }
}