Showing health on enemies in Game Maker

In this post, I’ll answer a question from one of my students at Gutegymnasiet about how to show enemy health in Game Maker. I’ll go over two ways of doing this; showing it on the enemy itself, or through a healthbar.

Note: This post is based on a question by a student at Gutegymnasiet where I teach Game Maker. Rather than simply answering I figured it would be easier to show it via this blog. As such, the post is written in my native language, Swedish. English version can be found down below.

 

Visa hälsa på fiender i Game Maker

Jag kommer visa två sätt hur man visar hälsa på fiender; genom Sprite change, och genom Healthbars.

Metod 1: Sprite change

Jag tycker att det bästa sättet att visa fiendes hälsa i spel är genom att visa skada på fienderna i sig. Det är förhållandevis enkelt att göra, och ger en direkt feedback till spelaren att deras skott har effekt på ens motståndare.

Exempel från Plants Versus Zombies 2 där en zombie-fiende har en trafikkon på sig och allt eftersom zombien blir skadad så blir först konen skadad, sedan faller den av, sedan tar zombien skada genom att armen faller av och sist huvudet.

 

Skapa nya sprites

Använd din existerande bild/spritesheet som bas för hur ni ska grafiskt visa att fienden tar skada. Bestäm först hur många nivåer av skada som ska kunna visas. Det behöver inte vara varje skott, eller ens vartannat, det viktiga är att spelaren kan se att fienden blir skadad. Försök dock hålla en jämn nivå i förhållande till skada och skadenivå så att inte ett steg av skadad grafik tål mer skott än ett annat.

Säg att du ska ha två skada-steg, en med lite skada, en med mer skada. Tillsammans med din grundanimation/grundsprite så har fienden tre faser rent grafiskt; Inte skadad, Lite skadad, Mycket skadad. Sedan har vi Död, men det tar vi senare.

Kopiera grundanimationen/grundspriten som används för Inte skadad och börja lägg till skador på bilden tills fienden ser “Lite skadad” ut. Animerar du så tänk på att skadorna ska vara konsekventa i hela animationen så det inte ser konstigt ut.

Kopiera Lite skadad och lägg till ännu mer skada tills fienden ser “mycket skadad” ut. Rendera ut allt i .png-format och kolla så allt stämmer överens.

Tips: Använd lager för skada så det är enkelt att ändra om något känns fel. Använd ett lager för Lite skadad och Mycket skadad så behöver du inte ens kopiera filer.

Game Maker

Game Maker använder ju sprites och vanligtvis har ett objekt bara en sprite som den använder. Men när mer skada ska visas så behöver varje skade-nivå ha sin egen sprite.

Lägg in dina tre bilder/animationer genom att skapa tre sprites. Tänk på att döpa dem klokt. Till exempel spr_Enemy, spr_EnemyHurt1, spr_EnemyHurt2.

För att kunna ändra spritesen utifrån hälsan som fienderna har så behöver du ändra dem på ett ställe där hälsan i sig ändras. Till exempel i kollisionseventet med skottet (i fiendeobjektet).

Lägg in Test Variable-block som testar variablen som du använder för fiendens hälsa. I det här exemplet använder vi myhealth som variabel och operation till Equal toObservera att health inte kan användas då det är en global variabel. Kopiera blocket så du har två block.

Säg att fienden börjar med 30 i hälsa. Varje skott gör 5 skada. Du vill att den ska byta till Hurt1-spriten när den kommer ner på 20 hälsa, och sedan till Hurt2-spriten när den hamnar på 10 skada.

Sätt då första Test Variable-blocket till 20 och nästa till 10.

Efter blocken lägger du till ett Change Sprite block som finns under Main 1 och Sprite.Sätt Sprite i Change Sprite-blocken till respektive sprite som används för att visa skada.

Det är allt som behövs för att spritesen ska visa skada.

Healthbar

Om ni inte vill ändra sprites och istället vill använda healthbars (man kan göra båda i och för sig), så kan ni istället skapa healthbars.

Grafik

Börja med att skapa healthbar-grafik. Liknande som sprite-skada så behöver du lägga till grafik som representerar en healthbar. Detta kan du göra i Game Maker genom Edit Sprite, eller i ett annat program och sedan ladda in det i Game Maker som en färdig bild.

Skapa flera bilder i sekvens som visar att hälsan går nedåt (oftast genom att healthbaren först är helt full, och i nästa töms lite, och så vidare).

