Game Objects in KAPLAY

 

In KAPLAY, game objects are the core components that represent all entities in the game. They can be anything within the game world: the player, obstacles, background elements, or even interactive items like buttons or moving objects. These game objects serve as actors within the game, meaning they perform actions, interact with other objects, and contribute to the game’s functionality.

 

Key Features of Game Objects

·       Actors: Game objects act as actors that have the ability to perform actions like moving, rotating, or reacting to player inputs.

·       Components: Each game object is composed of components that define its behavior. For example, a game object could have a Sprite component to handle its visuals, a Position component to define its location in the game world, and a Physics component to handle movement or collisions.

·       Interaction: These objects interact with one another, meaning the player can collide with obstacles, items can be picked up, and enemies might chase or attack the player.

·       Behavior: The behavior of each game object is defined by the components that are attached to it. These components define how the object behaves in the game (e.g., movement, appearance, interactions).

 

Game Object Creation

Game objects are created using the add() function, which takes an array of components that define the object's behavior. Components are like building blocks for game objects, and they allow you to customize the behavior of each actor.

 

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

 

Step 1: Create a KAPLAY project game-obejcts by executing below command.

 

npx create-kaplay game-obejcts

 

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

 

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

 

main.js

import kaplay from "kaplay";

const gameWindowWidth = 1000;
const gameWindowHeight = 800;

// Utility object for random number generation
const Random = {
  /**
   * Generates a random integer between min and max (inclusive).
   * @param {number} min - The minimum value (inclusive).
   * @param {number} max - The maximum value (inclusive).
   * @returns {number} A random integer between min and max.
   */
  getInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },

  /**
   * Generates a random x-coordinate within the game window's width.
   * @returns {number} A random x-coordinate.
   */
  getRandomX() {
    return this.getInt(100, gameWindowWidth);
  },

  /**
   * Generates a random y-coordinate within the game window's height.
   * @returns {number} A random y-coordinate.
   */
  getRandomY() {
    return this.getInt(100, gameWindowHeight);
  },

  /**
   * Generates a random color value (between 1 and 255).
   * @returns {number} A random color value.
   */
  getColor() {
    return this.getInt(1, 255);
  },

  /**
   * Generates a random movement vector for objects.
   * @returns {Object} A vector with x and y components.
   */
  getVector() {
    return { x: this.getInt(-1, 1), y: 0 }; // Random movement vector (x)
  },

  /**
   * Generates a random speed for movement between 50 and 500.
   * @returns {number} A random movement speed.
   */
  getMovementSpeed() {
    return this.getInt(50, 500);
  },
};

// Adds a rectangle shape with random properties
function addRectangle(k) {
  const width = Random.getInt(10, 40);
  const height = Random.getInt(10, 40);

  k.add([
    k.rect(width, height),
    k.pos(Random.getRandomX(), Random.getRandomY()),
    k.area(),
    k.body(),
    k.outline(3),
    k.move(
      k.vec2(Random.getVector().x, Random.getVector().y),
      Random.getMovementSpeed()
    ),
    k.color(Random.getColor(), Random.getColor(), Random.getColor()),
  ]);
}

// Adds a circle shape with random properties
function addCircle(k) {
  const radius = Random.getInt(10, 20);

  k.add([
    k.circle(radius),
    k.pos(Random.getRandomX(), Random.getRandomY()),
    k.area(),
    k.body(),
    k.outline(3),
    k.move(
      k.vec2(Random.getVector().x, Random.getVector().y),
      Random.getMovementSpeed()
    ),
    k.color(Random.getColor(), Random.getColor(), Random.getColor()),
  ]);
}

// Adds a sprite (player) with random starting position
function addSprite(k) {
  k.add([
    k.pos(Random.getRandomX(), Random.getRandomY()),
    k.sprite("bean"),
    k.body(),
    k.area(),
  ]);
}

// Initialize the Kaplay game engine
const k = kaplay({
  width: 1000,
  height: 800,
  background: [135, 206, 250], // Sky blue background
});

k.setGravity(100);

// Load the sprite
k.loadSprite("bean", "sprites/bean.png");

// Add on-screen instructions for the player
k.add([
  k.text("Welcome to the Kaplay Game!", { size: 48, color: [255, 255, 255] }), // White text with font size 48
  k.pos(100, 10), // Position text at the top-left corner
  k.color(0, 0, 0), // Black text color
]);

// Add game objects (rectangles, circles, sprites)
for (let i = 0; i < 50; i++) {
  addRectangle(k);
  addCircle(k);
  addSprite(k);
}

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

npm install
npm run dev

 

Open the url ‘http://localhost:3001/’ in browser, you can see the Application that generates 50 rectangles, squares and sprite beans.

 

You can see the Application Demo here (https://www.youtube.com/watch?v=dKpTkvNgmds).

 

You can download the Application from this link.

Previous                                                    Next                                                    Home