> For the complete documentation index, see [llms.txt](https://marling-school.gitbook.io/arthur-freebrey-project/Mj2I68ZOKe1UymCYBtl6/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marling-school.gitbook.io/arthur-freebrey-project/Mj2I68ZOKe1UymCYBtl6/design-and-development/cycle-1-7.md).

# 2.2.2 Cycle 8

## Design

### Objectives

This development cycle I was focused on making sure I had a working health system in place with a visual UI on screen to represent the players health making the experience more interactive. This will allow a visual representation to the player of how the health system will work throughout the whole game.

* [x] Create hearts in the corner of the screen to act as a health system
* [x] Health system to interact with collisions and decreasing hearts on collision 

## Usability Features

### Key Variables

| Variable Name  | Use                                                                                          |
| -------------- | -------------------------------------------------------------------------------------------- |
| health         | Holds the number of health points a character has that corresponds with the number of points |
| player / faune | Variable that stores all of the information and properties about the character.              |
| hearts         | Contains information about the hearts images and their status of full or empty               |

### Pseudocode

```
hearts = object {
x: 0
y: 0 
gap: 16
quantity: 3
}

sceneEvents.on('player-health-changed', handlePlayerHealthChanged())

procedure handlePlayerHealthChanged(health){
    hearts.children(idx)
    if (idx < health){
    heart.setTexture(heart-full)
    }
    else{
    heart.setTexture(heart-empty)
    }
```

## Development

### Outcome

Throughout this development cycle I decided to abstract my code and make sure all the necessary features are contained in a new file named GameUI.ts where any future ui features can also be contained.

{% tabs %}
{% tab title="GameUI.ts" %}

```typescript
export default class GameUI extends Phaser.Scene
{
    private hearts!: Phaser.GameObjects.Group
    constructor()
    {
        super({key: 'game-ui'})
    }

    create()
    {
        this.hearts = this.add.group({
            classType: Phaser.GameObjects.Image
        })

        this.hearts.createMultiple({
            key: 'ui-heart-full',
            setXY: {
                x: 460,
                y: 230,
                stepX: 16,
            },
            quantity: 3
        })
```

{% endtab %}
{% endtabs %}

This stage in the development was me programming the visual UI onto the screen and making sure it is part of the correct Phaser gameobject with appropriate positioning on the screen too. I achieved this through using correct class types of images that are inside of the hearts game object group.

{% tabs %}
{% tab title="GameUI.ts" %}

```typescript
sceneEvents.on('player-health-changed', this.handlePlayerHealthChanged, this)
        this.events.on(Phaser.Scenes.Events.SHUTDOWN, () =>{
            sceneEvents.off('player-health-changed', this.handlePlayerHealthChanged, this)
        })
    }

//handles the health change of the player
//updates the ui to reflect the current health of the player
    private handlePlayerHealthChanged(health: number){
        this.hearts.children.each((go, idx) => {
            const heart = go as Phaser.GameObjects.Image
//if the current index is less than health, the heart should be full
            if (idx < health)
            {
                heart.setTexture('ui-heart-full')
            }
            else 
            {
                heart.setTexture('ui-heart-empty')
            }
        } 
```

{% endtab %}
{% endtabs %}

This part of the code demonstrates how the sceneEvents file interacts with the collision by allowing the UI to change by changing which sprite is used. This is achieved through a built in phaser function called "setTexture" when the idx is greater than the health.

### Challenges

I faced a few small challenges in this development cycle with an example being the index properties of the hearts taking multiple hearts away per collision or none at all. I had dealt with these small issues through unit testing and debugging to make sure that the right health integer is being passed which is how I caught the bug of the wrong parameter of hearts being passed as a number instead of the health needed.

## Testing

Evidence for testing

### Tests

<table><thead><tr><th width="83">Test</th><th width="174">Instructions</th><th width="252">What I expect</th><th width="223">What actually happens</th><th width="107">Pass/Fail</th></tr></thead><tbody><tr><td>1</td><td>Run code</td><td>Player and map should still load on the original map</td><td>As expected</td><td>Pass</td></tr><tr><td>2</td><td>Collide with enemy and watch hearts</td><td>Hearts should decrease one at a time per collision to appear empty</td><td>As expected</td><td>Pass</td></tr><tr><td>3</td><td>Get to 0 hearts </td><td>All hearts should appear empty with the character remaining dead</td><td>As expected</td><td>Pass</td></tr></tbody></table>

{% embed url="<https://youtu.be/2UA0wYcPLbc>" %}

The video shows how the heart UI in the top corner decrease per collision until they reach 0 and the player character then faints and becomes immobilised. This will be the representation of how the health system will operate throughout the whole game unless further change is necessary later on.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://marling-school.gitbook.io/arthur-freebrey-project/Mj2I68ZOKe1UymCYBtl6/design-and-development/cycle-1-7.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.