Resources!

This is just a collection of a buncha stuff I think is useful or cool, about basically everything.

Go Home

Monsieurdoll PSP -> 3DS Shell

SOURCE

I took monsieurdoll's PSP code and modified it to fit a 3DS shell image I found.

.tdsbtn2 {
    position: absolute;
    background-color: transparent;
    top: 400px;
    left: 540px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px dotted lightgrey;
    filter: drop-shadow(0px 0px 2px white);
    z-index: 3
  }

.tdsbtn1 {
    position: absolute;
    background-color: transparent;
    top: 400px;
    left: 479px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px dotted lightgrey;
    filter: drop-shadow(0px 0px 2px white);
    z-index: 3
  }

.tdsbtn1:active {
    filter: brightness(100%) drop-shadow(0px 0px 5px white);
  }

.tdsbtn2:active {
    filter: brightness(100%) drop-shadow(0px 0px 5px white);
  }

.tdsbtn1:hover {
    background: rgba(255, 255, 255, 0.45);
    border: 2px dotted white;
    filter: drop-shadow(0px 0px 20px white);
  }

.tdsbtn2:hover {
    background: rgba(255, 255, 255, 0.45);
    border: 2px dotted white;
    filter: drop-shadow(0px 0px 20px white);
  }

.chatbox {
    position: absolute;
    top: 297px;
    left: 35px;
    width: 312px;
    height: 235px;
  }

.threedsvideo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 382px;
    height: 230px;
    z-index: 2;
    transition: .5s;
  }

.threedsvideo:hover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 382px;
    height: 230px;
    z-index: 2;
    transition: .5s;
  }

#videocontainer {
    background-color: black;
    position: absolute;
    top: 43px;
    left: 110px;
    width: 382px;
    height: 230px;
    z-index: 1;
    margin-top: 0px;
  }
</style>
<body>
  <div class="dscontainer" style="z-index:2">
    <div class="threeds" loading="lazy">
      <script>
        var slideIndex = 1;
        showSlides(slideIndex); // Next/previous controls 
        function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; } 
      </script>
      <button title="Click for the next video!" class="tdsbtn1" loading="lazy" onclick="plusSlides(-1)"></button>
      <button title="Click for the next video!" class="tdsbtn2" loading="lazy" onclick="plusSlides(1)"></button>
      <div id=&apos;videocontainer&apos; class="modal">
        <div class="modal-content">
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          
          <div class="mySlides" display=&apos;block&apos;>
            <iframe loading=&apos;lazy&apos; class="threedsvideo" src="https://www.youtube.com/embed/[video embed code after v= ]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          </div>
          <iframe class="chatboxOrOtherThing" src="[but ur iframe link here]" width="" height="" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
        </div>
      </div>
    </div>
  </div>
</body>

Theme Swapper Buttons

Source is broken now, still putting the og link.

Buttons to toggle through multiple CSS stylings.

<style>
            /* bar that holds the theme picker text and the buttons. I just made this so I could move stuff around easier */
            .themebar {
                /* position: absolute;
       left: 200px;
        top: 215px; */
                background: transparent;
                border-radius: 10px;
            }

/* Button default style */
            .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: white;
                color: black;
                border: 1px solid grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

/* 
    
    In order to change the themes, put the class or id of whatever you want to change after ".one" or ".two" or whatever you title your theme, and then style it. You're essentially just copying the original style and then putting the theme name infront of it and changing whatever parts of it you want to change for the new theme.
    
    You could also add new elements for only certain elements, honestly you can get pretty creative with it.
    
    */

/* Default - leave this empty, so you can revert the theme changes to nothing and see the original code. */
            .default body {}

/* Mode One  ---------------------------------------------------------*/
            .One body {
                background-color: black;
                color: white;
            }

.One .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: red;
                color: white;
                border: 2px dashed grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

/* ----------------------------------------------------------------*/

/* Mode Two */
            .Two body {
                background-image: url("https://sozai.pooftie.me/bg/bg%20(1).png");
                color: black;
            }

