A downloadable RPG Maker Plugin for Windows and Android

Download NowName your own price


Want to support me?

***Please, download the sample project and give me feedback to improve the plugin!!!***

Introduction

If you ever tried to make mobile games, you know that can be challenging to put buttons on the screen, since there is a lot of mobile devices with different screen sizes and resolutions. So deciding the size and position for these buttons can be a pain.

This plugin implements buttons on-screen in a responsive way, meaning their sizes and positions will be automatically adjusted according to the client screen size. It also can be rendered outside of the game canvas(on the black bars.)

Features

  • Add responsive buttons on the screen for mobile games.
  • Hide/show buttons on message.
  • Special Button that can show/hide all other buttons.
  • Two types of movement buttons: Directional pad and Joystick.
  • Disable touch screen movement
  • Disable double touch menu
  • Work with diagonals
  • Assign buttons to any keyboard key or script call.
  • Cold and hot images for every button.
  • Set vibration for Regular buttons.

How to use

First, create a folder called “screen_controls” inside your img folder project. This is the place you will have to put your button images.

Types of buttons

  • Regular Button → A simple button that can simulate a keyboard key.
  • Control Button → Used to hide/show all other buttons on the screen.
  • Dpad Button → A directional pad to move the player.
  • Joystick Button → A joystick to move the player.

Button Images

Every button needs two images: The cold image(when a button is not pressed) and a hot image(when a button is pressed).

In the plugin parameters, you can choose the cold image for any button.

The hot image must be another image file with the same name as the cold image. You just need to add "_hot" at the end of the filename. (case sensitive)

Size and Positions

You will decide the size and positions of the buttons based on % values according to the screen size of the device.

So if you put a size of 20, it will be equal to 20% of the screen size of any device that runs your game.

The same is for positions X and Y of these buttons.

But the button will never have a size higher than its image file. So the best way to go here is to use big images sizes. That way, the button will be automatically scaled down to any size it needs.

Vibration

You can set Vibration in MS for Regular buttons and Control Buttons. Just make sure that your Android Manifest has vibration permission.

Joystick

You can optionally use a joystick instead of the directional pad to move the player.

Unlike the other buttons, the joystick requires two images to work.

  • Base/background image → This one will be responsible for the visual background and position of the joystick. It also defines the range/limits that the stickball can go when it is being dragged by the touch/mouse movement.
  • Stick image → This will be the stick(ball) image that will handle the player’s movement direction when being pressed and moved.

By default, it will not go outside the base image. But you can make it if you set a number higher than zero on the Extra Range parameter.

The idea here is that both the Base and Stick image file has the same size in pixels. So it will be easier to set the % sizes for both on the plugin parameter, making the stick center correctly inside the Base image. Otherwise, you will have to make the calculations yourself(hardcore, maybe).

NOTE¹: This plugin does not implement diagonal movement. But if you have a plugin that implements it, the directional pad or joystick will recognize it. Currently tested with the Yami_8DirEx.js

NOTE²: Optionally, you can set the Dpad type parameter to none, and create your directional buttons using the Regular buttons.

NOTE³: Didn’t test with pixel movement.

Update Log

Terms of use 5.0.0 and higher

Terms of use(Old)

Download

Download NowName your own price

Click download now to get access to the following files:

MZ - Mobile Controls 5.0.8 9 kB
MV - Mobile Controls 5.0.8 9 kB
Mobile Control 1-0-0 Destop Sample 5 MB
mobileControls.apk 7 MB

Development log

View all posts

Comments

Log in with itch.io to leave a comment.

hey bro, i don't see "REGULAR BUTTON" option in plugin manager, or do i have to edit img,key,... in the code? Or this option is not used in MV ?

Hi there!

It's on the first page.


Did you see my last message from your previous question?

Damn bro. I'd love to know how your plugin works, that's why I'm looking into it. Is it the "button" option?

Hi there. 

You are using an older version of the RPG Maker MV. You need to update it.

And it is like I said before:

"If you are using only RPG maker for a week, stay away from plugins.

Go and learn the engine, the event commands, etc.

When you have more experience, you download and read the plugin help file. It has all instructions you need.

Then, if you do not understand something on the help file, tell me what it is and I will try to help you out."

