Công cụ & tích hợpHướng dẫn
Thêm hiệu ứng pixel-art vào game của bạn với skill pixelfx
Cài đặt skill pixelfx trong Claude Code, yêu cầu một frost nova, và xem chi phí của phiên đó trên một mô hình rẻ với bảng chi phí trực tiếp.
Trên trang này
Bạn muốn có một hiệu ứng frost nova cho game trình duyệt của mình, và bạn không muốn tự vẽ bốn mươi khung hình. Skill pixelfx cho phép Claude Code làm việc đó: cài đặt bằng hai lệnh, mô tả hiệu ứng trong một câu, và agent sẽ viết mã. Chi phí của phiên đó trên một mô hình rẻ phụ thuộc vào số bước thực hiện, vì vậy bảng dưới đây tính toán dựa trên giá trực tiếp với một giả định được nêu rõ.
pixelfx là gì#
pixelfx là một thư viện gồm 244 hiệu ứng pixel-art. Theo README của nó (github.com/patch-gg/pixelfx, đọc ngày 4 tháng 11 năm 2026), mỗi hiệu ứng là một đoạn mã nhỏ trong src/, và các danh mục bao gồm lửa, vụ nổ, nước và băng, cho đến sét, cận chiến, thánh, bóng tối, trạng thái, thời tiết, UI và sinh vật. Sáu mươi mốt hiệu ứng sử dụng nhân vật, và có 12 động tác đầy đủ liên kết nhiều hiệu ứng lại với nhau.
Hai cách sử dụng, tùy thuộc vào engine của bạn:
- Game trình duyệt: sử dụng mã JavaScript trực tiếp. Không có phụ thuộc.
- Godot hoặc engine khác: xuất các hiệu ứng bạn muốn dưới dạng sprite sheet PNG với JSON kiểu Aseprite.
Repo cũng chứa một skill Claude Code riêng để tạo hiệu ứng mới. Skill đó là chủ đề của hướng dẫn này. Nếu bạn chưa từng mở một tệp skill, skill agent là gì và cách đánh giá nó mất năm phút và đáng đọc trước khi bạn cài đặt bất cứ thứ gì từ một repo.
Cài đặt skill#
Bạn cần Claude Code đã được trỏ đến CheapTokens. Nếu chưa, hãy làm điều đó trước: cách kết nối Claude Code với CheapTokens có địa chỉ và các biến. Đối với mã game với các tệp dài, một lựa chọn phù hợp là DeepSeek-V4-Flash (deepseek-): tối đa 32.768 token mỗi câu trả lời, cửa sổ ngữ cảnh 380K, và một mức giá bất kể giờ nào. Chi tiết có trên trang mô hình DeepSeek.
README đưa ra hai cách cài đặt. Cách plugin là hai lệnh trong Claude Code:
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxCách thủ công là sao chép thư mục skills/pixelfx từ repo vào ~/.
Sắp xếp thứ tự
Đặt thiết lập theo đúng thứ tự
Kéo các mục hoặc dùng mũi tên
- Kết nối Claude Code với khóa CheapTokens của bạn
- Thêm marketplace pixelfx bằng /plugin marketplace add
- Cài đặt skill bằng /plugin install
- Yêu cầu một hiệu ứng bằng ngôn ngữ đơn giản
Yêu cầu một hiệu ứng#
Skill được điều khiển bằng các yêu cầu thông thường: thêm, xuất, chỉnh sửa hoặc tạo hiệu ứng. Các ví dụ trong README là điểm khởi đầu tốt nhất. Mở thư mục game của bạn, khởi động claude, và gõ nội dung như:
Add a frost nova to my character's ultimate.Đó là toàn bộ lời nhắc. Skill được xây dựng cho các yêu cầu như thế này: nó dạy Claude Code tìm, sử dụng, xuất và tạo hiệu ứng, và khi tạo hiệu ứng mới, nó hoạt động theo vòng lặp nháp, kết xuất, xem, tinh chỉnh (theo README). Hãy mong đợi nhiều bước thay vì một câu trả lời, như trong bất kỳ phiên agent nào: đọc tệp, sau đó chỉnh sửa.
Nếu bạn dùng Godot, hãy yêu cầu điều khác mà README mô tả:
Export the fire and explosions categories as sprite sheets for Godot.Bạn nhận được một PNG với các khung hình trong lưới cùng JSON kiểu Aseprite; theo README, các trình nhập Aseprite cho Godot và Unity đọc được nó.
Một lưu ý đáng biết trước khi bắt đầu. Các hiệu ứng vẽ trên cơ thể được viết cho hình nộm chuẩn 24x38, vì vậy một nhân vật có kích thước khác cần các hiệu ứng đó được tạo lại.
Tự mình thử xemThử xem: anh hùng của bạn có kích thước 32x48 pixel. Một hiệu ứng cơ thể có khớp không?Hiện đáp án
Không khớp ngay. Các hiệu ứng cơ thể được vẽ cho hình nộm 24x38, vì vậy hãy yêu cầu Claude Code tạo lại hiệu ứng đó cho kích thước nhân vật của bạn.
Chi phí của một phiên#
Đây là phần khiến mọi người ngạc nhiên. Bản thân hiệu ứng là một tệp nhỏ. Chi phí đến từ việc agent làm việc: ở mỗi bước, Claude Code gửi lại các tệp dự án đã đọc, văn bản skill và cuộc hội thoại cho đến nay.
Kiểm tra nhanh
Phía nào của một phiên Claude Code thường chứa phần lớn token?
Hiện đáp án
Trả lời: Đầu vào được gửi lại ở mỗi bước
Mỗi bước mang theo toàn bộ ngữ cảnh làm việc, vì vậy đầu vào cộng dồn nhanh, trong khi mỗi câu trả lời ngắn hơn nhiều (trong ví dụ dưới đây, 1.500 token so với 30.000).
Đây là một giả định bạn có thể thay đổi cho dự án của riêng mình: giả sử phiên mất 20 bước, mỗi bước gửi khoảng 30.000 token đầu vào (tệp, văn bản skill và lịch sử) và mô hình viết khoảng 1.500 token. Trên DeepSeek-V4-Flash, một bước như vậy tốn $0.0006, và toàn bộ phiên 20 bước có trong bảng. Bảng cũng hiển thị OpenRouter bên cạnh giá của chúng tôi cho mọi mô hình, tính tổng cả đầu vào và đầu ra.
| Mô hình | Đầu vào $/1M | Đầu ra $/1M | Mỗi yêu cầu | 20 yêu cầu | OpenRouter, 20 yêu cầu |
|---|---|---|---|---|---|
| GLM-5.3-Flash | $0.02 | $0.04 | $0.00066 | $0.0132 | $0.0226 |
| DeepSeek-V4-Flash | $0.015 | $0.10 | $0.0006 | $0.012 | $0.0462 |
| MiniMax-M2.7 | $0.05 | $0.15 | $0.0017 | $0.0345 | $0.414 |
30.000 token đầu vào và 1.500 token đầu ra mỗi yêu cầu. Giá trên 1 triệu token là giá hiện hành và thay đổi cùng với biểu phí của chúng tôi; cột OpenRouter hiển thị giá tham chiếu cho cùng khối lượng công việc.
Giá trên 1 triệu token hiện tại: đầu vào $0.015, đầu ra $0.10. Đối với các chỉnh sửa nhỏ cho một hiệu ứng đã tồn tại, GLM-5.3-Flash có ngữ cảnh 390K và tối đa 8.192 token mỗi câu trả lời, quá đủ để điều chỉnh màu sắc hoặc thời gian.
Để thấy một ngày dài hơn với agent cộng dồn như thế nào, cách làm Claude Code rẻ hơn đi qua các thói quen giúp giảm đầu vào.
Trước khi phát hành#
Mã và các hiệu ứng được cấp phép MIT. Phông chữ Patch Pixel trong gallery/fonts không được MIT bao phủ (xem NOTICE.md trong repo), và một số hiệu ứng phỏng theo mã MIT của Hugo Duprez và Hollow Crown. Nếu game của bạn phát hành kèm phông chữ, hãy đọc NOTICE.md trước.
Để bắt đầu với khóa và danh sách mô hình của riêng bạn, xem tài liệu CheapTokens và trang giá trực tiếp.
