游戏窗口大小自适应脚本(解决游戏黑边问题)

41workroom

参考了
https://www.jianshu.com/p/0bd8b462dac1
https://blog.csdn.net/lixiaonaaa/article/details/121513235

1. //这里是改变游戏画面的函数
   
2. function setScreenSize(screenWidth, screenHeight){
   
3.     var deltaWidth = screenWidth - window.innerWidth;
   
4.     var deltaHeight = screenHeight - window.innerHeight;  
   
5.     window.moveBy(- deltaWidth / 2, - deltaHeight / 2);
   
6.     window.resizeBy(deltaWidth, deltaHeight);
   
7. 
   
8.     console.log("宽度已被设置为" + deltaWidth);
   
9.     console.log("高度已被设置为" + deltaWidth);
   
10. }
    
11. 
    
12. //这里获取网页可见区域宽高
    
13. var clientWidth = document.body.clientWidth;
    
14. var clientHeight = document.body.clientHeight;
    
15. 
    
16. setScreenSize(clientWidth, clientHeight);
    
17. 
    

复制代码

如果UI变形了的可以参考4楼的代码

41workroom

求评分收藏 谢谢了
代码可能还有不足 望指正

apple5740

哇！感谢楼主！！非常感谢！ 目前有一些问题。。就是改变画面之后,有些UI也被拉长了。比如战斗界面选择目标敌人的按钮。地图背景的大小也不匹配了,但是战斗的场景就很合适。。
这个两个问题。
问题1：
按钮可能需要自己改。。
问题2：
这个地图场景背景,可以用战斗场景拉升背景的方法吗？
或者有更好的解决办法吗？

41workroom

apple5740 发表于 2022-6-30 19:40
哇！感谢楼主！！非常感谢！ 目前有一些问题。。就是改变画面之后,有些UI也被拉长了。比如战斗界面选择目标 ...

唔……那就是维持比例不变吧
那这样：

1. //这里是改变游戏画面的函数
   
2. function setScreenSize(screenWidth, screenHeight){
   
3.     var deltaWidth = screenWidth - window.innerWidth;
   
4.     var deltaHeight = screenHeight - window.innerHeight;  
   
5.     window.moveBy(- deltaWidth / 2, - deltaHeight / 2);
   
6.     window.resizeBy(deltaWidth, deltaHeight);
   
7. 
   
8.     console.log("宽度已被设置为" + deltaWidth);
   
9.     console.log("高度已被设置为" + deltaWidth);
   
10. }
    
11. 
    
12. //这里获取网页可见区域宽高
    
13. var clientWidth = document.body.clientWidth;
    
14. var clientHeight = document.body.clientHeight;
    
15. 
    
16. var clientScale =  clientWidth / clientHeight;
    
17. 
    
18. setScreenSize(window.innerHeigh * clientScale, window.innerHeigh);

复制代码

这样尽量减少了画面的破坏

41workroom

apple5740 发表于 2022-6-30 19:40
哇！感谢楼主！！非常感谢！ 目前有一些问题。。就是改变画面之后,有些UI也被拉长了。比如战斗界面选择目标 ...

唔……你好 能问一下吗
虽然我写出了那一段 但我不知道该怎么在游戏刚开始的时候运行那一段
我试过公共事件，但好像不行……

apple5740

41workroom 发表于 2022-7-1 08:48
唔……你好 能问一下吗
虽然我写出了那一段 但我不知道该怎么在游戏刚开始的时候运行那一段
我 ...

哈！！！首先感谢您的回答,刚好我也遇到您说的这个问题！！
我是想在游戏开始时,给自己的全局变量赋值。。成$dataMyEvents...我加入的json文件的数据,我没好意思在群里问。。因为有好多插件都这样做过。
然后我就研究别人的插件。。也没看懂。。好像它们都是把变量写在插件参数上的。。可是我不想插件有这样的参数,于是就想怎么实现在游戏一开始运行一段代码。。。
方式1：在游戏添加一个事件,游戏开始后自动执行。。
（感觉不好）
方式2：使用自调用写法
(function () {
    var x = "Hello!!";      // 我将调用自己
})();
很多插件用的这个方法。。,但是用来赋值全局变量就不行。。
方式3：找一个引擎自带的方法,它在游戏开始时候会调用,然后重写它。。
然后我就找到了  Game_Variables.prototype.initialize 这个方法。。
测试后好像能达到要求。。

apple5740

还有就是。。。我出现那个问题。是因为我手动改变了系统2的宽高参数。。导致的
您写的方法,我是作为思路先收藏的,我还没准备好做自适应。。所以也就没放入游戏中。
不过我现在放入游戏中测试了,发现您的两个方法好像都没改变游戏窗口。debug的结果是 :
第一个方法：
宽度已被设置为-16
高度已被设置为-16

第二个方法
宽度已被设置为NaN
高度已被设置为NaN


是不是因为我是没用网页端的缘故。我测试都是本地运行游戏测试的。我听说有些测试是在网页端。。可是我完全不懂网页端是怎么一回事。

41workroom

apple5740 发表于 2022-7-1 13:21
还有就是。。。我出现那个问题。是因为我手动改变了系统2的宽高参数。。导致的
您写的方法,我是作为思路先 ...

唔……我再研究研究 谢谢了

41workroom

apple5740 发表于 2022-7-1 13:21
还有就是。。。我出现那个问题。是因为我手动改变了系统2的宽高参数。。导致的
您写的方法,我是作为思路先 ...

我想起一件事了
在游戏的标题出来之前，画面的大小是不确定的！也就是说一定要在标题加载出来之后再读取与调整

4楼等比例缩放的解决方案可能会出现数值问题（小数过多），是不是需要考虑取整……

41workroom

apple5740 发表于 2022-7-1 13:21
还有就是。。。我出现那个问题。是因为我手动改变了系统2的宽高参数。。导致的
您写的方法,我是作为思路先 ...

https://rpg.blue/forum.php?mod=viewthread&tid=484391&page=1#pid2910280
这个可以调整对话框