D-Pad + Action Button plugin request

Kich

Hi-bit pixel artist
Veteran
Joined
Sep 12, 2012
Messages
46
Reaction score
145
First Language
Portuguese
Primarily Uses
RMMV
Hey everyone. :)

I was testing an .apk from my project and figured out that I dislike the standard movement. I guess a D-Pad plugin would be very usefull for the RPG Maker community. It focuses attention on mobile, naturally. So I'm asking all you devs around to join the cause, please.



In the mockup:

D-Pad on left is on center of y axis and ~10px from the right edge on x axis. Has 4 directions. (May be 8 in the future?)

Action button on right is equivalent to Space/Enter/Z, for interaction. Also on center of y axis and ~10px from the left edge on x axis.

64x64px for each touch area (4 on pad and 1 on trigger) seems to fit pretty good.

Moreover, I'm using a custom screen resolution on this, but I figure that the size I suggested might work on every screen, since it's big enough. And finally, the standard movement (touch tile to move) should preferably be disabled.

I anxiously hope that anyone of you take some time for this. Thanks in advance! :D
 
Last edited by a moderator:

Siskan

Villager
Member
Joined
Aug 13, 2015
Messages
22
Reaction score
4
First Language
Swedish
I would like to see this too. I think it would grant the player a more precise control and it's also relevant for any game where the path and not only the goal matters. For example games with enemies or traps on the map.
 
Last edited by a moderator:

 Masked 

One apple a day keeps the doctor away
Veteran
Joined
Oct 28, 2015
Messages
75
Reaction score
225
First Language
Portuguese
Primarily Uses
N/A
Did it: https://github.com/MaskedRpg/JS/blob/master/mv/MBS_MobileDirPad.js

I couldn't test it on mobiles, but it works pretty well on the computer.

These images were used as models for the D-Pad and the action button:





I'll make the model easier to modify in the future, but I'm just really tired now xP

Tell me in case of any issues o/

P.S:

To test with a computer, add this at line 74:

Code:
Utils.isMobileDevice = function() {  return true;};
 
Last edited by a moderator:

cellicom

Uncle celli
Veteran
Joined
Mar 13, 2014
Messages
41
Reaction score
26
First Language
Italian
I took the liberty to change your script to facilitate the testing of PCs by adding a parameter. Hope is appreciated


Look the new function isMobileDevice2 and params Force on PC
 

