blueFire

Best way to display a paragraph of text

Recommended Posts

The best scaling is got from using the DOM and positioning it\switching its visible property using getElementByID. This has to be above all phaser graphics though.

Phaser's text display does its job but as it renders it as a bitmap and it isn't designed for advanced text formatting you may find scaling issues, especially upward.

Share this post


Link to post
Share on other sites

The best scaling is got from using the DOM and positioning it\switching its visible property using getElementByID. This has to be above all phaser graphics though.

Phaser's text display does its job but as it renders it as a bitmap and it isn't designed for advanced text formatting you may find scaling issues, especially upward.

Where can I find a simple example of using the DOM in Phaser?

 

Also, is it possible to do a multiline text using Phaser's text display without manually inserting the line breaks?

 

Jason

Share this post


Link to post
Share on other sites

It isn't using the DOM in Phaser it is just using the DOM.

 

In your HTML:

<div class ="offScreen" id ="instructions"><p>Paragraphs and text here.</p></div>

In your CSS (also style it to an appropriate width and position - these are just egs you may prefer % to px for scaling):

.offScreen {display:none;
position: absolute;
width:600px;
left:320px;

} .onScreen{ display:block

position: absolute;
width:600px;
left:320px;

}

In your event handling function for a Phaser button / clickable sprite:

var instructionShowing = false; toggleInstructions:function() {  if(instructionsShowing==false)  {    instructionsShowing=true;     document.getElementById("instructions").className = " onScreen";  }  else  {    instructionsShowing=false;     document.getElementById("instructions").className = " offScreen";  }

Unless it is essential your text is part of the canvas/needs graphics above it this is the easiest way with the most readable text.    

 

Wordwrap and wordwrapwidth exist in the docs for Phaser's own text but I've never used them so I'm not sure what they do/how they work.

 

http://docs.phaser.io/Phaser.Text.html#wordWrapWidth

Share this post


Link to post
Share on other sites

After some experimentation using Phaser's build in text system I discovered the best way of doing this was to use the following code:

var directions = "Insert a really long paragraph here without any line breaks.";var style = { font: "30px Arial", fill: "#ff0044", align: "center" };var text = game.add.text(game.world.centerX, game.world.centerY, directions, style);text.anchor.set(0.5);text.wordWrap = true;text.wordWrapWidth = window.innerWidth - 50;

I then set the fontSize depending upon the width of the device and it now scales to all devices equally.

 

Jason

Share this post


Link to post
Share on other sites

I've found it  in the examples :

 

font.setText("HOLA FAMILIA\nMY SEPARATED TEXT", true, 0, 8, ",!?ABCDEFGHIJKLMNOPQRSTUVWXYZ.", 10);

 

instead of

 

font.text = "HOLA FAMILIA\nMY SEPARATED TEXT"

 

where the alfabet string is the key distribution of the png

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.