Cách phóng pixel art không mờ

Vì sao đổi kích thước thông thường làm nhòe pixel art

Mọi công cụ đổi kích thước tổng quát — trong trình duyệt, xem thu nhỏ hệ điều hành, mặc định Photoshop, tối ưu tự động framework web — dùng một dạng nội suy. Phổ biến nhất là song tuyến tính, còn các phương pháp tốn chi phí tính toán hơn như bicubic và Lanczos là sự tinh chỉnh của cùng ý tưởng: để tính một pixel mới, xem các pixel lân cận trong ảnh nguồn và pha trộn theo khoảng cách.

Đó là cách đúng với ảnh chụp. Ảnh chụp không thực sự có mép cứng ở cấp pixel — chuyển sắc trên má hoặc nền làm mờ vốn phải trông mượt, và pha trộn các mẫu lân cận sẽ tái tạo thứ gần với ảnh chụp có độ phân giải cao hơn. Phép tính giả định ảnh là phiên bản lấy mẫu của một cảnh liên tục.

Pixel art không phải ảnh chụp đã lấy mẫu. Mỗi pixel là quyết định rời rạc, có chủ ý của họa sĩ: đúng màu, đúng ô, ranh giới cứng với ô bên. Khi công cụ song tuyến tính phóng lên, nó tạo pixel gradient giữa các màu vốn không nên trộn vì không biết ranh giới là có chủ ý. Kết quả là vẻ mềm, mờ quen thuộc: nét đen sắc thành quầng xám, vùng màu phẳng có gradient nhẹ không tồn tại trong nguồn.

Láng giềng gần nhất: cách sửa cơ bản

Láng giềng gần nhất đặt một câu hỏi khác khi phóng thu. Với mỗi pixel đầu ra, nó không pha trộn gì — chỉ sao chép màu của pixel nguồn gần nhất. Phóng sprite 16×16 lên 64×64 bằng lân cận gần nhất nghĩa là mỗi pixel nguồn thành khối đặc 4×4 cùng màu. Không tạo màu mới, không làm mềm mép. Đây là yêu cầu tối thiểu để pixel art vẫn trông như pixel art sau khi phóng thu.

Phần lớn công cụ để tùy chọn rõ thay mặc định vì láng giềng gần nhất kém cho ảnh chụp: khối, răng cưa. Bạn phải chọn:

• Photoshop / GIMP: đặt phương pháp lấy mẫu lại thành “Nearest Neighbor” (Photoshop) hoặc “None” (GIMP) trước khi phóng thu.
• ImageMagick: -filter point trước -resize.
• Canvas API (trình duyệt/JS): ctx.imageSmoothingEnabled = false trước khi vẽ ảnh đã phóng thu.
• Python / Pillow: Image.resize(size, Image.NEAREST).

Vì sao hệ số phóng phải là một số nguyên

Chỉ láng giềng gần nhất chưa đủ. Điều kiện hai là hệ số nguyên: 2x, 3x, 4x, không 1,5x hay rộng tùy ý nằm giữa bội sạch.

Ở tỷ lệ nguyên, mỗi pixel nguồn ánh xạ vào khối pixel đầu ra cùng kích thước: 3x nghĩa mỗi pixel thành ô vuông 3×3 sạch. Lưới đồng đều và mỗi pixel gốc được thể hiện ngang nhau, nhất quán.

Ở tỷ lệ không nguyên như 1,5x, một số pixel nguồn được biểu diễn bằng khối 2×2 pixel đầu ra, số khác 1×1 hoặc 2×1 lệch, vì lưới lấy mẫu không chia đều. Về kỹ thuật ảnh vẫn là “láng giềng gần nhất” nên không pha màu, nhưng kích thước pixel khắp ảnh trở nên không đều rõ rệt: một số khối dày hơn, đường chéo thẳng gốc phát triển sự so le trước đây không có. Nó tạo cảm giác sai tinh tế khó định vị thay vì phóng lớn sạch.

Thực tế, bạn nên chọn kích thước đích bằng cách tính ngược từ bội số nguyên của kích thước nguồn, không đi từ một mục tiêu pixel cố định. Nếu nguồn là 48×48 và cần hiển thị khoảng 150px, dùng 3x (144px) hoặc 4x (192px), để CSS hay bố cục xử lý chênh lệch thay vì yêu cầu đúng 150px.

Giữ sắc trong CSS

Co giãn tệp chỉ là nửa vấn đề trên web. PNG đã phóng gần nhất vẫn mờ lại nếu trình duyệt đổi cỡ khi vẽ bằng làm mượt mặc định. Cách sửa là thuộc tính CSS áp dụng cho đối tượng hiển thị <img> hoặc phần tử canvas:

image-rendering: pixelated;

Bảo browser dùng gần nhất khi đổi ảnh hiển thị, cả phần không kiểm soát như zoom người dùng hay container responsive. Mọi browser chính hiện hỗ trợ. Thay cũ kém đồng nhất là image-rendering: crisp-edges;, một số trình duyệt xử lý giống hệt, còn số khác coi là thuật toán làm sắc hơi khác; riêng với đồ họa pixel, pixelated là lựa chọn dễ dự đoán hơn.

Lọc Point trong game engine

Engine trò chơi có cùng vấn đề ở lớp dưới vì sprite đổi tỷ lệ theo zoom camera, độ phân giải màn hình và pixel-per-unit khi chạy, không chỉ lúc xuất. Mọi engine có lọc texture; lựa chọn an toàn cho pixel art luôn là biến thể “point” hoặc “nearest”:

