- 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.
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.
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
Hakuen Studio Mobile Controls for RPG Maker MV-MZ by Hakuen Studio
Add responsive mobile controls for Rpg Maker!
hakuenstudio.itch.io
Last edited:
