Using DOM in RPG Maker MV

じ☆ve冰风 · 发表于昨天 20:31

Using DOM in MV

By Amy

Do you have a need for text input boxes in your game? How about iFrames to show websites within your game's window? Or buttons that open things when clicked? Then you'll want to look at DOM, because everything has already been made for you (a text box is a LOT more complicated than you think).

DOM is the Document Object Model - it's basically what ensures that Firefox, Internet Explorer, Opera and other applications use the same standard elements. (So why don't you?)

Currently I have only got this working with the following caveats:

- Only works in a browser, as elements do not (currently) resize with the game canvas

- Does not appear to work in a mobile browser, presumably this is because of the use of z-index, but RPG Maker uses this so I'm a bit stuck

Is this a plugin?

No, it doesn't work like a plugin. It's a replacement of the index.html file. Always back up this file before you use it, and note that it is generated by the game engine, so you will have to create a second file, edit it, and then upload this instead of the game's file any time you launch your game.

Script

<!DOCTYPE html><html> <head>       <meta charset="UTF-8">       <meta name="apple-mobile-web-app-capable" content="yes">       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">       <meta name="viewport" content="user-scalable=no">       <link rel="icon" href="icon/icon.png" type="image/png">       <link rel="apple-touch-icon" href="icon/icon.png">       <link rel="stylesheet" type="text/css" href="fonts/gamefont.css">       <title>Game Title</title>       <style type="text/css">       div#dom_container {          width: 816px;          height: 624px;          position: absolute;          top: 0px;          bottom: 0px;          left: 0px;          right: 0px;          margin: auto;          z-index: 99;       }       </style> </head> <body style="background-color: black">       <script type="text/javascript" src="js/libs/pixi.js"></script>       <script type="text/javascript" src="js/libs/fpsmeter.js"></script>       <script type="text/javascript" src="js/libs/lz-string.js"></script>       <script type="text/javascript" src="js/rpg_core.js"></script>       <script type="text/javascript" src="js/rpg_managers.js"></script>       <script type="text/javascript" src="js/rpg_objects.js"></script>       <script type="text/javascript" src="js/rpg_scenes.js"></script>       <script type="text/javascript" src="js/rpg_sprites.js"></script>       <script type="text/javascript" src="js/rpg_windows.js"></script>       <script type="text/javascript" src="js/plugins.js"></script>       <script type="text/javascript" src="js/main.js"></script>       <div id="dom_container">                </div> </body></html>How to UseTo use this, you insert your elements within the dom_container div. Using onClick and such you get them to do things when they are interacted with.

For example, if I wanted to make a text input box:

<input id="inputBoxName" type="text" style="position: relative; left: 200px; top: 300px;" />Position it by editing the left and top values. Give it an ID so that you can do things with it later on.
You can show/hide this by using javascript. For example:

document.getElementById('inputBoxName').style.display = 'none';Or implement jQuery and do it that way.Example Implementation

A login script:

Code:
      <div id="dom_container">       <input type="text" id="username" style="border: 0; font-size: 18px; background: none; color: white; position: relative; top: 375px; left: 450px;" />       <input type="password" id="password" style="border: 0; font-size: 18px; background: none; color: white; position: relative; top: 428px; left: 254px;" />       </div>

Code:
Scene_Title.prototype.update = function() { if (Input.isTriggered('ok')) {    var username = document.getElementById('username').value;    var password = document.getElementById('password').value;    var result = login(username, password);    switch (result) {       case 'success':       document.getElementById('username').style.display = 'none';       document.getElementById('password').style.display = 'none';       this.commandNewGame();       break;       case 'notauser':       alert('That user doesn\'t exist.');       break;       case 'incorrect':       alert('Incorrect password.');       break;    } } Scene_Base.prototype.update.call(this);};

本贴来自国际rpgmaker官方论坛作者:Ellie Jane处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/using-dom-in-rpg-maker-mv.49708/

下载

教程

申请

插件

下载

教程

插件

下载

教程

插件

[制作教程] Using DOM in RPG Maker MV

本帖子中包含更多资源

浏览过的版块

灌水之王

幸运抽奖