[MV] Using DOM in RPG Maker MV

Ellie · Nov 7, 2015

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

HTML:

<div class="html" id="{CB}" style="font-family: monospace;"><ol><span style="color: #00bbdd;"><!DOCTYPE html>

 

<span style="color: #009900;">[url=http://december.com/html/4/element/html.html]<span style="color: #000000; font-weight: bold;"><html>[/url]

 

    <span style="color: #009900;">[url=http://december.com/html/4/element/head.html]<span style="color: #000000; font-weight: bold;"><head>[/url]

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/meta.html]<span style="color: #000000; font-weight: bold;"><meta[/url] charset="UTF-8"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/meta.html]<span style="color: #000000; font-weight: bold;"><meta[/url] name="apple-mobile-web-app-capable" content="yes"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/meta.html]<span style="color: #000000; font-weight: bold;"><meta[/url] name="apple-mobile-web-app-status-bar-style" content="black-translucent"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/meta.html]<span style="color: #000000; font-weight: bold;"><meta[/url] name="viewport" content="user-scalable=no"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/link.html]<span style="color: #000000; font-weight: bold;"><link[/url] rel="icon" href="icon/icon.png" type="image/png"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/link.html]<span style="color: #000000; font-weight: bold;"><link[/url] rel="apple-touch-icon" href="icon/icon.png"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/link.html]<span style="color: #000000; font-weight: bold;"><link[/url] rel="stylesheet" type="text/css" href="fonts/gamefont.css"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/title.html]<span style="color: #000000; font-weight: bold;"><title>[/url]Game Title<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></title>

 

 

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/style.html]<span style="color: #000000; font-weight: bold;"><style[/url] type="text/css"<span style="color: #000000; font-weight: bold;">>

 

          div#dom_container {

 

            width: 816px;

 

            height: 624px;

 

            position: absolute;

 

            top: 0px;

 

            bottom: 0px;

 

            left: 0px;

 

            right: 0px;

 

            margin: auto;

 

            z-index: 99;

 

          }

 

        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></style>

 

    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></head>

 

    <span style="color: #009900;">[url=http://december.com/html/4/element/body.html]<span style="color: #000000; font-weight: bold;"><body[/url] style="background-color: black"<span style="color: #000000; font-weight: bold;">>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/libs/pixi.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/libs/fpsmeter.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/libs/lz-string.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_core.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_managers.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_objects.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_scenes.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_sprites.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/rpg_windows.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/plugins.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/script.html]<span style="color: #000000; font-weight: bold;"><script[/url] type="text/javascript" src="js/main.js"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script>

 

 

 

        <span style="color: #009900;">[url=http://december.com/html/4/element/div.html]<span style="color: #000000; font-weight: bold;"><div[/url] id="dom_container"<span style="color: #000000; font-weight: bold;">>

 

          

 

 

 

        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div>

 

    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></body>

 

<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></html>

How to Use

To 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:

HTML:

<div class="html" id="{CB}" style="font-family: monospace;"><ol><span style="color: #009900;">[url=http://december.com/html/4/element/input.html]<span style="color: #000000; font-weight: bold;"><input[/url] id="inputBoxName" type="text" style="position: relative; left: 200px; top: 300px;" /<span style="color: #000000; font-weight: bold;">>

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:

JavaScript:

document.getElementById('inputBoxName').style.display = 'none';

Or implement jQuery and do it that way.

Example Implementation

A login script:

HTML:

<div class="html" id="{CB}" style="font-family: monospace;"><ol>        <span style="color: #009900;">[url=http://december.com/html/4/element/div.html]<span style="color: #000000; font-weight: bold;"><div[/url] id="dom_container"<span style="color: #000000; font-weight: bold;">>

          <span style="color: #009900;">[url=http://december.com/html/4/element/input.html]<span style="color: #000000; font-weight: bold;"><input[/url] type="text" id="username" style="border: 0; font-size: 18px; background: none; 

 

color: white; position: relative; top: 375px; left: 450px;" /<span style="color: #000000; font-weight: bold;">>

          <span style="color: #009900;">[url=http://december.com/html/4/element/input.html]<span style="color: #000000; font-weight: bold;"><input[/url] type="password" id="password" style="border: 0; font-size: 18px; background: 

 

none; color: white; position: relative; top: 428px; left: 254px;" /<span style="color: #000000; font-weight: bold;">>

        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></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<span style="color: #000099; font-weight: bold;">\'t exist.');

          break;

        case 'incorrect':

          alert('Incorrect password.');

          break;

      }

    }

    Scene_Base.prototype.update.call(this);

};

Envision, Create, Share

[MV] Using DOM in RPG Maker MV

Ellie

Share this page

Thank you for viewing

Discord

RPG Maker

Content