Overflowing Palette

Live : https://xirtelan.itch.io/overflowing-palette

Live : https://xirtelan.github.io/overflowing_palette/

showcase: https://youtu.be/9FPFLpCEiQI

• General
• Usage
  • Level Selection
    • Import Level
  • Endless Zen
  • Level Editor
    • Controls
    • Export Level
  • Options
• Customization
• Installation/Building for Offline

General

Project: Recreating the puzzle Overflowing Palette from Wuthering Waves as an HTML5 web game using Phaser 3.

Features:

• All levels from the game
• Level Editor (export/import)
• Levels with different grid sizes
• More available colors
• Customization

Stack:

Vite, Phaser 3

Level Selection / Structure

• Default: Levels that were in the "Wuthering Waves."

Levels are separated by regions.
Yellow background: Cleared stages.
Note: Cleared levels are saved in the browser's localStorage.

• Custom: Levels that don't use any mechanics besides what the original puzzle has (e.g., portals).
• Tools: Levels that use the "Tools" mechanic.
• Portals: Levels that use the "Portal" mechanic.
• Timers: Levels that use the "Timers" mechanic.
• Advanced: Levels that use several different mechanics at once.

Import Levels

Shoud paste level in base64 format (or simply "string"): After "Load" you will see preview for that level if its correct "string".

Endless Zen

Auto-generated levels without a move counter.

Choose board size, number of colors, and difficulty (which affects how shuffled the board starts).

Option to skip a level if you don’t like the generated result.

After completing a level, you can start another with the same settings.

You can share completed levels with others. (Your number of moves will be set as a goal for others to beat.)

Level Editor

The editor is quite straightforward. Choose the grid size you want.
Although the values are limited from 2 to 100, fields larger than 25x25 can be hard to use and may take some time to load.

• Fill Color - Determines the color used to fill the grid.

You can use box selection to select multiple cells at once by clicking and dragging a selection area over them (calculated at the cell center).

Export Level

• Copy STRING - Used for in-game import.
• Copy JSON - Used for offline addition to the levels info JSON file.

Options

General – Change language and backgroun settings. Added 4 new backgrounds, toggle overlay and distortion effect.

Colors – Now 8 colors; you can also rename them.

Gameplay – Options to disable dynamic tile backgrounds and adjust highlight intensity.

Simple colors - remove any animation/shades etc on cells. Stronger higlight - cell on mouse over will be more visible.

Customization

[WIP] For desktop app. All files resources\app\dist\assets

Descriptions:

• fonts: All font files for the app.
• shaders: Files related to shaders used in the app.
• sound: Sound files
• data: Configuration files, localization configurations, and level data.
  • assets: file loading config for phaser
  • config: Configuration files for app setup.
  • lang: Paths and configurations for available localizations.
  • levels: Data for levels.
• localizations: Localization files separated by language.
• textures: All textures used in the app.
  • background: Available background images.
  • shaders: Textures used in shaders.
  • tutorials: Images for the tutorial tab.
  • levelBg: Backgrounds for the levels category in the level selection tab.

Installation

From Source Code

pnpm install

pnpm run dev

Build

pnpm run build

After building (or if using a prebuilt version), you will need a local server.

Options for Running a Local Server:

• Use Live Server (VS Code Extension)
  • Right-click the index.html file in Visual Studio Code and select Open with Live Server.
• Use http-server module from Node.js
  • Install via npm, then run:

    http-server .

• Use http.server from Python
• Use a WAMP (or LAMP) server