How can you make a life system

[Jordy]

Hello I need help with a life system so the character has 3 lives (3 hearts) and I wanna know how to make that work

[Merabet_Abdenoure]

put three hearts at the left top and whenever the player dies make a blank in the hearts fill and then if there is no fill he gotta repeat from the start
I think you can make them by using them as a button or a clip, and look it out yourself, that’s all I think I know

[Jordy]

you will have to explain it better

[Jordy]

I don’t think it’s how its done but thanks for trying to help

[Merabet_Abdenoure]

well either ways I’m bad at java script soooo, make sense why it doesn’t make sense

[Jordy]

I mean I don’t know that much javascript too but yeah thanks for trying to help

[KringlePrinkles]

edit: I added some clickable sections you can read about to know more about programming in general, and specifically JavaScript!

You are probably talking about making the visual aspect of the life system, otherwise you could just make a variable with the amount of lives the player has and slap a text object next to it.

What is a variable? (click me to open)

@Jordy

I mean I don’t know that much javascript too

I just remembered that you’ve lacked knowledge on JavaScript!

as a recap, variable keeps data like strings and numbers. simple!

var funnyNumber = 90;

and you can access them by calling them!

var funnyNumber = 90;

console.log(funnyNumber);
/*this just prints in your browser's console, which can be accessed by
pressing F12*/

you can make a variable without the var declaration, but I won’t recommend it for many MANY practical reasons.

just trust me on this and write var when making new variables…

What I’m starting with is the most obvious and simplest one, and I am lazy enough to add:

Slapping-a-number-next-to-it Life System

• You just kinda make a looping heart beat animation,
• then slap a text object with a name,
• and finally, if you had written it already, you set the text to the player health and add an ‘x’ in between:

txt_healthAmt.setText("x " + player.health)

PS: don’t ask why I’ve written HEALTH instead of LIFE, I got it mixed up…

…just roll with me for a bit…

…Clearly you weren’t looking for this, alongside the fact that I was… half-joking with you, since I assumed you avoided it.

I included 2 OTHER separate ways we could go about that, and although they are different to how they’re displayed, they all functionally do the same thing in-game.

The next one is as simple as the previous one, and probably more practical (assuming you don’t need more than 3 health)…

---

Animated-heart-clips Life System

You just make a clip with 4 keyframes, starting from the first keyframe with 0 hearts up to the 4th keyframe with 3 hearts.

I named this one for this example ui_health.

then inside the ui_health CLIP’s update script (NOT the frame!), you just program it so that it would go to the frame number with the player’s amount of health:

//inside ui_health update script
this.gotoAndStop(player.health + 1); //probably self explanatory...

If this option already satisfies you, you can leave and continue your project as normal!

…unless you’re not satisfied with this option (or just VERY curious about it)…

…The last one is (probably) more dynamic and code oriented…

---

Dynamic Life System

and because I wanted to be cool, I’ll make it into an acronym…

DynaLiSys

_{*don’t worry, the popping heart animation is just the icing on the cake… a bit of a buggy one…}

for this one we’re going to be using CLONES! That’s right, we’re not using the original clip itself!

The best part is that you’re (probably) going to LEARN about making clones in Wick Editor!

BWAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAH! YOU WILL NOW LEARN TO BOTH MAKE THIS SYSTEM AND TO USE CLONES! MY EVIL MASTERP-

So here’s a fun and interesting detail about clones:
the clones of an object are stored in an array called (object).clones, so from my best educated guess, you can do pretty much anything that you are capable of doing to arrays.

erm... what is an array?

You remember variables, right? The things that keep a piece of data.

An array keeps a list of various data called ELEMENTS. They can be Numbers, Objects (probably), Functions (might not work), Strings (WILL WORK)!

var shelf = [42069, "a funny number", object={var Funny = "sad"}];

they HAVE to be notated by [square brackets], and the elements separated by c,o,m,m,a,s!

the only way to access the elements in the array is by calling the element’s index using this:
aNormalArray[0]

the index is the element’s position in the array, so just replace the 0 with any number in the array and it will refer it!
…if it IS in the array in the first place

The array’s first element will always start with the index 0 going forward, which could be weird to get used to…

let me just… get the funny number as an example:
console.log(shelf[1]);

console output: a funny number

see now

hopefully this is not too overwhelming…

… And don’t worry about functions and objects for now, I only ask that you learn more JS through clicking this paragraph! and not only that, I encourage you start by making small games with it in Wick Editor first!

