Công cụ vẽ pixel art

Công cụ vẽ pixel art là gì?

Công cụ vẽ pixel art là trình vẽ dựa trên một lưới cố định: thay vì nét vẽ tự do, bạn đặt từng pixel, mỗi lần một ô vuông. Chính giới hạn đó tạo nên sức hút của pixel art: sprite trong game, icon phong cách retro, avatar và tranh minh họa 8-bit đều được làm bằng cách chọn kỹ từng pixel một.

Trình chỉnh sửa này có đủ bộ công cụ quen thuộc của một sprite editor: bút chì, tẩy, tô vùng và chọn màu trên lưới từ 8x8 đến 64x64, cùng hoạt ảnh theo từng khung hình với bản xem trước trực tiếp. Bạn có thể xuất kết quả thành ảnh PNG sắc nét ở mọi kích thước, GIF động hoặc sprite sheet sẵn sàng cho game engine.

Vì đây là Coddy, bức vẽ của bạn cũng chính là code. Chỉ một cú nhấp, lưới pixel trở thành mảng 2 chiều trong Python, đoạn code canvas JavaScript, tranh CSS box-shadow, SVG hoặc tệp CSV mở được bằng bảng tính. Đây là cách thú vị để thấy rằng hình ảnh thực ra chỉ là các mảng giá trị màu.

Bạn sẽ học được gì khi vẽ pixel art

• Hình ảnh là một mảng 2 chiều: mỗi pixel là một phần tử mang một giá trị màu. Phần xuất code hiển thị bức vẽ đúng như vậy, thành các hàng và cột mã hex.
• Bảng màu nhỏ trông đẹp hơn. Sprite cổ điển dùng từ 4 đến 32 màu; tự giới hạn số màu buộc bạn vẽ hình gọn gàng và dáng dễ nhận ra.
• Hoạt ảnh chỉ là các khung hình. Một chu kỳ bước đi hay một cái chớp mắt là vài lưới hơi khác nhau được hiển thị nối tiếp; phần xuất GIF phát lại chúng ở tốc độ bạn chọn.
• Phóng to pixel art cần nội suy nearest-neighbor. Xuất ở mức 16x hoặc 32x thì các ô vuông vẫn sắc nét; phóng to kiểu làm mịn sẽ khiến chúng bị nhòe.

Cách vẽ pixel art từng bước

1. 1

   Chọn kích thước lưới

   Bắt đầu nhỏ: 16x16 hoặc 32x32. Lưới nhỏ buộc bạn vẽ hình đơn giản, dễ nhìn; phần lớn sprite game cổ điển có kích thước 16x16 hoặc 32x32. Bạn có thể đổi kích thước sau mà không mất bức vẽ.

2. 2

   Phác hình dáng tổng thể

   Dùng bút chì để vẽ viền và công cụ tô để phủ các vùng lớn. Vẽ hình dáng chung bằng một màu trước, sau đó mới thêm chi tiết. Nhấp chuột phải (hoặc dùng tẩy) để xóa một pixel.

3. 3

   Đổ bóng với bảng màu nhỏ

   Chọn 2 hoặc 3 sắc độ cho mỗi chất liệu: một màu nền, một màu sáng và một màu tối. Bảng màu có sẵn được sắp xếp để bạn dễ tìm các dải màu này, còn công cụ chọn màu lấy được bất kỳ màu nào đã có trên canvas.

4. 4

   Tạo hoạt ảnh (tùy chọn)

   Nhân bản khung hình, dịch vài pixel rồi nhấn phát. Hai hoặc ba khung hình là đủ cho một cái chớp mắt, một cú nảy hay ngọn lửa bập bùng.

5. 5

   Xuất tranh

   Tải xuống PNG với tỷ lệ phóng tối đa 32x, GIF động hoặc sprite sheet chứa mọi khung hình trên một hàng. Hoặc mở bảng code và sao chép tranh dưới dạng Python, JavaScript, CSS, SVG hay CSV.

Tra cứu nhanh pixel art

Các kích thước canvas và định dạng xuất phổ biến, cùng lúc nào nên dùng từng loại.

Ví dụ pixel art để thử

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Những lỗi thường gặp khi vẽ pixel art

• Bắt đầu với lưới 64x64. Canvas lớn che giấu hình dáng yếu; hãy học trên lưới 16x16, nơi mỗi pixel là một quyết định.
• Dùng quá nhiều màu. Nếu sprite có 40 màu thì nó chẳng còn phong cách. Chọn một dải màu nhỏ cho mỗi chất liệu và giữ nguyên.
• Phóng to ảnh xuất khi bật làm mịn. Pixel art phải được phóng to bằng nearest-neighbor (công cụ này làm sẵn cho bạn), nếu không sẽ thành một mảng nhòe nhoẹt.
• Xuất sprite trên nền trắng. Hãy giữ nền trong suốt cho mọi thứ sẽ đưa vào game hoặc đặt chồng lên nội dung khác.
• Tạo hoạt ảnh với quá nhiều khung hình. Cảm giác game cổ điển đến từ 2 đến 4 khung hình chọn lọc, không phải 16 khung gần như giống hệt nhau.

Câu hỏi thường gặp về công cụ vẽ pixel art