Project1

标题: 請問如何讓輸出後的HTML5遊戲可以跟隨IFRAME指定視窗大小? [打印本页]

作者: play337 时间: 2021-9-18 12:35
标题: 請問如何讓輸出後的HTML5遊戲可以跟隨IFRAME指定視窗大小?
請問如何讓輸出後的HTML5遊戲可以跟隨IFRAME指定視窗大小?

<iframe id=Game allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" src="https://遊戲網址/index.html" width="816" height="624" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

01.如果我把 816X624 改成 700X500
就會變成遊戲很大... IFARME 很小

02.01.如果我把 816X624 改成 1024X768
就會變成遊戲很小... IFARME 很小

就是遊戲的大小都不會跟著IFRAME改變

P.S 但是我在測試遊戲的時候不論我怎麼改變遊戲視窗大小. 整個遊戲都會自動跟著變大變小... 是自動的...不需要改

作者: 小怪兽奇奇侠 时间: 2021-9-18 16:32
如果游戏分辨率是816x624的话，iframe的宽高也设置成一样的就好了。

作者: xiamumomo 时间: 2021-9-18 18:13

小怪兽奇奇侠发表于 2021-9-18 16:32
如果游戏分辨率是816x624的话，iframe的宽高也设置成一样的就好了。

https://www.jianshu.com/p/0bd8b462dac1
虽然不太懂也没事过如果可以让玩家像上面链接一样选择指定的大小呢包含全屏什么的

作者: 小怪兽奇奇侠 时间: 2021-9-21 13:19
这个问题可能和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
本帖最后由小怪兽奇奇侠于 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
本帖最后由小怪兽奇奇侠于 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都将被修正。

这会非常迅速....

作者: play337 时间: 2021-10-4 11:36
加了這個得到了...

JAVASCRIPT 代码复制

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);
};

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);


};

作者: play337 时间: 2021-10-4 15:45
改了5樓之後...剛剛那個錯誤就消失了...

不過現在變成在遊戲裡面腳本用的那個 IFRAME 明明已經取代的兩個變數了...

畫面還是大到衝出去 >_<

JAVASCRIPT 代码复制

//崁入視窗
x="http://rpg.blue/";
pp = document.getElementById("iframeDiv");
pp.innerHTML = "<font color='#ff0000' style='position:absolute;left:0px;top:0px;' id='clickexit' onclick='clickexit()'>X</font><iframe src='" + x + "'width='644' height='362' style='position:absolute;top:250px;left:5px;' frameborder='0' scrolling='no'></iframe>";

//崁入視窗


x="http://rpg.blue/";


pp = document.getElementById("iframeDiv");


pp.innerHTML = "<font color='#ff0000' style='position:absolute;left:0px;top:0px;' id='clickexit' onclick='clickexit()'>X</font><iframe src='" + x + "'width='644' height='362' style='position:absolute;top:250px;left:5px;' frameborder='0' scrolling='no'></iframe>";

作者: 小怪兽奇奇侠 时间: 2021-10-4 17:34
你会不会是哪里没改好呀？这是我把你的代码放进去了出来的效果。

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

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

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

作者: play337 时间: 2021-10-5 09:11
現在又跳出另一個問題.... 不知道為什麼會有插件衝突 ...
我看了一下
MousePointerExtend.js
rpg_managers.js:1949 TypeError: Cannot read property 'style' of null
at Function.Graphics.updateMousePointer (MousePointerExtend.js:601)
at Function.Graphics.setPointerType (MousePointerExtend.js:580)
at Function.SceneManager.updateMousePointer (MousePointerExtend.js:536)
at Function.SceneManager.updateScene (MousePointerExtend.js:521)
at Function.SceneManager.updateMain (rpg_managers.js:1983)
at Function.SceneManager.update (rpg_managers.js:1907)
at Function.SceneManager.update (MPP_EncounterEffect.js:1344)
SceneManager.catchException @ rpg_managers.js:1949
rpg_managers.js:1919 Uncaught TypeError: Cannot read property 'style' of null
SceneManager.onError @ rpg_managers.js:1919
rpg_managers.js:1920 chrome-extension://njgcanhfjdabfmnlmpmdedalocpafnhl/js/plugins/MousePointerExtend.js 601
SceneManager.onError @ rpg_managers.js:1920
MousePointerExtend.js:601 Uncaught TypeError: Cannot read property 'style' of null
at Function.Graphics.updateMousePointer (MousePointerExtend.js:601)
at Function.Graphics.setHiddenPointer (MousePointerExtend.js:571)
at Function.TouchInput._onMouseMove (MousePointerExtend.js:559)

MousePointerExtend.zip (4.2 KB, 下载次数: 2)

欢迎光临 Project1 (https://rpg.blue/)