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

我正在研究嵌入在Wordpress首页的文字游戏，该游戏使用PIXI.js绘制游戏板，并在其上方和下方绘制 - 几乎没有像按钮和选择菜单这样的jQuery元素。如何使PIXI渲染器适合浏览器的宽度和高度？

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

例如这里有2分谷歌Chrome浏览器的截图在我的MacBook Air：

另外，我打算嵌入我在Facebook的帆布游戏，这将使屏幕房地产甚至更稀缺。

这是我的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);

来源

2016-07-30 Alexander Farber

使用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()，但我不知道哪一个是比较正确的。

来源

2016-07-30 09:59:27 georgsh

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

来源

2016-07-30 17:49:12

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

回答

相关问题