Studio: Sliding Puzzle

3x3 sliding puzzle Generator. Settings include image of the puzzle, if it should be created on start or on a specific event and how many steps were used for shuffling to increase difficulty.

Sliding Puzzle System Documentation

Components Overview

1. ImageMapper (image-mapper.ts)

Purpose: Handles image splitting and texture mapping for puzzle pieces

Schema

• imgSrc: String - Image source URL
• cubeId: Integer - Piece identifier
• gridSize: Integer - Puzzle dimensions (default: 3)

Main Function

splitImages(imgSrc, world, cubeId, cubeEntity, gridSize)

Splits source image into tiles and maps them to puzzle pieces

2. PuzzlePiece (puzzle-piece.ts)

Purpose: Manages individual puzzle piece behavior and interactions

Schema

• entityName: String - Piece name
• id: Integer - Piece position identifier

Features

• Touch interaction handling
• Piece movement animation
• Position swapping with empty space
• Correct position tracking

3. PuzzleUtils (puzzle-utils.ts)

Purpose: Utility class with helper functions for puzzle mechanics

Constants

DIRECTIONS = {dx: 0, dy: -1}, // up {dx: 0, dy: 1}, // down {dx: -1, dy: 0}, // left {dx: 1, dy: 0} // right GRID_CELL_SIZE = 1.1 // Spacing between pieces

Key Functions

• getGridPosition(): Calculates 3D position from grid index
• isNeighbor(): Checks if pieces are adjacent
• getValidMoves(): Returns possible moves for empty space
• isValidPosition(): Validates grid coordinates

4. SlidingPuzzle (sliding-puzzle.ts)

Purpose: Main puzzle game controller

Schema

• spawnCount: Integer - Grid size
  • currently only 3 works without bugs
• imageSrc: String - Puzzle image
• shuffleSteps: Integer - Randomization amount
• startImmediately: Boolean
• startEvent: String - Custom start trigger

Key Features

• Puzzle initialization
• Piece shuffling
• Game state management
• Victory condition checking
• Network move synchronization

System Architecture

The system uses an Entity Component System (ECS) architecture with:

• Touch-based interactions
• Animated piece movements
• Image texture mapping
• Network synchronization
• Victory detection
• Customizable puzzle size and complexity

Configuration

The puzzle can be configured through the schema parameters and can be started either: 1. Immediately upon creation 2. Triggered by a custom event