PIXI容器比舞台还大？答案

【问题标题】：PIXI container bigger than stage?PIXI容器比舞台还大？
【发布时间】：2017-02-02 22:08:19
【问题描述】：

在尝试关注 this tutorial 获取 pixi.js 时，我遇到了一些我不太明白的事情。

我将 renderer 的大小设置为 512 x 512，但是当尝试使用 TilingSprite 渲染 stage 时，场景在到达画布末端之前被剪切，如下所示：

编辑：您在上图中看到的黑度仍在 512 x 512 画布本身内，它不是浏览器的背景。

不是永远复制地砖，场景只是在 100 像素左右后变成黑色。

这里发生了什么？

代码如下：

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

//Aliases
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Texture = PIXI.Texture,
    Sprite = PIXI.Sprite;
    TilingSprite = PIXI.TilingSprite;

var stage = new Container();
    stage.scale.set(3,3);
var renderer = autoDetectRenderer(512, 512);

document.body.appendChild(renderer.view);

PIXI.loader
    .add("src/tileset.json")
    .load(setup);

function setup() {
    var id = PIXI.loader.resources["src/tileset.json"].textures;

    let dude = new Sprite( id["dude"] );
    let blob = new Sprite( id["blob"] );
    let floor = new TilingSprite( id["floor"] );
    let chest = new Sprite( id["chest"] );

    //Position the chest next to the right edge of the canvas
    chest.x = stage.width - chest.width - 48;
    chest.y = stage.height / 2 - chest.height / 2;

    stage.addChild(floor);
    stage.addChild(chest);
    stage.addChild(dude);

    renderer.render(stage);
}

【问题讨论】：

你试过不设置缩放会发生什么吗？如果您手动设置 TilingSprite 大小，它是否也能正常工作？像 new TilingSprite(id["floor"], renderer.width, renderer.height)?

标签： javascript pixi.js

【解决方案1】：

原来TilingSprite 也将宽度和高度作为参数，虽然我错误地认为它只会重复直到完全覆盖stage，但它的宽度和高度的默认值都是100px ：

@param {PIXI.Texture} texture - the texture of the tiling sprite
@param {number} [width=100] - the width of the tiling sprite
@param {number} [height=100] - the height of the tiling sprite

用我想要的尺寸初始化它解决了这个问题。

【讨论】：