first of all, we will create the clip ui_health (again) and write inside the update script so that it will keep adding clones until their number reach the player’s amount of health:

//inside the ui_health update script

//if the length of ui_heart.clones are less than the player's health
if (this.clones.length < player.health){
    this.clone(); //make a clone
}

…huh, this is easy! okay let’s see what ha-

*ui_health proceeds to clone itself on speeds beyond comprehension…

ah right I forgot… the clones inherit all the original’s properties and all its scripts. So the clones will not only stay in the exact position as the original, but they will make clones of themselves.

continually.

So we wanted 2 things from the clones: (1) arrange the clones so that they sit beside each other and (2) make sure the clones don’t clone more of themselves.

(2) is the easiest to fix, all we have to to is make the objects check if they are a clone or not, so that the original can only do what it should do and the clones can only do what they should do (unless you forgot how to use conditional statements…):

//still in the ui_health update script

if (!this.isClone){ //If i'm not a clone, I can only do this:
    if (this.clones.length < player.health){
        this.clone();
    }
} else { //If we are a clone, we can only do this:
    //whatever it is...
}

I do not know how conditional statements work!

…well thats okay… because you’ve been using them the entire time!

Conditional statements are the things that can let the computer (or browser) make its decision!

the if statements only runs if its condition is true, and the else statement runs as the last resort if all conditions are false!

If you want an example...

Let’s say that I have this piece of code:

var age = 12;

//if age is less than 13...
if (age < 13){
//this one prints to the console of your browser.
//Just press F12 and you might find it! Insulting you!
    console.log("YOU ARE A BABY") ;

//otherwise...
} else {
    console.log("oh no, you have hormones!");
}

Man whoever wrote that code must’ve been a baby…

for (1), let us set the clone’s X position and offset it to the right by a certain amount multiplied by its index number.
(reminder about arrays: the index of an element is its position in the array, starting from 0);

//...still in the ui_health update script...

if (!this.isClone){ 
//... excerpt...
    }
} else { //If i am a clone...
//position myself inside the canvas according to my index number
    this.x = 60 + (65 * ui_health.clones.indexOf(this)); 
}

Just put the original off canvas and you’ll get something like this:

…well the Y position of ui_element’s clones will be set to the original’s no matter how high you put it (as demonstrated in the gif), so just position it how you see fit via code or by hand.

…AND CONGRATULATIONS!

…

…

…

…you’re almost finished!

…you remember these two buttons, right?

Self explanatory, as you have seen these two earlier:
if hurt is clicked, it will remove the player health by 1 until it reaches 0,
while if heal is clicked, it will add 1 to the player health until it reaches 3.

We made sure that it will keep cloning until the amount of clones are exactly set to the players health. But if the player were hurt:

We didn’t give it a way to remove those clones! *unecessarily dramatic gasp!

And no, removing the clones are (probably) not as complicated as you think.

…So the next step is checking if the amount of clones is EXACTLY EQUAL TO the amount of player health by removing excess clones using the (object).remove() method:

//inside the ui_health update script... again... and again...

if (!this.isClone){ 
// yes we've seen this block of code before... keep reading... 🔫
    if (this.clones.length < player.health){
        this.clone(); 

    // if the number of clones is bigger than the player health...
    } else if (this.clones.length > player.health){
        // ...identify the last clone in the array...
        let dead = this.clones[this.clones.length - 1]; 
        dead.remove(); // ...and eliminate it! :D
    }
}

…

Oh hey, it works! ♪

CONGRATULATIONS! FOR REAL THIS TIME!!!

You finally made a life system, and fortunately that is all there is to it! The popping heart animation is simply a bonus, just for you!

So you first create a popping heart animation… we’ll name this one ui_health_remove!

Then we will add a script to the last frame to make it check if its a clone…

You know what to do…

Then we go into the ui_health object’s update script and add to the remove script!

//inside the ui_health update script
if (!this.isClone){
    if (this.clones.length < player.health){
...
    } else if (this.clones.length > player.health){
        //first we reference the last clone in the array...
        let dead = this.clones[this.clones.length - 1];
        //... then we create a clone of the heart popping animation...
        let popAn = ui_health_remove.clone();
        //...after that we set its position to the last clone added...
        popAn.x = dead.x;
        popAn.y = dead.y;
        
        //...and THEN we remove it! The animation will remove itself!
        dead.remove();
    }
}
...