how to set up on mv, i've only been using rpgmv for a week so i don't have much experience.

Hi there!

If you are using only rpg maker for a week, stay away from plugins.

Go and learn the engine, the event commands, etc.

When you have more experience, you download the plugin and read the plugin help file. It has all instructions you need.

Then, if you do not understand something on the help file, you tell me what it is and I will try help you out.

Bro, I'm looking for a way to remove and appear the Joystick by events not by the control button
How can I remove the Joystick and show it by event?

(+1)

Hi there!

You can use the following script calls:

To hide:

  • Eli.MobileControls.controlButton.parameters.enable = false
  • Eli.MobileControls.controlButton.removeFromScene()

To show:

  • Eli.MobileControls.controlButton.parameters.enable = true
  • Eli.MobileControls.controlButton.addOnScene()

I'm trying to use it on RMMV 1.6.1 but the controls don't show up on the screen even after configuring, what should I do?

Hi there!

I need more information to help you:

  • Are you using Eli Book above it?
  • If you press F12 and go to the CONSOLE tab, are there any errors?
  • Show me a screenshot of your plugin manager.
  • Show me screenshots of how you set up the plugin parameters.

Mobile double click doesn't work =\

Hi there!

Mobile double click? What do you mean it does not work? 

Do you mean touching the screen with two fingers to open the menu? If yes, there is a plugin parameter for you to adjust that. 

Otherwise you need to give me more information. BY only saying "it does not work" will not help me figure out what is the problem and also not help you at all.

The problem persist on a clean project? What the double click is supposed to do? It's on mobile or through web browser?

Sorry not to be more clear. My project is based on ABS, so I have to walk and attack, so far I haven't been able to get around this, as only one click on the screen is allowed in the RMZ. In short, I need to walk with my left finger and with my right finger to use skills, items, attack, etc. In my project the option to open menu with fingers is disabled by default.

One problem I noticed is that the buttons are not positioned on the project's screen size but on the screen size where the game is being played, this can be good in some cases, but the correct thing would be for the buttons to be positioned with based on the screen size configured in the project.

Deleted 155 days ago
(1 edit)

See in the image what I mean by the placement problem. There should be an option for the buttons to stay within the size of the map instead of floating in the corners of the screen.

Hi there! Thanks for the reply!

About it works with multiple touch screen, with I believe is what you are talking about when you said walk with left and use skills with right, this is an RPG Maker "problem". 

The way it is designed in code give that results. My plugin by itself can operate two or more button touch at the same time, but the way RPG Maker updates the input that is the problem. 

Like you can walk. But when you press Z to interact with an event, you need to press the walk button again to keep walking.

That need another plugin to handle the multiple touch the way you want.

About the button position on screen, it is already working correctly, because that is the intended behavior. If you take a look on the introduction section on the itch Io page it explains.

The intention is that the plugin works responsive according to the client/user screen size not the game canvas, taking advantage of the unused space of the black bars on the sides, when available.

Since a lot of mobile devices has different screen sizes, including tablets, this plugins aims to create that buttons according to it. So their sizes and positions are "the same" across different devices.

All good! It would be interesting to have an option for the buttons to stay within the project area, because in my case the buttons are on top of the HUD with important information, and as you just said, each device has its own resolution, it's not possible control or know what will be affected by the buttons. Anyway, thanks, this plugin can be useful in some projects, but in my case it ended up not working because of that. I can get around the problem of the two clicks, but it is not feasible to use the buttons in a fixed position on the screen.

Got it!

Maybe you should try the Aloe Guvner Mobile buttons then. I can't promise, but maybe I will add this way fr setting buttons in the future, I mean, on the Game canvas like you want it to be.

Oi Eli, na opção: Botões de Controle teria como colocar um comando para ativar e desativar esse botão através de uma Switch ou se tem algum comando por Script via Eventos que ativam e desativam esse botão de chave principal. Observação: Encontrei pelo Script do Botão Regular, mas precisava do Botão de Controle... RPG Maker MZ. Obrigado desde já.

Olá amigo!

Vou ver isso pra você!

Obrigado amigo, fico no aguardo!

Fala fera!

