Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ

Author: Hakuen Studio

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.

Terms of Use
Update Log
 
Last edited:

Lee Sang

Sang Hendrix
Veteran
Joined
Jun 7, 2012
Messages
176
Reaction score
254
First Language
Vietnamese
Primarily Uses
RMMV
Omg, this is exactly what I needed. Can you add more buttons that run comment events with this plugin?
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
@Lee Sang Hi!
Yes, you can add as many buttons as you want in the plugin parameters.
And you can execute common events with the Script In and Script Out parameters.
($gameTemp.reserveCommonEvent(eventId))
 

nintendowii111

Veteran
Veteran
Joined
Oct 12, 2019
Messages
61
Reaction score
11
First Language
English
Primarily Uses
RMMV
Anyway to bring this to MV? Otherwise great plugin but wish I could use it. ;(
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
The stable version is out! Check the first post and Itch io page! ^^

Version 1.0.0 - 09/08/2021
- Plugin release!
 

Wavelength

MSD Strong
Global Mod
Joined
Jul 22, 2014
Messages
6,114
Reaction score
5,879
First Language
English
Primarily Uses
RMVXA
Congrats on the release!

Topic moved to MZ Plugin Releases.
 
Joined
Dec 16, 2017
Messages
335
Reaction score
1,404
First Language
English
Primarily Uses
RMMZ
Hi Eliaquim, when I build and upload the demo project, I get this error when I go to the website on an iphone:

TypeError: undefined is not an object(evaluating orientation type)

I didn't make any changes to the project demo, just built it and uploaded it. It works on an android tablet -- is this for android only?
 
Last edited:

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Hi Eliaquim, when I build and upload the demo project, I get this error when I go to the website on an iphone:

TypeError: undefined is not an object(evaluating orientation type)

I didn't make any changes to the project demo, just built it and uploaded it. It works on an android tablet -- is this for android only?
Hi there!
Well, I only test it on android. I don't have an iPhone to test. But it is HTML most, so it should work on both.
It will help if you, somehow, manage to track the error log and send me a screenshot of it. So I can see where the error happens in the code. But I know nothing when it comes to iPhone, sorry =/
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Version 1.1.0 - 11/19/2021
- Add an option to enable the movement by clicking on the screen when hiding the buttons with the Control button(Control Button Parameters).
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Version 5.0.0 is not compatible with my plugins that are below the 5.0.0 versions.

Version 5.0.0 - 02/05/2022

  • [MV] Ported to MV!
  • Updated terms of use.
 

nintendowii111

Veteran
Veteran
Joined
Oct 12, 2019
Messages
61
Reaction score
11
First Language
English
Primarily Uses
RMMV
Version 5.0.0 is not compatible with my plugins that are below the 5.0.0 versions.

Version 5.0.0 - 02/05/2022

  • [MV] Ported to MV!
  • Updated terms of use.
I've been waiting for MV support! I did a quick test with a JoyStick setup with QMovement and I get this:

Eli_MobileControls.js:1428 Uncaught TypeError: Cannot read property 'createParameters' of undefined
at Object.initParameters (Eli_MobileControls.js:1428)
at Object.initialize (Eli_MobileControls.js:1404)

I don't know if Qmovement makes a difference but it's not working sadly. Could you possibly add support for Q- plugins?

Thanks for your work!
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
I've been waiting for MV support! I did a quick test with a JoyStick setup with QMovement and I get this:

Eli_MobileControls.js:1428 Uncaught TypeError: Cannot read property 'createParameters' of undefined
at Object.initParameters (Eli_MobileControls.js:1428)
at Object.initialize (Eli_MobileControls.js:1404)

I don't know if Qmovement makes a difference but it's not working sadly. Could you possibly add support for Q- plugins?

Thanks for your work!
Hi there!
Can you try to show me the screenshot of the error? So I can see the full log of the console tab.
Also, a screenshot of the plugins you are using too, if possible ^^

[EDIT] Also, did you update the last Eli Book version? Because it needs to be the 5.0.0 version. And Eli Book must be somewhere above the Mobile Controls
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Version 5.0.1 - 02/23/2022
  • Fixed an issue that depending on where a button is located, if it collides with the error printer element, it does not receive the click. Setting the error printer style pointer to none solved the problem.
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Version 5.0.2 - 03/01/2022
  • Fixed an issue that hidden buttons are showing up when the scene changes.
  • Fixed an issue that even when hiding buttons, the “touch screen”, and “Double-tap to open menu” rules are being ignored.
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Version 5.0.3 - 03/03/2022
  • Fixed a bug that when Enabled screen movement when hiding buttons, the moment you click on the Control Button, the screen movement is already enabled, causing the buttons to hide/show and the player to move by this same click.
 

nintendowii111

Veteran
Veteran
Joined
Oct 12, 2019
Messages
61
Reaction score
11
First Language
English
Primarily Uses
RMMV
Hi there!
Can you try to show me the screenshot of the error? So I can see the full log of the console tab.
Also, a screenshot of the plugins you are using too, if possible ^^

[EDIT] Also, did you update the last Eli Book version? Because it needs to be the 5.0.0 version. And Eli Book must be somewhere above the Mobile Controls
Hello again! I tried using your latest plugin versions of both Eli_Book and MobileControls. Plugin seems to be very smooth and like the functionality, BUT..
I have one major issue. Please see attached video and console log

Thanks again!


1646453702146.png
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
Hello again! I tried using your latest plugin versions of both Eli_Book and MobileControls. Plugin seems to be very smooth and like the functionality, BUT..
I have one major issue. Please see attached video and console log

Thanks again!


View attachment 218381
Hi there!

Almost all the consle error you shown have nothing to do with my plugin, excpet for that part:

1646454399023.png

My plugins is looking for the HOT images of your buttons(the image that will show when you press the button).
All the button images must have an unpressed image(cold) and a pressed image(hot).
So make sure you have both image versions for each button.

Like, I have these images for the joystick:
1646454253928.png

So I need to have four images, like below:

1646454307686.png

1646454209850.png

They are case sensitive.
The hot image must have the exactly same name as the cold image, plus "_hot".
 

nintendowii111

Veteran
Veteran
Joined
Oct 12, 2019
Messages
61
Reaction score
11
First Language
English
Primarily Uses
RMMV
Hi there!

Almost all the consle error you shown have nothing to do with my plugin, excpet for that part:

View attachment 218387

My plugins is looking for the HOT images of your buttons(the image that will show when you press the button).
All the button images must have an unpressed image(cold) and a pressed image(hot).
So make sure you have both image versions for each button.

Like, I have these images for the joystick:
View attachment 218385

So I need to have four images, like below:

View attachment 218386

View attachment 218383

They are case sensitive.
The hot image must have the exactly same name as the cold image, plus "_hot".
Ah, I'm stupid. Thanks, it works great!
 

nintendowii111

Veteran
Veteran
Joined
Oct 12, 2019
Messages
61
Reaction score
11
First Language
English
Primarily Uses
RMMV
I actually have a genuine bug this time. I have my joystick setup to only be allowed on Scene_Map. Whenever opening game menu on the map, joystick doesn't go away and is still functional. I tried setting show/hide during messages to true/false. Didn't change anything. Lemme know if there a fix and thanks!
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
2,899
Reaction score
2,217
First Language
Portuguese - Br
Primarily Uses
RMMZ
I actually have a genuine bug this time. I have my joystick setup to only be allowed on Scene_Map. Whenever opening game menu on the map, joystick doesn't go away and is still functional. I tried setting show/hide during messages to true/false. Didn't change anything. Lemme know if there a fix and thanks!
Hi there!

The message parameter has nothing to do with that. I tried replicating this error, but I didn't manage to trigger it.
Everything here works just fine(Version 5.0.3):
1646513722981.png
  • Did you try it on a clean project(to see if it is a compatibility issue between plugins)?
  • Can you send to me a screenshot of your plugin parameter?
  • If the error persists, can you upload a sample project replicating the error, so I can take a look?
 

Latest Threads

Latest Posts

Latest Profile Posts

I created my own website for stuff I make. :D
Can hopefully move onto doing visual effects and sound design now. :kaophew:

The latest RPG Maker Games Critique with Studio Blue starts now! Let's jump into Kamigami: Clash of the Gods!

Title Screen 100% Finished

Forum statistics

Threads
124,364
Messages
1,163,072
Members
163,157
Latest member
indrap
Top