PixiJS填充背景屏幕

时间:2017-03-10 10:53:18

标签: javascript html5 pixi.js

我想知道如何将我的背景图像填满全屏。 一旦调整浏览器大小,我就有了调整大小的功能。但是在加载时,它不会将图像显示为已满..这是代码:

function init() {

    renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.view);
    renderer.backgroundColor = 0xffffff;
    stage = new PIXI.Container();

    renderer.view.style.position = "absolute";
    renderer.view.style.display = "block";
    renderer.autoResize = true;
    renderer.resize(window.innerWidth, window.innerHeight);
    window.addEventListener("resize", function(event){ 
    scaleToWindow(renderer);
});

    PIXI.loader
        .add(["img/background.png", "img/buttons/spin.png", "img/buttons/home.png", "img/buttons/soundon.png",
            "img/buttons/soundoff.png", "img/buttons/paytable.png", "img/buttons/stakefield.png", "img/buttons/up.png",
            "img/buttons/down.png", "img/buttons/no.png", "img/buttons/yes.png", "img/quitgame.png", "img/sym/blue_jelly.png",
            "img/sym/black_jelly.png", "img/sym/green_jelly.png", "img/sym/purple_jelly.png", "img/sym/red_jelly.png", "img/sym/yellow_jelly.png"])
        .on("complete", assetLoad)
        .load();
}

然后assetLoad函数引入了资产 - 背景的示例:

function assetLoad() {

    var background = new PIXI.Sprite(PIXI.loader.resources["img/background.png"].texture);
    background.scale.set(1.05, 1.05);
    background.position.set(0, 0);

    var balancetxt = new PIXI.Text("£ " + balance.toString(), {
        fontFamily: "Arial",
        fill: 0xFFFFFF,
        fontSize: 50,
        align: 'left'
    });
    balancetxt.anchor.set(-4.5, -0.3);
    background.addChild(balancetxt);

}

0 个答案:

没有答案
相关问题