Creating rpg text box

[jackpottz]

Hey, I'm learning html5, primarily for making games. I was wondering how would I go about making text boxes for rpg/adventure games. If any of you guys played classic final fantasy and zelda games , you"ll know what I'm talking about. I tried something like a fillRect() or strokeRect() with fillText() in it. Is this the best approach?

 

 

  var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      
      ctx.fillStyle = 'blue';
      ctx.fillRect(100,100, 300,100);
      
      ctx.fillStyle = 'white';
      ctx.font = "20px serif";
      ctx.fillText("hi everybody", 100, 120);
      
      

[mattstyles]

5 hours ago, jackpottz said:

Is this the best approach?

If it gives you what you want then its the best approach!

There are a couple of alternatives that immediately spring to mind:

* Use the DOM and css styling. It's much more powerful for styling elements like you're doing, easier for text and it could be easier to control the elements that become visible/invisible as the dialog opens/closes.

* Use a background image. This has the advantage of being easily the most graphically rich, but the disadvantage of restricting the size of your dialog box to as many graphics as you create. There are workarounds though.

* Header and footer images. Use a header image at the top of the dialog, one at the bottom and possibly a repeating texture for the central part. This fixes the width of your modal but allows the text to stretch vertically which allows dialogs to display much more/less text.

* Nine-patch image, pretty sure its often called this, but its where you just build on the previous to include horizontal stretching too. Take a square image, with borders all around, split it in to 9 identically shaped pieces, the corner pieces stay the same but the edge pieces are repeating (the central piece is your background, although you might ditch that and use a larger repeating background image, particularly if your border is overlaid on top of it) which means you can size your dialog box how you like, but still get fairly good visuals (this is how its done in CSS as well, there should be lots of documentation on the technique).

[jackpottz]

Thanks, will look into these options.