Jump to content

Best way to display a paragraph of text


blueFire
 Share

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.

Link to comment
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

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

  • 5 months later...

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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