Trình Chỉnh Sửa Nghệ Thuật Pixel

Pixel art sinh ra trong phần cứng, rồi chọn ở lại đó

Trong những thập niên đầu, pixel art không phải là thẩm mỹ mà là ràng buộc. Atari 2600 (Summer CES, 4 tháng 6 năm 1977) vẽ hình bằng Television Interface Adaptor phơi ra hai sprite "player" rộng 8 pixel và tái sử dụng chúng theo từng dòng quét; lập trình viên học cách "đua chùm tia" để có thêm màu hiển thị cùng lúc. Commodore 64 (tháng 1 năm 1982) cung cấp tám sprite phần cứng 24×21 và bảng màu VIC-II 16 màu trở thành dấu ấn thị giác của cả một thập niên game châu Âu. NES (1985) dùng PPU Ricoh 2C02 với bảng màu chính khoảng 54 màu phân biệt được, trong đó 25 có thể đồng thời trên màn hình, chia ra một bảng nền 13 màu và bốn bảng phụ sprite 3 màu, và ô (tile) sprite 8×8 trở thành đơn vị thiết kế còn cảm nhận được trong pixel art ngày nay. Game Boy DMG-01 (1989) đẩy giới hạn xa hơn: bốn sắc thái của một màu duy nhất trên màn hình LCD phản chiếu 160×144 trông oliu dưới ánh sáng ban ngày. Không bảng màu nào trong số này được chọn vì đẹp; chúng được chọn theo điều con chip có thể làm với chi phí vài xu.

Đâu đó trong thập niên 1990, phương trình đảo chiều. Phần cứng đã đuổi kịp; tiền-render rồi 3D thời gian thực trở thành chuẩn cho sản phẩm ngân sách lớn. Pixel art có thể đã chết ở đó. Thay vào đó, nó trở thành thứ hiếm hơn: một lựa chọn thẩm mỹ có chủ ý. Daisuke Amaya, ký tên đơn giản là "Pixel", đã dành năm năm giữa giảng đường và một công việc toàn thời gian để ráp Cave Story, phát hành freeware ngày 20 tháng 12 năm 2004. Markus "Notch" Persson đăng phiên bản đầu tiên của Minecraft lên TIGSource ngày 17 tháng 5 năm 2009, với texture khối mặc định 16×16 pixel, định dạng kinh điển của resource pack đến tận bây giờ. Eric "ConcernedApe" Barone phát hành Stardew Valley ngày 26 tháng 2 năm 2016 sau khoảng bốn năm rưỡi phát triển một mình, tự vẽ từng sprite trong Paint.NET. Heart Machine ra Hyper Light Drifter (tháng 3 năm 2016); Maddy Thorson và Noel Berry ra Celeste (tháng 1 năm 2018), ban đầu là nguyên mẫu bốn ngày trên console tưởng tượng PICO-8 của Joseph White. Motion Twin phát hành Dead Cells tháng 8 năm 2018, "pixel art" ở đó thực ra là mô hình 3D được render ở độ phân giải thấp. Cùng nhau, các tựa này khiến không thể bảo vệ luận điểm pixel art chỉ là hoài niệm, đó là một phương tiện đương đại với quy ước, công cụ và ngôi sao riêng.

Vì sao lưới theo lũy thừa của hai và cách chọn lưới của bạn

Các kích thước canvas pixel art tiêu chuẩn, 8×8, 16×16, 32×32, 64×64, có nguồn gốc trực tiếp từ phần cứng console. Tile NES 8×8, sprite C64 24×21, OBJ Game Boy 8×8, đều là dữ liệu bitmap có thể đánh địa chỉ bằng số học lũy thừa của hai và đóng gói hiệu quả trong bộ nhớ. Sprite nhân vật 16×16 là hai tile NES xếp chồng; 32×32 là bốn. Quy ước này sống sót qua thời mà việc đánh địa chỉ bộ nhớ không còn quan trọng nữa, vì lúc đó các nghệ sĩ đã nội tâm hóa nhịp "một tile là 8 hoặc 16 pixel và chứa một hình duy nhất đọc được". Cách dùng thực tế của mỗi kích thước trong trình chỉnh sửa này: 8×8 cho icon, phác thảo emote Twitch và các phần tile rất nhỏ; 16×16 cho sprite nhân vật cơ bản, icon vật phẩm và định dạng texture kinh điển của Minecraft; 32×32 cho chân dung chi tiết hoặc các phần phụ kiện lớn hơn; 48×48 cho tileset có đổ bóng; 64×64 cho sprite tầm cỡ nhân vật chính và các cảnh nhỏ. Hãy bắt đầu nhỏ, pixel art được định nghĩa bởi độ phân giải thấp, và kỷ luật làm việc ở 16×16 hoặc 32×32 chính là điều tạo ra tác phẩm đọc được ở kích thước thumbnail.

