CODEWITHSUNDEEP
javascriptjquerywordpresspixi.js
Alexander Farber
Alexander Farber

Reputation: 22968

How to fit PIXI renderer into browser width and height?

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 come 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:

screenshot 1

screenshot 2

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);

Upvotes: 3

Views: 3834

Answers (2)

Alexander Farber
Alexander Farber

Reputation: 22968

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
});

screenshot

Upvotes: 1

georgsh
georgsh

Reputation: 109

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.

Upvotes: 4

Related Questions