below the modified version
Code:
//=============================================================================// MBS - Mobile Dir Pad//-----------------------------------------------------------------------------// por Masked//=============================================================================//-----------------------------------------------------------------------------// Especificações do plugin (Não modifique!)// Plugin specifications (Do not modify!)///*: @author Masked @plugindesc This script creates a DirPad and a action button for touch devices in order to make the movement better. <MBS MobileDirPad> @help ============================================================================= Introduction ============================================================================= This script creates DirPad and Action Button images on touch devices to make the controls easier to use. ============================================================================= How to use ============================================================================= Not much to say here, just setup the plugin correctly and enable it. ============================================================================= Credits ============================================================================= - Masked, for creating @param DPad Image @desc The file path for the DPad image @default ./img/system/DirPad.png @param ActionButton Image @desc The file path for the Action Button image @default ./img/system/ActionButton.png @param CancelButton Image @desc The file path for the Cancel Button image @default ./img/system/CancelButton.png @param DPad Position @desc The DirPad image position on screen (on format x; y) @default 128; 452 @param ActionButton Position @desc The ActionButton image position on screen (on format x; y) @default 720; 452 @param CancelButton Position @desc The ActionButton image position on screen (on format x; y) @default 752; 484 @param Opacity @desc The opacity used on the DPad and Action Button @default 255 @param Hide Duration @desc Number of frames the UI hiding take @default 15  @param Force On PC @desc Appear in PC version (1 = YES; 0 = NO)  @default 0*/var Imported = Imported || {};var MBS = MBS || {};MBS.MobileDirPad = {};"use strict";(function ($) {	//-----------------------------------------------------------------------------	// Setup	$.Parameters = $plugins.filter(function(p) {return p.description.contains('<MBS MobileDirPad>');})[0].parameters;	$.Param = $.Param || {};	$.Param.dpad = $.Parameters["DPad Image"];	$.Param.button = $.Parameters["ActionButton Image"];	$.Param.cButton = $.Parameters["CancelButton Image"];	var dposition = $.Parameters["DPad Position"].split(";");	$.Param.dpadPosition = new PIXI.Point(Number(dposition[0]), Number(dposition[1]));	var bposition = $.Parameters["ActionButton Position"].split(";");	$.Param.buttonPosition = new PIXI.Point(Number(bposition[0]), Number(bposition[1]));	var cposition = $.Parameters["CancelButton Position"].split(";");	$.Param.cButtonPosition = new PIXI.Point(Number(cposition[0]), Number(cposition[1]));	$.Param.opacity = Number($.Parameters["Opacity"]);	$.Param.hideDuration = Number($.Parameters["Hide Duration"]);		$.Param.forceOnPc = Number($.Parameters["Force On PC"]);	//-----------------------------------------------------------------------------	// Sprite_DirPad	//	// Sprite for the Directional Pad	function Sprite_DirPad() {		this.initialize.apply(this, arguments);	}		function isMobileDevice2() {		if ($.Param.forceOnPc == 1) {			return true;		}		else {			return Utils.isMobileDevice();		}	}	Sprite_DirPad.prototype = Object.create(Sprite_Base.prototype);	Sprite_DirPad.prototype.constructor = Sprite_DirPad;	Sprite_DirPad.prototype.initialize = function() {		Sprite_Base.prototype.initialize.call(this);		this.bitmap = ImageManager.loadNormalBitmap($.Param.dpad, 0);		this.anchor.y = 0.5;		this.anchor.x = 0.5;		this.z = 5;		this._lastDir = null;	};	Sprite_DirPad.prototype.update = function() {		Sprite_Base.prototype.update.call(this);		this.updateMovement();		this.updateTouch();	};	Sprite_DirPad.prototype.updateMovement = function() {		if (this._moveDuration > 0) {			this.x += this._moveSpeed;			this._moveDuration--;		}	};	Sprite_DirPad.prototype.updateTouch = function() {		if (this._lastDir) {			Input._currentState[this._lastDir] = false;			this._lastDir = null;		}		if (TouchInput.isPressed()) {			var sx = this.x - this.width * this.anchor.x;			var sy = this.y - this.height * this.anchor.y;			if (new PIXI.Rectangle(sx + 104, sy + 52, 52, 52).contains(TouchInput.x,TouchInput.y)) {				Input._currentState['right'] = true;				this._lastDir = 'right';			} else if (new PIXI.Rectangle(sx, sy + 52, 52, 52).contains(TouchInput.x,TouchInput.y)) {				Input._currentState['left'] = true;				this._lastDir = 'left';			} else if (new PIXI.Rectangle(sx + 52, sy, 52, 52).contains(TouchInput.x,TouchInput.y)) {				Input._currentState['up'] = true;				this._lastDir = 'up';			} else if (new PIXI.Rectangle(sx + 52, sy + 104, 52, 52).contains(TouchInput.x,TouchInput.y)) {				Input._currentState['down'] = true;				this._lastDir = 'down';			}		}	};	Sprite_DirPad.prototype.hide = function() {		this._moveDuration = $.Param.hideDuration;		var dest = 0 - this.width * (1 + this.anchor.x);		this._moveSpeed = (dest - this.x) / this._moveDuration;	};	Sprite_DirPad.prototype.show = function() {		this._moveDuration = $.Param.hideDuration;		var dest = $.Param.dpadPosition.x;		this._moveSpeed = (dest - this.x) / this._moveDuration;	};	//-----------------------------------------------------------------------------	// Sprite_ActionButton	//	// Sprite for the action button	function Sprite_Button() {		this.initialize.apply(this, arguments);	}	Sprite_Button.prototype = Object.create(Sprite_Base.prototype);	Sprite_Button.prototype.constructor = Sprite_Button;	Sprite_Button.prototype.initialize = function(type) {		Sprite_Base.prototype.initialize.call(this);		this._type = type;		this.bitmap = ImageManager.loadNormalBitmap(type == 0 ? $.Param.button : $.Param.cButton, 0);		this.anchor.y = 0.5;		this.anchor.x = 0.5;		this._moveDuration = 0;		this._moveSpeed = 0;		this.z = 5;	};	Sprite_Button.prototype.update = function() {		Sprite_Base.prototype.update.call(this);		this.updateMovement();		this.updateTouch();	};	Sprite_Button.prototype.updateMovement = function() {		if (this._moveDuration > 0) {			this.x += this._moveSpeed;			this._moveDuration--;		}	};	Sprite_Button.prototype.updateTouch = function() {		if (this._type == 0 && TouchInput.isPressed()) {			var rect = new PIXI.Rectangle(this.x - this.width * this.anchor.x, this.y - this.height * this.anchor.y, this.width, this.height);			Input._currentState['ok'] = rect.contains(TouchInput.x, TouchInput.y);		} else {			Input._currentState['ok'] = false;		}	};	Sprite_Button.prototype.hide = function() {		this._moveDuration = $.Param.hideDuration;		var dest = Graphics.width + this.width * this.anchor.x;		this._moveSpeed = (dest - this.x) / this._moveDuration;	}	Sprite_Button.prototype.show = function() {		this._moveDuration = $.Param.hideDuration;		var dest = this._type == 0 ? $.Param.buttonPosition.x : $.Param.cButtonPosition.x;		this._moveSpeed = (dest - this.x) / this._moveDuration;	}	//-----------------------------------------------------------------------------	// Scene_Map	//	// The map scene	var Scene_Map_createMessageWindows = Scene_Map.prototype.createMessageWindow;	var Scene_Map_createDisplayObjects = Scene_Map.prototype.createDisplayObjects;	var Scene_Map_processMapTouch = Scene_Map.prototype.processMapTouch;	Scene_Map.prototype.createDisplayObjects = function() {	    Scene_Map_createDisplayObjects.apply(this, arguments);	    if (isMobileDevice2()) {		    this.createDirPad();		    this.createActionButton();		}	};	Scene_Map.prototype.createMessageWindow = function() {		Scene_Map_createMessageWindows.call(this);		var oldStartMessage = this._messageWindow.startMessage;		var oldTerminateMessage = this._messageWindow.terminateMessage;		var scene = this;		this._messageWindow.startMessage = function() {			oldStartMessage.apply(this, arguments);			scene.hideUserInterface();		};		Window_Message.prototype.terminateMessage = function() {		    oldTerminateMessage.apply(this, arguments);		    scene.showUserInterface();		};	};	Scene_Map.prototype.createDirPad = function() {		this._dirPad = new Sprite_DirPad();		this._dirPad.opacity = $.Param.opacity;		this._dirPad.x = $.Param.dpadPosition.x;		this._dirPad.y = $.Param.dpadPosition.y;		this.addChild(this._dirPad);	};	Scene_Map.prototype.hideUserInterface = function() {		if (isMobileDevice2()) {			this._dirPad.hide();			this._aButton.hide();		}	};	Scene_Map.prototype.processMapTouch = function() {		if (!isMobileDevice2()) Scene_Map_processMapTouch.apply(this, arguments);	};	Scene_Map.prototype.showUserInterface = function() {		if (isMobileDevice2()) {			this._dirPad.show();			this._aButton.show();		}	};	Scene_Map.prototype.createActionButton = function() {		this._aButton = new Sprite_Button(0);		this._aButton.opacity = $.Param.opacity;		this._aButton.x = $.Param.buttonPosition.x;		this._aButton.y = $.Param.buttonPosition.y;		this.addChild(this._aButton);	};})(MBS.MobileDirPad);Imported["MBS_MobileDirPad"] = 1.0;if (Imported["MVCommons"]) {  	PluginManager.register("MBS_MobileDirPad", 1.0, "Shows a DirPad and action buttons when using mobile devices", {        email: "masked.rpg@gmail.com",      name: "Masked",       website: "N/A"    }, "31-10-2015");}
 