Bảng màu, kỷ luật làm cho pixel art đọc được

Giới hạn bảng màu phần cứng đã trao cho pixel art đặc trưng định nghĩa thứ hai: kỷ luật màu áp đặt. NES chỉ cho phép tối đa bốn màu mỗi tile nền 8×8 (tính cả màu nền chung); Game Boy DMG chỉ thể hiện được bốn sắc xám-xanh cùng lúc. Phần cứng hiện đại không áp đặt điều gì trong số đó, bất kỳ nghệ sĩ pixel nào năm 2026 đều có toàn bộ không gian màu RGB 24 bit và alpha 8 bit đầy đủ. Tuy nhiên, cộng đồng phần lớn vẫn chọn làm việc trong các bảng màu 16, 32 hoặc 64 màu, và không phải vì làm dáng retro. Một bảng màu nhỏ buộc mọi quyết định màu phải có trọng lượng: nó áp đặt cấu trúc giá trị nhất quán, sắc bù được chọn có chủ ý, các màu được tái sử dụng giữa nhiều sprite để một cảnh đọc lên thống nhất thay vì hỗn loạn. Đó là lý do nhiều pixel art hiện đại trông có chủ đích theo cách mà nghệ thuật số nghiệp dư trung bình không có. Bảng màu là kỷ luật, giống ràng buộc 14 dòng của một bài sonnet.

Bốn bảng màu do nghệ sĩ ký tên thống trị bối cảnh hiện đại. PICO-8 (Joseph "zep" White, công bố ngày 9 tháng 5 năm 2014 tại Pico Pico Cafe với bản phát hành công khai năm 2015), mười sáu màu mà White truy nguyên dòng dõi từ Commodore 64, các tracker Amiga 500 và "thẩm mỹ chung của các phần cứng thập niên 80 khác". Nguyên mẫu Celeste năm 2015 được viết trên PICO-8 trong bốn ngày. DawnBringer DB16 và DB32 (Richard Fhager, 2007 trở đi), thiết kế cho công việc pixel vẽ tay, biểu cảm, thay vì bắt chước một phần cứng cụ thể. Nay đi kèm Aseprite và GIMP theo mặc định. Endesga 32 và 64 (Seth "ENDESGA"), dựng cho "pixel art và thiết kế duy vật" với độ tương phản cao và bão hòa cao. Theo số lượt tải thuần (192.000+ cho Endesga 32, 91.000+ cho Endesga 64 trên Lospec), nằm trong số các bảng màu của nghệ sĩ được dùng nhiều nhất trên Internet. Sweetie 16 (GrafxKid), trở thành bảng màu mặc định của console tưởng tượng TIC-80. Bản thân Lospec.com, do một nghệ sĩ tự gọi là skeddles thành lập năm 2017, là trung tâm cộng đồng chính: cơ sở dữ liệu bảng màu, tutorial, gallery (ra mắt tháng 1 năm 2023), giải đấu, và một kho tải về tất cả các bảng màu phần cứng ở các định dạng tương thích với Aseprite, Photoshop, Paint.NET và GIMP.

Một trình chỉnh sửa pixel trong trình duyệt thực sự hoạt động ra sao

Một trình chỉnh sửa pixel art trên web phải chiến đấu với những mặc định hữu ích của trình duyệt, mọi trình duyệt hiện đại đều áp dụng nội suy bilinear hoặc bicubic khi phóng ảnh, hợp với ảnh chụp nhưng phá hỏng pixel art (biến các pixel sắc nét thành đốm mờ). Giải pháp gồm hai cài đặt bổ trợ áp lên các lớp khác nhau. CSS image-rendering: pixelated trên phần tử canvas buộc bộ compositor của trình duyệt dùng phóng theo láng giềng gần nhất khi canvas hiển thị ở kích thước khác với backing store của nó, khi một canvas 16×16 bị kéo lên 512×512 trong CSS, mỗi pixel gốc trở thành một khối 32×32 các pixel y hệt với cạnh sắc. ctx.imageSmoothingEnabled = false trên context render 2D buộc các thao tác vẽ tự thân dùng láng giềng gần nhất khi phóng dữ liệu đầu vào. Thiếu một trong hai, bạn sẽ có ảnh mờ. Mô hình vẽ: một mảng 2D trong bộ nhớ chứa giá trị màu, một canvas có kích thước CSS lớn hơn nhiều so với backing store, và các công cụ làm thay đổi mảng rồi vẽ lại các ô liên quan bằng ctx.fillRect. Lớp lưới đè lên trên dưới dạng các đường rộng một pixel, có thể tắt để xem trước không vướng. Việc xuất PNG dùng canvas.toBlob(callback, 'image/png'), bất đồng bộ, mã hóa ngoài luồng chính. PNG là định dạng đúng vì hai lý do: không mất mát (mỗi pixel sống sót đến từng bit) và hỗ trợ alpha (nền trong suốt cho sprite game). JPEG là sai lầm, nén DCT của nó tràn ra cạnh các khối và đưa vào artifact dao động.

