Recently as I was building a new game, I realized that one of the most re-used elements across a variety of games is the “modal”, whether it is a countdown, a message modal or a game-over modal.
So I thought to create a little snippet that would make creating a modal an easier task, with the following script we can create a large combination of either text, bitmaptext or images.
So enough with the presentation, lets see how it looks, in this codepen I created six examples for all tastes.
So let’s see what this script can support.
- type: This is the name of the modal, which we use to identify it
- includeBackground: This toggles the modal background on or off (default off)
- backgroundColor: This is the modal background color (default 0x000000)
- backgroundOpacity: This sets the modal background opacity (default: 0.7)
- modalCloseOnInput: If we want the modal to close when we click on the background (default off)
Modal elements properties
- type | The type of the element (text, bitmapText, image)
- color | The color of the element (text only)
- fontFamily | The font family to use (bitmapText or text)
- fontSize | The font size of the text or bitmaptext (bitmapText or text)
- align | The alignment of the text (center, left, right and text only)
- offsetX | The offset on x-axis of the element from the center of the game (0 is dead center)
- offsetY | The offset on y-axis of the element from the center of the game (0 is dead center)
- contentScale | The scaling to apply to the element (1 is no scale, default = 1)
- content | The actual content of the element can be string, number, cache key (for images), url of image
- callback | The callback function to call when the element is clicked/touched (basically when input down event is fired)
- createModal | The function to create a modal, takes an object with the modal properties as an argument
- showModal | The function to show a previously created modal, takes the modal name/type as an argument
- hideModal | The function to hide a previously created and shown modal, takes the modal name/type as an argument
- getModalItem | The function to get an element from a previously created modal, takes the modal name/type and the position of the element (index) as an argument
- destroyModal | Remove a previously created modal from the registry
- updateModalValue | Dynamically change the value of an element inside a modal, takes the modal name/type, the changed value, and the index of the element as arguments (experimental function)
So let us create a simple modal with background and text.
We initiate the library pass the game object as an argument and store it to a variable.
reg.modal = new gameModal(game);
Now we simply define the modal properties inside the createModal function of the script.
content: "Simple Text with Modal background, \n nothing fancy here...",
fontFamily: "Luckiest Guy",
Note: In order to show a modal you need to call the `showModal` function like this:
You can also view the script on GitHub
I hope you like it, if you do or have anything to say drop me a comment below.