Cursor Key Movements In Phaser Gaming Engine
Posted By : Ishaan Madan | 25-Sep-2017
Introduction
Phaser is one of the most popular HTML5 gaming engine. It has wide array of support including mobiles as well as browser. This Phaser is basically contained in a JS file, which can be included in the page through CDN as well as locally. HTML5 handles graphics and games using canvas element. It updates the displayed canvas based on user input, and is compatible with use of physics in a game too thus making it a preferred choice for 2D game development.
Below Mentioned code demonstrates the use of cursor keys as user inputs to move the camera to traverse inside the game world. The game world in this example is full of static sprites randomly positioned across the entire world bounds.
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.stage.backgroundColor = '#007236'; game.load.image('ball', 'assets/sprites/shinyball.png'); game.load.image('mushroom', 'assets/sprites/mushroom2.png'); game.load.image('phaser', 'assets/sprites/sonic_havok_sanity.png'); } var cursors; function create() { // Modify the world and camera bounds game.world.setBounds(-1000, -1000, 2000, 2000); for (var i = 0; i < 100; i++) { game.add.image(game.world.randomX, game.world.randomY, 'mushroom'); } game.add.image(-16, -16, 'ball'); // This will create a new object called "cursors", inside it will contain 4 objects: up, down, left and right. // These are all Phaser.Key objects, so anything you can do with a Key object you can do with these. cursors = game.input.keyboard.createCursorKeys(); var text = game.add.text(32, 32, 'Cursors to move. Shift + Up / Down to Rotate World', { fill: '#ffffff' }); } function update() { // For example this checks if the up or down keys are pressed and moves the camera accordingly. if (cursors.up.isDown) { // If the shift key is also pressed then the world is rotated if (cursors.up.shiftKey) { game.world.rotation += 0.05; } else { game.camera.y -= 4; } } else if (cursors.down.isDown) { if (cursors.down.shiftKey) { game.world.rotation -= 0.05; } else { game.camera.y += 4; } } if (cursors.left.isDown) { game.camera.x -= 4; } else if (cursors.right.isDown) { game.camera.x += 4; } } function render() { game.debug.cameraInfo(game.camera, 32, 500); }
Thanks
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.