Omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
28
Reaction score
5
First Language
English
Primarily Uses
RMMV
Hey Makers, how's it going?

I'm not that skilled when it comes to using JavaScript. The only stuff I know is from when I was taking web development 1 in college, plus we barely touch it in that course. So, little to say, my knowledge when it comes to JavaScript, is next to none. That's why I've come here to get some help. All I would like to know is how to display text (and possibly in a text window) anywhere I want using JavaScript, and also display in game variables within the text on screen. I'd also like to know how I can use JavaScript to Hide/Show and update my text, using a call script, so every time the variable within the text on screen changes, it updates, and I can choose when to display the text on screen.

Basically it should look something like this (Picture taken in RPG Maker VX Ace):Scoring system.jpg What I want to do is take the concept I found from a YouTube video, and apply it in JavaScript so I can use it in RPG Maker MV.

Here's the video for reference:
I'd greatly appreciate your help, to make my game the best it can be. Thank you for your time and help!

Regards,
Omar
 
Last edited:

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
119
Reaction score
74
First Language
English
Primarily Uses
N/A
You can start with this tutorial, part 4 talks about displaying text anywhere.


And for reference, here is a plugin I made to display text in the corners of the screen, and then fade out.
JavaScript:
//=============================================================================
// Text_Popup.js
//=============================================================================
/*:
 * @Text_Popup
 * @plugindesc Display a popup text
 * @version 1.0
 * @author Zero_G
 * @filename Text_Popup.js
 * @help
 -------------------------------------------------------------------------------
 == Description ==
 This plugin is an example of how to pop up text

 == Terms of Use ==
 - Free for use in non-commercial projects with credits
 - Free for use in commercial projects
 - Please provide credits to Zero_G

 == Usage ==
 Press de C key during gameplay to show popup

 function SceneManager.callPopup(text, position, maxWidht)
 text = text of popup
 position = position of popup ['topRight', 'bottomRight', 'topLeft',
            'bottomLeft'], default is 'topRight'
 maxWidht = max widht of popup in pixels, text will compress to this widht.
            if text is too long, increase it. Deafult 100
 
 -------------------------------------------------------------------------------
*/

var Imported = Imported || {};
var ZERO = ZERO || {};
Imported.ZERO_TextPopup = 1;
ZERO.TextPopup = ZERO.TextPopup || {};

(function ($) {
  document.addEventListener('keydown', event => {
    if (event.keyCode == 67) {  // C
        SceneManager.callPopup('testing popup');
      }
  });

  // Create sprite object
  var popupSprite;
  var _Scene_Base_start = Scene_Base.prototype.start;
  Scene_Base.prototype.start = function () {
    _Scene_Base_start.call(this);

    popupSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height));
    popupSprite.opacity = 255;
    this.addChild(popupSprite);
  };

  // Call popup

  /* drawText info
  * @param {String} text The text that will be drawn
  * @param {Number} x The x coordinate for the left of the text
  * @param {Number} y The y coordinate for the top of the text
  * @param {Number} maxWidth The maximum allowed width of the text
  * @param {Number} lineHeight The height of the text line
  * @param {String} align The alignment of the text
  **/
  SceneManager.callPopup = function (text, position = 'topRight', maxWidth = 100) {
    popupSprite.bitmap.clear();
    popupSprite.opacity = 255;

    switch(position){
        case 'topRight':
            popupSprite.bitmap.drawText(String(text), Graphics.width - maxWidth - 10, 10, maxWidth, 30, 'right');
            break;
        case 'bottomRight':
            popupSprite.bitmap.drawText(String(text), Graphics.width - maxWidth - 10, Graphics.height - 50, maxWidth, 30, 'right');
            break;
        case 'topLeft':
            popupSprite.bitmap.drawText(String(text), 10, 10, maxWidth, 30, 'left');
            break;
        case 'bottomLeft':
            popupSprite.bitmap.drawText(String(text), 10, Graphics.height - 50, maxWidth, 30, 'left');
            break;
    }
  };

  // Fade popup
  var _Scene_Base_update = Scene_Base.prototype.update;
  Scene_Base.prototype.update = function() {
  _Scene_Base_update.call(this);

  if (typeof popupSprite !== 'undefined'){
    if(popupSprite.opacity > 0) {
        popupSprite.opacity -= 1;
    }
  }
};
})(ZERO.TextPopup);
 
Last edited:

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
119
Reaction score
74
First Language
English
Primarily Uses
N/A
But there should be a plugin that does this already, for example one that displays current gold (then modify it to your convenience). Look in the plugin lists.
 

Omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
28
Reaction score
5
First Language
English
Primarily Uses
RMMV
But there should be a plugin that does this already, for example one that displays current gold (then modify it to your convenience). Look in the plugin lists.
Can you tell me how cause I tried one time and had no clue what I was doing.
 

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
119
Reaction score
74
First Language
English
Primarily Uses
N/A
 

Omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
28
Reaction score
5
First Language
English
Primarily Uses
RMMV
Thanks!
 

TheGentlemanLoser

"And when we fall, we will fall together..."
Veteran
Joined
Dec 30, 2020
Messages
373
Reaction score
506
First Language
English
Primarily Uses
RMMV
OrangeHUD is the family of plugins you want: be advised I found it a ***** and a half to configure and still am not entirely happy with the results, but then again, I know (even) less about JavaScript than you do (approaching nothing)
 

Omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
28
Reaction score
5
First Language
English
Primarily Uses
RMMV
OrangeHUD is the family of plugins you want: be advised I found it a ***** and a half to configure and still am not entirely happy with the results, but then again, I know (even) less about JavaScript than you do (approaching nothing)
Thanks!
 

Riazey

Master of None
Veteran
Joined
Feb 27, 2014
Messages
167
Reaction score
253
First Language
English
Primarily Uses
RMMV
There's also SRD Hudmaker which can display not only text but a bunch of other stuff as well~
 

Omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
28
Reaction score
5
First Language
English
Primarily Uses
RMMV
Thank you guys for your support! After going through all the things you recommended I do, I decided that I will use SRD Hudmaker, since it’s the easiest plugin I can use. I’d also like to add that those who recommend this plugin, will be in the credits of my game!
 

Latest Threads

Latest Profile Posts

ScreenShot_12_7_2022_8_57_56.png
part of the common event help menu I'm working on. I used Yanfly's Common Event Menu to set it up and here's a screen of once you've selected one of the options. This one explains the 6 different battle commands.
KDS
Hey guys! Iam currently updating my free digital art shop , let me know if you need anything done :) https://forums.rpgmakerweb.com/index.php?threads/kds-free-open-digital-art-shop.17097/
Hello! I’d like to ask where is a good place to start logging about my game dev progress as production of my game goes forth
In one of our campus classrooms was a bag full of stuff people forgot there... my bag. That I forgot there xD
You know your room is too tiny for how much stuff you have when it gives you literal insomnia. I just cleared a bunch of stuff out and man it feels good!

Forum statistics

Threads
127,106
Messages
1,184,010
Members
167,030
Latest member
scumer005
Top