CRUD Operations on KAPLAY Components

Components are essential in KAPLAY game development. They add specific features to game objects and can be easily managed. Similar to CRUD (Create, Read, Update, Delete) operations in programming, you can add, view, change, or remove components from game objects at any time during the game. This guide explains how to handle components in a CRUD-like way in KAPLAY.

How to add a Component?

Adding components is simple with the add() function. Components can be added at the time of object creation or dynamically after creation.

// Add components during object creation
const player1 = k.add([
  k.rect(400, 60),
  k.pos(10, 10),
  k.color(255, 0, 0),
]);

// Dynamically add a component to an existing object
player1.use(opacity(0.4)); // Add transparency

Read (Check Components and Access Properties)

You can check if a game object has a specific component and access its properties or methods.

// Check if a component exists
if (player1.has("rect")) {
    console.log(player1.height); // Access property provided by the 'rect' component
}

// Use methods provided by components
player1.moveBy(100, 100);

 

Update (Modify Components)

Update the behaviour of a game object by adding new components or modifying the properties of existing components.

// Modify properties of an existing component
player1.pos.x += 50; // Move the player 50px to the right

// Add additional components dynamically
player1.use(scale(2)); // Double the size of the object

Delete (Remove Components)

Remove a component from a game object using the unuse() method with the component ID.

player1.unuse("color"); // Remove the color component

Follow below step-by-step procedure to build an Application.

 

Step 1: Create a KAPLAY project components-crud by executing below command.

 

npx create-kaplay components-crud

 

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

 

 

Step 2: Update src/main.js file like below.

 

main.js

 

import kaplay from "kaplay";
// Uncomment the line below if you want to use Kaplay without the `k.` prefix
// import "kaplay/global";

const k = kaplay({
    background: [135, 206, 250], // Light blue background (sky-like)
});

k.loadRoot("./"); // A good idea for Itch.io publishing later

let player1;

// Helper function to initialize the player object
function createPlayer() {
  const player = k.add([
    k.rect(400, 60),
    k.pos(10, 10),
    k.color(255, 0, 0), // Ensure proper color format
    k.opacity(0.4), // Add transparency using `k.opacity`
  ]);
  return player;
}

// Helper function to add a scene transition text and bind a key for navigation
function addSceneNavigation(text, key, nextScene) {
  k.add([
    k.text(text, { size: 40 }),
    k.pos(400, 400),
    k.color(25, 150, 0)
  ]);
  k.onKeyPress(key, () => {
    k.go(nextScene);
  });
}

// Define scenes
k.scene("create", () => {
  player1 = createPlayer();
  addSceneNavigation("Press 1 to see the Demo Of Read Operation", "1", "read");
});

k.scene("read", () => {
  player1 = createPlayer();

  if (player1.has("rect")) {
    console.log(player1.width); // Access the width property from the 'rect' component
  }

  player1.moveBy(100, 10); // Adjust movement logic as needed
  addSceneNavigation("Press 1 to see the Demo Of Update Operation", "1", "update");
});

k.scene("update", () => {
  player1 = createPlayer();

  if (player1.has("rect")) {
    console.log(player1.width); // Access the width property from the 'rect' component
  }

  player1.moveBy(100, 10); // Adjust movement logic as needed
  player1.pos.x += 50; // Move the player 50px to the right
  player1.use(k.scale(2)); // Double the size of the object

  addSceneNavigation("Press 1 to see the Demo Of Delete Operation", "1", "delete");
});

k.scene("delete", () => {
  player1 = createPlayer();

  if (player1.has("rect")) {
    console.log(player1.width); // Access the width property from the 'rect' component
  }

  player1.moveBy(100, 10); // Adjust movement logic as needed
  player1.pos.x += 50; // Move the player 50px to the right
  player1.use(k.scale(2)); // Double the size of the object

  player1.unuse("color"); // Remove the color component
  if (!player1.has("color")) {
    console.log("Color component removed!");
  }

  addSceneNavigation("Press 1 to Start Again......", "1", "create");
});

// Start the game at the "create" scene
k.go("create");

 

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 see the demo recording here (https://www.youtube.com/watch?v=I1TL7j_AezE).

 

You can download the Application from this link.

 

Previous                                                    Next                                                    Home