Trình tạo Pixel Art

Công cụ pixel art dành cho việc vẽ có chủ đích trên lưới

Pixel art được thiết kế từng ô một. Trình biên tập bắt đầu bằng lưới trống trong suốt và lưu một màu, hoặc trạng thái trong suốt, cho mỗi điểm ảnh logic. Công cụ không biến ảnh chụp thành các khối màu trung bình; hãy dùng Công cụ pixel hóa ảnh cho quy trình đó. Công cụ cũng không tạo hình từ câu lệnh AI.

Lưới nhỏ buộc bạn làm rõ hình dáng tổng thể, còn lưới lớn cho thêm chỗ để đánh bóng và thêm phụ kiện. Đây là những điểm khởi đầu thực tế, không phải quy định của nền tảng:

Giữ điểm ảnh sắc nét khi phóng to

Khi xuất PNG, công cụ dùng tỷ lệ nguyên và tắt làm mịn ảnh. Vì vậy, một điểm ảnh nguồn 16×16 sẽ thành hình vuông chính xác 4×4, 8×8 hoặc lớn hơn thay vì có cạnh nhòe. Nền caro và đường lưới tùy chọn chỉ là chỉ dẫn trong giao diện, không bao giờ xuất hiện trong tệp. Các ô trong suốt vẫn trong suốt.

SVG dùng các hình chữ nhật có cạnh sắc nét và bỏ qua ô trong suốt. JSON dự án giữ lại lưới logic có thể chỉnh sửa cùng bảng màu làm việc. Đây là định dạng dự án Hyperion, không thay thế các định dạng có lớp của ứng dụng pixel art trên máy tính.

Công cụ vẽ và cách hoạt động của đối xứng

• Bút chì tô màu ô và nối các điểm lấy mẫu khi con trỏ di chuyển nhanh để nét không bị đứt.
• Tẩy đưa ô về trạng thái trong suốt.
• Tô vùng thay đổi vùng liền nhau theo bốn hướng; các vùng chỉ chạm nhau theo đường chéo vẫn tách biệt.
• Hút màu chọn màu của một ô có sẵn. Lấy mẫu ô trong suốt sẽ chuyển sang công cụ tẩy.
• Vẽ đối xứng phản chiếu thao tác từ trái sang phải, từ trên xuống dưới hoặc cả hai. Hàng và cột chính giữa chỉ được áp dụng một lần.

Chuột, bút cảm ứng, thao tác chạm và bàn phím đều dùng chung một lưới logic. Đưa tiêu điểm vào khung vẽ, dùng phím mũi tên để di chuyển ô đang chọn, rồi nhấn Space hoặc Enter để áp dụng công cụ. P, E, F và I chọn công cụ; Delete để xóa; Ctrl/Cmd+Z để hoàn tác.

Cách hoạt động trong trình duyệt và tài liệu kỹ thuật

Trình biên tập sử dụng Canvas API, Pointer Events và tính năng điều khiển làm mịn ảnh của trình duyệt. PNG được tạo bằng API xuất Blob của canvas. Tương tác bàn phím và con trỏ được thiết kế theo hướng dẫn về khả năng thao tác của WCAG 2.2.

Tác phẩm, tên và bảng màu chỉ nằm trong trạng thái dự án cục bộ của trình duyệt, không được thêm vào URL hay dữ liệu gửi qua máy chủ của chúng tôi. Trình duyệt vẫn thực hiện yêu cầu tải trang thông thường khi đổi bước trong luồng. Nếu không dùng được bộ nhớ của thẻ, trình biên tập đầy đủ trên một trang vẫn tiếp tục chạy trong bộ nhớ, nhưng luồng sẽ không chuyển tiếp để tránh làm mất dự án mà người dùng không hay biết.