[英]PIXI container bigger than stage?
尝试按照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
将width和height作为参数,而我错误地认为它会一直重复直到stage
完全被覆盖为止,但width和height的默认值均为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
用我想要的尺寸进行初始化解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.