PixiJS调整渲染器大小,但保持比例不变

PixiJS resize renderer but keep ratio?

本文关键字:调整 PixiJS      更新时间:2023-09-26

我正在使用PIXI.JS制作一款使用详细像素图像的游戏。我想设计垂直方向的游戏(非常适合智能手机),但我也希望它能在浏览器窗口中显示比例。我还需要所有的内容都可以缩放并保持原状。

有人能帮忙吗?我做了太多的研究,以至于我的头开始疼了,我觉得我还没有走得很远。

实际上在pixi中调整渲染器的大小非常容易。只需初始化一个渲染器。例如(需要一个id为"renderer"的画布):

var renderer = PIXI.autoDetectRenderer(width, height, {antialias: false, transparent: false, resolution: 1, view: document.getElementById("renderer")});

然后根据需要调整渲染器的大小:

renderer.resize(newWidth, newHeight);

参考:https://pixijs.github.io/docs/PIXI.WebGLRenderer.html