update docs.

.prettierrc.mjs

@@ -4,4 +4,5 @@ export default {
   singleQuote: true,
   jsxSingleQuote: true,
   arrowParens: 'avoid',
+  printWidth: 200,
 }

components/image.tsx

@@ -1,12 +1,4 @@
 import type { ComponentPropsWithoutRef as ComponentProps } from 'react'
 import NextImage from 'next/image'
 
-export const Image = ({
-  style,
-  ...props
-}: ComponentProps<typeof NextImage>) => (
-  <NextImage
-    style={{ marginTop: '1.25rem', borderRadius: '.5rem', ...style }}
-    {...props}
-  />
-)
+export const Image = ({ style, ...props }: ComponentProps<typeof NextImage>) => <NextImage style={{ marginTop: '1.25rem', borderRadius: '.5rem', ...style }} {...props} />

components/tooltip.tsx

@@ -1,14 +1,7 @@
 import { ComponentPropsWithoutRef as ComponentProps } from 'react'
 
-export const Tooltip = ({
-  children,
-  style,
-  ...props
-}: ComponentProps<'span'> & { readonly title: string }) => (
-  <span
-    style={{ ...style, borderBottom: '1px dotted currentColor' }}
-    {...props}
-  >
+export const Tooltip = ({ children, style, ...props }: ComponentProps<'span'> & { readonly title: string }) => (
+  <span style={{ ...style, borderBottom: '1px dotted currentColor' }} {...props}>
     {children}
   </span>
 )

components/under-construction.tsx

@@ -1,6 +1,23 @@
 import { Callout } from 'nextra/components'
+import { Image } from '~/components/image'
+import scriptsTab from '~/assets/images/scriptstab.png'
 
 export const UnderConstruction = () => (
-  <Callout type='info'>This docs page is under construction. Expect more information coming to this page soon!<br></br>
-  If you have questions, please ask them in our <u><a href="https://discord.gg/nwXFvtJ92g">Discord server</a></u> and we'll answer them promptly! 😊</Callout>
+  <Callout type='info'>
+    This docs page is under construction. Expect more information coming to this page soon!<br></br>
+    If you have questions, please ask them in our{' '}
+    <u>
+      <a href='https://discord.gg/nwXFvtJ92g'>Discord server</a>
+    </u>{' '}
+    and we'll answer them promptly! 😊
+  </Callout>
+)
+
+export const AIDocs = () => (
+  <Callout type='info'>
+    These docs are written to be queried by the Dreamlab Assistant, our chatbot that helps you code your game.
+    <Image src={scriptsTab} style={{ width: 'auto', maxHeight: '15rem' }} alt='scripts tab location'></Image>
+    <br></br>
+    Navigate to your "Scripts" tab as shown and the Dreamlab Assistant will be available on the right side.
+  </Callout>
 )

ingredients/Character Controller.ts

@@ -0,0 +1,74 @@
+// This is an example of how to implement a platformer controller using the KinematicCharacterController
+
+import { Behavior, EntityDestroyed, RectCollider, Vector2 } from '@dreamlab/engine'
+import { KinematicCharacterController } from '@dreamlab/vendor/rapier.ts'
+
+export default class PlatformMovement extends Behavior {
+  #collider: RectCollider = this.entity.cast(RectCollider)
+  #controller: KinematicCharacterController | undefined
+
+  speed = 10.0
+  jumpForce = 20.0
+  jumpAcceleration = 40
+  gravity = 90.0
+  maxJumpTime = 1 // Maximum duration the jump key affects the jump
+
+  #verticalVelocity = 0
+  #isGrounded = false
+  #jumpTimeCounter = 0
+
+  #up = this.inputs.create('@movement/up', 'Move Up', 'KeyW')
+  #down = this.inputs.create('@movement/down', 'Move Down', 'KeyS')
+  #left = this.inputs.create('@movement/left', 'Move Left', 'KeyA')
+  #right = this.inputs.create('@movement/right', 'Move Right', 'KeyD')
+  #jump = this.inputs.create('@movement/jump', 'Jump', 'Space')
+
+  setup() {
+    this.defineValues(PlatformMovement, 'speed', 'jumpForce', 'jumpAcceleration', 'gravity', 'maxJumpTime')
+  }
+
+  onInitialize(): void {
+    if (this.game.isClient()) {
+      this.#controller = this.game.physics.world.createCharacterController(0.01)
+    }
+
+    this.listen(this.entity, EntityDestroyed, () => {
+      if (this.#controller) this.game.physics.world.removeCharacterController(this.#controller)
+    })
+  }
+
+  onTick(): void {
+    if (!this.#controller) return
+
+    const deltaTime = this.game.physics.tickDelta / 1000 // Convert to seconds
+
+    let horizontalInput = 0
+    if (this.#right.held) horizontalInput += 1
+    if (this.#left.held) horizontalInput -= 1
+
+    const horizontalVelocity = horizontalInput * this.speed
+
+    // Jumping logic
+    if (this.#jump.pressed && this.#isGrounded) {
+      this.#verticalVelocity = this.jumpForce
+      this.#jumpTimeCounter = 0
+    }
+
+    if (this.#jump.held && this.#jumpTimeCounter < this.maxJumpTime) {
+      // Apply upward acceleration while the jump key is held
+      this.#verticalVelocity += this.jumpAcceleration * deltaTime
+      this.#jumpTimeCounter += deltaTime
+    }
+
+    // Create movement vector
+    const movement = new Vector2(horizontalVelocity * deltaTime, this.#verticalVelocity * deltaTime)
+
+    this.#controller.computeColliderMovement(this.#collider.collider, movement)
+    const corrected = this.#controller.computedMovement()
+
+    this.#isGrounded = this.#controller.computedGrounded()
+    if (!this.#isGrounded) this.#verticalVelocity -= this.gravity * deltaTime
+
+    this.entity.pos = this.entity.pos.add(corrected)
+  }
+}

ingredients/Detecting Collisions.ts

@@ -1,6 +1,6 @@
-import { Behavior, Entity, EntityCollision } from "@dreamlab/engine";
-import HealthBar from "./health-bar.ts";
-import PlayerBehavior from "./player.ts";
+import { Behavior, Entity, EntityCollision } from '@dreamlab/engine'
+import HealthBar from './health-bar.ts'
+import PlayerBehavior from './player.ts'
 
 /*
   Handling Collisions in Game Entities:
@@ -18,30 +18,30 @@ import PlayerBehavior from "./player.ts";
 */
 
 export default class EnemyBehavior extends Behavior {
-  private healthBar!: HealthBar;
+  private healthBar!: HealthBar
 
   onInitialize(): void {
-    const health = Math.floor(Math.random() * 3) + 3;
+    const health = Math.floor(Math.random() * 3) + 3
     this.healthBar = this.entity.addBehavior({
       type: HealthBar,
       values: { maxHealth: health, currentHealth: health },
-    });
+    })
 
     // Listen for collision event
     this.listen(this.entity, EntityCollision, e => {
-      if (e.started) this.onCollide(e.other);
-    });
+      if (e.started) this.onCollide(e.other)
+    })
   }
 
   // Example of collision usage. We only want this entity to collide with the "Bullet" entity
   onCollide(other: Entity) {
-    if (!other.name.startsWith("Bullet")) return;
+    if (!other.name.startsWith('Bullet')) return
 
-    other.destroy();
-    this.healthBar.takeDamage(1);
+    other.destroy()
+    this.healthBar.takeDamage(1)
     if (this.healthBar.currentHealth <= 0) {
-      const player = this.entity.game.world._.Player;
-      player.getBehavior(PlayerBehavior).score += 100;
+      const player = this.entity.game.world._.Player
+      player.getBehavior(PlayerBehavior).score += 100
     }
   }
 }

ingredients/Handling Input.ts

@@ -1,5 +1,5 @@
-import { Behavior, Vector2 } from "@dreamlab/engine";
-import PlayerBehavior from "./player.ts";
+import { Behavior, Vector2 } from '@dreamlab/engine'
+import PlayerBehavior from './player.ts'
 
 /*
   Handling Inputs in a Behavior:
@@ -51,71 +51,69 @@ import PlayerBehavior from "./player.ts";
 */
 
 export default class Movement extends Behavior {
-  speed = 5.0;
+  speed = 5.0
 
   // Input bindings for movement
-  #up = this.inputs.create("@movement/up", "Move Up", "KeyW");
-  #down = this.inputs.create("@movement/down", "Move Down", "KeyS");
-  #left = this.inputs.create("@movement/left", "Move Left", "KeyA");
-  #right = this.inputs.create("@movement/right", "Move Right", "KeyD");
+  #up = this.inputs.create('@movement/up', 'Move Up', 'KeyW')
+  #down = this.inputs.create('@movement/down', 'Move Down', 'KeyS')
+  #left = this.inputs.create('@movement/left', 'Move Left', 'KeyA')
+  #right = this.inputs.create('@movement/right', 'Move Right', 'KeyD')
 
   // Input binding for firing
-  #fire = this.inputs.create("@clickFire/fire", "Fire", "MouseLeft");
+  #fire = this.inputs.create('@clickFire/fire', 'Fire', 'MouseLeft')
 
   // Cooldown management for firing
-  readonly #cooldown = 0;
-  #lastFired = 0;
+  readonly #cooldown = 0
+  #lastFired = 0
 
-  velocity = Vector2.ZERO;
+  velocity = Vector2.ZERO
 
-  onInitialize() {
-    this.defineValues(Movement, "speed");
+  setup() {
+    this.defineValues(Movement, 'speed')
   }
 
   onTick(): void {
-    const movement = new Vector2(0, 0);
-    const currentSpeed = this.speed;
+    const movement = new Vector2(0, 0)
+    const currentSpeed = this.speed
 
     // Handle movement inputs
-    if (this.#up.held) movement.y += 1;
-    if (this.#down.held) movement.y -= 1;
-    if (this.#right.held) movement.x += 1;
-    if (this.#left.held) movement.x -= 1;
+    if (this.#up.held) movement.y += 1
+    if (this.#down.held) movement.y -= 1
+    if (this.#right.held) movement.x += 1
+    if (this.#left.held) movement.x -= 1
 
     // Calculate the velocity based on movement input and speed
-    this.velocity = movement
-      .normalize()
-      .mul((this.game.physics.tickDelta / 100) * currentSpeed);
+    this.velocity = movement.normalize().mul((this.game.physics.tickDelta / 100) * currentSpeed)
 
     // Update entity's position
-    const newPosition = this.entity.transform.position.add(this.velocity);
+    const newPosition = this.entity.transform.position.add(this.velocity)
 
     // Boundary checks can be added here to restrict movement within certain limits
 
     // Handle firing input with cooldown management
     if (this.#lastFired > 0) {
-      this.#lastFired -= 1;
+      this.#lastFired -= 1
     } else {
       if (this.#fire.held) {
-        const playerBehavior = this.entity.getBehavior(PlayerBehavior);
-        const fireRateMultiplier = playerBehavior.fireRateMultiplier;
+        const playerBehavior = this.entity.getBehavior(PlayerBehavior)
+        const fireRateMultiplier = playerBehavior.fireRateMultiplier
 
-        this.#lastFired = this.#cooldown / fireRateMultiplier;
+        this.#lastFired = this.#cooldown / fireRateMultiplier
 
         // Trigger the shooting pattern defined in PlayerBehavior
-        playerBehavior.shootingPattern();
+        playerBehavior.shootingPattern()
       }
     }
 
     // Rotate the entity to face the cursor's position
 
-    const world = this.inputs.cursor.world;
-    if (!world) return;
+    const world = this.inputs.cursor.world
+    if (!world) return
     // EXTREMELY IMPORTANT: Use the value of this.inputs.cursor.world before applying newPosition to the transform
-    const rotation = this.entity.transform.position.lookAt(world);
-    this.entity.transform.rotation = rotation;
+    const rotation = this.entity.transform.position.lookAt(world)
+    this.entity.transform.rotation = rotation
 
     // Apply the new position to the entity
-    this.entity.transform.position = newPosition;
+    this.entity.transform.position = newPosition
   }
 }