Mobile Game User Interface

[Aloe Guvner 1]

Mobile Game User Interface
by Aloe Guvner
Download Link 
(Instructions: right-click the "Raw" button and click "Save Link As...")

Background:
This plugin focuses on improving the user interface for mobile games created in RPG Maker MV, by allowing the developer to have virtual buttons on the screen that interact with touch input.

The emphasis is on maximum flexibility for the developer, you can add as many or as few buttons as you want to the screen, and you can add these buttons on whichever screens you would like (i.e. map, menu, credits, title, etc.).

Functionality:
This plugin can create 3 different types of buttons:

1.) Directional Pad

• A single picture which is used for up, left, right, and down movement (also compatible with many diagonal movement plugins).

2.) Key buttons

• These buttons can be used to represent any key. Common keys to use would be "ok" , "escape", "pagedown", "pageup", etc.
• You can also write custom code that will be run when the button is pressed!
• This can also be combined with other plugins such as Yanfly Button Common Events to call a Common Event from the virtual button.
  • Example: In the YEP plugin, set Common Event 1 to be called from the "a" key. In this plugin, create a button with an input code of "a".

3.) Control button

• The control button, if pressed, will collapse and hide all other buttons on the screen.
• If pressed again, it will expand and show all other buttons on the screen.
• This allows the player to decide between using the Mobile UI buttons or the standard touch input.

 

All buttons are optional, and the scenes in which any button shows is controlled individually. 

 

Use Cases and Screenshots:

{ placeholder art below  }

 

 

Spoiler

This example uses the DPad and two Key Buttons ("ok" and "escape") to put simple keyboard controls as virtual buttons on the map screen (Scene_Map).

 

 

Spoiler

This example uses buttons with the functionality of "pageup" and "pagedown" in the status screen. These buttons can be put in whichever screen you like. Page Up and Page Down move between actors in the menu, so this would make sense to go in the Status, Equip, and Skill screens (Scene_Status, Scene_Equip, Scene_Skill).

 

 

Spoiler

A virtual button can call custom Javascript code. If you are familiar with the engine, this can be extremely flexible and powerful.
In this simple use case, the item screen is opened by pressing the button.

 

 

 

Setup:
The setup requires a new folder to be created within the img folder of the project. This folder must be named "mobileUI". An example screenshot is below.

Spoiler

 

Put all mobile UI button images in this folder, and then they may be accessed in the plugin parameters.

Plugin Commands:

Please see the help section inside the plugin.

 

Terms of Use:

Free for use in commercial or non-commercial projects.
Credits required to: Aloe Guvner

Don't distribute this plugin without a link to the source.

You may modify it to your liking, if you feel the edit could be useful to the community in general, feel free to send a Pull Request on Github.

Version History:

 

v1.0.3 (May 14 2018)

Added ability to execute custom Javascript code when a key button is pressed

v1.0.2 (May 9 2018)

Added ability to play a sound effect when a button is pressed.

Fixed a bug where the parameters weren't read correctly due to plugin name change

Fixed a bug where the control button didn't hide the dpad properly

v1.0.1 (May 8 2018)

Added a version compatible with MV earlier than 1.6.0 using Babel.js

v1.0.0 (April 17 2018)

Initial release

 

Download Link 
(Instructions: right-click the "Raw" button and click "Save Link As...")

[andybattles 0]

Hey hope this is an appropriate place to post this but I'm having trouble trying to get the plugin to display TWO key buttons, I have one currently mapped and working for escape and I've even modified the js file to allow setting parameters for a second button through the maker but I'm failing to find what I need to edit in the file to get the second button to physically display on screen (for example in the j's file i basically copied anything g that said keyButton and pasted it as a secondKeyButton clone).

[Aloe Guvner 1]

Hi, apologies for the late reply, I'm not as active on these forums.

 

On 11/10/2018 at 10:37 AM, andybattles said:

I've even modified the js file to allow setting parameters for a second button through the maker

 

The plugin already allows you to have as many key buttons as you want - so I can't give you any advice if you've modified it. You should re-download a fresh copy of the plugin, and then post a screenshot of the configuration you've done in the Plugin Parameters. Without seeing what configuration you've done, I can't guess at what the problem is.