Play RMMV Game on Nokia 8110 KaiOS with PS4 Controller

on
0

How to Port RMMV to Nokia 8110 KaiOS

on

How to Port RMMV to Nokia 8110 KaiOS

Hi everyone, from the previous activity, I tried to run Cocos Creator 2 on KaiOS, and now I'm curious about how to port RMMV (RPG Maker MV) to KaiOS. Is it possible? After fighting with suspicions about tools and hardware for 2 days, I can finally get RMMV playable. Are you guys ready to put your ideas into play? Also push your game to KaiStore.

So. I'm trying to paint a map, add events and sound, and also override controls and set resolution for both my code and the third-party plugin. It has not crashed and looks satisfactory as it is. Why am I interested in low specs? If you win on low spec, there will be no problem on high spec as well.

Expected Result

Required
Windows 11
RMMV [download]
ScaleRoot RMMV Plugin [download] **remove black box boundary around game content**
Nokia 8110 4G  **KaiOS 2.5 or above also turn on debug mode (*#*#33284#*#*) **
Micro USB data cable (micro usb - usb 2.0 A) **Or PS4 Controller data cable**
Waterfox Classic [download] **Or Palemoon Browser**
Adb-helper 0.12.1 [download] **install by drag and drop on Waterfox Classic browser screen**


Android adb [download] **setup and installation: validate Nokia 8110 connected**

Optional (Required for testing only)

Micro USB OTG **for connecting a gamepad / PS4 Controller**

Firefox OS simulator 2.2 [download] **Or you can download from Waterfox Web IDE**

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

Set up a Game for port to KaiOS

Create a new project or load your project. I'm customizing the map scene to check events and animation, but it's not required; you can use a blank project with a character just fine.


Open your root project, go to [user/your_project/js/plugins] and put "Ten_core.js" and "Ten_scaleRoot.js." Usually when launching an RMMV game, it's not stretched to full-screen but keeps a black boundary around the game window; this plugin will help me out.


Open index.html [user/your_project/index.html] then put the below script at the bottom of <head>...</head> This script will scale down the default RMMV size to the Nokia 8110 screen size.

<script>
            (function() {
            var isKaiOS = navigator.userAgent.includes("KAIOS");

            if (isKaiOS) {
                console.log("Applying KaiOS CSS Overrides...");
                // 1. Create a style element
                var style = document.createElement('style');
                style.type = 'text/css';

                // 2. Define the CSS for the 240x320 screen
                var css = `
                    /* Landscape 320x240 and resize */
                    body {
                        transform-origin: top left;
                        transform: scale(0.392);
                        top: 72px;
                        position: absolute;
                        overflow: visible;
                    }
                `;

                // 3. Inject the CSS into the head
                style.appendChild(document.createTextNode(css));
                document.head.appendChild(style);

            } else {
                console.log("Running on Desktop/Other - CSS not applied.");
            }
        })();
        </script>

Back to RMMV open the menu "Tools > Plugin Manager...", double-click on the blank row, and attach the plugin like the below image. Order Ten_core first, then Ten_scaleRoot later; don't forget to turn "ON" both of them.


On "Ten_scaleRoot," set "Screen Ratio" to "landscape." Don't forget to click "ok" and "apply."


Then open the "Community_Basic" plugin and set "renderingMode" to "canvas." Don't let it be "auto" as the default; it's often crashed. You can try "WebGL" faster if you wish, but "canvas" is more stable; it never crashes as I play-test many things.


Deployment

From the editor, go to "File > Deployment...", then select "Web browsers" and check the box "exclude unused files." Then click "OK."


Configuration

Go to your  "your_path\your_exported_folder\your_project_name\www". then create "manifest.webapp" file here.


In the "manifest.webapp" file, add the below detail and save. Make sure you have 3 icons sized as 56x56, 112x112, and 128x128.

{

  "version": "1.0.0",

  "name": "RMMV KaiOS",

  "description": "A short description of your app",

  "launch_path": "/index.html",

  "icons": {

    "56": "/icon/icon56.png",

    "112": "/icon/icon112.png",

    "128": "/icon/icon128.png"

  },

  "developer": {

    "name": "Your Name",

    "url": "http://example.com"

  },

  "type": "web",

  "fullscreen": "true",

  "orientation": ["landscape-primary"],

  "locales": {

    "en-US": {

      "name": "App Name",

      "description": "A short description of your app"

    }

  },

  "default_locale": "en-US",

  "categories": ["game"],

  "permissions": {

    "audio-channel-content": {

      "description": "Required to play game sounds and music"

    }

  }

}

Test your Game on KaiOS devices

Launch the Waterfox Classic browser and install adb-helper. If not ready, go to "menu > developer > WebIDE".


Go to "Open Packaged App..." and browse to "your_path\your_exported_folder\your_project_name\www". Your game should show a similar image below.


Connect the Nokia 8110 (debug mode) or your KaiOS devices with micro-USB, and then you should see your devices pulled up by name on the top-right under "USB DEVICES." Click on device name; your game that even installed will be listing on the left-side below


Your current game that is open-packaged should have a glowing "play" button. Click the play button; you may have encountered the "yellow bar of issue." Be patient or click [x], then try play again or refresh or stop, then play. 


FYI, it's too much of a weak signal if your micro-USB is not fast enough for data transfer. I tried using a cheap data cable, but it could not be installed. But the micro USB cable that comes with the PS4 controller works excellently! (it's annoying with yellow bar issue, but it's still a successful install.) 

Done. Now your game powered by RMMV is successfully running on KaiOS.

I hope you enjoy shipping your game to many more platforms and letting anyone enjoy it.

See you next thread ;)

Tips

Reducing all image sizes and sounds to mono before deployment will reduce your load size and memory usage too much.

Buy Me a Coffee.

Your challenge
1. Since the input key is still in portrait mode, it's weird to control it by arrow keys. Try to update keymap presses; for example, press up-down to replace it with left-right in landscape as up-down.

2. And if the game has no menu exit or quit, then add "quit" to the main title to exit / close the game, similar to my sample.





Comments

Post a Comment