PIXI容器比舞台更大?

时间:2017-01-29 18:56:59

标签: javascript pixi.js

在尝试关注pixi.js的this tutorial时,我遇到了一些我无法理解的事情。

我将renderer的大小设置为512 x 512,但在尝试使用stage渲染TilingSprite时,场景会在到达画布末尾之前被剪切,像这样:

enter image description here

编辑:您在上图中看到的黑度仍然在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);
}

1 个答案:

答案 0 :(得分:0)

结果TilingSprite也将宽度和高度作为参数,虽然我错误地认为它会重复直到完全覆盖stage,但它的默认值为{{1}宽度和高度:

100px

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