2.2.2 Cycle 9
Design
Objectives
In this development cycle I was focused on creating a combat mechanic of throwing a weapon that can collide with the enemy and attack them to make the game more interactive
Usability Features
Key Variables
knives
Stores information about the knife such as the sprite, direction, how many are present in the group and more as well as detecting collisions
player / faune
Variable that stores all of the information and properties about the character.
angle
Calculates and holds information about which direction the weapon will be thrown from on input.
Pseudocode
knives = physics.group(){
class: image
maxsize: 3
}
function throwknife(){
vec = math.vector(0, 0)
if (scaleX < 0)
{
vec.x = -1
}
else
{
vec.x = 1
}
angle = vec.angle()
knife.setrotation(angle)
knife.x += vec.x * 16
knife.y += vec.y * 16
knife.setVelocity(vec.x * 100, vec.y * 100)
if (keySpace.isDown){
throwknife()
return
}
add.collider(this.faune, knives, handleKnifeLizardCollision)
private handleKnifeLizardCollision(knives, lizard){
knives.killAndHide()
lizard.killAndHide()
}
Development
Outcome
The code involved for the making of the attack function in this game involved lots of coding across multiple different files to make the feature global to the character in any scene. This involved using the EventCenter.ts file I had set up earlier on in the project to emit scene variables allowing me to achieve this.
I have also had to use basic maths functions built into phaser such as the Math.Vector feature in order to make sure I am launching the weapon in the correct direction that the character is facing to make the gameplay easier.
private knives?: Phaser.Physics.Arcade.Group
//set the knives group to the appropraite player group
setKnives(knives: Phaser.Physics.Arcade.Group)
{
this.knives = knives
}
~//get knives for the chracter but return null if theres none available
private throwKnife()
{
const knife = this.knives.get(this.x, this.y, 'knife') as Phaser.Physics.Arcade.Image
if (!knife)
{
return
}
// get the current animation direction of the player character
const parts = this.anims.currentAnim.key.split('-')
const direction = parts[2]
const vec = new Phaser.Math.Vector2(0, 0)
// set the velocity vector based on the animation direction
switch (direction)
{
case 'up':
vec.y = -1
break
case 'down':
vec.y = 1
break
default:
case 'side':
if (this.scaleX < 0)
{
vec.x = -1
}
else
{
vec.x = 1
}
// calculate the angle and set the knife's properties
const angle = vec.angle()
knife.setActive(true)
knife.setVisible(true)
knife.setRotation(angle)
knife.x += vec.x * 16
knife.y += vec.y * 16
knife.setVelocity(vec.x * 300, vec.y * 300)
}
// check if the spacebar is pressed and call the throwKnife function
update(){
if (Phaser.Input.Keyboard.JustDown(cursors.space!)){
this.throwKnife()
return
}
}Challenges
Throughout this development cycle most of the code worked out seamlessly on the testing with only a few small select few bugs. One example of a bug found was the game freezing upon trying to destroy colliders since it was detecting multiple collisions and trying to remove a non existent element across all enemies.
Testing
Evidence for testing
Tests
1
Run code
Player and map should still load on the original map
As expected
Pass
2
Press the spacebar to throw the weapon
A weapon should be thrown away from the player in the direction they're facing
As expected
Pass
3
Hit a character with the weapon to see if they disappear
The enemy disappears and so does the weapon
The game freezes after detecting multiple collisions
Fail
4
Hit a wall / rock with weapon to see if the weapon disappears
Weapon should disappear and go back into the group upon collision
As expected
Pass
After encountering this through my testing I went through many different methods in an attempt to fix this issue for the specific enemy without having to freeze and break the whole game. I did eventually settle on having to remove the line that destroys the enemy collision now only hiding and immobilising the knife and lizard instead of removing their ability to interact with players.
private handleKnifeLizardCollision(obj1: Phaser.GameObjects.GameObject, obj2: Phaser.GameObjects.GameObject)
{
this.knives.killAndHide(obj1)
this.lizards.killAndHide(obj2)
// this.playerLizardCollider?.destroy()
}Tests
1
Run code
Player and map should still load on the original map
As expected
Pass
2
Press the spacebar to throw the weapon
A weapon should be thrown away from the player in the direction they're facing
As expected
Pass
3
Hit a character with the weapon to see if they disappear
The enemy disappears and so does the weapon
As expected
Pass
4
Hit a wall / rock with weapon to see if the weapon disappears
Weapon should disappear and go back into the group upon collision
As expected
Pass
The game footage above shows how the combat system works on a given input and how the weapon interacts with the enemy characters for a basic combat system that can be fully integrated into a more suitable map later on.
Last updated