Então, tem dois jeitos aqui usando script calls:

Para esconder:

  • Eli.MobileControls.controlButton.parameters.enable = false
  • Eli.MobileControls.controlButton.removeFromScene()

Para mostrar:

  • Eli.MobileControls.controlButton.parameters.enable = true
  • Eli.MobileControls.controlButton.addOnScene()

Muito obrigado mesmo parceiro! 

Hi Eli, is there any way to switch Joystick Button to Regular Button on scene message/dialog? like on Main Menu it automatically changes to Regular Button.

Hi there!

Not at all. Because the Scene Message is "inside" Scene Map. The message happens on the Scene Map. And you can only assign buttons to appear according to their scenes.

What is the function for call Regular Button? I'm trying to add it on line 844 

so, it goes like this, if $gameMessage.isBusy return function regular button.

What do you mean by calling Regular Button? Do you want to show/hide it? Or do you want to trigger what the button does?

Also, I'm seeing that your Mobile Control plugin is outdated. Because either MV and MZ versions here does not have this code on line 844.

yeah, show/hide script call for Regular Button.

like this script call Eli.MobileControls.hideButtons()  but for Regular Button

(+1)

Hi there!

Sorry for the late answer.

Currently, if you use this script call, it will return an array with all available buttons, except for the Control Button:

  • Eli.MobileControls.buttonList

As you can see, the first button is always the directional button. So if you want to hide the regular buttons only, you use that script call:

const scene = SceneManager._scene.constructor.name

for(const button of Eli.MobileControls.buttonList){

    if(button instanceof Eli.MobileControls.RegularButton && button.parameters.scenes.includes(scene)){

        button.removeFromScene()

    }

}

But if you want to also hide the Dpad/Joystick, you use the same script call, but remove this:

button instanceof Eli.MobileControls.RegularButton &&

Hey can you share the padding values for the Z and X buttons as the one you have on your android sample? I don't have a good system and it crashes during emulation on android.

Hi there!

I believe it is the default ones set on the plugin parameter.

Thank you for your reply , I just got one issue remaining and I am unable to fix it. I can use and see the controls in Playtest  (Rpg maker MZ) perfectly without any issues but when I export it for windows I cannot see the controls (like the plugin is gone) i have eli mz book 5.0.8 and elimz mobile control 5.0.6 . Tried following your tutorial and deleting and adding the plugin again.

Didn't select the checkbox for exclude unused files during deployment.

is there any other troubleshooting available.

Short: Works in Playtest without errors. Disables /Doesn't working in the .exe after deployment 

So I managed to fix it.. I did some experiments and this is what helped my show those images:
1. When the image files for buttons were encrypted they were not rendering on screen. The plugin was working but the images were not showing up.
2. So I encrypted the game but I didn't encrypt the files for button(image files). This worked and now my app has the accessibility to buttons!!

Hmm!! Nice to know that! I will see what I can do about this encryption. Thanks for letting me know!

Deleted 23 days ago

Hi there! :)

You can try this script calls:

  • Eli.MobileControls.hideButtons()
  • Eli.MobileControls.showButtons()

If you experiment with any strange behavior, try that one instead:

  • Eli.MobileControls.controlButtons.setInput()

Let me know if this helped!

Hi there! Thank you for provide such a nice plugin. I just found a bug: I enabled the screen movement(set the “Disable screen movement” to false), and then I tested the game. And I found that I can click/touch the screen when I drag the joystick. Can I disable the screen touch when I am dragging the joystick? Thank you!

Hi there!

Thanks for the report! I manage to fix the issue on the new version 5.0.4! Please download it and see if everything is fine ^^

(+1)

It works very well. Thanks for your support!

(2 edits)

Hello, it tells me that I need EliMZ_Book plugin

Do I really need it ? And where to find it?

Edit : nvm I found it, but now it tells me the error "Cannot read property 'createParameters' of undefined" when I start the game

Hi there!

You can find it here:
https://hakuenstudio.itch.io/eli-book-rpg-maker-mv-mz

It needs to be somewhere above the Mobile Controls on the Plugin Manager. Both need to be on version 5 or higher.
Make sure both plugins are for the MZ version.

Because this error happens when you are not using EliMZ Book.

