Pixel Editor

Sprite và tilemap, từng pixel một: frame, onion skinning, bảng màu, collision theo từng tile, normal map, 9-slice, và xuất GIF hoặc Aseprite.

Tóm gọn trong một câu#

Một trình chỉnh sửa sprite và tilemap được dựng để làm việc thoải mái ở cả 32×32 lẫn 1024×1024, với các frame animation và công cụ màu sắc hiểu được bảng màu.

Bố cục#


Menu bar	File · Edit · View · Plugins
Tab chế độ	Sprite và Tilemap
Toolbar	New, undo/redo, kích thước canvas, crop, làm phẳng layer, lật ngang và lật dọc, lưới, import, export, Save
Hàng tuỳ chọn	kích thước cọ, hình dạng cọ, độ mờ, chia đôi màn hình, và preset
Thanh bên trái	pencil, shapes, fill, gradient, text, selection, eyedropper, cặp màu, palette
Ở giữa	canvas, kèm một chỉ số nhỏ hiển thị công cụ và màu hiện tại, cùng một Preview ở tỉ lệ 1:1
Bên phải	Layers, rồi đến Effects, Normal map, Reference và Modes
Phía dưới	timeline frame, rồi đến thanh bảng màu
Thanh trạng thái	kích thước canvas, layer đang hoạt động, zoom

Bạn làm gì ở đây#

Vẽ#

Space + kéo để pan, cuộn chuột để zoom, 0 đặt lại góc nhìn. Cọ có một kích thước và một hình dạng (mặc định là hình vuông), và một độ mờ. Panel Preview hiển thị sprite ở tỉ lệ 1:1 trong khi bạn làm việc ở mức zoom lớn, đây là góc nhìn trung thực duy nhất của một sprite pixel.

Layers#

Có tên, có thể sắp xếp lại, mỗi layer có riêng một chế độ hoà trộn và một độ mờ, cộng thêm một thẻ màu và một ô lọc cho khi có quá nhiều layer. Effects áp dụng không phá huỷ.

Animation#

Timeline dọc theo phía dưới là một dải các frame. Thêm, nhân đôi, xoá, sắp xếp lại; đặt thời lượng tính bằng mili-giây cho mỗi frame; phát tiến, phát lùi hoặc kiểu ping-pong. Chỉ số hiển thị cho bạn biết tổng cộng là bao nhiêu, 1 frame • 100 ms • ~10 fps.

Onion hiển thị mờ các frame lân cận bên dưới frame hiện tại, đó là cách giúp một chu trình đi bộ không bị trôi lệch dần.

Màu sắc#

Thanh bảng màu là phần đáng để học kỹ:


Palette	bộ màu đang làm việc, kèm số lượng và + Add
Recent	những màu bạn vừa chọn gần đây
Shades	một dải từ sáng đến tối được tạo ra từ màu hiện tại
Harmony	gợi ý theo kiểu bổ túc, tam giác đều và tương tự
Ramp	một dải ramp bạn tự dựng và giữ lại

Màu hiện tại có thể chỉnh sửa dưới dạng mã hex.

Tilemap#

Tab Tilemap chuyển từ vẽ một sprite sang dàn nó ra thành các tile. Kết quả đi tới Engine, nơi có trình chỉnh sửa tilemap riêng cho chính bản thân level.

Normal map#

Mục Normal map suy ra một normal map từ sprite, để một sprite 2D có thể được chiếu sáng trong Engine thay vì luôn phẳng.

Reference#

Thả một hình ảnh vào mục Reference và nó sẽ nằm phía sau canvas trong khi bạn vẽ đè lên trên.

Các panel#

Chín panel, và bốn panel cuối cùng là thứ biến một sprite thành một asset game:


