javascript - How to fit PIXI renderer into browser width and height? - Stack Overflow

admin管理员组

文章数量:1427726

I am working on a word game embedded in a Wordpress front page, which uses PIXI.js to draw the game board and above and below it - few jQuery elements like buttons and selectmenu.

While I e along nicely, there is one problem I do not know how to solve and wonder how other PIXI-developers solve it - the hardcoded canvas size (I have set it to 1020 x 1080) is too big for some browsers.

For example here are 2 Google Chrome screenshots at my Macbook Air:

Also, I plan to embed my game in Facebook Canvas, which will make the screen estate even more scarce.

Here is an excerpt of my JavaScript-code, how to improve it please?

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

I am working on a word game embedded in a Wordpress front page, which uses PIXI.js to draw the game board and above and below it - few jQuery elements like buttons and selectmenu.

While I e along nicely, there is one problem I do not know how to solve and wonder how other PIXI-developers solve it - the hardcoded canvas size (I have set it to 1020 x 1080) is too big for some browsers.

For example here are 2 Google Chrome screenshots at my Macbook Air:

Also, I plan to embed my game in Facebook Canvas, which will make the screen estate even more scarce.

Here is an excerpt of my JavaScript-code, how to improve it please?

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

• javascript
• jquery
• wordpress
• pixi.js

Share Improve this question Follow edited Oct 2, 2019 at 15:24 user128511 asked Jul 30, 2016 at 9:03 Alexander FarberAlexander Farber 23.1k7878 gold badges259259 silver badges445445 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use window.innerWidth and window.innerHeight to make your board element optimal sized.

My solution looks like this (using only raw canvas, no frameworks)

var context = document.getElementById('game');
function gameResize()
    {
    if (window.innerWidth/window.innerHeight > 1280/720)
        {
        context.height = window.innerHeight;
        context.width = 1280*context.height/720;
        }
    else
        {
        context.width = window.innerWidth;
        context.height = 720*context.width/1280;
        }
    }

You can also change board size directly, and with PIXI renderer.resize(), but i am not sure which one is more correct.

There is renderer.resize(), but it does not scale the game board.

Uisng:

renderer.view.style.width  = ...... + 'px';
renderer.view.style.height = ...... + 'px';

works well and scales the content.

Also, I have found the jQuery resizable to work well with PIXI:

$('#board').resizable({
       aspectRatio: 1020 / (1020 + 60),
       minWidth: 1020 / 2
});

本文标签： javascriptHow to fit PIXI renderer into browser width and heightStack Overflow