We have come full circle! Wonderful!

_{albeit a small bonus… kh…}

Now you not only know how to make a working life system, but you know how to use clones!
I hope you’re able to make fun things with this power.

Take this sword, young one, and enjoy!

[](Life System.wick) 29.7kb

aw rats that was supposed to… nevermind…

_{…gosh… I took too long to make this…
…
OH I JUST REMEMBERED!}

HERE!

The Modern JavaScript Tutorial

Just learn JS as you continue on your journey using Wick Editor.

[Jordy]

THANKS SO MUCH!!! I will try to learn js :), thanks again

[Jordy]

one question how can you make an enemy make the player lose a life

[slimebor]

Harder done than said but remove heart 3 when you get damaged, heart 2 when also damage and make it so game restarts or shows a death screen if the last heard disappears

[MrDashell]

this isn’t very helpful All your saying is what they need to do without actually giving coding help

[awc95014]

once you learn javascript, hopefully these questions can be answered on your own. not saying that it’s bad that you ask us, it’s just that if you know how to do it yourself, the code will be exactly how you want it. and you don’t have to wait for one of us.

i can’t give you code right now, and I haven’t seen kringle’s code, but here’s what I think.

I’m guessing that the “hurt” button has a code inside that does the hurting, or it has a function that calls code that does the hurting.

so you take whatever code is in there, and you slap it somewhere in the enemy code, wherever it may be (it will probably be in something like if(this touches player) {HURT CODE HERE}).

@KringlePrinkles please correct me if I’m wrong, and @Jordy if you need help, you can probably ask kringle.

[Jordy]

that code explanation of the if this touches that doesn’t work because ive tried doing it myself before and if you were in his hit box for a second it will take all your hearts away but thaks for trying to help btw sorry if I ask too much, javascript is too hard to learn for me and in you guy’s perspective its easy to say learn javascript, not trying to be rude here

[KringlePrinkles]

@awc95014

I’m guessing that the “hurt” button has a code inside that does the hurting, or it has a function that calls code that does the hurting.

It only just removes an increment of the player.health variable on click, so you were right.

@Jordy

hit box for a second it will take all your hearts away

I think that’s fair, since we did not create an invincibility timer for the player, and you could do this easily with variables.

So adding to Baron’s explanation with pseudo-code and sentences:

// somewhere in the update script
if (Player invincibility timer is less than or equal to 0){
  if (this touches player, and player cool down variable is less than or equal to 0)
  {
  - REMOVE A PLAYER LIFE
  - ADD A CERTAIN AMOUNT TO THE PLAYER COOLDOWN 
  }
} else {
  - remove an increment from the Player invincibility timer for each tick until 0
}

---

offtopic, although regarding Jordy's comment about JS being too hard to learn...

@Jordy

javascript is too hard to learn for me and in you guy’s perspective its easy to say learn javascript, not trying to be rude here

just take all of my words with a grain of salt, I don’t trust my words about JS either

Well I certainly did not say anything about how learning Javascript could be easy (although I think I had implied it, oops). I think it is okay if you found Javascript hard! Everyone learns from a different pace to process what we have learned (…as long as we’re not too relaxed and or lazy).

I do understand why you think that since… I will admit… that took me quite some time to learn some of the ropes. _{(I do also wish that I could flawlessly write code or draw amazingly after learning anything in a short period of time, though that was my laziness taunting me)}

What’s funny is that I did not even try to apply PURE javascript onto a website yet, writing it from scratch with a text editor, so I might have little experience compared to those with much advanced experience.

This stuff only got a little more easier for me because I experimented with what I know and practiced problem solving as we do debugging (which is rewriting code to make it work as intended when it is not).

So if it seems too hard at first, just go back and learn/review one thing for today, and try to put it into practice or playing with it… even though it may sound quite lame.

oh and you had to know some math too, because that is VERY integral to programming.

[slimebor]

due to Wick editors bugs if i sent one piece of code and they put it all in it wouldn’t work

[KringlePrinkles]

I do see what you mean. That reply is probably during my pretentious phase or something, and I think I was assuming that people would figure it out themselves (mostly because I WAS trying to figure out by myself at the time of posting that reply. Oops).

@slimebor

due to Wick editors bugs if i sent one piece of code and they put it all in it wouldn’t work

May you show me your project? I should’ve made a video demo or example in case there were beginner users. The GIFs I shared aren’t cutting it.

What were you doing to have recieved that result?