請問如何讓輸出後的HTML5遊戲可以跟隨IFRAME指定視窗大小?

小怪兽奇奇侠 · 发表于 2021-9-18 16:32:05

如果游戏分辨率是816x624的话，iframe的宽高也设置成一样的就好了。

小怪兽奇奇侠 · 发表于 2021-9-21 13:19:15

这个问题可能和mv获取到的width和height有关。以我的游戏为例

在不同窗口大小下，canvas的宽高是自动更新的。然而，这是在浏览器模拟手机的情况下是这样。如果是电脑的话，就会出现你所说的情况。

能想到的简单易行的办法只有一个，就是更改userAgent，让游戏误认为是手机在访问。
要实现这一点，还是需要改动游戏的默认代码。

<script>
var customeUserAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.81 Mobile Safari/537.36";
Object.defineProperty(navigator,'userAgent',{value:customeUserAgent,writable:false});
</script>

复制代码

将这段代码插入到游戏index.html的<body>标签之中，就是有一大堆script标签的那里。

然后再访问游戏就会实现你想要的效果，放到iframe的框架里也会自适应的。

小怪兽奇奇侠 · 发表于 2021-10-2 22:17:34

本帖最后由小怪兽奇奇侠于 2021-10-3 10:26 编辑

你好，我现在回家了。由于看到你上次游戏不稳Lagg的帖子里讲你在把你的游戏移植到mz，所以我就按mz来说下我的办法。

<br />

首先得说明一下，我的办法仅改动了定位原点，iframe的完全自适应需要开发者的配合。

（这是因为游戏里内嵌的iframe的宽高和坐标是由开发者写死的，是多少像素就是多少像素，不会跟着游戏的大小变。）

如果开发者在开发的时候坐标和宽高都用百分比来写，就可以实现完全自适应。

下边说一下改动定位原点的办法：

（原先的定位原点是在窗口左上角，现在改为了canvas左上角，这样可以实现准确定位。）

首先，iframe是在dom层的，游戏里图片定位是在canvas里进行的，这二者有本质区别，所以无法按canvas内部的定位方式给dom里生搬硬套。
由于当前技术的发展，canvas标签里还不可以直接放其他标签，我个人的办法是构造一个和canvas一样的空容器，然后在这个空容器里放iframe实现定位。
这个方法会对mz核心作一些微小的改动，但不会影响其他程式的运行，为了保险起见，在修改核心前请先备份一下原文件。
具体做法如下：
首先，在js文件夹下找到rmmz_core.js这个文件，搜索Graphics._createCanvas，找到这个函数，这个函数底下还紧跟了一个updateCanvas的函数，将这两个函数替换成

Graphics._createCanvas = function() {
//canvas 构造
this._canvas = document.createElement("canvas");
this._canvas.id = "gameCanvas";
//构造一个和canvas一样的空容器
this._div = document.createElement("div");
this._div.id = "iframeDiv";
//空容器的更新工作与canvas的一起运行
this._updateCanvas();
document.body.appendChild(this._canvas);
document.body.appendChild(this._div);
};
Graphics._updateCanvas = function() {
//更新canvas
this._canvas.width = this._width;
this._canvas.height = this._height;
this._canvas.style.zIndex = 1;
//更新空容器
this._div.width = this._width;
this._div.height = this._height;
this._div.style.zIndex = 999999;
//更新二者
this._centerElement(this._canvas);
this._centerElement(this._div);
};
function clickexit(){
document.getElementById("clickexit").innerHTML="";
document.getElementById("iframeDiv").innerHTML="";
};

复制代码

然后我上次给你的iframe代码也需要作相应的改动。
调用iframe的代码改为

x="http://rpg.blue/";
pp = document.getElementById("iframeDiv");
pp.innerHTML = "<font style='position:absolute;left:220px;top:0px;' id='clickexit' onclick='clickexit()'>X</font><iframe src='" + x + "'style='position:absolute;top:0px;left:0px;z-index:999;width:200px;height:200px;'></iframe>";

复制代码

