Examples - KernelPlay.js

main.js

import { Game } from "kernelplay-js";
import { Level1 } from "./scenes/Level1.js";
import { ThreeRenderer } from "@kernelplay/three-renderer";

class MyGame extends Game {
  init() {
    this.sceneManager.addScene(new Level1("Level1"));
    this.sceneManager.startScene("Level1");
  }
}

const game = new MyGame({
  renderer: new ThreeRenderer(),
  width: 800,
  height: 600,
  fps: 60
});

game.start();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>KernelPlay Game</title>
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/",
        "kernelplay-js": "https://cdn.jsdelivr.net/npm/kernelplay-js@latest/dist/kernelplay.es.js",
        "@kernelplay/three-renderer": "https://cdn.jsdelivr.net/npm/@kernelplay/three-renderer/dist/three-renderer.es.js"
      }
    }
  </script>
  <script type="module" src="./main.js"></script>
</body>
</html>

scene.js

import { Scene } from "kernelplay-js";
import { PlayerCube } from "../prefabs/PlayerCube.js";
import { Cube } from "../prefabs/Cube.js";

export class Level1 extends Scene {
  init() {
    this.addEntity(new PlayerCube(0, 0, 0));
    this.addEntity(new Cube(3, 0, 0));
    this.addEntity(new Cube(-3, 0, 0, true));
  }
}

player.js

import * as THREE from "three";
import { Entity, ColliderComponent } from "kernelplay-js";
import { CubeScript } from "../scripts/CubeScript.js";

import { Layers } from "kernelplay-js";

import { MeshComponent } from "@kernelplay/three-renderer";
import { BoxCollider3D } from "@kernelplay/three-renderer";
import { TransformComponent } from "kernelplay-js";
import { RigidbodyComponent } from "kernelplay-js";

export function PlayerCube(x, y, z = 0) {
  const e = new Entity("Player");
  e.layer = Layers.Player;

  e.addComponent("transform", new TransformComponent({
    position: { x, y, z},
    scale: { x: 1, y: 1, z: 1}
  }));

  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: "blue" })
  );

  e.addComponent("mesh", new MeshComponent(mesh));
  e.addComponent("collider3D", new BoxCollider3D());
  e.addComponent("rigidbody", new RigidbodyComponent({
    gravityScale: 0.05,
    useGravity: true
  }));
  e.addComponent("CubeScript", new CubeScript());

  return e;
}

player.js

import * as THREE from "three";
import { Entity, ColliderComponent } from "kernelplay-js";
import { MeshComponent } from "@kernelplay/three-renderer";
import { BoxCollider3D } from "@kernelplay/three-renderer";
import { TransformComponent } from "kernelplay-js";

export function Cube(x, y, z = 0, isTrigger = false) {
  const e = new Entity("Cube");

  e.addComponent("transform", new TransformComponent({
    position: { x, y, z},
    scale: { x: 1, y: 2, z: 3 }
  }));

  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: "red" })
  );

  e.addComponent("mesh", new MeshComponent(mesh));
  e.addComponent("collider3D", new BoxCollider3D(isTrigger));

  return e;
}

player.js

import { ScriptComponent, Keyboard, Mouse } from "kernelplay-js";
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/controls/OrbitControls.js';
import { Layers } from "kernelplay-js";

export class CubeScript extends ScriptComponent {
    onStart() {
        const renderer = this.entity.scene.game.renderer;

        renderer.camera.position.x = 0;
        renderer.camera.position.y = 3;
        renderer.camera.position.z = 7;
        // OrbitControls
        const controls = new OrbitControls(renderer.camera, renderer.renderer.domElement);
        controls.enableDamping = true;       // smooth motion
        controls.dampingFactor = 0.05;
        controls.target.set(0, 1, 0);        // focus point
        controls.update();
    }

    update(dt) {
        const transform = this.entity.getComponent("transform");
        const rb = this.entity.getComponent("rigidbody");
        // this.rb = rb;

        rb.velocity.x = 0;
        rb.velocity.z = 0;

        if (Keyboard.isPressed("ArrowRight")) rb.velocity.x = 200 * dt;
        if (Keyboard.isPressed("ArrowLeft")) rb.velocity.x = -200 * dt;
        if (Keyboard.isPressed("ArrowUp")) rb.velocity.z = -200 * dt;
        if (Keyboard.isPressed("ArrowDown")) rb.velocity.z = 200 * dt;

        if (Mouse.wasPressed(0)) {
            const hit = this.entity.scene.raycast(Mouse.x, Mouse.y);

            // const hit = this.entity.scene.raycast(Mouse.x, Mouse.y,{
            //     layerMask: Layers.Player
            // });

            // const hit = this.entity.scene.pick(Mouse.x, Mouse.y);
            if (hit) {
                // raycast
                console.log("Clicked:", hit.entity.name, hit.distance, hit.point);

                // pick
                // console.log("Clicked:", hit.name, hit.tag);
                // console.log("Clicked:", hit);
            }
        }

        if (rb.isGrounded) {
            if (Keyboard.isPressed(" ")) {
                rb.addForce(0, 20, 0, "impulse");
            }
        }

        if(transform.position.y < -20) {
            transform.setPosition(0, 3, 0);
        }
    }

    onTriggerEnter(other) {
        if(other.tag === "coin"){
            other.destroy();
            console.log("Coin collected !!!");
        }
    }
}