Sáu công cụ và việc chúng thực sự làm

• Bút chì (D), ghi một pixel duy nhất tại vị trí con trỏ. Để tránh khoảng hở khi con trỏ di chuyển nhanh giữa hai sự kiện chuột, công cụ vẽ ở mỗi khung hình một đường Bresenham từ vị trí trước đến vị trí hiện tại của con trỏ.
• Tẩy (E), giống cấu trúc với bút chì nhưng ghi màu nền, đưa pixel về trạng thái mặc định.
• Thùng sơn (F), thay thế mọi pixel liên thông cùng màu với điểm bấm. Dùng flood fill 4 hướng kết nối (láng giềng bắc/nam/đông/tây, không có chéo) để một đường chéo mỏng ngăn được thùng tràn ra, quy ước hợp với trực giác người dùng. Triển khai theo dạng lặp với stack chứ không đệ quy, vì flood fill đệ quy trên canvas lớn sẽ tràn stack lệnh JavaScript.
• Hút màu (I), đọc màu của pixel dưới con trỏ và đặt làm màu vẽ hiện tại. Một trong những công cụ được dùng nhiều nhất trong quy trình pixel art một khi bảng màu đã được lập.
• Đường thẳng (L), dùng thuật toán vẽ đường Bresenham (Jack Bresenham tại IBM, 1965), chỉ dùng phép cộng số nguyên và dịch bit, không chia, để bước giữa hai tọa độ pixel nguyên trong khi giữ một bộ tích lỗi. Nét răng cưa có chủ đích của Bresenham ở đây là phẩm chất thẩm mỹ tích cực, không phải artifact cần làm mượt.
• Hình chữ nhật (R), vẽ đường viền của một hình chữ nhật song song với trục. Hai cú bấm: cú đầu cố định một góc, cú thứ hai hoàn tất góc đối diện.
• Hoàn tác (Ctrl+Z), lịch sử đầy đủ từng bước.

Pixel art đi đâu, kích thước đầu ra trong thực tế

• Sprite game. Trường hợp gốc và vẫn quan trọng nhất, một kẻ địch 16×16, một nhân vật người chơi 32×32, một boss 48×48, một tile cỏ 16×16, tất cả ráp thành một sprite sheet để chạy. Toàn bộ kinh tế indie 2D dựa trên dòng chảy này.
• Emote Twitch. Twitch yêu cầu mỗi emote tùy biến ở ba kích thước cụ thể: 28×28 (dùng trong chat tiêu chuẩn), 56×56 (màn hình mật độ cao, nay là đa số người xem), 112×112 (bộ chọn emote). Emote tĩnh dưới 25 KB mỗi kích thước; emote động đến 1 MB và 60 khung hình. Quy trình pixel art là vẽ ở 28×28 với các hình cứng, đọc được, rồi phóng theo bội số nguyên không mất mát bằng phóng láng giềng gần nhất.
• Emoji tùy biến trên Discord. Kích thước Discord khuyến nghị là 128×128 với mức trần 256 KB; emoji được hiển thị thu nhỏ về 32×32 trong tin nhắn và 48×48 trong reaction. Yêu cầu định dạng vuông; hỗ trợ PNG và GIF.
• Favicon. Các favicon 16×16 / 32×32 / 48×48 mà trình duyệt hiển thị trong tab và bookmark là pixel art, dù người thiết kế có chủ ý hay không. Vẽ ở kích thước gốc trong trình chỉnh sửa này và xuất ra PNG sẽ cho favicon đọc lên gọn gàng, không có vầng anti-aliasing.
• Mạng xã hội. Pixel art nay là một dạng nghệ thuật thực thụ trên Instagram, TikTok và Tumblr. Sự kiềm chế của phương tiện này hợp với kích thước thumbnail, và một tác phẩm chỉn chu nhận ra được trong dòng tin do nhiếp ảnh và render 3D thống trị. Nhiều nghệ sĩ đăng các tác phẩm nhỏ hằng ngày dựng quanh một bảng màu cố định như Endesga 32 hoặc DawnBringer 16.
• Sự lên ngôi của các bộ sưu tập NFT. Bộ sưu tập CryptoPunks (Matt Hall và John Watkinson của Larva Labs, tháng 6 năm 2017) thiết lập khuôn mẫu: 10.000 nhân vật 24×24 sinh bằng thuật toán lấy cảm hứng từ punk thập niên 80 và cyberpunk thập niên 90. Hàng trăm bộ sưu tập phái sinh nối tiếp giữa 2017 và 2022, tất cả đều dựa trên cùng mô hình độ phân giải thấp + bảng màu táo bạo.