• Unity: Filter Mode đặt Point (no filter) trong cài đặt nhập texture, được trình bày kỹ trong Hướng dẫn nhập sprite Unity.
• Godot: thuộc tính lọc của texture đặt Nearest, theo từng texture hoặc mặc định toàn dự án cho dự án pixel art 2D.
• Unreal: Đặt Texture Group hoặc Filter thành Nearest Neighbor trên texture sprite.

Giữ lọc bilinear/linear mặc định là lý do thường nhất game pixel art mờ trong engine dù tệp nguồn sắc.

Thuật toán phóng pixel art chuyên dụng

Láng giềng gần nhất trung thực nhưng khối: zoom cao đường chéo/cong có bậc rõ vì thuật toán không hiểu đường, chỉ pixel. Một họ thuật toán dành pixel art làm mượt bậc không mờ bằng mẫu cục bộ thay xử lý mỗi pixel riêng.

• Scale2x / Scale3x (còn gọi AdvMAME2x/3x): đơn giản nhất trong họ thuật toán. Nó xem bốn pixel lân cận trực tiếp của mỗi pixel và khi phát hiện mẫu mép chéo, chia pixel phóng lớn để mép trông nghiêng thay vì bậc thang. Nhanh và là mặc định hợp lý cho sprite đơn giản có đường nét sạch.
• EPX / hqx (hq2x, hq3x, hq4x): mở rộng cùng ý tưởng bằng bảng tra mẫu pixel lân cận lớn hơn và nhiều hình dạng đầu ra hơn cho mỗi mẫu, tạo kết quả tròn hơn, giống đường cong hơn. Nó hoạt động tốt với đường nét sprite vẽ tay và kém hơn với pixel art có dither hoặc nhiễu, nơi việc khớp mẫu nhận nhầm mép.
• xBRZ: một hậu duệ mới hơn, thường có chất lượng cao hơn trong cùng dòng thuật toán, được tinh chỉnh để tạo đường chéo và đường cong mượt hơn với ít lỗi hơn trên sprite chi tiết. Đây là thuật toán phía sau các bộ lọc phóng lớn trong nhiều giao diện trình giả lập.

Cả ba có cùng giới hạn: suy ra cạnh từ mẫu pixel cục bộ, nên tốt nhất với đồ họa có viền sạch có chủ ý và khó xử lý dithering cách điệu, nhiễu hoặc chuyển màu tạo bằng pixel xen kẽ. Đây là kỹ thuật phổ biến trong pixel art cũ mà các thuật toán có thể nhầm là cạnh cần làm mượt. Với phần lớn sprite, phóng hệ số nguyên bằng láng giềng gần nhất an toàn và dễ dự đoán hơn; chỉ dùng hqx hoặc xBRZ khi bậc thang trên đường cong thực sự gây khó chịu và đã kiểm tra kết quả ở vùng dithering.

Vì sao công cụ phóng lớn AI thường không phù hợp

Công cụ phóng AI tổng quát, loại huấn luyện thêm chi tiết ảnh vào ảnh mờ, giải quyết vấn đề đối lập với nhu cầu pixel art. Chúng học bịa chi tiết hợp lý như da, vải, lá từ đầu vào thấp, giả định nguồn mất chi tiết do giảm hoặc nén và nhiệm vụ là đoán lại.

Pixel art không mất chi tiết nào. Mỗi pixel đã chính xác theo ý họa sĩ, ở đúng độ phân giải họ chọn. Đưa qua mô hình chuyên tạo thêm texture thiếu sẽ cho kết quả dễ đoán: mép mượt, gradient tự tạo, và chi tiết phong cách nhỏ như một pixel sáng hay ranh giới màu cứng có chủ ý bị xóa hoặc thay bằng thứ hơi giống tranh vẽ, chẳng giống bản gốc. Một số công cụ nay có chế độ “pixel art” hay “anime” gần với lấy mẫu gần nhất có ràng buộc kèm làm sạch, đáng thử từng trường hợp. Nhưng chế độ mặc định cho ảnh chụp gần như chắc chắn làm mờ pixel art thay vì giữ nguyên.

Nếu sprite vốn từ AI thay vì vẽ pixel art thực, có lẽ không trên lưới sạch và không cách phóng nào sửa; xem hướng dẫn prompt sprite AI để có nguồn sạch hơn ngay từ đầu.

Danh sách kiểm tra thực tế

1. Xác nhận nguồn thực là pixel art trên lưới nhất quán, không phải bản xuất raster cạnh mềm.
2. Chọn hệ số nguyên (2x, 3x, 4x) dựa trên kích thước mục tiêu, không làm ngược lại.
3. Dùng lấy mẫu gần nhất/point, không dùng bilinear hay bicubic mặc định.
4. Áp dụng image-rendering: pixelated cho mọi phần tử web có thể đổi kích thước ảnh lần nữa.
5. Đặt lọc texture Point/Nearest trong engine, riêng với tỷ lệ xuất.
6. Chỉ dùng hqx/xBRZ nếu bậc thang của phép láng giềng gần nhất thông thường thực sự gây khó chịu, và kiểm tra kết quả trên các vùng giả lập sắc độ bằng chấm trước.

Nếu không muốn tự thiết lập tay, công cụ Phóng lớn pixel art thực hiện ba bước đầu cho bạn: chọn hệ số nguyên từ 2x đến 32x, công cụ nhân mỗi pixel nguồn bằng lấy mẫu lân cận gần nhất, nên không có gì bị pha trộn, rồi xuất PNG.

Câu hỏi thường gặp