Tool Palette	các công cụ
Layers	chồng layer
Timeline	các frame animation
Reference	một hình ảnh phía sau canvas
Effects	hiệu ứng không phá huỷ trên một layer
Tileset	dựng một tileset từ canvas, ở một kích thước tile được chọn
Tilemap	dàn các tile đó ra thành một map
Collisions	hình dạng collision theo từng tile
Normal Map	suy ra và chỉnh sửa một normal map

Tileset và tilemap#

Panel Tileset cắt canvas thành các tile (mặc định 16 px); panel Tilemap dàn chúng ra thành một map với các layer, và có thể đổi kích thước map đó.

Tilemap lưu dưới dạng .tilemap, và xuất theo hai cách: thành một file, hoặc tách riêng: map dưới dạng JSON và mỗi tileset dưới dạng hình ảnh riêng, đây là thứ mà một engine bên ngoài thường muốn.

Collisions#

Mỗi tile mang theo một hình dạng collision, được vẽ chồng lên tileset thay vì khai báo trong code:


Full	cả tile va chạm
None	đi xuyên qua được
Top / Bottom / Left / Right half	va chạm một phần
Slope up / Slope down	va chạm nghiêng

Show Collisions hiển thị chồng chúng lên, và cả bộ xuất ra dưới dạng JSON. Làm việc này ở đây có nghĩa là Engine nhận được một tilemap đã biết sẵn người chơi có thể đi trên đâu.

Normal map#

Generate Normal Map suy ra một normal map từ sprite, kèm một strength; Normal Map Editor sau đó cho phép bạn vẽ hướng pháp tuyến bằng tay (P), đây là cách duy nhất để sửa những chỗ mà bước tự động làm sai.

9-slice và pivot#

9-Slice guides đánh dấu các vùng có thể co giãn của một sprite UI, và Pivot / Origin đặt điểm mà sprite xoay quanh và neo vào. Cả hai đi theo sprite vào Engine.

Đối xứng#

Mirror X và Mirror Y vẽ cả hai phía cùng lúc: ngang, dọc, cả hai, hoặc xoay tròn (radial).

Dải màu và bảng màu#

Modal Color Ramp dựng một dải màu đúng cách thay vì chỉ nhìn bằng mắt, và bảng màu nhập được từ .gpl (định dạng bảng màu của GIMP, thứ mà phần lớn bảng màu pixel art được đóng gói sẵn theo).

Xuất#

Định dạng	Dùng cho
PNG	một frame đơn
GIF	một animation, dùng được ở mọi nơi
APNG	một animation, có alpha thật
Aseprite	quay lại Aseprite, giữ nguyên layer
Atlas / sprite sheet	một game engine
`.tilemap`	map, gộp chung hoặc tách thành JSON + hình ảnh

File nó đọc và ghi#


Định dạng gốc	`.editor`
Nhập	`.png`, `.jpg`, `.aseprite`, `.tilemap`, `.gpl` (bảng màu)
Xuất	`.png`, `.gif`, APNG, `.aseprite`, sprite atlas, `.tilemap` (gộp chung hoặc tách), collision JSON

Gửi việc sang các module khác#

Tạo ra pixel art. Chấp nhận pixel art và hình ảnh.

Pixel art được chấp nhận bởi Inkwell, Composer, Animator, Matter và Engine: một sprite sheet có thể đi thẳng vào một game mà không cần đi vòng qua một file.

Làm việc cùng người khác#

Pixel Editor đồng bộ từng thao tác một: dữ liệu scene, asset, animation và script.

Giới hạn và những trục trặc thường gặp#

Zoom không phải là độ phân giải. Thanh trạng thái hiển thị kích thước canvas thật; Preview hiển thị nó ở tỉ lệ 1:1.
Một cọ mềm không phải là một cọ pixel. Độ mờ dưới 100% sẽ khử răng cưa (anti-alias) các cạnh của bạn, thường không phải điều bạn muốn trên một sprite.
Thời lượng frame tính theo từng frame, không theo cả animation. Một chu trình 12 frame với mỗi frame 100 ms chạy ở khoảng 10 fps, bất kể các frame khác làm gì.