Question

我正在开发一个嵌入Wordpress首页的文字游戏，它使用PIXI.js绘制游戏板及其上方和下方 - 几个jQuery元素，如按钮和选择菜单。

虽然我很顺利，有一个问题我不知道如何解决并想知道其他PIXI开发人员如何解决它 - 硬编码的画布大小（我已经设置为1020 x 1080）对于某些浏览器来说太大了

例如，我的Macbook Air上有2个Google Chrome屏幕截图：

此外，我计划将我的游戏嵌入Facebook Canvas，这会让屏幕更加稀缺。

以下是我的JavaScript代码的摘录，请问如何改进？

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

Answer 1

使用window.innerWidth和window.innerHeight使board元素的大小最佳。

我的解决方案看起来像这样（仅使用原始画布，没有框架）

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

您也可以直接更改board尺寸，并使用PIXI renderer.resize()，但我不确定哪一个更正确。

Answer 2

有renderer.resize()，但它不会扩展游戏板。

Uisng：

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

运作良好并扩展内容。

另外，我发现jQuery resizable可以与PIXI配合使用：

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

如何使PIXI渲染器适合浏览器的宽度和高度？

2 个答案: