Jump to content

Creating rpg text box


Recommended Posts

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);

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...