RPG Maker MZ with Solana SDK connect to Phantom wallet

RPG Maker MZ with Solana SDK connect to Phantom wallet

Hi guys, another full-power "MZ" may be the flagship of RPG Maker. If you're interested in putting your ideas into an RPG game, try to learn in 20 days and just spend a bit of time reading my blog if you want to sell something in-game as SOL coin. I'm providing basic how-to integration, checking SOL balance, and also paying with SOL to complete transactions.

Good news: the previous tutorial RMMV plugin mostly supports RMMZ, so if you download the source "SolanaBridge" plugin now, it's already fixed and ready to use without adjusting any code. Just change the receiver's wallet address; that's all.

Required *download, setup, and installation

Windows 11

RPG Maker MZ [download]

Phantom Wallet desktop version [download] **beware fake Phantom App

Http-server [download] *simple local server, easy and enough for testing.

Visual Studio Code [download] * Browse to open the project folder and code.

SolanaBridge.js [download]

Optional (Required for testing only)

Microsoft Edge [download] *or other browsers that support the Phantom Wallet browser extension.

Setup Phantom App [for testing only]

Download Phantom Wallet app and install it from the previous section. After that, open and login in with your password. **if no account, you can follow this instruction to create a new wallet.

After login, you need to click on Avatar, then choose account and then click on Settings > Developer Settings, turn on Testnet mode and select Solana Devnet mode.

If your settings were corrected, you should see a notice on your Phantom app like this. "You are currently in Testnet Mode.

Get free SOL for testing

If your account not having SOL, you cannot pay for anything because any transaction required gas fee. Open this url to request an Airdrop , then copy your public address and paste here, select SOL amount you need then click Confirm Airdrop.

If it's successful, you'll see a message on the bottom-right of screen.

Then take a look SOL in your Phantom Wallet, here your SOL ready for testing. **I recommended to create 2 wallet accounts for testing transfer one to another account.

Create a new project.

Launch RPG Maker MZ, click "continue" if you don't have the product's key (20-day free trial). waiting for a while.

If you're not familiar with "MZ", I recommend taking time on the tutorial first.

I let go of the tutorial edit title screen, create the "project" name, and choose the "location." Your project will create a folder as the project named; don't worry about the location or multiple files created, and leave the initial data as basic.

Your project's opened editor should be like the below image.

Click the blue button "Play" on the top-right; let's see what you got.

Install SolanaBridge plugin

Good news!! For you, my "SolanaBridge.js" from "MV" is compatible to "MZ". then download and place "SolanaBridge.js" under "root_project/js/plugins"

From the MZ editor, choose "Tools > Plugin Manager..."

Double-click on the empty tab, then add the plugin as the below image shows; don't forget to turn it "ON" and "apply" before "OK" to close the dialog. (If you want to test on windows, not the browser, just turn it "OFF.")

Deploy MZ web with SolanaBridge

Goto "File > Deployment..."

Choose "Web browsers." At "Output Location," you can type a new folder name here (it will automatically create a new one before deployment), then click "OK."

Test MZ web game with SolanaBridge plugin

Open cmd from Windows search, type "cd your_path/C:\Users\poraw\RMMZ-web-game\RMMZ-connect-wallet" and hit Enter. Then type "http-server" and hit Enter.

Hold "ctrl" and click on "http://127/0/0/1:8080" or copy and paste "http://127/0/0/1:8080" on your browser.

Now, you should see "Connect Wallet" above "New Game", this menu comes from the "SolanaBridge" plugin that I've provided a tutorial for in "RMMV," so click "Connect Wallet." (if Phantom session expired, you need to log in again.)

Now, you should "Disconnect" instead of "Connect Wallet" because you successfully connected your Phantom Wallet. On the console, you should see the SOL balance. Because "SolanaBridge" will fetch the SOL balance after it's done connecting. Click "New Game."

Then you've found out there's an error: the "SolanaBridge" interface is not compatible with "RMMZ." Leave an error here, then open Visual Studio Code and go to "File > Open Folder..." and browse to open the folder "your_path/RMMZ-connect-wallet.".

Open "SolanaBridge.js" under "js/plugins." then update SOL window initialization function. Now plugins should support both "MV" and "MZ" which require different arguments.

  Window_Sol.prototype.initialize = function(x, y) {
    const width = 240;
    const height = this.fittingHeight(1);

    if (Utils.RPGMAKER_NAME === "MZ") {
      const rect = new Rectangle(x, y, width, height);
      Window_Base.prototype.initialize.call(this, rect);
    } else {
      //expected MV
      Window_Base.prototype.initialize.call(this, x, y, width, height);
    }

    this.refresh();
  };

And another minor issue is 5.239765 → 5.240 on UI, need to fixed by 5.239765 → 5.239

Then update refresh function like below.

  Window_Sol.prototype.refresh = function() {
    this.contents.clear();

    const value = window.SOL_BALANCE || 0;

    const x = 0;
    const width = this.contents.width;

    const truncated = Math.floor(value * 1000) / 1000;

    // draw number (normal color)
    this.resetTextColor();
    this.drawText(truncated.toFixed(3), x, 0, width - 54, "right");

    // draw "SOL" with system color (same as G)
    this.changeTextColor(this.systemColor());
    this.drawText("SOL", width - 66, 0, 60, "right");

    // reset after use
    this.resetTextColor();
  };

*When redeploying, make sure your game does not cache any old data and get your latest plugin updated code by "empty cache and hard refresh" to load a new web game.

Then try to deploy and run the game again.

Cool! That's correct. Why not? i don't need user to misunderstand since minimal SOL to use is "0.002," but plugin is not capability now, then the decimal number after that, we don't care it's higher or lower than 5

Implement Pay with Sol

Like "MV" on "MZ" this template, item shop, cannot be accessed, then we need to create a shopkeeper and let her sell "potion" for us. Go back to MZ Editor and click on "Normal Town." You should see the first town after "New Game." At the bottom left at the entrance of the item shop, we need to put the shopkeeper here.

Choose "Mode > Event," and double-click on tile block at entrance of item shop (or elsewhere you need.)

I put a note as "Shopkeeper," double-click on the image space, choose "People4," and pick up one sprite facing south. Then click "OK" and "Apply" to save it.

Double-click on the node under the content window and choose "Show Text..." and type "Welcome to SOL Shop!" or any text you wish as your welcome message.