update documentation

Author: Your Name

Parts/Children/PolygonCollider.ts

@@ -41,7 +41,7 @@ export class PolygonCollider extends Collider {
         super.act(delta);
     }
 
-    override _updateVerticesAfterMerge(polygons: Vector[][][]): void {
+    override _updateVerticesAfterMerge(polygons: Vector[][]): void {
         const newCollider = new MultiPolygonCollider({ polygons, tag: this.tag });
 
         newCollider.active = this.active;

Parts/Layer.ts

@@ -7,12 +7,12 @@ import type { Collider } from "./Children/Collider";
 export class Layer extends Part {
     spatialGrid: SpatialGrid;
 
-    constructor({ name }: { name: string }) {
+    constructor({ name, spatialGridDefinition }: { name: string, spatialGridDefinition?: number }) {
         super({ name });
         this.type = "Layer";
         this.id = generateUID();
         this.debugEmoji = "🗂️"; // Default emoji for debugging the layer
-        this.spatialGrid = new SpatialGrid(50);
+        this.spatialGrid = new SpatialGrid(spatialGridDefinition || 100);
     }
 
     addChild(part: Part) {

Parts/PhysicsEngine.ts

@@ -5,14 +5,19 @@ import { Vector } from "../Math/Vector";
 export class PhysicsEngine extends Part {
     engine: Engine;
     world: World;
+    gravity: { x: number, y: number };
+    scale: number;
 
-    constructor({ gravity }: { gravity?: { x: number, y: number, scale: number } }) {
+    constructor({ gravity, scale }: { gravity?: Vector, scale: number }) {
         super({ name: 'PhysicsEngine' });
+        this.gravity = gravity?.toObject() || new Vector(0, 1).toObject();
+        this.scale = scale || 0.001;
+
         this.engine = Engine.create({
-            gravity: gravity || {
-                x: 0,
-                y: 1, // Default gravity pointing downwards
-                scale: 0.001 // Scale for the gravity vector
+            gravity: {
+                x: this.gravity.x,
+                y: this.gravity.y,
+                scale: this.scale
             }
         });
         this.world = this.engine.world;
@@ -26,7 +31,8 @@ export class PhysicsEngine extends Part {
         }
 
         const clonedEngine = new PhysicsEngine({
-            gravity: this.engine.gravity // Pass original gravity settings to constructor
+            gravity: new Vector(this.gravity.x, this.gravity.y),
+            scale: this.scale
         });
 
         memo.set(this, clonedEngine);

docs/_sidebar.md

@@ -25,8 +25,10 @@
       - [Collider](api/Collider.md)
       - [BoxCollider](api/BoxCollider.md)
       - [PolygonCollider](api/PolygonCollider.md)
+      - [MultiPolygonCollider](api/MultiPolygonCollider.md)
     - **Utility Components**
       - [CharacterMovement](api/CharacterMovement.md)
+      - [GravityCharacterMovement](api/GravityCharacterMovement.md)
       - [Rotator](api/Rotator.md)
       - [Scaler](api/Scaler.md)
       - [Projectile](api/Projectile.md)
@@ -46,6 +48,8 @@
   - **Math**
     - [Vector](api/Vector.md)
 - [Engine Internals](engine-internals.md)
+- **Tools**
+  - [Sprite Builder](spriteBuilder.md)
 - **Tutorials**
   - [Setting up the Physics Engine](tutorials/physics-engine.md)
   - [Integrating Physics with PhysicsBody](tutorials/physics-body.md)

docs/api-reference.md

@@ -33,6 +33,7 @@ This section provides a detailed reference for the core classes and components i
 -   [Collider](./api/Collider.md) (Base class)
 -   [BoxCollider](./api/BoxCollider.md)
 -   [PolygonCollider](./api/PolygonCollider.md)
+-   [MultiPolygonCollider](./api/MultiPolygonCollider.md)
 -   [AreaTrigger](./api/AreaTrigger.md)
 
 
@@ -41,6 +42,7 @@ This section provides a detailed reference for the core classes and components i
 
 -   [CameraShake](./api/CameraShake.md)
 -   [CharacterMovement](./api/CharacterMovement.md)
+-   [GravityCharacterMovement](./api/GravityCharacterMovement.md)
 -   [Follow](./api/Follow.md)
 -   [Health](./api/Health.md)
 -   [HealthBar](./api/HealthBar.md)

docs/api/AnimatedSprite.md

@@ -6,7 +6,148 @@ The `AnimatedSprite` component renders an animated sprite from a spritesheet. It
 
 ## Constructor
 
-`new AnimatedSprite({ spritesheet, spritesheetImage, width, height, startingAnimation, disableAntiAliasing, onAnimationComplete, webEngine })`
+# AnimatedSprite
+
+**Extends:** [Renderer](./Renderer.md)
+
+The `AnimatedSprite` component renders an animated sprite from a spritesheet. It requires a JSON file (typically generated by a tool like TexturePacker) that defines the frames and animations.
+
+## Constructor
+
+`new AnimatedSprite({ spritesheet, spritesheetImage, width, height, startingAnimation, disableAntiAliasing, onAnimationComplete, webEngine, loop, bounce })`
+
+-   `spritesheet: string`
+    The path to the JSON file that defines the spritesheet data.
+
+-   `spritesheetImage?: string`
+    The path to the image file for the spritesheet.
+
+-   `width: number`
+    The width of the sprite.
+
+-   `height: number`
+    The height of the sprite.
+
+-   `startingAnimation?: string`
+    The name of the animation to play when the sprite is created. (Or "default" to preserve spritesheet data's starting animation but force the `bounce` and `loop` properties)
+
+-   `disableAntiAliasing?: boolean`
+    If `true`, disables anti-aliasing for this sprite. Defaults to `false`.
+
+-   `onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void`
+    A callback function that is called when an animation completes.
+
+-   `webEngine?: boolean`
+    This property is used internally by the engine and should not be modified.
+
+-   `loop?: boolean`
+    Override spritesheet data and loop immediately.
+
+-   `bounce?: boolean`
+    Override spritesheet data and bounce immediately.
+
+## Properties
+
+-   `spritesheet: string`
+    The path to the JSON data for the spritesheet.
+
+-   `spritesheetData?: SpriteSheetData`
+    The parsed spritesheet data.
+
+-   `loadedSheet?: HTMLImageElement`
+    The image element for the spritesheet.
+
+-   `frames: Record<string, HTMLImageElement[]>`
+    A dictionary of all the frames for each animation.
+
+-   `currentFrameIndex: number`
+    The index of the current frame in the current animation.
+
+-   `width: number` & `height: number`
+    The dimensions of the sprite.
+
+-   `bouncing: boolean`
+    A flag to indicate if the sprite animation is in reverse (bouncing).
+
+-   `currentAnimation: string`
+    The name of the animation that is currently playing.
+
+-   `disableAntiAliasing: boolean`
+    If `true`, disables anti-aliasing for this sprite.
+
+-   `onAnimationComplete?: (animationName: string, sprite: AnimatedSprite) => void`
+    A callback function that is called when an animation completes.
+
+-   `lastFrameTime`
+    Timestamp of the last frame update (as performance.now(), not Date.now())
+
+## Methods
+
+-   `setAnimation(animationName: string, { loop, bounce }: { loop?: boolean, bounce?: boolean } = {})`
+    Changes the current animation.
+
+## Spritesheet Format
+
+The engine expects a specific JSON format for the spritesheet data. See the `convertTexturePackerToSpriteSheetData` helper function and the `SpriteSheetData` type in the source code for details.
+
+## Examples
+
+### Creating an Animated Sprite
+
+```javascript
+import { GameObject } from './Parts/GameObject';
+import { Transform } from './Parts/Children/Transform';
+import { AnimatedSprite } from './Parts/Children/AnimatedSprite';
+import { Vector } from './Math/Vector';
+
+const monster = new GameObject({ name: 'Monster' });
+
+monster.addChildren(
+    new Transform({ position: new Vector(400, 300) }),
+    new AnimatedSprite({
+        spritesheet: './assets/monster.json', // Path to the JSON data
+        spritesheetImage: './assets/monster.png', // Path to the image
+        width: 32,
+        height: 32,
+        startingAnimation: 'walk'
+    })
+);
+
+myLayer.addChild(monster);
+```
+
+### Controlling Animations from another Part
+
+This example shows a script that changes the monster's animation based on its state.
+
+```javascript
+import { Part } from './Parts/Part';
+import { AnimatedSprite } from './Parts/Children/AnimatedSprite';
+
+class MonsterAI extends Part {
+    constructor() {
+        super();
+        this.name = 'MonsterAI';
+        this.isAngry = false;
+    }
+
+    act() {
+        const animator = this.sibling<AnimatedSprite>('AnimatedSprite');
+        if (!animator) return;
+
+        // If the monster is angry and not already playing the attack animation...
+        if (this.isAngry && animator.currentAnimation !== 'attack') {
+            animator.setAnimation('attack');
+        } else if (!this.isAngry && animator.currentAnimation !== 'walk') {
+            animator.setAnimation('walk');
+        }
+    }
+}
+
+// Add the AI to the monster GameObject
+monster.addChild(new MonsterAI());
+```
+
 
 -   `spritesheet: string`
     The path to the JSON file that defines the spritesheet data.

docs/api/BoxCollider.md

@@ -6,14 +6,17 @@ A `BoxCollider` is a rectangular-shaped collider. It's the most common and compu
 
 ## Constructor
 
-`new BoxCollider({ width, height })`
+`new BoxCollider({ width, height, tag })`
 
 -   `width: number`
     The width of the collision box.
 
 -   `height: number`
     The height of the collision box.
 
+-   `tag?: string`
+    An optional tag for the collider. Defaults to `"<Untagged>"`.
+
 ## Properties
 
 -   `start: Vector`

docs/api/Button.md

@@ -6,7 +6,7 @@ The `Button` component creates a clickable UI button with different visual state
 
 ## Constructor
 
-`new Button({ label, onClick, styles, clickSound, hoverSound, activeSound })`
+`new Button({ label, onClick, styles, clickSound, hoverSound, activeSound, width, height, backgroundColor, color, font, borderRadius, borderWidth, borderColor, hoverBackground, hoverColor, activeBackground, activeColor })`
 
 -   `label: string`
     The text to display on the button.
@@ -26,6 +26,9 @@ The `Button` component creates a clickable UI button with different visual state
 -   `activeSound?: Sound`
     A `Sound` to play when the button is pressed.
 
+-   `width?: number`, `height?: number`, `backgroundColor?: string`, `color?: string`, `font?: string`, `borderRadius?: number`, `borderWidth?: number`, `borderColor?: string`, `hoverBackground?: string`, `hoverColor?: string`, `activeBackground?: string`, `activeColor?: string`
+    Optional individual style properties that can be provided instead of a `styles` object.
+
 ## Properties
 
 -   `styles?: ButtonStyles`
@@ -89,4 +92,4 @@ startButton.addChildren(
 );
 
 myMenuScene.addChild(startButton);
-```
+```

docs/api/Follow.md

@@ -6,7 +6,10 @@ The `Follow` component is used to make a `GameObject` follow another `Part` in t
 
 ## Constructor
 
-`new Follow({ target, offset, interpolationSpeed })`
+`new Follow({ name, target, offset, interpolationSpeed })`
+
+-   `name?: string`
+    The name of the follow component.
 
 -   `target: Transform`
     The `Transform` component of the `Part` to follow.

docs/api/Game.md

@@ -6,7 +6,7 @@ The `Game` class is the heart of your application. It's the top-level container
 
 ## Constructor
 
-`new Game({ name, canvas, devmode, width, height, disableAntiAliasing, showtoolTips })`
+`new Game({ name, canvas, devmode, width, height, disableAntiAliasing, showtoolTips, showFrameStats })`
 
 -   `name: string`
     The name of the game.
@@ -29,6 +29,9 @@ The `Game` class is the heart of your application. It's the top-level container
 -   `showtoolTips?: boolean`
     When set to `true`, shows tooltips in devmode. Defaults to `false`.
 
+-   `showFrameStats?: "BASIC" | "EXTENDED" | "ADVANCED" | "PERFORMANCE_HUD"`
+    Shows frame rate statistics. Defaults to `"BASIC"`.
+
 ## Properties
 
 -   `canvas: HTMLCanvasElement`
@@ -129,4 +132,4 @@ myGame.addChild(myFirstScene);
 myGame.start(myFirstScene);
 // or by name:
 // myGame.start('Level 1');
-```
+```