Create an empty HTML file
We will start off by create a blank HTML page and an empty PixiJS application. Inside the new file, add this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS Mouse Events</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript">
// The application
var app = new PIXI.Application();
// Add application to the DOM
document.body.appendChild(app.view);
</script>
</body>
</html>If you open up the HTML file in your browser, you should see a big black square. That means that the PixiJS application is working.
We are just using a CDN to import PixiJS, so we don't have to install anything. This is really easy to do, and it's more than enough for what we're doing in this tutorial.
Inside the <script> tag, we're creating a new Pixi application and adding it to the body.
Adding an object to interact with
In order to move an object, we need to see an object. We can make it really easy, and just add a red square. Below the line were the application is added to the body, add this code:
var square = new PIXI.Graphics();
square.beginFill(0xff0000);
square.drawRect(0, 0, 50, 50);
square.endFill();
square.x = 100;
square.y = 100;
square.interactive = true;
app.stage.addChild(square);In the first line, we define a new variable called square. This is a reference to the Graphics API from PixiJS. On the next line, we set the fill color to 0xff0000 (red). We then set the position and make the object interactive. And last but not least, we're appending it to the stage.
If you don't set the object to be interactive, you won't be able to listen to events.
If you open up the file you created in a browser, a small red square will appear. Nothing will happen when you click it, but we'll fix that now :-)
mousedown event
Below this line (square.interactive = true;) add this code:
square.on('mousedown', function (e) {
console.log('Mouse clicked');
console.log('X', e.data.global.x, 'Y', e.data.global.y);
});If you open the HTML file in your browser now and click the red square, you'll see some output in the console. This is the X position and the Y position of the mouse cursor.
mousemove event
The code above registered where you clicked the mouse. But what if you want to know where you drag the mouse while holding down the button?
square.on('mousemove', function (e) {
console.log('Mouse moved');
console.log('X', e.data.global.x, 'Y', e.data.global.y);
});If you click the red square and move the cursor around, you'll see that the output in the console will change.
mouseup event
The last event we're going to talk about is mouseup. This is triggered when you release the mouse button.
square.on('mouseup', function (e) {
console.log('Mouse released');
console.log('X', e.data.global.x, 'Y', e.data.global.y);
});Summary
Now you should know everything you need in order to start interacting with objects. As a little exercise, try to move the square when you move the mouse cursor.
If anything was unclear in this guide, just leave a reply below and I'll try to help you.