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

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..