心動小鎮像素畫布轉換工具 Heartopia Pixel Art Tool

將圖片快速轉換為符合遊戲內調色盤與網格比例的像素圖工具

支援比例裁切、顏色對照、高亮模式、縮放拖曳與即時色彩資訊顯示

🔗 打開你的瀏覽器並前往

👉 心動小鎮像素畫布轉換工具

🚀 使用方式

1. 上傳圖片
2. 選擇比例與精細度
3. 下載像素圖或開啟預覽模式
4. 使用高亮功能分色繪製

---

📌 專案介紹

使用者可以：

1. 上傳圖片
2. 選擇遊戲內支援的網格比例
3. 選擇不同像素精細度
4. 自動轉換為符合遊戲調色盤的像素圖
5. 快速對照顏色並高效繪製
6. 支援中/英語言

🖼 預覽畫面

🔹 圖片上傳與比例選擇

🔹 原圖與像素圖即時對照

🔹 像素預覽彈窗模式

🔹 色塊篩選高亮模式（繪製輔助功能）

🧠 技術架構

• Vue 3
• TypeScript
• Canvas API
• 自製色彩距離演算法（RGB 距離匹配）
• 動態網格生成
• 色彩轉換處理（RGB / HEX / HSL）

🎨 Heartopia Pixel Tool

Advanced Pixel Art Converter with Game Palette Mapping

Built with Vue 3 + TypeScript + Canvas API

🔗 Live Demo 👉 https://chen0303.github.io/Heartopia_PixelTool/

🧩 Project Overview

This project is a custom pixel art conversion tool designed to solve a real-world problem:

The in-game drawing system only supports a fixed color palette and specific grid ratios.

Players needed a way to:

• Convert images into pixel art
• Match exact in-game colors
• Draw efficiently color-by-color
• Add language support for Chinese and English

So I built a complete front-end solution with advanced UI interactions and color-matching logic.

🏗 Technical Architecture

🔹 Stack

• Vue 3 (Composition API)
• TypeScript
• Canvas API
• Custom color distance algorithm
• Reactive state-driven UI system