Jump to content

How to add lengthy instructions in Phaser Game?


phamedev
 Share

Recommended Posts

I have to add lengthy instructions (3 pages, with examples and images, possibly with one animated GIF) to a game I'm building using Phaser framework.
The instructions will be shown by clicking "Instructions" button on the game title page (title state). 

How do you usually do that? Should I use bitmapText for paragraphs of instructions? I'm thinking about showing them in html format in a DIV the same size of the canvas with canvas hidden behind it. What is more practical?

Any suggestions?

Link to comment
Share on other sites

Try SweetAlert2:

https://limonte.github.io/sweetalert2/

This is all you would have to add in your code:

swal({
    title: 'SUCCESS!',
    type: 'success',
    text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   });

It handles DOM for you. You could also add multiple pages with custom background. Check the complete docs!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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