英文:
phaser - how to find mobile device notch size
问题
我的游戏在移动设备上全屏运行，但我需要保留一些顶部安全空间，以避免刘海区域和状态栏。
找到了这个缩放示例，但它不处理刘海/状态栏空间。
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
有没有办法实现这个效果？
在IONIC中，有一个名为safe-area-inset-top的CSS变量，但我不知道如何将其值传递给Phaser。
英文:
My game is running fullscreen on mobile devices but I need to keep some top safe space to avoid notch space and statusbar.
Found this scale examples but it doesn't handle notch/statusbar spaces.
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
Is there any way to do this?
In IONIC it has CSS variable called safe-area-inset-top, but I don't know how to bring it's value to Phaser.
答案1
得分: 1
我没有带凹槽的手机来测试这个，我假设你可以在像 body 这样的元素上设置 环境变量 样式
(我添加了默认的内边距为 10px，你可以将其设置为其他任何值)
.body-class {
padding-top: max(env(safe-area-inset-top), 10px);
padding-bottom: max(env(safe-area-inset-bottom), 10px);
padding-left: max(env(safe-area-inset-left), 10px);
padding-right: max(env(safe-area-inset-right), 10px);
}
然后，你可以使用 getComputedStyle 获取尺寸（文档链接）：
...
let widthOffSet = getComputedStyle(document.body).getPropertyValue('width');
let heighthOffSet = getComputedStyle(document.body).getPropertyValue('height');
...
new Phaser.Game({ width, height, ... });
英文:
I have no phone with a notch to test this, I assume you could set the styles environment variables on a element like body
(I added a default padding of 10px you could set it to any other value)
<!-- language: lang-css -->
.body-class {
padding-top: max(env(safe-area-inset-top), 10px);
padding-bottom: max(env(safe-area-inset-bottom), 10px);
padding-left: max(env(safe-area-inset-left), 10px);
padding-right: max(env(safe-area-inset-right), 10px);
}
And than you could get the dimensions, with getComputedStyle (link to the documentation):
<!-- language: lang-js -->
...
let widthOffSet = getComputedStyle(document.body).getPropertyValue('width');
let heighthOffSet = getComputedStyle(document.body).getPropertyValue('height');
...
new Phaser.Game({ width, height, ... });
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论