Phạm vi trung thực so với các công cụ chuyên dụng

Ba công cụ chuyên dụng thống trị không gian pixel art. Aseprite là lựa chọn chuyên nghiệp mặc nhiên, khởi đầu là dự án sở thích của David Capello năm 1998 (bản phát hành đầu năm 2001 với tên Allegro Sprite Editor), nay phát triển bởi Igara Studio S.A. do David, Gaspar và Martín Capello dẫn dắt, bán trên Steam giá 19,99 USD (miễn phí dưới GPLv2 đến tháng 8 năm 2016 khi giấy phép chuyển sang độc quyền dù mã nguồn vẫn xem được trên GitHub). Layer, frame, timeline, tilemap, xuất animation, scripting Lua, công cụ dòng lệnh, công cụ trả phí tốt nhất theo đồng thuận cộng đồng. Piskel là đối thủ miễn phí chính, một trình chỉnh sửa web mã nguồn mở do Julian Descottes tạo, bản hosted ở piskelapp.com và bản desktop tải về được. Điểm mạnh: timeline animation theo từng frame, xem trước trực tiếp, xuất GIF và sprite sheet. Pixilart là trình chỉnh sửa online miễn phí với lớp xã hội/cộng đồng mạnh, hơn một triệu người dùng, gallery công khai, bình luận, theo dõi. Phạm vi trung thực của trình chỉnh sửa này hẹp hơn cả ba: một công cụ một-frame, chỉ trong trình duyệt, dành cho một sprite nhanh, một icon, một avatar. Sáu công cụ cơ bản (bút chì, tẩy, thùng sơn, hút màu, đường thẳng, hình chữ nhật), bộ chọn màu, bảng màu, hoàn tác, lớp lưới tùy chọn, và xuất PNG ở kích thước gốc của canvas. Không có layer, không có frame, không có timeline animation, không có onion skin, không có tilemap, không có scripting. Để vẽ sprite đầu tiên, phác thảo một emote Twitch, hoặc dựng nhanh chân dung 32×32, đây là mức ma sát phù hợp: không cài đặt, không tài khoản, không đường cong học. Cho giá trị đầy đủ của một game với sprite động và hiệu ứng theo lớp, hãy cài Aseprite hoặc mở Piskel.

Quyền riêng tư: vì sao chạy hoàn toàn trong trình duyệt quan trọng ở đây

Pixel art thường là việc đang dở cho các dự án game indie chưa công bố, hợp đồng được ủy quyền, hoặc thiết kế nhân vật thương hiệu chưa công khai. Các trình chỉnh sửa phía server upload từng nét cọ lên dịch vụ bên thứ ba nơi nó nằm trong log và có thể bị bất kỳ ai có quyền truy cập backend xem. Trình chỉnh sửa này chạy hoàn toàn trong trình duyệt qua JavaScript: mỗi pixel đặt xuống, mỗi lần hoàn tác, mỗi lần hút màu vẫn ở trên thiết bị của bạn. Hãy kiểm chứng trong tab Network của DevTools, không có request nào được gửi đi khi bạn vẽ. Việc xuất PNG dùng API tích hợp của trình duyệt canvas.toBlob và một blob URL; không có bước upload. Đặt trang offline (chế độ máy bay) sau khi đã tải xong và trình chỉnh sửa vẫn hoạt động. An toàn cho dự án chưa công bố, công việc thuộc NDA, thiết kế asset thương hiệu, hoặc bất kỳ sprite nào bạn không muốn bị sao vào ổ cứng của người lạ.

Công cụ liên quan