Mastering Tags in Kaplay: Efficient Object Classification and Management

Tags are a powerful feature in Kaplay, allowing you to classify, organize, and interact with game objects effectively. Whether you're dealing with enemies, allies, or environmental elements, tags streamline the object management, making your code cleaner and your development experience smoother. This guide explores the functionality of tags in Kaplay and demonstrates how to use them for various operations.

Understanding Tags in Kaplay

Tags are keywords or labels that you can assign to game objects to classify them into groups. For instance, you can use tags to group enemies, allies, obstacles, or any other category relevant to your game. Tags allow for efficient filtering, querying, and interaction with objects in your game world.

 

Adding Tags to Game Objects

Tags can be assigned when creating a game object using the add() function.

const circle1 = k.add([
    k.circle(10), 
    k.color(255, 0, 0), 
    k.pos(100, 100), 
    "redCircle"
])

 

In this example, the circle1 object is tagged as redCircle.

 

Tags can be added to existing game objects dynamically

 

circle1.tag("circle"); // Add a single tag
circle1.tag(["tinyCircle", "danger"]); // Add multiple tags

 

Removing Tags: You can remove tags from an object using the untag() method.

circle1.untag("danger"); // Remove the 'danger' tag

 

Checking for Tags: Determine if a specific tag exists on an object using is().

circle1.is("tinyCircle"); // Returns true if the tag exists

 

Retrieving All Tags: Access all tags assigned to an object using the tags property.

console.log(circle1.tags);

 

Getting Objects by tag

Retrieve all objects with a specific tag using get()

const allCircles = k.get("circle"); // Returns an array of all objects tagged as 'enemy'

 

Special Tag *:
Every game object is automatically assigned the * tag, which can be used to retrieve all objects in your game.

const allObjects = k.get("*"); // Get all game objects

 

Step 1: Create a KAPLAY project tags-hello-world by executing below command.

 

npx create-kaplay tags-hello-world

 

Upon successful execution of above command, you can see a project structure looks like below.

 

 

Step 2: Update src/main.js with below content.

 

main.js 

import kaplay from "kaplay";

const k = kaplay({
  background: [255, 255, 255], // Light pink background
});

k.loadRoot("./");

// Center alignment helper
const centerX = k.width() / 2;
const centerY = k.height() / 2;

// Add instruction text
const text = k.add([
  k.text("1 to Stop, 2 to Go, and 3 to Caution", 40),
  k.pos(centerX - 300, centerY - 150), // Centered horizontally above the signals
  k.color(0, 0, 0),
  "heading",
]);

// Add traffic signals
const redSignal = k.add([
  k.circle(40), // Increased size
  k.color(255, 0, 0), // Red color
  k.pos(centerX - 100, centerY), // Centered horizontally with offset
  "redSignal",
]);

const greenSignal = k.add([
  k.circle(40), // Increased size
  k.color(0, 255, 0), // Green color
  k.pos(centerX, centerY), // Centered horizontally
  "greenSignal",
]);

const yellowSignal = k.add([
  k.circle(40), // Increased size
  k.color(255, 255, 0), // Yellow color
  k.pos(centerX + 100, centerY), // Centered horizontally with offset
  "yellowSignal",
]);

// Helper function to adjust opacity
function updateSignalOpacity(activeSignalTag) {
  console.log("Getting all objects");
  const allObjects = k.get("*");
  for (let obj of allObjects) {
    console.log("Object Tags:", obj.tags);
    if (obj.is("heading")) {
      continue;
    }
    obj.opacity = obj.is(activeSignalTag) ? 1 : 0.2; // Highlight active signal, dim others
  }
}

updateSignalOpacity("none");

// Stop (Red Signal)
k.onKeyDown("1", () => updateSignalOpacity("redSignal"));

// Go (Green Signal)
k.onKeyDown("2", () => updateSignalOpacity("greenSignal"));

// Caution (Yellow Signal)
k.onKeyDown("3", () => updateSignalOpacity("yellowSignal"));

 

Step 3: Execute below commands from project root folder to run the Application.

npm install
npm run dev

Launch the url ‘http://localhost:3001/’ in a browser to play with the Application.  

You can click on 1 to enable red signal, 2 to enable green signal and 3 to enable yellow signal.

 

You can see a demo recording here (https://www.youtube.com/watch?v=P_tkuTUB8c0).

 

You can download the Application from below link.

 

Previous                                                    Next                                                    Home