Sign in to follow this  
phamedev

How to add lengthy instructions in Phaser Game?

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?

Share this post


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.