Damage Pipeline Plugin Tutorial

Welcome to another KiwiJS tutorial! Today we’re going to learn about the Damage Pipeline Plugin. This plugin gives you powerful control over damage processing in your games. It’s got a lot of power, but at its core it’s very simple.

Here’s One We Prepared Earlier

This example shows how versatile the Damage Pipeline plugin can be with just a few nodes. We’ll be creating a simpler version of this scene.

You Will Need

Creating the Pipeline

Once you’ve obtained the necessary files, it’s time to make a start.

Setting Up The Game

We’ll be following the standard Kiwi layout for this example.

First, create and populate folders like so:

Fill in index.html like this:

Fill in js/myGame.js like this:

We will use this javascript file for the rest of our development.

Creating Nodes

Let’s create a simple pipeline: some armor and a health pool.

What does armor do? In this case, it reduces damage. In the section labeled “Damage pipeline here”, add the following:

As you can see, we’ve given it a name, a tag, and an operation.

The name should be self-explanatory.

Tags tell you what kind of things the node will process. This will make more sense in a moment.

The operation is a function applied to every “pack” that enters the node. Packs represent damage. This doesn’t have to be complicated – here we’re just subtracting 10 from the incoming damage.

Now let’s create the health meter:

That’s all we need! Meter nodes come filled up to the default maximum of 100 points.

Now we’ll connect the two:

Now any damage that enters the armor node will move on to the health meter.

And with that, we’re done with the pipeline.

Creating Damage Packs

Let’s do some damage. In the Damage Pipeline Plugin, damage is represented by Packs. A Pack handles a packet of damage on its way through the pipeline.

In the section labeled “Function contents here”, inside the callback on the bar-click, add the following:

And that’s all for damage.

Putting the Two Together

Now let’s apply the damage to the pipeline. Pipeline nodes have a receive method to which you send Packs. After creating your damage object, add this:

That’s all you need to do damage. But we’d like to visualise it.

Luckily, meter nodes emit signals when they receive damage. We also have a value called valueNormalized which ranges from 0 to 1, just right for scaling objects.

We’ll add a listener to alter the scale of the bar. It will get shorter as we do damage. Put this outside the callback, below the section where you created the node and meter.

Load this up and start clicking on the health bar. It goes down with every click. Isn’t that great? You have a fully functional health system!

Return to the Example

Now head to the Damage Pipeline repository and check out the examples/ folder. This system is a bit more advanced, and it can show you a lot more about the power of damage pipelines. We’ve added subPacks, elemental resistances, animated health bars, a branching tree for different classes of Pack, and more.

Challenges

  • Tags: Replace “PHYSICAL” with “ETHEREAL” in the damage pack. Leave it as is in the armor node. What happens when you click now?
    • Because your damage no longer matches tags with the armor node, it is unaffected by armor operations. All the damage can get through.
  • Attach damage pipelines to several creatures and have them fight.
  • Design a pipeline for a creature that only ever takes half damage from fire.
    • Use multiplication in a node.
  • Design a pipeline for a creature that heals from fire damage.
    • Look at the mode property of the Pack.
  • Design a pipeline for a boss monster with three health bars, who changes form every time one runs out of health.

That’s all folks!

You’ve learned how to set up a fully functional health system in your game, with armor and elemental damage types. This is the absolute tip of the iceberg. Damage pipelines can go much, much further. We’re looking forward to seeing what you can do!

Share the joy
Comments 1

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">