Thanks!

(2 edits)

Hi ! I found some kind of annoying bug in version 5.0.2. So when a player have a button if they hit the hide all button they will hide the button and also turn on touch screen and accident hit a torch screen in the place have hide button.

I using RPGmaker MV v1.6.2

Here is sample video for the bug:

https://drive.google.com/file/d/1X037SqNm2P0iM4sSuD6aH7d0-ZrSpyQJ/view?usp=shari...

(+1)

Hi there!

Thank you so much for the video! It makes thing a lot easier ^^

I fixed the issue on 5.0.3!

:D thanks you for quick fix !

I found the bug that if you hide the button and move to another map the button will appear all again and we can also use button and both touch screen to move.

(+1)

Hi there!

What RPG Maker version you are using?

I using RPGmaker MV v1.6.2

(+1)

thanks! I will make a fix ^^

(+1)

Fixed!

Thanks for the report! Please download the new version 5.0.2! :)

(1 edit)

I found a bug, when Padding Y over 25 the button not clickable anymore


But when Padding X over 25 it's still clickable 

I tested on MZ and MV, it only happen on MV version. Also there is no error log on console

Hi there!

I give it a try here, and on my side, everything is working just fine.

So I will need that you build a sample project, replicating the error, so I can test it here and try to find the problem.  You can upload it anywhere you want, like Google Drive, One Drive, Dropbox, etc.

here for demo

https://www.mediafire.com/file/kv3nmol8mds52fv/TestMV.rar/file

I think it's not compatibility with YEP_CoreEngine  if use custom resolution, I tested on default resolution (816x624) and everything is working. 

There is no problem in MZ even though it using custom resolution. Can you make it compatible like MZ ? it's feel weird playing game 816 x 624 on 2022 xd

Thank you so much for the project! That makes things a lot easier!

After a long time, I manage to find the problem. The thing is that the Error Printer element was being resized and repositioned by the Yanfly plugin. Because of that, he and the button were colliding, making the button not receive the click/touch input.

So I updated my plugin to version 5.0.1, which removes the "feature" of the error printer receiving clicks/touch. And that solved the problem.

Please download the new version :)

Thank you! now its clickable, also sorry :( for request compatibility for other people plugin, I know it very hard. But you still fixed it, you are awesome man!! :)

Nice!

No need to be sorry, I'm glad I can help! Fix compatibilities with other plugins is the minimum I can do to contribute to a health community :)

If I can do, I will do it! ^^

Hi ! Is there any way that I can testing this before make mobile game available ? I use rpgmaker mv anyway.

Hi there!

I don't know if I really understand what you want, but yes, you can! 

You just have to make an APK of your game before releasing it. 

In the files to download, you will see two files: "Mobile Control 1-0-0 Destop Sample" and "mobileControls.apk".  These two files are tests that I made with the game deployed for the PC version and mobile version. Is that what you are looking for?

actually those testing file is for MZ but I'm using MV so idk how can I do to testing before release .apk in MV

(+1)

Oh, I get it.

You can do tests in the same way.

Download the plugin, build a tiny project and set up all the buttons you want.

Deploy your game for PC and for mobile.

If you don't know how to create an APK, you will need to learn that. I believe if you put on Google "RPG maker APK tutorial" you will find some answers :)

(2 edits)

Sadly It's didn't work anyway. Do I need to use any kind of plugin to make it work ? I have try to use your "screen_controls" from your sample project and follow your youtube tutorial but nothing show up when I run a "playtest" or maybe because "screen_controls" folder is for MZ so it didn't work in MV ?

By some weird reason I testing more plugin and It didn't work like this ?

(+1)

You will need to give more info for me. You said it didn't work, but what happens? 

  • The screen shows an error or something?
  • Did you follow the help file instructions?
  • Are you using Eli Book above the mobile control plugin?
  • The plugin versions are equal or higher than 5.0.0?
  • Can you build a sample project and upload it to me, so I can see what is wrong?

• The screen not show any error while "playtest" but also no button appear either but when I deployment game to Android It say "can't load js/plugin/(your plugin)"

• I have follow the help file and also try to do like youtube video

• I don't have Eli Book maybe that the reason ?

