Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about HTML5, Javascript and Phaser.

A lot of people enjoyed my previous post to add Bootstrap component to your HTML5 games powered by Phaser thanks to its DOM support, but the DOM game object available on Phaser can be used with a lot more frameworks, like jQuery UI.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. It was one of the first component libraries released, and features nice components like draggable elements.

So, here we go with a draggable jQuery UI element embedded in a Phaser project:

Drag the yellow element around the canvas.

The big issue with this script was the difference between page scale and canvas scale, due to Phaser scale manager.

I needed to add callbacks to draggable element and use some math to make page scale and Phaser scale compatible.

This is not an issue if you don’t scale your Project, but we all know most if not all HTML5 games do.

jQuery and jQuery UI are loaded in the HTML page:

<!DOCTYPE html>
<html>
	<head>
        <style type = "text/css">
            body{
                background: #000000;
                padding: 0px;
                margin: 0px;
            }
        </style>
		<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
    </head>
	<body>
        <div id = "thegame"></div>
	</body>
</html>

Then in another HTML file which I called jqueryui.html I added the draggable element mostly copying and pasting one of the official examples:

<div id = "draggable" class = "ui-widget-content" style = "cursor:pointer;padding:20px;background-color:yellow">
    <p>I am a jQuery UI draggable</p>
</div>

Finally, the Phaser script:

let game;

$(document).ready(function() {
    let gameConfig = {
        type: Phaser.AUTO,
        backgroundColor: 0xe5e5e5,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 500,
            height: 500
        },

        // this is needed to work with DOM elements
        dom: {
            createContainer: true
        },
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
});

class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {

        // this is how we load HTML content
        this.load.html("draggable", "jqueryui.html");
    }
    create() {

        // a DOM elements is added pretty much like a sprite
        this.add.dom(game.config.width / 2, game.config.height / 2).createFromCache("draggable");

        // game size / actual canvas size ratio
        let ratio = new Phaser.Math.Vector2(game.config.width / $("#thegame canvas").width(), game.config.height / $("#thegame canvas").height());

        // delta which is affected by the ratio
        let delta = new Phaser.Math.Vector2(0, 0);

        // turn "draggable" element into a draggable component
        $("#draggable").draggable({

            // drag callback: adjust element position according to delta and ratio
            drag: function(e, ui) {
                ui.position.left = (ui.position.left - delta.x) * ratio.x;
                ui.position.top = (ui.position.top - delta.y) * ratio.y;
            },

            // drag stop callback: update delta according to game/canvas ratio
            stop: function(e, ui) {
                delta.x = ui.position.left - ui.position.left / ratio.x;
                delta.y = ui.position.top - ui.position.top / ratio.x;
            }
      });
    }
}

Here is where I add the draggable element and handle the different page/canvas size ratio.

There’s nothing you can’t achieve with the power of Phaser, we already added Bootstrap and jQuery UI frameworks, do you have any other framework you would like to see working with Phaser?

Download the source code and enjoy.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.