In-game guide

[Shadran]

Hi everyone, I would like to include an in-game guide for the game I'm creating, but I'm doubtful on what's the best method to do it.

I think I have the following options:

1) write it on a standard html page and then render it on top of the game canvas as the "how to play" button is pressed, dealing with the eventual rescaling problems.

2) use phaser.text and phaser.image to create the text and manually simulate the scroll

 

The guide is a mix of images and text with formatting, so I would go with the first option, as it's quite difficult to format text with phaser.

Are there better methods to do this? If not, what method should I choose?

[drhayes]

I think you're going to have to try it both ways and see which works for you. I've had a lot of success getting BitmapText objects to format well and was about to start writing code to provide in-place formatting (color, "bolding", etc).

[ForgeableSum]

The first option, definitely. Use something like jQuery UI to assist with dialog boxes, select, text areas, etc. Trust me, it will save you a lot of trouble in the long run. 

 

HTML/CSS is specifically designed for communicating and formatting text documents. It's highly developed in that respect. Drawing text onto the canvas shouldn't be relied on for text-heavy games that have guides and such. 

 

Think about it, you'll essentially be doing the equivalent of using CSS absolute/relative positioning for all the UI elements/text content of your game. But if you've got it in HTML/CSS, you can take advantage of floats, padding, margins, borders, tables, etc. Not to mention the fact that making all your text content/UI responsive is 10x harder if you're not using floats and percentage-based widths and heights. 

[drhayes]

feudalwars has an amazingly good point: don't redo all that work the browser is well engineered to do for you.

 

That said, some mobile wrappers only show canvases and don't let you specify arbitrary HTML to include with your game. So, hopefully you *can* use the DOM.