Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Code Example From Script-8 As Output
// Kino Rose
// NierPixe.com
// Zelda Heart, Health Bar Tutorial
//title: Heart Containers
init = (state) => {
state.player = {
health: 12,
healthMaximum: 12,
spr: 5
}
state.frameCount = 0
}
update = (state, input, elapsed) => {
state.frameCount += 1
//Show dynamic incrementation of player Health
// Note with the Zelda Implementation, due to the way the sine wave works, you will never see full 3 hearts.
state.player.health = clamp((state.player.healthMaximum * Math.abs(Math.sin(state.frameCount / 250))), 0, state.player.healthMaximum)
}
draw = (state) => {
clear()
drawLogoInformation()
drawPlayerHealthMinMax(state.player)
drawPlayerHealthBar(state.player)
drawPlayerHealthZeldaStyle(state.player)
}
function drawPlayerHealthZeldaStyle(player) {
const playerfullHearts = Math.floor(player.health / 4)
const playerRemainderHeart = (player.health % 4 ) /4
let xOffset = 0
const lineY = 72
//Draws all the full hearts, simply because they are all similar to each other
range(0, playerfullHearts).forEach( heart => {
xOffset = heart * 8
sprite(0 + xOffset , lineY, 0)
})
//drawRemainderHeart
//Update once more to place the heart next to the other hearts
xOffset += 8
/*
* Given that the last heart is the only that should be different from the others
* We evaluate it as a separate case from the others.
* Therefore, we only need to check this one case only.
* In the case of Zelda, each heart is broken up into pieces so we evaluate the quarters.
* This allows us to create the final heart based on the remainder rather than whole numbers.
*/
if(playerRemainderHeart >= 0.50) {
sprite(0 + xOffset, lineY, 1)
} else if(playerRemainderHeart >= 0.25) {
sprite(0 + xOffset, lineY, 2)
} else if(playerRemainderHeart > 0) {
sprite(0 + xOffset, lineY, 3)
}
}
//Standard Style of Drawing Health as numbers
function drawPlayerHealthMinMax(player) {
print(0, 36, `Player Health: ${Math.round(player.health)}/${player.healthMaximum}`)
}
//Draw Player Health as HealthBar
/*
* A bar is just a rectangle with a width. A health bar is usually represented as some number out
* of the maximum. Therefore, we can use the percentage of the player health to adjust the width
* of the bar to represent health. We create a bar below to make it more apparent that there is a
* cap on the player health and what the maximum is.
*/
function drawPlayerHealthBar(player) {
const maxHealthBarWidth = 40
const maxHealthBarHeight = 12
const cappedHealthBar = clamp((maxHealthBarWidth * (player.health / player.healthMaximum)) - 4, 0, maxHealthBarWidth)
rectFill(0, 48, maxHealthBarWidth, maxHealthBarHeight, 5)
rectFill(2, 50, cappedHealthBar, maxHealthBarHeight - 4, 3)
}
function drawLogoInformation() {
const title = "NierPixel.com"
const creator = "Kino Rose"
const tutorialName = "Zelda Heart + Health Bar Tutorial"
const lineHeight = 8
print(0, 0, title, 0)
print(0, lineHeight, creator, 0)
print(0, lineHeight * 2, tutorialName, 0)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment