Best way to display a paragraph of text

[blueFire]

What is the best way to display a paragraph of text in Phaser?  I need it to scale to work in browsers of various sizes.

 

Jason

[spencerTL]

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.

[blueFire]

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

[spencerTL]

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

[blueFire]

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

[LLp]

What about paragraphs displayed in retro fonts ? How can I insert line breaks each N characters ?

[LLp]

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