KAPLAY ATB Plugin

A KAPLAY plugin to create active time bar!

Install

npm i kaplay-atb-plugin

New features in v0.3.0

• Support vertical bars.
• Support to display bars with onDraw event.
• Support to create bars as child of existing GameObj.

Breaking changes

• Color params needs to be kaplay Color class.
• Param reverse will set the anchor to the opposite side instead of swap color order.
• Param outline is an object. It needs to have width to work properly.

Usage

Import the plugin into your kaplay game.

import kaplay from "kaplay";
import ATB from 'kaplay-atb-plugin'

const k = kaplay({
    width: 800,
    height: 600,
    plugins: [ATB],
});

const atb = k.createATB(
    3, 
    200, 
    20, 
    { x: 100, y: 100 }, 
    () => { console.log("ATB filled!"), 
    { 
        outline: { 
            width: 4 
        } 
    } 
});

To pause or resume the bar.

atb.pause()

By default. The bar will be destroyed when it is filled. If you wish to end it early.

atb.remove()

In dynamic mode. Both the wrapper and bar are GameObj. It is easy to expand it by adding components or change param value. In case of static mode. Both wrapper and bar becomes unreachable. For they are drawn with onDraw event. The pause() and remove() still works though.

// Add text to the center of the bar
atb.bar.add([
    k.text('Flexible ATB', { size: 16, font: "monospace", width: atb.bar.width, align: 'center' }),
])

// Change outline color
atb.wrapper.outline.color = k.color(200, 150, 200).color

Parameters

Name	Description
time	Number of seconds for the ATB bar to fill.
width	Width of the ATB bar.
height	Height of the ATB bar.
pos	Position of the ATB bar in the game world.
action	A callback function to invoke when the ATB bar is filled.
options	Optional parameters for customizing the ATB bar.

Options

Name	Description	Default
parent	The parent of ATB bar. Accepts GameObj only.	None
wrapperColor	Color of the wrapper in rgb format.	k.rgb(0, 0, 0)
barColor	Color of the ATB bar in rgb format.	k.rgb(10, 130, 180)
radius	A number to set radius for the corners of the ATB bar.	0
reverse	If true, the bar will go in reverse order.	None
stay	If true, the bar will stay on the screen after filling.	None
mode	Decide how the plugin display the bar. Set to static if you have no need to manipulate the bar further more.	dynamic
outline	The outline of the bar. If set, it will create a border around the bar with the specified width and color. Param Description Default width The width of the outline in pixels. None color The color of the outline in rgb format. Same as the wrapperColor	None
text	The minimum set of params to display text on the bar. It will create a sprite from the text and aligned based on the direction of the bar and the anchor point. Param Description Default text The text to display. None color The color of the text. k.rgb(255, 255, 255) anchor The anchor of the text. center	None