.Two .theme-btn {
                padding: 5px 10px;
                cursor: pointer;
                border: none;
                outline: none;
                margin: 5px;
                border-radius: 10px;
                background: gainsboro;
                color: black;
                border: 1px solid grey;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

</style>
        
        <div class="themebar">
            <center>
                Theme Picker
            </center>
            
            <div class="theme-switcher" style="text-align: center;">
                <button class="theme-btn" onclick="setTheme('default')">Default</button>
                <button class="theme-btn" onclick="setTheme('One')">One</button>
                <button class="theme-btn" onclick="setTheme('Two')">Two</button>
            </div>
            
        </div>
        
        <script>
            function setTheme(theme) {
                document.documentElement.className = theme;
            }

</script>

Tabs Within Tabs

SOURCE

I did this one myself, its pathetically simple and took me way too long to figure out, but all you need to do is change all the values for the script so it's not calling on the same thing if theres more than one on there. infinite tabs goooo

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        box-sizing: border-box
      }

body {
        font-family: "Lato", sans-serif;
      }

/* Style the tab */
      .tab {
        float: left;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 30%;
        height: 300px;
      }

/* Style the buttons inside the tab */
      .tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 22px 16px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 17px;
      }

/* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }

/* Create an active/current "tab button" class */
      .tab button.active {
        background-color: #ccc;
      }

/* Style the tab content */
      .tabcontent {
        float: left;
        padding: 0px 12px;
        border: 1px solid #ccc;
        width: 70%;
        border-left: none;
        height: 300px;
      }

/* Style the tab */
      .tab2 {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

/* Style the buttons inside the tab */
      .tab2 button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

/* Change background color of buttons on hover */
      .tab2 button:hover {
        background-color: #ddd;
      }

/* Create an active/current tablink class */
      .tab2 button.active {
        background-color: #ccc;
      }

/* Style the tab content */
      .tabcontent2 {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
      }

/*          fade effect for all tabs */
      .tabcontent,
      .tabcontent2 {
        animation: fadeEffect 1s;
        /* Fading effect takes 1 second */
      }

/* Go from zero to full opacity */
      @keyframes fadeEffect {
        from {
          opacity: 0;
        }

to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <h2>Vertical Tabs</h2>
    <p>Click on the buttons inside the tabbed menu:</p>
    <p>grabbed this from wschools btw lol</p>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p> 2nd tabbuhhh <div class="tab2">
        <button class="tablinks2" onclick="openCity2(event, 'London2')">London</button>
        <button class="tablinks2" onclick="openCity2(event, 'Paris2')">Paris</button>
        <button class="tablinks2" onclick="openCity2(event, 'Tokyo2')">Tokyo</button>
      </div>
      <div id="London2" class="tabcontent2">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
      </div>
      <div id="Paris2" class="tabcontent2">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
      </div>
      <div id="Tokyo2" class="tabcontent2">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>
    </div>
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
    
    <script>
      function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
      }
      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();
    </script>
    
    <script>
      function openCity2(evt, cityName2) {
        var i, tabcontent2, tablinks2;
        tabcontent2 = document.getElementsByClassName("tabcontent2");
        for (i = 0; i < tabcontent2.length; i++) {
          tabcontent2[i].style.display = "none";
        }
        tablinks2 = document.getElementsByClassName("tablinks2");
        for (i = 0; i < tablinks2.length; i++) {
          tablinks2[i].className = tablinks2[i].className.replace(" active", "");
        }
        document.getElementById(cityName2).style.display = "block";
        evt.currentTarget.className += " active";
      }
    </script>
  </body>
</html>

Tooltip

SOURCE

I finally found the source code for the tooltip I've been using for years lol. I did find it on scripted, but this was the original link from the looks of it.

color: #ad99ff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
        border: 2px solid #3807fc;
        /* Initially hidden */
        z-index: 1000;
    }
</style>

<body>

<p title="tooltip or something, im pretty sure i grabbed this from scripted forever ago but im not sure..."> wiiwiwiwi wahwhahw  WEEHHH WEHHH WAAHHH sobbing</p>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/lspzyz3/xloqk6cgp/jquery.style-my-tooltips.js"></script>
<script>
    (function($) {
        $(document).ready(function() {
            $("[title]").style_my_tooltips({
                tip_follows_cursor: true,
                tip_delay_time: 10,
                tip_fade_speed: 30,
                attribute: "title"
            });
        });
    })(jQuery);

</script>

Auto Click Something on Load

Somewhere on stackoverflow

I'm gonna be real I lost the source. But I know it's somewhere on stackoverflow, I don't have the direct link since I just searched, grabbed it and then continued coding... I need to keep looking for it.

Windchime Clock

SOURCE

Took it from the template.

<html>
  <head>
    <meta charset="utf-8" />
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="shortcut icon" href="/">
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  </head>
   <div id="MyClockDisplay" class="clock" onload="showTime()" style="font-size: 20px;letter-spacing: 2px;text-align:center;"></div>

