Chuyển đến nội dung chính
Hướng dẫn AI

Tạo Pixel Art, Sprite Sheet và GIF bằng mã với pxl

Tìm hiểu cách cài đặt pxl, định nghĩa pixel art bằng DSL ngắn gọn, tạo sprite PNG và sprite sheet, xem trước thay đổi trong trình duyệt trực tiếp, đồng thời sử dụng các tính năng nâng cao như biến thể, hoạt ảnh, cảnh, ánh sáng và quy trình hỗ trợ bởi AI.

Thời gian đọc khoảng 16 phút
Tạo Pixel Art, Sprite Sheet và GIF bằng mã với pxl

pxl là gì?

pxl là công cụ pixel art ưu tiên mã nguồn dành cho Node.js. Bạn mô tả tác phẩm trong các tệp .px.js hoặc .px.ts ngắn gọn, sau đó sử dụng giao diện dòng lệnh để tạo sprite PNG, sprite sheet kèm siêu dữ liệu JSON, ảnh GIF động và bản xem trước phóng lớn có lưới pixel.

Dự án yêu cầu Node.js 22.18 trở lên. Dự án không có dependency runtime và không cần bước build riêng khi sử dụng từ repository đã clone.

Cảnh pixel art động được tạo bằng pxl

Trình xem trực tiếp trên trình duyệt sẽ dựng lại tác phẩm mỗi khi bạn lưu tệp nguồn. Trình xem cũng có thể phát lại từng thao tác của tài sản đã chỉnh sửa, giúp bạn dễ dàng kiểm tra quy trình tạo tác phẩm khi vẽ thủ công hoặc làm việc với tác nhân AI.

Tính năng chính

  • Bảng màu nhỏ gọn: Gán màu cho các phím một ký tự và sử dụng những bảng màu tích hợp như Pico-8, Sweetie 16 và Endesga 32.
  • Sprite và biến thể: Tạo sprite dạng lưới văn bản, phản chiếu chúng, thêm viền tự động, xoay hoặc lật chúng và tạo các biến thể thay đổi bảng màu.
  • Công cụ vẽ: Sử dụng hình chữ nhật, đường thẳng, hình tròn, đa giác, chuyển màu, dithering, nhiễu, cọ rải, tilemap và phông chữ pixel tích hợp.
  • Sprite sheet: Xuất ảnh đã đóng gói cùng siêu dữ liệu JSON theo kiểu TexturePacker.
  • Cảnh: Tổ chức tác phẩm thành các lớp, thêm lớp đổ bóng và ánh sáng, rồi xuất từng lớp thành tệp PNG riêng.
  • Hoạt ảnh: Xác định các khung hình dưới dạng các bản vá trên sprite cơ sở và xuất strip, thẻ JSON cùng tệp GIF.
  • Chiếu sáng tùy chọn: Thêm đèn, hiệu ứng phát sáng và hiệu ứng nổi dựa trên pháp tuyến.
  • Chẩn đoán hữu ích: Lỗi bao gồm thông tin về tệp, dòng, cột, tài sản, lớp và thao tác, cùng gợi ý “ý bạn là” khi phù hợp.
Cảnh cửa hàng pixel art chi tiết được tạo bằng pxl

Cài đặt và chạy pxl

Tùy chọn 1: Clone repository

Clone dự án và truy cập vào thư mục của dự án:

git clone https://github.com/crsolver/claude-pxl.git
cd claude-pxl

Trong bản clone, gọi CLI bằng node bin/pxl.js. Bạn có thể mở ngay một trong các ví dụ đi kèm trong trình xem trực tiếp:

node bin/pxl.js serve examples/shop.px.js

Mở http://127.0.0.1:4321/ trong trình duyệt. Trình xem sẽ dựng lại dự án mỗi khi tệp đồ họa được lưu.

Tùy chọn 2: Chạy bằng npx

Bạn có thể build trực tiếp một tệp đồ họa từ repository GitHub mà không cần clone:

