Phóng lớn pixel art
Phóng pixel art không mờ — hệ số nguyên, một khối đặc mỗi pixel
Thả sprite ở đây
hoặc nhấn để chọn tệp — tối đa 20 mỗi lần
Mỗi pixel nguồn được chép thành khối vuông đặc. Không tải lên, không pha trộn.
Tỷ lệ
Chỉ dùng số nguyên. Hệ số như 1.5× sẽ khiến một số pixel thành khối 2×2 và các pixel khác thành khối 1×1, đó là lý do kết quả “lân cận gần nhất” vẫn trông sai.
Có khi tệp được xác định là bản phóng hệ số nguyên từ nguồn nhỏ hơn.
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}Nếu không có thiết lập này, trình duyệt làm nhòe lại sprite mỗi khi đổi kích thước để hiển thị.
Trước khi bắt đầu với Phóng lớn pixel art
Phóng pixel art/sprite gần nhất số nguyên giữ cứng không mờ.
Phù hợp nhất cho
- Phóng sprite, ô, biểu tượng pixel art và tài nguyên trò chơi nhỏ
- Giữ mỗi pixel nguồn thành khối cạnh cứng
- Xử lý tối đa 20 PNG có tỷ lệ tương tự trong một lần
Biết trước bắt đầu
- Nhân pixel sẵn có, không tạo chi tiết hoặc phóng ảnh chụp
- Hệ số là số nguyên từ 2× đến 32×
- Đầu ra PNG giữ mép sắc và trong suốt
Tiếp tục quy trình
Cách sử dụng
1. Thả các sprite vào
Tối đa 20 tệp, giải mã browser không tải lên. Đọc từng pixel rồi phán định: thật sự Nguồn 1× sẵn sàng để phóng thu; đã N× nghĩa là tệp là bản nhân khối chính xác của bản gốc nhỏ hơn, và bảng đề nghị khôi phục trước; mép mềm nghĩa là bảng màu quá lớn cho pixel art và các ranh giới đã bị pha trộn bởi một lần đổi kích thước trước đó. Kiểm tra là việc đọc pixel, không phải bảo đảm — nó cho biết tệp trông thế nào để bạn quyết định, và không bao giờ tuyên bố sửa được điều không thể.
2. Chọn hệ số nguyên
Chọn một nút có sẵn hoặc nhập số nguyên từ 2 đến 32. Hàng mỗi tệp hiển thị toàn bộ quy trình trước khi xác nhận — 32×32 → 8× → 256×256, hoặc 256×256 → restore to 32×32 → 8× → 256×256 khi bật tùy chọn khôi phục. Khôi phục lấy một pixel đại diện mỗi khối được phát hiện, là pixel góc trên trái, rồi áp dụng hệ số của bạn cho ảnh nhỏ hơn đó; chỉ khả dụng khi tệp thực sự được phát hiện là bản phóng nguyên. Trình duyệt giới hạn kích thước canvas, nên hệ số tạo ảnh vượt khoảng 16,384 pixel một cạnh hoặc tổng 256 megapixel sẽ bị từ chối, kèm hệ số lớn nhất vừa giới hạn, thay vì âm thầm đưa bạn ảnh trống.
3. Kiểm tra bản xem trước, rồi tải xuống
Bảng trước và sau đều dựng bằng image-rendering: pixelated, nên những gì bạn thấy là nội dung của tệp chứ không phải kết quả làm mượt của trình duyệt. Tải một kết quả hoặc tất cả kết quả dưới dạng ZIP. Đầu ra luôn là PNG: định dạng mất dữ liệu sẽ đưa các cạnh mềm có nhiễu vòng trở lại một ảnh vốn được tạo ra để giữ cạnh sắc. Đoạn CSS trong bảng điều khiển là nửa còn lại của công việc: chép vào bảng định kiểu để trình duyệt không hoàn tác công sức khi đổi kích thước sprite để hiển thị.
Vì sao hệ số phóng phải là số nguyên
Phóng láng giềng gần nhất nghĩa pixel đầu ra chép màu nguồn gần nhất, không trung bình nên không màu mới hay cạnh mềm. Nhưng chưa đủ. Hệ số phải nguyên, phần nhiều công cụ âm thầm sai.
Ở 3×, mỗi pixel nguồn thành ô vuông 3×3 giống nhau. Lưới đồng đều và mỗi pixel gốc chiếm đúng cùng lượng ảnh đầu ra. Ở 1,5×, lưới lấy mẫu không còn chia đều: hai pixel nguồn phải chia ba pixel đầu ra, nên một thành khối rộng 2, pixel cạnh thành khối rộng 1, xen kẽ khắp ảnh. Vẫn không pha màu; về kỹ thuật vẫn là láng giềng gần nhất, nhưng kích thước pixel không nhất quán rõ rệt. Đường thẳng bị so le không đều, đường chéo có bậc thang vốn không có trong đồ họa, dithering bàn cờ thành sọc. Cảm giác là sai khó tả thay vì mờ rõ, nên thường lọt qua kiểm tra.
Thực tế nên chọn cỡ ngược. Sprite 48×48 cần khoảng 150 pixel thì xuất 3× (144) hoặc 4× (192), để CSS hay lưới hấp thụ chênh, không yêu cầu đúng 150. Công cụ nhận hệ số thay rộng đích vì không có cách đúng để chạm mục tiêu pixel tùy ý với pixel art, nên không cung cấp.
Câu hỏi
Có sửa được sprite đã mờ không?
Không, không gì khác cũng làm được. Khi bilinear/bicubic trung bình màu gần thành pixel trung gian, ranh giới cứng gốc mất: thông tin chỗ màu dừng bị bỏ khi ghi pixel giữa. Làm sắc tăng tương phản không phục hồi lưới màu rời, AI bịa chi tiết hợp lý không lấy thật. Công cụ đánh dấu là mép mềm để bạn biết trước khi dành thời gian cho nó. Cách sửa là quay lại nguồn gốc chưa nhòe rồi phóng thu nguồn đó.
Vì sao chỉ có PNG?
PNG không mất dữ liệu nên pixel trong tệp chính là pixel đã tính toán. JPG dành cho ảnh chụp và loại bỏ chi tiết tần số cao. Ranh giới sắc giữa hai màu phẳng là chi tiết có tần số cao nhất, nên mỗi mép xuất hiện quầng và lem màu, đúng những lỗi mà công cụ này muốn tránh. WebP mất dữ liệu cũng có vấn đề tương tự nhưng nhẹ hơn. Cung cấp hai định dạng đó sẽ là cung cấp cách làm mất công sức vừa bỏ ra.
Còn hqx, xBRZ và scale2x thì sao?
Thuật toán đọc lân cận, làm mượt bậc thang chéo/cong không mờ. Tốt trên nét sạch, xấu rõ trên dither/nhiễu vì nhận dither là mép và làm mượt chi tiết cố ý. Công cụ không thực hiện vì gần nhất nguyên đơn giản dự đoán được, mặc định nên dùng. Hướng dẫn của chúng tôi hướng dẫn phóng lớn pixel art trình bày từng công cụ thực sự làm gì và khi nào đáng dùng.
Vì sao ảnh trông nhòe trong trình duyệt sau khi tải xuống?
Vì trình duyệt đổi kích thước lại khi kết xuất bằng làm mượt mặc định. Mọi vùng chứa đáp ứng, zoom trang hoặc màn hình mật độ cao đều có thể kích hoạt, kể cả tệp đã đúng kích thước dự định. Thêm image-rendering: pixelated vào <img> hoặc phần tử canvas — đoạn mã trong bảng công cụ chính là cách này — và trình duyệt dùng lấy mẫu lân cận gần nhất. Trong game engine, cùng thiết lập nằm trên texture: lọc Point hoặc Nearest, đặt riêng với hệ số xuất.
Có hoạt động với ảnh chụp không?
Vẫn chạy nhưng láng giềng gần nhất sai cho ảnh chụp. Ảnh là mẫu của cảnh liên tục nên chuyển màu nên mượt; pha mẫu lân cận tái tạo gần ảnh độ phân giải cao hơn. Nhân mỗi pixel thành vuông cứng tạo khối thấy rõ không thêm chi tiết. Dùng đổi kích thước thường cho ảnh, giữ công cụ này cho đồ họa trên lưới.
Liên quan
Giải thích đầy đủ vì sao bilinear hỏng pixel art, point trong Unity/Godot và vị trí hqx/xBRZ nằm ở cách phóng lớn pixel art mà không làm nhòe. Nếu đồ họa là bảng gồm các khung hình thay vì sprite riêng, hãy cắt trước: Cắt sprite sheet chia sprite sheet thành PNG riêng có ranh giới đúng, và phóng thu từng khung sau đó giữ mọi khung trên cùng lưới.