if (h == 0) {
                        h = 12;
                    }

if (h > 12) {
                        h = h - 12;
                        session = "PM";
                    }

h = (h < 10) ? "0" + h : h;
                    m = (m < 10) ? "0" + m : m;
                    s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" + s + " " + session;
                    document.getElementById("MyClockDisplay").innerText = time;
                    document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 1000);

}

showTime();

</script>
</html>

Rainbow Text Effect

Made Myself

I accidentally made a rainbow effect that looks kinda trippy.

Example text thats black

Example text thats white

Example text thats colored

Example text with "pink" background and "red" text color.

Title of code

SOURCE

Description

Using FontAwesome's Free Icons

Put this in the HEAD of the HTML.

Changing Colors/CSS Globally

Use :root to call var(--variables) in the place of colors, backgrounds, etc. When you change the root, it changes everywhere.

aaaaaa

aaaa

aaaaaa

aaaa

aaaaaa

aaaa

aaaaaa

aaaa

Site Buttons!

This may take a few refreshes if all the buttons don't load.

A charm of circles with June above it and two hearts below it

Note:

General scripts are typed in the "script" box in an event.
Plugins go in the game folder, and the file ends in (.js). You can open it via the editor. Game folder ➜ js folder ➜ plugins ➜ paste the file in.

All of these are tested in MZ unless specified MV.

General Scripts

$gameParty.allMembers().forEach(actor => {
                    actor.clearStates();
                    actor.setHp(actor.mhp);
                    });

$gameScreen.clearPictures();