Tips: En healthbar behöver inte visas på en fiende som aldrig tagit skada. Vill ni så kan man istället ha en tom bild som första bild, och sedan visa en healthbar som visar skada i följande bilder. Då dyker healthbaren upp när spelaren har gjort skada på fienden.

Game Maker

Lägg in samtliga bilder i en och samma sprite, börja med den bild där healthbaren är helt full, och gå sedan nedåt tills mätaren är tom.

Skapa ett nytt objekt som heter obj_healthbar och sätt spriten till din healthbar-sprite.

Skapa och kontrollera healthbar-instansen

I fiendeobjektet under Create, lägg till Code-blocket som finns under Control och Code. Kopiera in följande kod i textrutan som kommer upp:

MyBar = instance_create(x, y, obj_healthbar);
MyBar.image_index = 0;
MyBar.image_speed = 0;

Vad detta gör är att den skapar en instans av obj_healthbar och binder just den instansen till en variabel som heter MyBar. Vad det gör är att vi kan sedan manipulera den instansen genom detta objektet.

Skapa eller använda Destroy-eventet i fiendeobjektet och lägg till ett nytt Code-block och kopiera in följande kod:

with(MyBar)
{
instance_destroy();
}

Vad detta gör är att MyBar-instansen förstörs när fiendeobjektet förstörs. Det gör att vi slipper ha massa healthbars som flyger runt av sig själva.

Uppdatera position

I fiendens Step-event, lägg till två Set Variable-block och sätt ena variabelnamnet till MyBar.x och andra till MyBar.y. Sätt värdena till x, respektive y.

Vad detta gör är att objektet obj_healthbar (som vi döpt till MyBar) uppdaterar sin position för att matcha fiendeobjektets position.

Låta healthbaren visa liv

För att kunna ändra healthbaren utifrån hälsan som fienderna har så behöver du ändra dem på ett ställe där hälsan i sig ändras. Till exempel i kollisionseventet med skottet (i fiendeobjektet).

Lägg in Test Variable-block som testar variablen som du använder för fiendens hälsa. I det här exemplet använder vi myhealth som variabel och operation till Equal toObservera att health inte kan användas då det är en global variabel.

Säg att fienden börjar med 30 i hälsa. Varje skott gör 5 skada. Ni har en healthbar som visar på varje 5-steg i hälsa och har därmed 7 bilder; en för varje hälsosteg (30, 25, 20, 15, 10, 5, 0). Kopiera Test Variable tills ni har ett till samtliga steg.

Under varje Test Variable block, lägg till en Set Variable vars variabelnamn sätts till MyBar.image_index. Vid första blocket, sätt värdet till 1, och öka sedan med 1 för varje nästkommande block.

Vad detta gör är att vi sätter MyBar-instansens image_index (vilket är numret på den bild i ordningen i spriten) till den siffran som matchar steget som healthbaren ska visa. Observera att image_index börjar på 0 och det har vi ju satt den till via kod när objektet skapades.

Det var allt. Ni har nu en healthbar som skapas med fiendeobjektet och följer med dem, visar deras hälsa, och tas sedan bort när fiendeobjektet dör.

——- English version ——-

Showing health on enemies in Game Maker

I will go over two ways of showing health on enemies in Game Maker; through sprite changes, and through healthbars attached to the enemy objects.

Method 1: Sprite change

I think the best way to show enemy health in games is through actual damage on the enemy objects. In a 2D game, this can be done by adding damage to the sprites themselves and then changing which sprite the object uses. This is a fairly simple thing to do and it gives the player direct feedback, showing that their shots have effect on the enemy.

Exemple from Plants Versus Zombies 2 where a zombie has a traffic cone on its head. As the zombie takes damage, the cone begins to crumble, and then falls off. Next the arm falls off and finally the head falls off, indicating that the zombie has died.

Creating new sprites from existing ones

Use your existing sprite/spritesheet as a base for adding sprite damage to show that the enemy has taken damage. Decide on how many levels of damage that should be shown – it doesn’t have to been every shot, or even every odd shot. The important part is that players can see that the shots are having an effect, and that it is a fairly even distribution of sprite change when compared to damage.

So let’s say we start with 2 steps of damage, one where the enemy is slightly damage, and one where it is heavily damage. Along with your base sprite/spritesheet, you should now have 3 sprites/spritesheets.

Start by copying your base, and add some damage to the new sprite/spritesheet. Then copy that and add some more damage. The reason for doing this rather than copying the base sprite/spritesheet is that you want the damage to be consistent so any damage shown in the “slighly damaged” stage should also be shown in the “heavily damaged” stage.

Render all the sprites/spritesheets and save them to .png so that they can be used in Game Maker.