Last edited by a moderator:

Ringtale Games

Veteran
Veteran
Joined
Oct 13, 2014
Messages
82
Reaction score
18
First Language
english
Primarily Uses
YASSSS.

This is awesome, can't wait to test it out.

A toggle to turn it off and on would be awesome, or, for 8 directional movement, have a layered graphic that acts as a digital joystick would be cool too.

Can't wait to see how this evolves!
 

Kich

Hi-bit pixel artist
Veteran
Joined
Sep 12, 2012
Messages
46
Reaction score
145
First Language
Portuguese
Primarily Uses
RMMV
YASSSS²

Masked, thank you so much!

There are some minor issues that I noticed: http://imgur.com/a/X9UJD

---

Image 1: Playtest without MBS_MobileDirPad, resolution at 720x405 (using ScreenResolution).

Image 2: Playtest with MBS_MobileDirPad, same resolution, stretched screen. 

Image 3: I don't know if i understood the positions. I picked them in Photoshop but they were misplaced when placed on parameters. Had to give a shot (a lot of) to correct it. 95px to the right on D-Pad, for example.

Image 4: Action button tries to come back when alternating messages.

---

Meanwhile, I also can't wait to see how this evolves! 8 direction would be fantastic. Thank you again! 
 
Last edited by a moderator:

 Masked 