$gameActors.actor(0001 ACTOR # )._faceName === 'FACESETNAME no file extension'


                    $gameScreen.erasePicture(pic#)
                    $gameScreen.showPicture(pic#, 'PIC_NAME_NO_EXTENSION', 0, 0, 0, 100, 100, 255, 0);


                        [0001, 0002, 0003].every(id => $gameSwitches.value(id))

$gameParty.allItems().length == 0
\\ Checks all items including unequipped weapon / armor.

                $gameParty.items().length == 0
                $gameParty.armors().length == 0
                $gameParty.weapons().length == 0

Keys


                    (Input.isTriggered('ok'))
                    (Input.isRepeated(ok'))
                    (Input.isPressed('ok'))
                    (Input.isLongPressed('ok'))

Mouse


                    (TouchInput.isTriggered())
                    (TouchInput.isRepeated())
                    (TouchInput.isPressed())
                    (TouchInput.isLongPressed())
                    (TouchInput.isCancelled())
                    (TouchInput.isMoved())
                    (TouchInput.isReleased())


                        script: $gameVariable.value(n) == "any password name here"

script: $gameVariable.value(05) == "TheOriginalStarwalker"
Checks if variable 5 has the input "TheOriginalStarwalker", this is case sensitive.

thignt hignt hting

Small Plugins

ColorManager.itemBackColor1 = function() {
                    return "rgba(32, 32, 32, 0)";
                    };

                    ColorManager.itemBackColor2 = function() {
                    return "rgba(0, 0, 0, 0)";
                    };

Source


                    /*:
                    * @target MZ
                    * @plugindesc Change colours for Dim window backgrounds.
                    * @author Caethyril
                    * @url https://forums.rpgmakerweb.com/threads/165311/
                    * @help Free to use and/or modify for any project, no credit required.
                    */
                    ColorManager.dimColor1 = function() {
                    return "rgba(0, 0, 0, 0.6)"; // default: 60% opaque black
                    };

                    ColorManager.dimColor2 = function() {
                    return "rgba(0, 0, 0, 0)"; // default: 0% opaque black
                    };

Source


                    //=============================================================================
                    // SimplestMainMenu.js
                    //=============================================================================
                    /*:
                    * @target MZ
                    * @plugindesc v0.0.1 Simplest Main Menu
                    * @author MechPen
                    * @help SimplestMainMenu.js
                    *
                    * Removes everything except for the command window.
                    * You can remove Items, Skill, etc from the System 2 tab in the database.
                    *
                    *
                    */

                    (() => {
                    //
                    const pluginName = "SimplestMainMenu";

                    Scene_Menu.prototype.start = function() {
                    Scene_MenuBase.prototype.start.call(this);
                    this._statusWindow.hide();
                    this._goldWindow.hide();
                    };

                    })();

                    // patch by caethyril - resize/reposition command window
                    (alias => {
                    Scene_Menu.prototype.commandWindowRect = function() {
                    const rect = alias.apply(this, arguments); // calculate as normal
                    rect.height = this.calcWindowHeight(4, true); // height = 4 commands
                    rect.x = (Graphics.boxWidth - rect.width) / 2; // centre x
                    rect.y = (Graphics.boxHeight - rect.height) / 2; // centre y
                    return rect;
                    };
                    })(Scene_Menu.prototype.commandWindowRect);

                    // end of file

Source

With the death of the rpgmaker.web forums, I started collecting the actual sources for commonly used plugins, or plugins I liked/thought were useful. It seems like the people who run rpgmakerweb realized after a bunch of backlash that deleting over 10 years of resources and internet culture isnt a good idea, so they've said they started preserving all of the plugins on the site in an archive. I would much rather have the sources anyway, so here they are.

In place of the forums, you can seek help/browse plugins and such at:
RPG Refuge
rpgmaker.net
RM Planet
Save-Point
RPGMaker chat

Galvs Scripts - MZ, MV, VXAce
someran.dev - MZ, MV
Moghunter - MZ, MV, AC, VX, XP
HimeWorks - MV
Mjshi - MV, VXAce
Mr.Trivel - MV
Galenmereth / Tor Damian Design - MV
Hakuen Studio - MZ
Casper Gaming - MZ
werepanda.jp - MZ, MV. 🇯🇵
Yanfly.moe / VisuStella - MZ, MV
raizen884 - MZ, MV
triacontane - MZ, MV 🇯🇵
n2naokun - MZ, MV 🇯🇵
LyraVultur - MZ
Nolonar - MV
MechPen - MZ, MV
Sigureya - MZ, MV 🇯🇵
Gabe Plugins - MZ, MV
Theoallen - MZ, MV
aerosys - MZ, MV
KellyChavez - MZ
RoseShadows - MZ, MV 🇯🇵
Orochii - MZ, MV, XP
Owen6939 - MZ, MV
Maliki79 - MZ, MV
cursed-steven - MZ
phileas - MZ
ATT_Turan - MZ, MV
quxios - MV
Tsukimi-neko - MZ, MV **not all their plugins only a few from the looks of it.
AphoDev - MV
dk-plugins.ru - MZ, MV
megaokie - MZ
kekeelabo - MZ
SITE - description

THE GOATS!!!

All plugin makers are appreciated equally, I just use this stuff a lot lol.

Galvs Scripts - MZ, MV, VXAce
someran.dev - MZ, MV
Moghunter - MZ, MV, AC, VX, XP
HimeWorks - MV
Galenmereth / Tor Damian Design - MV
Hakuen Studio - MZ
Casper Gaming - MZ
Yanfly.moe / VisuStella - MZ, MV
Tsukimi-neko - MZ, MV **not all their plugins only a few from the looks of it.
They made that one absolutely goated pixi filter plugin for MZ and MV. For free. God bless.

Collections of Plugins

These are individual collections of plugins that may or may not be sorted in some way. Basically, a grab bag of random stuff that no one person made.

SigmaSuccour - Google sheet of organized plugins, tabs are at the bottom.
FunGameMake - An extensive collection (use web-browser google translate. It's in japanese.)
TechnoKingUwU - a curated list of their favorite plugins \\ Taken from the bottom of this forum post (link is an image)
Huge List of Alternate Options to VisuStella Plugins - What it says on the tin. Source screenshot is >here.
SITE - description

Standalone Plugins

Standalone plugins that I can only seem to find on the forums and nowhere else. I'll be linking back to the forums in the hope that thewaybackmachine can come in clutch. If the plugins are being preserved, it may redirect you somewhere, who knows.

Screen Effect Filter Tsukimi \\ MZ
The github for the plugin \\ The doc for the filters *Needed to use.
Gradient Wipe v1.0.0 Tsukimi (cji3bp62000) \\ MV
Filter Controller v2.0.9 Tsukimi (cji3bp62000) \\ MV
TKM_ChoiceList v1.0.1 Tsukimi(cji3bp62000) \\ MV
AnimationFrameRate v1.0.0 Tsukimi (cji3bp62000) \\ MV
ParticleEmitter.js v0.1.2 Tsukimi \\ MV \\ DEMO
hiddenone-sprites Visual resources, not plugins.
iAmDigs - MZ, MV
PLUGIN THING