Tip: When using Photoshop, Illustrator, or any other program that can handle layers; use them! Use one for adding light damage, and another one for adding more damage. This helps if you need to change something to the enemy or the damage.

Game Maker

Game Maker uses sprites and usually an object in Game Maker only uses one sprite. But when showing damage, each damage-level should have its own sprite. This can sometimes be referred to as states.

Import your three sprites/spritesheets by simply creating three seperate sprites. Name them wisely so their easier to use. For example spr_Enemy, spr_EnemyHurt1, and spr_EnemyHurt2.

In order to change which sprite is used, and to do this according to the health of the enemy, we will need to add Change Sprite actions at a suitable place. For example in the collision event where the enemy collides with the player shot. This should be in the enemy object itself.

Add in a Test Variable block that tests the variable that you use for enemy health. In your example we’re using a variable called myhealth (since health can’t be used as it is a global variable in Game Maker). Set the operation to Equal to. Copy the block so you have 2 Test Variable blocks.

Let’s say the enemy starts with 30 health. Each player shot deals 5 damage to that health. You want it to change to the Hurt1-sprite when it gets down to 20 health, and then Hurt2 when it gets down to 10 health.

With this in mind, set the first Test Variable block to 20, and then next to 10.

After each block, add in the Change Sprite block (located under Main 1 and Sprite).

Set the Sprite in the Change Sprite block to respective sprite that you use to show the health at that health.

That is all you need to do to show damage through sprites.

Healthbar

If you don’t want to alter sprites and instead want to use healthbars (although you can do both if you want), well, then you can create healthbars!

Graphics

Start by creating healthbar graphics. Similar to sprite-damage, start by creating graphics that represents a healthbar. This can be done in Game Maker through Edit Sprite, or in another program that can render out .png-files and then import the it into Game Maker.

Create multiple images in sekvens showing health lowering (usually starting with the healthbar being completely full, then slightly emptied in the next, and then further emptied in the next, and so forth,

Tip: A healthbar doesn’t have to be visible on an enemy that hasn’t taken any damage. If you want you can instead have an empty image as your first image in the sequence, and then have a slightly emptied healthbar in the next image. This means the healthbar appears as soon as the enemy has taken damage.

Game Maker

Import all images into one sprite, starting with the image showing the healthbar as completely full, and then going down until the healthbar is completely empty.

Create a new object called obj_healthbar and set its sprite to that healthbar-sprite.

Create and control the healthbar instance

In your enemy object under the Create-event, add in a code block (located under Control and Code). Copy the following code into the text that appears when you open that block:

MyBar = instance_create(x, y, obj_healthbar);
MyBar.image_index = 0;
MyBar.image_speed = 0;

This creates an instance of the obj_healthbar object and binds that instance to a variable called MyBar. This means we can control that instance inside the enemy object.

Using the Destroy-event in the enemy object, add in a new Code block and copy the following code:

with(MyBar)
{
instance_destroy();
}

This means that when the enemy object is destroyed, the healthbar is destroyed as well. Ensuring that we don’t have healthbars running around with nothing to attach to.

Uppdate position

In the Step-event of the enemy object, add in two Set Variable-block and set the variable name on one of them to MyBar.x, and the other to MyBar.y. Set the values to x and y, respectively.

This means that the enemy object updates the position of its healthbar to match its own position. Ensuring that the healthbar stays “attached” to the enemy.

Make the healthbar show the health

In order to change the healthbar according to the health of the enemy, you’ll need a place to change it whenever the health changes on the enemy. For example in the collision event with the player shot.

Add in a Test Variable block that tests the variable that you use for the enemy health. In this example we’re using MyHealth as the variable health is a global variable that can’t be used by an enemy individually.

Let’s say the enemy starts with 30 health. Each player shot deals 5 damage to that health. You have a healthbar that shows every 5-step in health and thus have 7 images; one for each health step (30, 25, 20, 15, 10, 5, 0). Copy the Test Variable block until you have one for every step.

After each Test Variable block, add in a Set Variable with the variable name set to MyBar.image_index. At the first block, set the value to 1, and then increase at the next block by 1.

This means that we’re setting the MyBar instance’s image_index (which is the number of the image in order by the sprite) to the number that matches the step that shows the health in the healthbar. Observe that image_index starts with 0 and that is set by default inside our Code block when the instance is created.

That’s it. A healthbar should now appear over each enemy object and follow them, showing their health, and then gets removed when that enemy object is destroyed.

Leave a Reply

Your email address will not be published. Required fields are marked *