npx github:crsolver/claude-pxl build art.px.js

Trong các lệnh bên dưới, pxl có nghĩa là node bin/pxl.js từ bản clone hoặc npx github:crsolver/claude-pxl.

Tạo sprite bằng mã đầu tiên

Tạo tệp có tên art.px.js và thêm đoạn mã sau:

pal({
  k: "#1b1630",
  g: "#8ccf63",
  G: "#4c8a44",
  w: "#fff6e0",
  r: "#e2585e",
  R: "#a63a4c"
})

sprite("slime", { mx: true, outline: "k" }, `
  ....ggg
  ..ggGGg
  .ggGwGg
  gggkwgg
  GGGGGGG`)

sprite("slime_red", {
  base: "slime",
  swap: { g: "r", G: "R" }
})

sheet("chars", ["slime*"], { pad: 1 })

Hiểu ví dụ

  1. pal() ánh xạ các phím một ký tự với màu hệ thập lục phân. Sau đó, bạn có thể sử dụng trực tiếp các phím này trong lưới sprite.
  2. sprite("slime", ...) khai báo sprite cơ sở.
  3. Tùy chọn mx: true phản chiếu theo chiều ngang nửa sprite được cung cấp.
  4. outline: "k" tự động tạo viền cho sprite bằng màu trong bảng màu được gán cho k.
  5. Sprite thứ hai sử dụng base: "slime" và đổi các màu xanh lá thành màu đỏ, tạo ra một biến thể đổi màu mà không cần lặp lại lưới.
  6. sheet() tạo sprite sheet có tên chars. Mẫu slime* bao gồm các tài sản phù hợp, còn pad: 1 thêm một pixel khoảng đệm.

Build các tài sản

Từ repository đã clone, chạy:

node bin/pxl.js build art.px.js

Ví dụ tạo ra các tệp như:

out/sprites/slime.png
out/sprites/slime_red.png
out/chars.png
out/chars.json
out/_preview/*.png

Các tệp sprite chứa tác phẩm ở tỷ lệ gốc một pixel. Các tệp chars.png và chars.json tạo thành sprite sheet và siêu dữ liệu theo kiểu TexturePacker của nó. Thư mục out/_preview/ chứa các bản xem trước phóng lớn với lưới pixel.

Sử dụng trình xem trực tiếp

Khởi động máy chủ phát triển cho tệp đồ họa của bạn:

node bin/pxl.js serve art.px.js

Theo mặc định, trình xem khả dụng trên cổng 4321. Mỗi lần lưu sẽ kích hoạt việc build lại và phát lại từng bước tài sản đã chỉnh sửa. Máy chủ cũng ghi các tệp out/ giống lệnh build, trừ khi đầu ra bị tắt.

Để chọn cổng hoặc thư mục đầu ra khác, hãy sử dụng:

node bin/pxl.js serve art.px.js --port 5000 --out generated

Để sử dụng trình xem mà không ghi tài sản đã tạo vào ổ đĩa:

node bin/pxl.js serve art.px.js --no-out

Hang động pixel art phát sáng động

Khám phá các lệnh CLI

Build các tài sản đã chọn

Lệnh build chấp nhận các tùy chọn cho thư mục đích, các tài sản được chọn, tỷ lệ đầu ra và bản xem trước:

pxl build <art.px.js> [--out DIR] [--only a,b] [--scale N] [--no-preview]

Ví dụ, chỉ build hai tài sản có tên với tỷ lệ gấp bốn lần kích thước gốc:

node bin/pxl.js build art.px.js --only slime,slime_red --scale 4

Kiểm tra sprite dưới dạng văn bản

Lệnh ascii in một tài sản dưới dạng các khóa bảng màu cùng thước đo ngang và dọc. Tính năng này hữu ích khi xác định vị trí từng pixel:

node bin/pxl.js ascii art.px.js slime

Liệt kê các định nghĩa của dự án

Dùng list để hiển thị các tài sản, nhóm và sheet cùng vị trí trong mã nguồn:

node bin/pxl.js list art.px.js

Mẹo cho quy trình nâng cao

Sử dụng tệp đồ họa TypeScript

Các dự án đồ họa có thể dùng .js hoặc .ts. Kho mã nguồn bao gồm types/pxl.d.ts để cung cấp tính năng hoàn tất mã trong trình soạn thảo cho các tệp .px.ts.

Tái sử dụng và biến đổi tác phẩm

Tránh lặp lại các lưới khi các tài sản có cùng cấu trúc. Tạo các biến thể từ một sprite cơ sở, dùng phép thay bảng màu cho các phối màu khác, đồng thời sử dụng lật, xoay, _parts có thể tái sử dụng và stamp khi phù hợp.

Sử dụng công cụ thủ tục tất định

DSL bao gồm chuyển màu, dithering, nhiễu, cọ rải, tilemap và các nhóm ngẫu nhiên với seed có thể tái lập. Tính ngẫu nhiên có thể tái lập đặc biệt hữu ích khi bạn muốn các chi tiết được tạo ra luôn ổn định giữa các lần build.

Xây dựng cảnh theo từng lớp

Đối với các bố cục lớn hơn, hãy dùng scene và layer thay vì đưa mọi thao tác vào một tài sản phẳng duy nhất. pxl hỗ trợ các lớp đổ bóng và ánh sáng, cũng như xuất PNG theo từng lớp. Tham khảo reference.md để xem toàn bộ API.

Thêm hoạt ảnh và ánh sáng có chọn lọc

Các khung hình hoạt ảnh có thể được biểu diễn dưới dạng các bản vá trên một sprite cơ sở, giúp giảm trùng lặp giữa những khung hình tương tự. pxl có thể chuyển các định nghĩa này thành strip, thẻ JSON và GIF động. Đối với đèn, hiệu ứng phát sáng và hiệu ứng nổi dựa trên pháp tuyến, hãy làm theo hướng dẫn chiếu sáng chuyên dụng.

Sử dụng pxl với tác tử AI

Kho mã nguồn được thiết kế để hoạt động như một kỹ năng cho tác tử. Quy trình được khuyến nghị là viết tệp đồ họa, build, kiểm tra bản xem trước rồi chỉnh sửa mã nguồn. Trình xem trực tiếp giúp quan sát quy trình này theo thời gian thực.

Để cài đặt kỹ năng cho tất cả dự án Claude Code:

git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art

Để chỉ cài đặt cho dự án hiện tại:

git clone https://github.com/crsolver/claude-pxl.git .claude/skills/pxl-pixel-art

Đối với Codex, Cursor hoặc tác tử khác, hãy trỏ tác tử đến SKILL.md và chỉ định đường dẫn CLI dưới dạng node <path-to-pxl>/bin/pxl.js. Yêu cầu tác tử khởi động pxl serve nếu bạn muốn theo dõi tác phẩm được xây dựng trong trình duyệt.

Các lệnh phát triển

Nếu dự định chỉnh sửa chính pxl, hãy cài đặt các phụ thuộc phát triển và chạy các bước kiểm tra:

npm install
npm run check

Các phụ thuộc phát triển bao gồm TypeScript và định nghĩa kiểu cho Node.js. Để tạo lại thư viện ảnh của kho mã nguồn, hãy chạy:

node scripts/gallery.ts

Kết luận

pxl cung cấp một cách ngắn gọn để xử lý pixel art như mã nguồn. Bắt đầu với bảng màu và sprite dạng lưới văn bản, build chúng thành các tài sản PNG và sprite sheet, đồng thời mở trình xem trực tiếp để nhận phản hồi nhanh. Khi dự án phát triển, bạn có thể thêm các biến thể có thể tái sử dụng, các hình nguyên thủy, scene theo lớp, hoạt ảnh, ánh sáng và quy trình lặp có AI hỗ trợ mà không cần thêm phụ thuộc thời gian chạy.