One apple a day keeps the doctor away
Veteran
Joined
Oct 28, 2015
Messages
75
Reaction score
225
First Language
Portuguese
Primarily Uses
N/A
@cellicom: thanks, I was too lazy to do this when I finished the plugin and that's going to help me on debugging o/

@baxterthecoon: thanks, and I'll try to implement these things when I have time.

@Siskan: oh, forgot to create the cancel button xD

I'll try to implement it asap.

@Kich: Oops, forgot to say the DPad and Action Button sprites are centered, so the coordinates you put in the settings are used to emplace the center of the sprite on the screen, and not the left-top corner as usual xP

I still can't figure out why I did it that way, though... It's even more complicated to programme with it positioned like that ಠ_ಠ
 

Ringtale Games

Veteran
Veteran
Joined
Oct 13, 2014
Messages
82
Reaction score
18
First Language
english
Primarily Uses
AWESOME! It's good to know that you're working on the script as we suggest things, thumbs up!
 

Kich

Hi-bit pixel artist
Veteran
Joined
Sep 12, 2012
Messages
46
Reaction score
145
First Language
Portuguese
Primarily Uses
RMMV
@Masked: got it! Now I realise that I should have placed them on 0,0 (x,y) for testing.  :blink:  Do you know why the resolution is changing?

And thank you for continuing to work on it!
 
Last edited by a moderator:

 Masked 

One apple a day keeps the doctor away
Veteran
Joined
Oct 28, 2015
Messages
75
Reaction score
225
First Language
Portuguese
Primarily Uses
N/A
@Masked: got it! Now I realise that I should have placed them on 0,0 (x,y) for testing.  :blink:  Do you know why the resolution is changing?And thank you for continuing to work on it!
I'm not sure, but try placing my plugin above (or below if it's already above) ScreenResolution on the Plugin Manager, maybe it needs to override some functions to work. I'll take a better look at it.
 

Kich

Hi-bit pixel artist
Veteran
Joined
Sep 12, 2012
Messages
46
Reaction score
145
First Language
Portuguese
Primarily Uses
RMMV
I'm not sure, but try placing my plugin above (or below if it's already above) ScreenResolution on the Plugin Manager, maybe it needs to override some functions to work. I'll take a better look at it.
Didn't work.  :( I'll send you the project by PM.

I don't get it why the resolution is being affected. Also, I noticed that BGM isn't playing with the Plugin ON. I hope you (or anyone) find the solution. :)
 
Last edited by a moderator:

 Masked 

One apple a day keeps the doctor away
Veteran
Joined
Oct 28, 2015
Messages
75
Reaction score
225
First Language
Portuguese
Primarily Uses
N/A

Kich

Hi-bit pixel artist
Veteran
Joined
Sep 12, 2012
Messages
46
Reaction score
145
First Language
Portuguese
Primarily Uses
RMMV
Awesome, man!  :D

 

I leave here three another suggestions:

- Graphic change while pressing

- Include diagonals (8 directions)

 

- Call script to show and hide Pad. 
 
Last edited by a moderator:

marcelox

Painfully Clueless
Veteran
Joined
Oct 25, 2015
Messages
86
Reaction score
14
First Language
English
Hey masked this is great, thanks so much

the game Im using has a purpose for all buttons:

ACTION

CANCEL

MAP

MOUNT

MENU

DASH

I was wondering if you are planning on adding a customizable amount of buttons on the screen so we can assign gamepad-buttons/command events to each button on the screen. As it stands right now, android users have to go into the main menu to mount, they can only dash with always dash on and there's no way to use the map system I have on it without having a key to hit.

Either way, thanks so much for this.
 

Juztsacki

Game Developer
Veteran
Joined
Nov 19, 2015
Messages
55
Reaction score
8
First Language
English
Primarily Uses
N/A
I can make better button for you guys if you want, just ask. I wanna make my game like this if possible. I want "A" & "B" buttons and start. Made this example on Photoshop. Also after I turn on the .js plugin, what location do I put the images for it to pick it up?

 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Profile Posts

tomorrow I'ma go on a cruise for the first time ever... lets hope I'll survive the experience!
Omg! 8 years in this forum :o
Ksi
Streaming the last of the RMN Valentiny event games so feel free to drop on by and watch me cry (whether that's from laughter, rage or sheer pain, who knows?)
Today I went to sleep without setting an alarm, so I could sleep more than 2 hours. I woke up after 2 hours.
Sigh :( ... displaying numbers representing the stats of the PCs for a custom menu in rm2k3 is haaaaaaaarrrd!!! DX

Forum statistics

Threads
94,306
Messages
919,804
Members
124,054
Latest member
stevechtrs
Top