Có một kiểu repo GitHub mình rất thích: repo không cố gắng giải quyết bài toán to tát, chỉ làm gọn một việc cụ thể và làm cho tới. patch-gg/pixelfx là kiểu đó. Nó là thư viện 244 hiệu ứng pixel art và animation cho game, mỗi hiệu ứng chỉ là một file code nhỏ, không phụ thuộc thư viện nào ngoài.
Vấn đề nó giải quyết khá thực tế. Dân làm game indie, nhất là game 2D pixel, luôn có một danh sách dài những thứ cần vẽ hiệu ứng: lửa trại, nổ thùng, chém kiếm, hồi máu, đóng băng, sét đánh, mở rương. Tự vẽ từng cái trong Aseprite tốn cả buổi mỗi hiệu ứng, thuê artist thì đắt. pixelfx đưa ra một lời giải: bạn lấy code chạy luôn trên canvas, hoặc export ra sprite sheet cho bất kỳ engine nào.
Nó chứa gì cụ thể
Catalog chia thành 21 nhóm, mỗi nhóm 10 đến 13 hiệu ứng. Đáng kể nhất là nhóm moves gồm 12 đòn đánh hoàn chỉnh (arrow shot, fireball throw, ground pound, holy smite…), nhóm fire 12 cái, explosions 12 cái, sci-fi 12 cái gồm cả glitch, hologram, jetpack. Còn có critters 12 con (dơi, chim, bướm, cá bơi theo đàn), transition 10 kiểu chuyển cảnh (crt off, iris, diamond wipe…), weather 12 kiểu thời tiết.
Mỗi hiệu ứng nằm trong một file duy nhất ở src/fx/<category>/<name>.js. Đọc được, sửa được, không có gì bí ẩn. Đây là điểm mình đánh giá cao hơn mấy thư viện hiệu ứng đóng gói sẵn: bạn muốn màu lửa xanh thì truyền palette vào, không cần mở Photoshop.
Vì sao repo này đang được chú ý
Số sao hiện tại là 1.063, con số khiêm tốn so với mấy repo trending, nhưng repo mới tạo ngày 30/10/2026 và cập nhật ngày 31/10/2026. Tức là nó mới tinh, mới được đẩy lên và đã hút hơn nghìn sao chỉ trong thời gian rất ngắn. Với một thư viện hiệu ứng game 2D thì tốc độ đó nói lên nhu cầu thật.
Điểm khác biệt nằm ở chữ “skill” trong mô tả: repo kèm một Claude Code skill để bạn tự làm hiệu ứng mới theo quy trình draft, render, xem, tinh chỉnh. Đây là hướng đi đang lên trong cộng đồng dev: dùng agent để generate asset từ reference, thay vì ngồi pixel từng frame. Tác giả ghi rõ phương pháp lấy từ Hugo Duprez và các hiệu ứng mã nguồn mở ở Sprite Fusion, phần src/core/sim.js và vài hiệu ứng có ghi chú ở đầu file là phỏng theo code của ông ấy. Minh bạch chuyện vay mượn, mình thích kiểu đó.
Cài và chạy thử
Cài từ GitHub thẳng bằng npm:
npm i github:patch-gg/pixelfxDùng trong browser game, không cần dependency:
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";
const frame = createFrame(320, 180); // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 }); // also: flip, angle, seed, palette, light...
function tick(dt) {
fx.update(dt);
clearFrame(frame);
fx.draw(frame, "back"); // behind characters
drawCharacters();
fx.draw(frame, "front");
composite(frame, img.data, backgroundColor); // color, then light added on top
ctx.putImageData(img, 0, 0); // scale up with image-rendering: pixelated
}Nếu dùng Godot, Unity, GameMaker, Defold, LÖVE hay Bevy thì đi đường sprite sheet:
node tools/render.mjs ice/frost-nova --sheetLệnh này xuất ra một PNG nền trong suốt dạng lưới, kèm JSON kiểu Aseprite gồm rect từng frame, duration, và meta.pixelfx chứa fps, loop, columns, pivot. Loader atlas của Phaser đọc được, importer Aseprite cho Godot và Unity cũng đọc được. Muốn xuất cả thư viện một lượt thì chạy node tools/sheets.mjs, file ra ở thư mục sheets/.
Đổi màu thì truyền palette, một dải hex từ tối tới sáng:
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'Cái mình thấy đáng nói là phần “acting”. 61 hiệu ứng có nhân vật và 12 moves mô tả luôn động tác cơ thể theo thời gian: wind-up trước khi ra đòn, freeze khi chạm, mục tiêu bị đẩy lùi, rồi recovery. Đổi createFx thành createAct là chạy cả cảnh gồm nhân vật lẫn mục tiêu. Một hiệu ứng đứng riêng trông như sticker dán lên màn hình, cái làm nên cảm giác “đấm trúng” là cái thân người xung quanh. Repo xử lý đúng chỗ đó, và đó là lý do mình tin nó được chia sẻ nhiều.
Ai nên dùng
Rõ nhất là dev làm game 2D một mình hoặc team nhỏ, cần một bộ hiệu ứng đủ tốt để prototype nhanh rồi thay dần bằng art riêng. Tiếp theo là người làm game jam: 244 hiệu ứng có sẵn, MIT license, vài giờ là có bản build trông ra hồn. Cả dev làm web muốn hiệu ứng pixel cho landing page hay demo canvas cũng dùng được, vì nó chạy độc lập không cần framework.
Với người đang tìm hiểu cách viết hiệu ứng pixel bằng code, đọc src/fx/ là một cách học. Code ngắn, mỗi file tự chứa.
Ưu và nhược
Ưu điểm: không dependency, MIT license nên thương mại thoải mái, export đa engine, palette đổi màu không cần sửa code, và phần acting là thứ ít thư viện hiệu ứng miễn phí nào làm tới. Tài liệu có gallery live ở patch-gg.github.io/pixelfx để xem trước từng cái.
Hạn chế phải nói thẳng: repo mới 1 ngày tuổi tính tới lúc cập nhật, API có thể còn đổi. Số hiệu ứng trong mô tả gốc là 232 nhưng README ghi 244, đây là chi tiết nhỏ cho thấy thư viện đang lớn lên nhanh, tài liệu chưa theo kịp hoàn toàn. Chất lượng 244 hiệu ứng chắc chắn không đều, có cái dùng được luôn, có cái chỉ để tham khảo. Và nếu bạn cần art style riêng biệt cho game thương mại, đây là điểm khởi đầu tốt, không phải đích đến.
Repo này đáng để clone về nghịch thử một buổi chiều. 244 hiệu ứng, 12 moves có acting đầy đủ, một lệnh npm và một lệnh export sheet là đủ để bạn biết nó có hợp với dự án của mình hay không.
Câu hỏi thường gặp
pixelfx có dùng được cho game thương mại không?
Có. Repo dùng MIT license nên bạn thoải mái dùng cho dự án thương mại. Tuy nhiên nên xem đây là điểm khởi đầu: nếu cần art style riêng biệt, bạn sẽ phải thay dần bằng art tự làm.
pixelfx dùng được với Godot, Unity hay GameMaker không?
Được. Ngoài việc chạy trực tiếp trên canvas trong browser game, bạn export ra sprite sheet bằng lệnh node tools/render.mjs ice/frost-nova --sheet. File PNG đi kèm JSON kiểu Aseprite mà importer Aseprite cho Godot và Unity đọc được, loader atlas của Phaser cũng đọc được.
Làm sao đổi màu hiệu ứng trong pixelfx?
Truyền palette là một dải hex từ tối tới sáng, không cần sửa code. Ví dụ khi render bằng node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'. Muốn màu lửa xanh thì chỉ cần đổi palette truyền vào.
