[英]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. 我正在开发一个嵌入Wordpress首页的文字游戏,它使用PIXI.js绘制游戏板及其上方和下方 - 几个jQuery元素,如按钮和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. 虽然我很顺利,有一个问题,我不知道如何解决和想知道其他PIXI开发人员如何解决它 - 硬编码的画布大小(我已经设置为1020 x 1080)对于某些浏览器来说太大了。
For example here are 2 Google Chrome screenshots at my Macbook Air: 例如,我的Macbook Air上有2个Google Chrome屏幕截图:
Also, I plan to embed my game in Facebook Canvas, which will make the screen estate even more scarce. 此外,我计划在Facebook Canvas中嵌入我的游戏,这将使屏幕空间更加稀缺。
Here is an excerpt of my JavaScript-code, how to improve it please? 这是我的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);
Use window.innerWidth
and window.innerHeight
to make your board
element optimal sized. 使用window.innerWidth
和window.innerHeight
可以使您的board
元素达到最佳尺寸。
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. 您也可以直接更改board
大小,并使用PIXI renderer.resize()
,但我不确定哪一个更正确。
There is renderer.resize() , but it does not scale the game board. 有renderer.resize() ,但它不会扩展游戏板。
Uisng: 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: 另外,我发现jQuery可以调整大小以适应PIXI:
$('#board').resizable({
aspectRatio: 1020 / (1020 + 60),
minWidth: 1020 / 2
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.