• Yes is equal 5.0.0

• Where I can send sample project ?

(+1)

You need Eli Book. All my plugins need Eli Book.

You can upload the project anywhere you want: Google drive, Dropbox, one drive, etc.

Then send me the link here.

Are there commands I might be using to hide or show the buttons? by events

Hi there!

The plugin lets you create a special button, that when pressed, will hide/show all other buttons.

But you could also use the script call:

  • Eli.MobileControls.hideButtons() // Hide the buttons.
  • Eli.MobileControls.showButtons() // Show the buttons.

Hi Hakuen, another question, if I have a custom menu like a Quest Log from another plugin, is there a way for me to also show the buttons in those scene?From my quest log plugin, i can call the quest menu via these codes... 

this.isEnabledQuestMenu();

SceneManager._scene.quest();

i tried to add the codes into Allowed Scenes but none of the code works? 

Hi there!

Yes you can. But you need to know the name of the scene. You can discover that in two ways:

When you enter in the scene in-game, press F8 or F12 to open the console log.

On the tab "console", type the following:

SceneManager._scene or SceneManager._scene.constructor.name 

This should return to you the name of the scene, so you can insert them on the plugin parameter.

Another way, is to open the plugin file with a text editor and discover the name of the scene from there.

(*ˊᗜˋ*)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ*  It worked! Thanks!

Nice!!

Hi Hakuen, can you enable screen movement when you hide the controls and also disable screen movement when you show the buttons? Right now it's either or. I am trying to give player the option of using your buttons or using touch screen but I don't know how to do it. 

Hi there!

Will do! :D

(+1)

Done!

It is on the new version 1.1.0, under the Control Button parameters.

(+1)

Wow. You da man!.. or da WoMAN! Sorry, don't really know your true identity... But thanks for version 1.1.0

Hahahhaha xD

I tested the demo on Windows and the Joystick was kinda out of layout. The button was way below to the circle. :(

Hi!

I already find a error that can crash the game. So I'm in the process to rewrite the plugin. But I will take a look at the demo to check it out. But when you said you tested, you change the default configuration? Or you just open the demo and it was already "out of layout"?

I opened the demo and it was already out of layout.

can you send me a screenshot?

This is the demo when I first opened it.

I figured out the button is out of the circle so I increased Offset Y but it didn't just move the button up, it also moved the circle zone up.


(+1)

Ok! Thanks for the report!

I will let you know when I fix the plugin!

Hey friend! I uploaded the plugin. Can you try it and see if everything is working fine now?

Found a fun little glitch that took me a few minutes to figure out. When running games on mobile phones in HTML5 (like through itch.io), when you encrypt your .PNG files on export, it encrypts the screen control pictures and the engine shows a broken picture link instead of the controls. 

The work around is after exporting and encrypting, you copy the unencrypted mobile control pictures back into the exported project. Then, it works fine.

(+1)

Thanks for the report!

I will give more attention to this plugin this next month! ^^

Hi! I updated the plugin. Can you see if this error persists?

Hello ! I tested your plugin on android, but I got an error "Uncaught TypeError: Cannot read property 'identifier' of null". As soon as my finger is off the gamepad. It also puts when you remain pressing the gamepad and pressing the menu button. In any case, good work! Now it's time to fix this annoying bug.

Hi there!

Thanks for testing it! 

The plugin still needs a lot of work. But if you can send me a test project, where I can replicate the error, would be nice! Don't need to export to android, just send me a sample project then I will test it ^^

Hi !

I directly tested your demo on Android Studio, I tested in debug and release mode. But still the same bug. I am using android studio version 4.1.3. Is the multi-key and present? The menu opens when you tap with two fingers, but I have figured out how to avoid this.

This happens when my finger goes out of the circle to move. And also when you open the menu, either by button, or by pressing with two fingers on the screen. I even test with the deployment or directly copy the project folder to Android Studio.

Here is the error code, no code change in the plugin : https://www.andromede.pics/639ff2b0-aaa3-11/pic.jpg

Thank you, friend! I will answer you back here when I fix this! It may take a while, but I will not forget ^^

Sorry for the super late answer... :(

But I believe I fixed this issue! Give it a try with the new updated version!