omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
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
67
Reaction score
45
First Language
English
Primarily Uses
RMVXA
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
67
Reaction score
45
First Language
English
Primarily Uses
RMVXA
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
13
Reaction score
1
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
67
Reaction score
45
First Language
English
Primarily Uses
RMVXA
 

omarproductions

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

TheGentlemanLoser

"And when we fall, we will fall together..."
Veteran
Joined
Dec 30, 2020
Messages
215
Reaction score
259
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
13
Reaction score
1
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
251
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
13
Reaction score
1
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

Voting for the second round of the Map Madness Tournament is now live! Vote for your favorite in each matchup! https://forums.rpgmakerweb.com/index.php?forums/map-madness-2021-polls.187/
Just bought the Visustella All Waves bundle... Time to go IN!!
Oh, I was just confirmed I'll be doing small online classes during june - july, on one side I'm nervous and looking forward it, on the other one: I've became the very thing I swore to destroy. :kaodes:
Work starts today at 2pm. I hate jeans, but the dress code says I have to wear them... That's how I discovered I was a plus size. Shopping for my first pair of jeans.
Anyhow, I'll post a new video on TheDazzlingsAreBack as soon as I'm able to.
dEj6ha4.png

WIP :)
Added some cliffs / walls / roofs to the tilesheet and am currently working on roof objects to make them prettier and more variable. And of course, windows and doors that fit to the game's style.
I also adjusted the grass color but i have some issues with my display, so if it looks weird, please let me know :)

Forum statistics

Threads
110,573
Messages
1,054,308
Members
143,685
Latest member
Yatsuzuka_Kou
Top