其中top，left的数值为你想要的坐标。width与height的值除了px外，还可以用%和其他单位，left和top同理。
之前那段放在插件里的clickexit()方法整合到了rmmz_core.js中，成为核心文件的一部分了，所以之前放在插件里的相应代码可以删去了。

这是我在本地测试的效果，iframe随游戏分辨率自适应。

你可以试试效果怎么样。
附：这是在mv上的效果

我也认为mv比mz好一点，至少从体感来讲，mv游戏对显卡要求不高，我开mz游戏的时候电脑会变卡，运作的声音也会特别厉害，就和开3d游戏一样。

小怪兽奇奇侠 · 发表于 2021-10-4 01:00:29

本帖最后由小怪兽奇奇侠于 2021-10-4 01:13 编辑

经过你刚刚那么一讲，我忽然想到了一个坐标和大小都可以用像素值，iframe还可以自适应的办法。
虽然不像仅在外层iframe加点料那么简单，不过原理也很好懂，也非常简单。
需要改动的地方有三处：
第一处：对mv1.6而言，在rpg_core.js里搜索Graphics._centerElement，在他的下边新定义一个名为scaleElement的方法，具体代码如图

Graphics._scaleElement = function(element){
element.style.transform = "scale("+ this._realScale +")";
}

复制代码

第二处：还是我楼上介绍的代码，其中的updataCanvas方法做一点改动，改为

Graphics._updateCanvas = function() {
//更新canvas
this._canvas.width = this._width;
this._canvas.height = this._height;
this._canvas.style.zIndex = 1;
//更新空容器
this._div.width = this._width;
this._div.height = this._height;
this._div.style.zIndex = 999999;
//更新二者
this._centerElement(this._canvas);
this._centerElement(this._div);
this._scaleElement(this._div);
};

复制代码

其他方法和楼上给的保持一致。
第三处：index.html里在head标签内加入以下代码：

<style type="text/css">
#iframeDiv{-webkit-transform-origin: 0 0;transform-origin: 0 0;-moz-transform-origin: 0 0;-o-transform-origin: 0 0;}
</style>

复制代码

如图

做了以上改动后，事件中呼出iframe的脚本如图所示，可以看到用的都是像素。

游戏中的效果是

iframe自适应。

这么做的原理是，使用了css3的transform属性，他会按照缩放游戏的比率自动缩放装着iframe的空容器，进而缩放iframe和关闭按钮。
为了保证缩放后iframe的位置不会发生偏差，缩放原点设为了左上角，和定位原点一致，这样可以确保缩放后iframe不会跑掉。
因此你可以使用像素来进行大小和坐标的设置，当分辨率发生变化时，rpg_core.js会自动处理。

以上三处的改动非常容易，但如果你呼叫iframe的代码用的是我去年给你的那个代码，那也是需要做改动的。
按你所说的情况，要改动的地方相当多，在mv编辑器里改非常麻烦。
其实这个改动也非常简单。相对于去年的代码，需要改动的地方是
ErrorPrinter 改为 iframeDiv
fixed 改为 absolute
没错...只有这两处而已.......
你可以用代码编辑器的查找与替换功能，在data下的map的json文件里改，
如果你的代码编辑器是vscode，用这个功能，选定你游戏的data文件夹查找与替换，那么你游戏内所有呼出的iframe都将被修正。

这会非常迅速....

小怪兽奇奇侠 · 发表于 2021-10-4 17:34:45

你会不会是哪里没改好呀？这是我把你的代码放进去了出来的效果。

顺带一问，你的mv版本是1.6.1吗？

实在不行那是这吧，你把你的index.html和rpg_core.js先都备份一下，我把我的index.html和rpg_core.js给你。
一般来讲，无论你用什么插件，都不会涉及到这两个文件的。
你直接往进换，然后在用你刚刚的代码试试效果。

Fixiframe.zip (41.62 KB, 下载次数: 23)

帐号		自动登录	找回密码
密码			注册会员

[有事请教] 請問如何讓輸出後的HTML5遊戲可以跟隨IFRAME指定視窗大小?

点评

点评

点评

点评

点评

评分