2.2.2 Cycle 6

Design

Objectives

This development cycle was focused on user accessibility and controls for the player character allowing multiple inputs and removing a hierarchy of input controls to make sure the experience is as smooth as possible.

• Create multiple inputs for player movement such as the W,A,S,D controls as well as still having the ability to use the arrow keys if desired.

• Remove the hierarchy of inputs so that whatever key is pressed most recently is what maintains priority in movement.

Usability Features

Key Variables

Variable Name	Use
W, A, S, D	Variables used to store keycode information about W,A,S,D inputs to make it easier to put into the code
player / faune	Variable that stores all of the information and properties about the character.
currentKey	Holds information about the current key being

Pseudocode

speed = 100
        if (cursors.left.Down || keyA.isDown)
        {
            z-index: 0
            faune.anims.play('faune-run-side', true)
            faune.setVelocity(-speed, 0)
            currentkey = left
        }
        else if (cursors.right.Down || keyD.isDown)
        {
            z-index: 0
            faune.anims.play('faune-run-side', true)
            faune.setVelocity(speed, 0)
            faune.body.offset.x = 8
            currentkey = right
        }
        else if (cursors.up.Down || keyW.isDown)
        {
            z-index: 0
            faune.anims.play('faune-run-up', true)
            faune.setVelocity(0, -speed) 
            currentkey = up
        }
        else if (cursors.down.Down || keyS.isDown)
        {
            z-index: 0
            faune.anims.play('faune-run-down', true)
            faune.setVelocity(0, speed)
            currentkey = down
        }
        else
        {
            parts = 'idle'
            this.faune.anims.play()
            this.faune.setVelocity(0, 0)
        }

Development

Outcome

Through my development most of my development occurred in the game.ts file with declaration of variables with keymaps as well as movement code all remaining in the same file.

game.ts

//create variables for each key and asign them to keyboard codes
let keyA;
let keyS;
let keyD;
let keyW;
keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
keyS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);

    if (!this.cursors || !this.faune)
        {
            return
        }
        const speed = 100;
//check if any of the keys are being pressed down to start playing the correct animation
    if (this.cursors.left?.isDown || keyA.isDown)
        {
            this.faune.anims.play('faune-run-side', true)
            this.faune.setVelocity(-speed, 0)
            this.faune.scaleX = -1
            this.faune.body.offset.x = 24
        }
    else if (this.cursors.right?.isDown || keyD.isDown)
        {
            this.faune.anims.play('faune-run-side', true)
            this.faune.setVelocity(speed, 0)
            this.faune.scaleX = 1
            this.faune.body.offset.x = 8

        }
    else if (this.cursors.up?.isDown || keyW.isDown) {
            this.faune.anims.play('faune-run-up', true)
            this.faune.setVelocity(0, -speed)
        }

    else if (this.cursors.down?.isDown || keyS.isDown) {
            
            this.faune.anims.play('faune-run-down', true)
            this.faune.setVelocity(0, speed)
        }
    else
        {
// If no keys ar ebeing pressed set the idle animation and stop the character moving
            const parts = this.faune.anims.currentAnim.key.split('-')
            parts[1] = 'idle'
            this.faune.anims.play(parts.join('-'))
            this.faune.setVelocity(0, 0)
        }

    }

Challenges

In this development cycle i faced multiple challenges around the key priority and making sure the most recent input is the correct one. I managed to figure out how to program the multiple inputs pretty quickly but making sure the movement corresponds to the most recent input was seen to be quite challenging.

Testing

Evidence for testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Player and map should still load on the original map	As expected	Pass
2	Use the W,A,S,D keys for input as well as making sure arrow keys work properly	The game to allow multiple different inputs simultaneously for ease of play-ability	As expected	Pass
3	Use multiple keys to see which ones are prioritised in movement	Character moves in response to most recent input	Movement inputs that are defined first remain prioritised	Fail

After this I tried to look through different documentation and for help online to try and fix my code in an attempt to make sure correct inputs are prioritised. I had tried to find equivalents to a z-index feature to make sure the right movements are being used. After a while I had realised that developing a feature like this was out of my ability and had chosen to settle with the multiple inputs but had to remain with the issue of input hierarchy.

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Player and map should still load on the original map	As expected	Pass
2	Use the W,A,S,D keys for input as well as making sure arrow keys work properly	The game to allow multiple different inputs simultaneously for ease of play-ability	As expected	Pass

The video above shows the different key inputs and how they are used to both control player inputs in the game so that players can choose how to play for an easier and more enjoyable experience for better user access