A Brief Introduction To Virtual JoyStick In Phaser
Posted By : Ishaan Madan | 31-May-2018
Introduction
Most of the mobile and desktop games today come with an inbuilt virtual joystick. The joystick in a game not only enhances the user experience but also helps to gain prolonged attention of a user. This blog describes us a way through which we can add a virtual joystick in our game using phaser .
In our current example, we will be loading a pad with such 'top', 'left', 'right' and 'bottom' keys along with three other buttons 'A', 'B', 'C', serving different purpose like "tint", "scale" and both "scale and tint" .
To load the pad we will be using "game.plugins.add(Phaser.VirtualJoystick)" method in the create function to create a "pad" object which will be used to configure our joystick navigation keys. Further we will be creating a 'stick' variable using 'pad' object which will add a stick like image over the screen. The stick can be positioned as per the game requirement.
Subsequently, The configuration of the stick is done in the update() function which runs every frame.
The final code is summarized below.
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example');
var PhaserGame = function () {
this.sprite;
this.pad;
this.stick;
this.buttonA;
this.buttonB;
this.buttonC;
};
PhaserGame.prototype = {
init: function () {
this.game.renderer.renderSession.roundPixels = true;
this.physics.startSystem(Phaser.Physics.ARCADE);
},
preload: function () {
this.load.atlas('dpad', 'assets/virtualjoystick/skins/dpad.png', 'assets/virtualjoystick/skins/dpad.json');
this.load.image('ball', 'assets/virtualjoystick/beball1.png');
this.load.image('bg', 'assets/virtualjoystick/space2.png');
},
create: function () {
this.add.image(0, 0, 'bg');
this.sprite = this.add.sprite(400, 200, 'ball');
this.physics.arcade.enable(this.sprite);
this.pad = this.game.plugins.add(Phaser.VirtualJoystick);
this.stick = this.pad.addDPad(0, 0, 200, 'dpad');
this.stick.alignBottomLeft(0);
this.buttonA = this.pad.addButton(500, 520, 'dpad', 'button1-up', 'button1-down');
this.buttonA.onDown.add(this.pressButtonA, this);
this.buttonB = this.pad.addButton(615, 450, 'dpad', 'button2-up', 'button2-down');
this.buttonB.onDown.add(this.pressButtonB, this);
this.buttonC = this.pad.addButton(730, 520, 'dpad', 'button3-up', 'button3-down');
this.buttonC.onDown.add(this.pressButtonC, this);
},
pressButtonA: function () {
this.sprite.tint = Math.random() * 0xFFFFFF;
},
pressButtonB: function () {
this.sprite.scale.set(Math.random() * 4);
},
pressButtonC: function () {
this.sprite.scale.set(1);
this.sprite.tint = 0xFFFFFF;
},
update: function () {
var maxSpeed = 300;
if (this.stick.isDown)
{
this.sprite.body.velocity.set(0);
if (this.stick.direction === Phaser.LEFT)
{
this.sprite.body.velocity.x = -maxSpeed;
}
else if (this.stick.direction === Phaser.RIGHT)
{
this.sprite.body.velocity.x = maxSpeed;
}
else if (this.stick.direction === Phaser.UP)
{
this.sprite.body.velocity.y = -maxSpeed;
}
else if (this.stick.direction === Phaser.DOWN)
{
this.sprite.body.velocity.y = maxSpeed;
}
}
else
{
this.sprite.body.velocity.set(0);
}
}
};
game.state.add('Game', PhaserGame, true);
Thanks
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ishaan Madan
Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.