1

Version 1.0

Đây là một bản dịch ẩu được một chàng trai ngu tiếng anh và dốt cả văn dùng
google dịch để dịch.
Nó xuất phát từ nhu cầu cái nhân là cậu ấy muốn đọc nội dung của quyển sách này
Vì vậy trong bản dịch này có vô vàn lỗi thậm chí có cả lỗi chính tả
Mong các bạn độc có thể thông cảm cho 

Copyright © 2019 by Michael Azzi

All rights reserved. No part of this book may be reproduced in any formwithout
written permission from the author.

All images used within this book are used for strictly educational purposes.

Written by Michael Azzi.

www.michafrar.com
Design by Jenna Brown.
www.cyanatar.com
 Nội Dung
06 Giới thiệu

22 Chapter 1: Line art (Nghệ thuật đường nét)

Tạo nghệ thuật đường trơn và tìm hiểu về hình dạng, đường nét và đường cong.

38 Chapter 2: Anti-Aliasing (Khử răng cưa)

Làm mịn đường viền của bạn và làm cho việc đổ bóng và đường cong của bạn trông mỏng hơn.

60 Chapter 3: Colour (Màu)

Làm mịn các đường viền của bạn và làm cho bóng mờ và các đường cong của bạn trông mềm mại hơn.

86 Chapter 4: Readability (Khả năng đọc )

Cải thiện độ rõ ràng của chữ viết, lớn hay nhỏ.

114 Chapter 5: Dithering (Phối màu)

Tạo các gradient khác nhau chủ yếu cho nền.
134
Chapter 6: Game Perspectives (Phối cảnh của trò chơi )
Xây dựng môi trường và nhân vật ,tìm hiểu về các phối cảnh trò chơi điện tử cố định khác.
161
Chapter 7: Clean Up (Dọn dẹp, làm sạch)
Tinh chỉnh công việc pixel của bạn và thêm những nét cuối cùng.
187
Chapter 8: Sub-Pixeling
Vượt ra ngoài một điểm ảnh đơn lẻ và thổi sức sống vào hoạt ảnh của bạn.
213
Chapter 9: Animation (Hoạt ảnh)
Bước cuối cùng để đưa các nhân vật và môi trường của bạn vào cuộc sống.
238
Epilogue (Kết bài ^^)
Afterword, Bibliography, Guest artists.
Giới thiệu
Bắt đầu
5
 Lời mở đầu

Tôi sử dụng chương trình nào?

Bạn có thể tiếp tục sử dụng phần mềm bạn đã biết hoặc chuyển sang phần mềm mới. Một số chương
trình hợp với nghệ thuật pixel hơn, những chương trình khác thì không. Cuối cùng, không quan trọng
công nghệ của bạn tiên tiến hay lạ mắt. Ngay cả MS Paint cũng làm được thủ thuật! Kiểm tra trang 14
để biết một số ví dụ về phần mềm..

Tại sao nghệ thuật pixel khác với những nghệ thuật pixelated khác?
Trong nghệ thuật pixel, bạn có toàn quyền kiểm soát và có thể tự mình thao tác từng pixel.
Các công cụ tiên tiến sẽ không thực hiện được công việc. Tất nhiên, điều đó làm cho tác phẩm
nghệ thuật của bạn sắc nét hơn vì bạn không có vết mờ mềm từ cọ vẽ. Tuy nhiên, nghệ thuật
pixel không chỉ là về các công cụ.
Học các kỹ thuật cũng quan trọng không kém để có được kết quả tốt và làm việc nhanh hơn.

Bạn kiểm soát các pixel. Non-pixel art (Nghệ thuật không pixel):
Các công cụ không kiểm soát bạn.
Không yêu cầu bạn phải thu phóng nhiều.
Không yêu cầu độ chính xác pixel.
Nó không có nghĩa là bạn phải đặt từng pixel một
Sử dụng nét cọ và áp lực bút.
như một viên gạch.
Có các phím tắt. Đừng lo lắng!

6
 Nghệ thuật điểm ảnh được sinh ra từ những hạn chế.
Đó là lý do tại sao nhiều kỹ thuật thủ công vẫn được sử dụng ngày nay.

Tiến bộ công nghệ đã mang lại những khả năng mới trong trò chơi 2D: hình ảnh được số hóa, mô hình 3D
kết xuất, video chuyển động đầy đủ và nhiều hơn thế nữa. Sau khi các sprite(hình mẫu ^^) ngừng được
chỉnh sửa ở cấp pixel, chúng không được coi là pixel art nữa. Chúng vẫn là các đối tượng sprite trên màn
hình, nhưng không phải là các pixel-sprite làm truyền thống bằng tay mà chúng ta biết.

Non-pixel art (Nghệ thuật không pixel) Oekaki or binary art (Oekaki hoặc nghệ thuật nhị phân) Pixel art (Nghệ thuật điểm ảnh)

pixel thường bị nhầm lẫn với các phương tiện nghệ thuật khác như Oekaki hoặc Binary art. Đó là bởi vì họ
thường sử dụng đồ họa bí danh: nghệ thuật được tạo bằng các công cụ không làm mịn. Cọ vẽ thường xuyên
làm mịn đường nét của bạn. Nghệ thuật bí danh giúp mọi thứ luôn sắc nét và sắc nét.

Sơ đồ này là một bản tóm tắt. Để biết thêm thông tin, hãy kiểm tra các công cụ trên trang ...

7
 Vậy tôi phải bắt đầu từ đâu?
Có nhiều cách để bắt đầu. Hãy so sánh nó với một cái gì đó quen thuộc hơn: vẽ và hội họa! Các phương pháp
này không khác gì so với nghệ thuật pixel! Bạn sẽ thấy.

Sketch Line art

Resize a large sketch. Shade, clean up

& complete!

Block shapes Refine

Bạn có thể bắt đầu bằng nhiều cách và đi theo các hướng khác nhau. Bạn thậm chí có thể kết hợp
nhiều cách. Nếu bạn đã tạo hình minh họa, hãy tuân theo phương pháp bạn muốn! Nếu bạn muốn
cảm thấy mạo hiểm, hãy thử một cái gì đó mới. Tuy nhiên, pixel art thường là 1 lớp.

Nếu bạn không cảm thấy thoải mái khi làm việc trên 1 lớp duy nhất, đừng lo lắng; bạn vẫn có thể sử dụng
các lớp, nhưng hãy nhớ kết hợp chúng để không bị phụ thuộc quá nhiều. Đặc biệt với hoạt ảnh, việc có các
lớp sẽ cản trở bạn hơn bất cứ điều gì. Tuy nhiên, nếu bạn tạo toàn bộ cảnh hoặc ảnh chụp màn hình trò
chơi, các lớp là cần thiết! Kết quả là, điều này mang nghệ thuật pixel gần với các tác phẩm nghệ thuật
truyền thống hơn.

Nghệ thuật điểm ảnh giống như điêu khắc 2D.

Bạn bắt đầu với một điểm cơ sở, sau đó đục và thêm các pixel!
8
Dưới đây là một vài ví dụ về nhiều cách để tạo sprites / pixelart của bạn.

Guest artist: Neoriceisgood

By Michafrar

Guest artist: Anubis Jr

9
Hardware tools (Công cụ phần cứng)
Cả chuột và máy tính bảng đều hoàn toàn ổn!

OK! OK!

Chuột tốt với các cú nhấp chuột

.Khó vẽ hơn, nhưng cung cấp độ
chính xác khi nhấp chuột. Tốt cho
việc dọn dẹp và hoàn thiện các
bước cuối cùng.
Máy tính bảng tốt với vẽ đường nét . Khó
nhấp hoặc nhấn liên tục hơn, nhưng dễ
dàng hơn để điều khiển trực quan. Tốt cho
bản phác thảo / Các bước vẽ đầu tiên.

Bạn sử dụng cái gì không quan trọng. Hãy nhớ câu nói:
“Vấn đề không phải là về các công cụ. Đó là về cách bạn sử dụng chúng”

Hãy nhớ rằng: bàn phím của bạn cũng là một công cụ mạnh mẽ cho nghệ thuật!

Bạn có thể sử dụng phím tắt để làm cho quá trình nhanh hơn và
lướt qua các khung hình động. Bạn cũng có thể sử dụng các nút
phụ trên chuột hoặc máy tính bảng của mình nếu có.
Đôi khi, bạn thậm chí có thể tạo các phím tắt mới của riêng mình.

Bám sát vào các công cụ cho phép bạn làm việc hiệu quả hơn và nhanh hơn.

10
“Old school” hardware (Phần cứng “Kiểu cũ”)
Dưới đây là một vài ví dụ về cách các sprite được tạo ra vào những năm 80 và 90.
Tất cả chúng không khác gì so với phần cứng ngày nay, chỉ là cổ xưa hơn!

Các nhà phát triển trò chơi điện tử ban đầu đã sử dụng công
nghệ đặc biệt như máy tính bảng có chuột có hình chữ thập.
Máy tính bảng đã được hiệu chỉnh màn hình, không giống như
một con chuột thông thường. Những thiết bị này được gọi là
bộ số hóa và con chuột được gọi là bộ số hóa puck.

Sprites được làm thô trên giấy, đặt trên bộ số hóa và

sau đó được truy tìm bằng vết (puck).

Các họa sĩ của Capcom đã vẽ các khung hình trên giấy kẻ ô vuông và tạo pixel cho chúng bằng máy số hóa.
Felicia art by Akira “Akiman” Yasuda featured in Darkstalkers (1994).

Images from the development of Golden Axe in Mega Drive (1989)

from the French Magazine “MegaForce #4” January-February 1992.

11
 Một thiết bị ngoại vi khác là bộ số hóa được kết nối với
bút sáng: một bút stylus dùng để chạm vào bề mặt của
màn hình để nhận dạng trục X và Y của màn hình.

Chúng có thể được coi là tổ tiên của máy tính

bảng LCD nhúng ngày nay, chẳng hạn như
Wacom Cintiq, cho phép bạn vẽ trực tiếp trên
màn hình.

Các nhà phát triển khác đã vẽ trực tiếp trên máy tính bằng
chuột và bàn phím thông thường. Một số họa sĩ pixel ngày nay
vẫn sử dụng thiết lập này. Những hình ảnh này là từ một bộ phim
tài liệu có Comix Zone (1993-1995) với nhà làm phim hoạt hình
Dean Ruggles.

Full video: youtu.be/-M8RIc6Ek0Q

Không cần thiết lập màn hình kép vì máy tính hiện đại có độ phân giải cao. Tuy
nhiên, có một màn hình thứ hai là cực kỳ hữu ích!

12
 Screenshots from a 1995 Promotional commercial for Fatal Fury 3 Neo Geo CD (Japan).
Không gian làm việc của một họa sĩ tại SNK cho phần cứng Neo Geo vào khoảng
năm 1995 Lưu ý rằng việc bao gồm một máy quét và một con chuột.

From the “Neo-Geo Hardware Specification” booklet, page 93, issued by SNK Playmore Corporation
13
Software & Programs
Như đã đề cập trước đây, các công cụ của bạn sẽ không xác định bạn là một họa sĩ. Các chương trình này
ở đó để giúp làm cho quá trình vẽ pixel dễ dàng hơn để bạn có thể cải thiện kỹ năng của mình. Mỗi chương
trình được liệt kê dưới đây cung cấp những lợi ích độc đáo của riêng chúng và bạn có thể thấy một chương
trình phù hợp với quy trình của mình hơn những chương trình khác.

Điều quan trọng là hãy thử chúng cho chính mình và xem bạn thích gì!

Các chương trình nghệ thuật pixel đặc biệt

Graphicsgale
Giá: 1,995 JPY / $ 20
Có phiên bản miễn phí nhưng không có gif.
Công cụ pixel mạnh mẽ này thích hợp cho hoạt ảnh
và pixelart. Với các công cụ thân thiện với gamedev
như bộ xếp, tùy chọn xuất và trình chỉnh sửa bảng
màu; chương trình này khá phổ biến với các họa sĩ
pixel.
Bố cục có thể tùy chỉnh và các phím nóng làm cho nó
trở thành phần mềm rất linh hoạt. Thật không may,
dòng thời gian hơi quá đơn giản để thực hiện các
cảnh đầy đủ. Nó cũng tuyệt vời cho các họa sĩ nhị
phân với một loạt các bàn chải có thể tùy chỉnh.
Chương trình tiếng Nhật này được dịch và nó cũng humanbalance.net
khá rẻ! Đảm bảo dùng thử phiên bản miễn phí..

MS Paint XP/Vista :D
Giá: Miễn phí
Phiên bản này không được cài đặt sẵn trên win.7 / 8/10
Công cụ mà nhiều người mới bắt đầu và bậc thầy
đã sử dụng trong nhiều thập kỷ qua. Đảm bảo bạn
sử dụng phiên bản Paint dành cho Windows XP
hoặc Windows Vista. Mọi phiên bản sau Windows 7
đều có các công cụ không phải pixelart không cho
phép bạn tạo pixelart rõ ràng.

Phần mềm này chỉ có mức tối thiểu, nhưng đôi khi,
đó là tất cả những gì bạn cần. Sơn là tuyệt vời để
bắt đầu cuộc phiêu lưu pixel của bạn!

by Michafrar
14
Aseprite
Giá: $10 ( giờ thì lên 20$ rùi :V )
Có sẵn phiên bản miễn phí nhưng tính năng hạn chế.
Phần mềm pixelart được phát triển độc lập này luôn chứa đầy
những điều bất ngờ! Với các bản cập nhật thường xuyên
khoảng mỗi tháng hoặc lâu hơn, hy vọng chương trình này sẽ
trở nên khá mạnh mẽ. Nó rẻ, có dòng thời gian hoạt ảnh trực
quan gần với các chương trình như Adobe Flash.
Bạn có thể dễ dàng chỉnh sửa và tải màu sắc và thậm chí
truy cập bảng màu từ bộ điều khiển cổ điển.
Thật không may, giao diện người dùng và bố cục có độ phân
giải thấp và bị pixel hóa, nhưng các bản cập nhật trong tương
lai có thể thêm một giao diện khác.
aseprite.net

Promotion
Giá: $78
Có sẵn phiên bản miễn phí nhưng tính năng hạn chế.
Công cụ này đã trở nên phổ biến sau thành công của
trò chơi độc lập “Shovel Knight” của Yacht Club
Games. Phần mềm này là một cách tuyệt vời để tạo
hình ảnh động. Nó có một công cụ làm da củ hành
tiên tiến và cho phép bạn phóng to lên đến 5000%.
Nó khá thân thiện và cho phép bạn tùy chỉnh bố
cục! Giá cao hơn một chút so với các phần mềm giá
rẻ khác, nhưng hãy chú ý đến doanh số bán hàng
thỉnh thoảng.

General art programs ( Các chương trình nghệ thuật tổng hợp)
Shovel Knight (PC)

Paint tool SAI

Giá: 5,400 JPY / $50
Có sẵn bản dùng thử miễn phí 30 ngày
Phần mềm này kết hợp khả năng tạo cả hình ảnh có
pixel và không pixel. Các tính năng chính của nó bao
gồm tùy chọn thay đổi màu sắc cho phép kiểm soát
màu sắc nhiều hơn so với các chương trình định
hướng pixel. Nó cũng có khả năng tạo các đường 1px
mịn bằng bút kế thừa và các tùy chọn độ ổn định,
cùng với một công cụ đũa phép chính xác. Chương
trình cũng thân thiện với người dùng máy tính bảng.

Guest artist: cyanatar

15
 GIMP
Giá: Miễn phí
Một ứng dụng phần mềm mã nguồn mở

GIMP là một phần mềm vẽ miễn phí có khả năng tạo

pixel-art. Điều này ngay lập tức làm cho nó dễ tiếp
cận hơn so với các chương trình được liệt kê trước
đó, tuy nhiên, mặc dù miễn phí nhưng nó không có
giao diện trực quan cho pixel-art.

Chương trình bao gồm rất nhiều công cụ hữu ích, bao
gồm các lưới có thể tùy chỉnh và các tùy chọn độ trong
suốt. Nó cũng có một công cụ văn bản. Có tùy chọn để by Michafrar
có cấu hình rộng rãi phù hợp với nhu cầu của bạn sẽ
thuận tiện hoặc áp đảo, tùy thuộc vào sở thích của
bạn.

Adobe Photoshop
Price: $699+
Chương trình cực kỳ đắt tiền! (Nhưng mà có crack :D)

Photoshop nổi tiếng là tiêu chuẩn phần mềm cho

nghệ thuật kỹ thuật số, cũng như là phần mềm
đắt tiền nhất! Có nhiều lựa chọn thân thiện với ví
hơn nhờ đăng ký trên đám mây adobe nhưng nếu
bạn eo hẹp về ngân sách thì nó vẫn khá đắt.

Nếu bạn có đủ khả năng, chương trình thực sự làm

mọi thứ bạn có thể cần bao gồm cả công việc pixel.
Nó có thể thiếu độ chính xác của phần mềm chuyên
dụng, vì vậy nếu bạn muốn thiết lập các công cụ
pixel art trong chương trình, bạn có thể cần phải
đọc các hướng dẫn cụ thể để tận dụng tối đa.

Guest artist: cyanatar

16
Software tools (Công cụ phần mềm)
Bất kể phần mềm nào, bạn sẽ cần ít nhất 4 công cụ này.
Đây là những thứ tối thiểu cần thiết để tạo pixelart.

Pencil tool (Công cụ bút chì)

cơ bản nhất. Một số phần mềm có một Bút vẽ
Nó cung cấp cho bạn một công cụ 1 px với các pixel sắc nét và rõ ràng.

Eyedropper (Hút màu)

Hấp thụ một màu. Đôi khi được chỉ định cho nhấp chuột phải. Nó
cho phép bạn chọn màu và tạo bảng màu.

Eraser (Tẩy)
Xóa bỏ những sai lầm của bạn. Một số phần mềm không bao gồm
nó vì bạn chỉ có thể xóa bằng màu trắng hoặc trong suốt.

Bucket (tạt màu)

làm cho cuộc sống của bạn dễ dàng hơn. Nó lấp đầy một vùng trống
bằng 1 màu đồng nhất. Xem ra cho các khoảng trống! Hoặc nó sẽ lấp
đầy toàn bộ màn hình.

17
 Một số chương trình không bao gồm công cụ tẩy và nhóm dụng cụ hút màu với cọ.
Điều đó cung cấp cho bạn 2 công cụ kết hợp sức mạnh của 4!

Các công cụ phải có khác:

Selection tool (Công cụ chọn vùng) Recolour tool(Công cụ pha màu) Line tool(Công cụ vẽ đường nét)

Sử dụng và chỉnh sửa thủ công:

Rotation tool (Công cụ xoay) Colour settings(Chỉnh màu) Circle tool(Công cụ vẽ đường tròn)

Tránh xa:

Blur (làm mờ) Brushes (Cọ) Blurred gradients

Tại sao lại tránh các công cụ tự động? Bởi vì họa sĩ không thể đoán trước kết quả sẽ diễn ra như thế nào.
Hãy nhớ rằng: Pixel art là việc bạn có thể kiểm soát 100% những gì bạn làm.
18
 Kích thước canvas là gì?
“Tôi làm hình nền và sprite của mình ở kích thước nào” là một câu hỏi phổ biến.
Đồ họa máy tính cũ có độ phân giải thấp, do đó pixel art thường nhỏ.
Khi tạo pixel art, bạn sẽ phải quyết định kích thước canvas ngay từ đầu.

Để biết thêm thông tin về kích thước sprite, hãy đọc Chapter 4: Readability

“Tôi muốn tạo tác phẩm nghệ thuật và hiển thị trực tuyến.”

Vẽ dù lớn hay nhỏ, dù làtác phẩm nghệ thuật hoặc hoạt ảnh. Một canvas tốt
có xu hướng bám vào độ phân giải của trò chơi điện tử được pixel hóa.

“Tôi muốn tạo mô típ cho một trò chơi điện tử.”

Đảm bảo kiểm tra tỷ lệ giữa sprite của bạn và khung vẽ.
19
 Metroid II: Return of Samus (Gameboy) có tỷ lệ sprite trên canvas LỚN cho một nhân vật có thể chơi được.
Sprite là 1:24, chiếm khoảng 4% màn hình. Nó không thích hợp cho việc di chuyển theo cấp độ.

Super Metroid (Super Nintendo) có tỷ lệ sprite trên canvas THẤP cho một nhân vật có thể chơi được.
Sprite là 1:38, chiếm khoảng 2,5% màn hình. Nó cho phép người chơi nhìn thấy nhiều hơn về môi trường của họ..

Cave Story /Doukutsu Monagatari (PC) có tỷ lệ hình vẽ trên canvas Bé cho một nhân vật có thể chơi được. Sprite
là 1: 300, chiếm khoảng 0,33% màn hình. Các nhân vật vẫn có thể nhìn thấy nhưng tối giản do kích thước nhỏ.

20
Điều này nghe có vẻ hiển nhiên với nhiều họa sĩ, nhưng khi bạn thay đổi kích thước LUÔN LUÔN tuân theo TOÀN BỘ CON SỐ.

Bạn có thể thay đổi kích thước sprite thành bất kỳ tỷ lệ phần trăm nào NHƯNG
bạn sẽ phải sửa chúng theo cách thủ công để giữ kích thước 1x (100%).
Quan trọng hơn nữa, KHÔNG BAO GIỜ kết hợp các tỷ lệ pixel khác nhau.

Adventure Time: EtDBIDK! Half-Minute Hero (PSP)

(Various platforms)

Tiến về phía trước...

Đoạn mở đầu ngắn này chỉ là sơ lược về cách bạn có thể tạo
ra các sprite.
Cuối cùng, có một phương pháp cho tất cả các kiểu họa sĩ!

21
 22
1
Chapter 1: Line art ( Nghệ thuật đường nét )
Line art
Giới thiệu

Earthbound/Mother 3 (SNES)

Tekken Card Challenge (WonderSwan)

Nghệ thuật đường nét(line art) là cơ sở cho sprite

của bạn bất kể bạn bắt đầu với hình dạng, bản phác
thảo rời hay không có đường nét nào cả! Nó
thường sẽ được áp dụng tại một số thời điểm trong
quy trình..
Nét vẽ tự nhiên bằng pixel
không được đẹp!
Nhất quán là điều cần thiết.

23
 Giữ cùng độ dày của đường thẳng trong toàn bộ sprite!

Nó làm cho các sprite dễ đọc và hấp dẫn hơn.

Thích đường dày hơn? Đảm bảo giữ cho đường vẽ
sạch sẽ và dễ theo dõi. Tuy nhiên, một số đường có
thể mỏng hơn phần còn lại
của bản vẽ nếu phong cách yêu cầu

Đường mỏng sẽ tốt

hơn cho các khu vực
nhỏ.
Bottom L-R: SNK v C Card Fighter’s Clash (Neo Geo)
Pokémon Pinball RS (GBA)

Sprites thường có đồ họa nhỏ! Kết quả là, bạn sẽ nhận thấy rằng trong các trò chơi…
Hầu hết các pixel art đều có đường vẽ 1px.

By Michafrar
24
Lines and curves (Đường và đường cong)
Bạn đã bao giờ nhận thấy khi vẽ một đường pixel hoặc đường cong trong 1 nét, nó trông không mịn như bạn muốn?

Đó là vì răng cưa. Đây là những phần răng cưa của một đường hoặc đường cong.

Vì vậy, làm thế nào để bạn

sửa chữa các đường của bạn
bị răng cưa?
Dể ẹc!
Có một quy trình cho mọi loại
đường!

Oh no! Much
better!

25
 Điều quan trọng cần nhớ với răng cưa?
Đừng bao quanh một hàng pixel bằng những pixel lớn hơn.

Lưu ý quan trọng!

Bạn KHÔNG cần phải vẽ đường cong
từng pixel. Đó là quá nhiều công việc!
Vẽ các đường thô và đục bỏ những phần bạn
không cần. Mặc dù một số chương trình cung cấp
bút pixel tốt hơn có thể tránh các phần dày hơn,
nhưng răng cưa lại KHÔNG THỂ LƯU ĐƯỢC. Vì
vậy, hãy sửa chữa chúng!
Điều này sẽ xảy ra mọi lúc!

26
 Pixel art yêu thích các đường có cùng “cầu thang”, cầu thang có cùng số pixel
trên mỗi bậc… Nó trông mượt mà hơn!

Metal Slug 3 (Neo Geo)

Đường càng dốc, 'bước' càng lớn!

ĐỪNG PHA TRỘN CẦU THANG. Nếu bạn có hai cầu thang, đừng bao gộp thành một
cầu thang. Giữ cho cầu thang của bạn bằng nhau và tránh răng cưa

Không cần phải vẽ lại các đường hoặc CTRL + Z

mỗi lần.
Hãy nhớ rằng bạn luôn có thể sử dụng
selection tool(công cụ chọn vùng). Bạn cũng có
thể đục bỏ các pixel. Cắt bỏ hoặc thêm pixel để
bạn có được những đường thẳng đẹp mắt!

27
Lines are everywhere (Đường vẽ ở khắp mọi nơi)

Ngay cả khi bạn không có đường vẽ, bất kỳ hình dạng nào trong nghệ thuật pixel của bạn đều có cạnh.

Guest artist: Anubis-works

Khi 2 hình dạng màu sắc chạm vào nhau, chúng tạo ra một đường
vẽ. Vì vậy, ngay cả cel shading (đổ bóng mờ) cũng tạo ra
"đường". Trên bề mặt nhẵn, Đổ bóng(shading) của bạn cũng
không được có răng cưa!

Tuna head from The Guided Fate Paradox (PS3)

Đồ họa không có bất kỳ đường nét nào, chẳng hạn như Curses 'N Chaos (PC / PS4), vẫn có pixelart trông đẹp mắt.
Nó khá hiệu quả cho nền. Để biết thêm ví dụ, hãy xem trang 30.

28
 Pixel-Logic Bonus #1
Bạn vẫn không chắc chắn về cách làm sạch răng cưa? Không vấn đề gì!
Trong suốt hướng dẫn, tôi sẽ cung cấp thêm các mẹo, bắt đầu từ đây!

Như tôi đã mô tả, việc cắt bớt đường kẻ của bạn tự nhiên hơn nhiều so với việc trở thành một người cầu toàn.
Điều này hoạt động cho mọi vấn đề và bạn có thể xem một số ví dụ tôi đã làm dưới đây để nhấn mạnh điều đó!

Fixed Originals

Một cách khác để tìm ra răng cưa là tưởng tượng pixelart của bạn giống như các đường vectơ!
Vì vậy, nếu bạn không chắc chắn, hãy vẽ qua nó và bạn sẽ thấy những sai lầm.

Có răng cưa ...

Đã sửa!

Một số chương trình giúp bạn tạo đường nét mượt hơn với các tùy chọn "pixel perfect". Tuy nhiên, kết quả
cũng không hoàn hảo. Đừng dựa vào các tùy chọn này,vẽ từng pixel một vẫn là con đường đúng để đi.

Pro Motion Aseprite 29

Outlines (Đường phát thảo, đường viền)
Đường viền là một thuộc tính chính để xác định phong cách của sprite.
Bạn có thể nhận thấy rằng pixelart có nhiều hình dạng và hình thức. Giống như bất kỳ phong cách nghệ thuật nào khác!
Dưới đây là các loại viền mà tôi xác định:

No outline ( không có đường viền)

Super Mario Brothers (NES), Metroid (NES), Sonic 3 and Knuckles (Genesis),
Castlevania SotN (PS1), Cave Story + (PC), Mario & Luigi: Dream Team (3DS), Streets of Rage (Genesis)

không có đường viền là các pixel có

đồ họa hình vector.

chúng thường có màu đồng

nhất và đôi khi có bóng mờ và
đường viền bị đức đoạn.

Đừng để bị lừa; ngay cả khi không

có viền, bạn vẫn cần phải làm sạch
răng cưa! (xin lỗi nha ... hihi)
30
Black inline (đường nội tuyến đen)

Shatterhand (NES), LoZ: Link to the Past (SNES) , Yoshi’s Island (SNES),
Warioware Twisted (GBA), Shonen Jump: Jump Ultimate Stars (DS) , Mother 3 (GBA), Scott Pilgrim (Xbox 360)

Các pixel nội tuyến màu đen là các sprite với

đường vẽ màu đen cũng đi vào bên trong các
hình sprite.

Điều này rất hiệu quả trong thời đại NES như
một cách để vượt qua những hạn chế. Ngày nay,
nó làm cho các sprite khá lầy lội.

Chà, không phải TẤT CẢ…!

Shovel knight (various)

31
 Black contour ( Đường viền đen)

WarioLand 4 (GBA), Kirby Superstar Ultra (DS), Mario & Luigi: Bowser’s Inside Story (DS), Magical
Taruruuto-Kun (Genesis), Chrono Trigger (SNES), Kirby Squeek Squad (DS), Boktai 3 (GBA),
Riviera: The Promised Land (GBA)

Với đường viền màu đen, chỉ đường viền có đường

vẽ màu đen, nhưng các đường bên trong hoàn
toàn được tô màu với ít hoặc không có màu đen. Nó
giúp sprite của bạn nổi bật so với nền và trông sạch sẽ!

Đó là phong cách được sử dụng phổ biến ngày nay với sprites,
và rất phổ biến với các trò chơi cầm tay hiện đại.

Lưu ý: Đường viền của bạn có thể dày

hoặc mỏng, đó là sự lựa chọn theo
phong cách! Đường viền càng dày thì
càng yêu cầu Khử răng cưa nhiều hơn.

Mario & Luigi: Bowser’s Inside Story (DS)

32
 Coloured (viền màu)

Adventures of Batman and Robin (SNES), Enchanted (GBA), Congo’s Caper (SNES),
Mario All Stars (SNES), Hamelin No Violin Damaki (SNES) Metroid Fusion (GBA), DK King of Swing (GBA),Castlevania: AoS
(GBA), Monster World IV (Genesis)

Đường viền được tô màu theo màu xung quanh. Mỗi

phần của một đối tượng có đường viền màu riêng
của nó.

Đường viền của một khối sẽ là phần tối nhất

của khối.

Above: Slime Mori Mori DQ (GBA) Right: am and Max Hit the Road (PC)

33
Selective outline (Đường viền có chọn lọc)

Đường viền có chọn lọc là nghệ thuật đường nét được tô bóng bằng nguồn
sáng! Đây là loại đường viền phổ biến nhất trong nghệ thuật pixel và hoạt
động tuyệt vời với nền.

Ristar (Genesis), Pulseman (Genesis), Alundra (PS1), Parodius Da (SNES), LoZ: Minish Cap (GBA),Super Pocket
Fighter (Saturn), Shantae: Risky’s Revenge (DSi)

Metroid: Zero Mission (GBA)

Nó hòa hợp hoàn hảo với môi trường. Nền sáng

34 hay tối, không quan trọng!
Trường hợp ví dụ: Hình vẽ Pokémon

Pokémon từ Gameboy Advance lên

đến Nintendo DS sử dụng viền chọn
lọc . Chúng bền vững với thời gian.
Đường viền đầy màu sắc làm cho
chúng trở nên tuyệt vời.

Hình vẽ Pokémon là một ví dụ điển hình

của đường viền có chọn lọc.

Hãy nghiên cứu chúng.

Generation IV sprites (DS)

Có thể khó nhìn thấy đường viền

đầy đủ nếu không phóng to hoặc xử
lý màu bên trong. Hãy xóa mọi thứ
trừ đường viền.

Nó siêu hiệu quả!

Bây giờ rõ ràng là:
1).Nghệ thuật đường được tô bóng
rõ ràng.
2). Nguồn sáng có thể nhìn thấy
được.

35
 Namco x Capcom (PS2)

Streetfighter III: 3rd Strike (Arcade), Marvel vs Capcom II (Arcade)

36
Kết luận
Dưới đây là tổng hợp các kiểu đường viền khác nhau, các đường viền khác nhau có thể thay đổi hoàn
toàn phong cách của một sprite! Bất kể bạn sử dụng kỹ thuật nào,
nghệ thuật đường nét sẽ được áp dụng ở bất kỳ giai đoạn nào của quy trình.

Food for thought Types of Outlines

Introduction No Outline Black
Inline Black Contour
Lines & Curves Coloured Outlines
Lines Are Everywhere Selective Outlines

37
Chapter 2: Anti-Aliasing (Khử răng cưa)

2
Giới thiệu

Một bức tranh trị giá một ngàn chữ. Vì vậy, trong vài trang tiếp theo… Phóng to!

Giới thiệu Tính năng khử răng cưa giúp bạn làm mịn các cạnh bằng cách đặt pixel ở các góc nhỏ. Hãy
chú ý đến vị trí của các khối nhỏ này: chúng thường là nơi pha trộn các vùng tối với các vùng sáng. Đôi
khi chúng cũng được tìm thấy giữa 2 sắc thái, làm mịn các điểm nổi bật từ bóng tối!

Starfox 2 (SNES, unpublished)

Anti-aliasing (khử răng cưa) thường được viết tắc là “AA”.

39
 Sử dụng AA hay không sử dụng AA?
One is not better than the other(Cái này cũng như cái kia), nhưng khử răng cưa là điều tối quan trọng đối với pixelart.Tôi có nên
sử dụng khử răng cưa hay không? Nó làm tốn thời gian làm việc của tôi? Hãy xem xét từng trường hợp cụ thể.

có khử răng cưa không khử răng cưa

Một nghệ thuật pixel tùy chỉnh trong Metaknight của Nintendo. Ban đầu tôi đã tạo ra cái này bằng khử răng
cưa. Tuy nhiên, khi loại bỏ tất cả khử răng cưa, hình ảnh không bị giảm chất lượng nhiều. Thật khó để nhận
ra sự khác biệt. AA ở đây chỉ như là phủ thêm kem lên cái bánh ngọt vậy.

original graphics(đồ họa gốc) extra anti-aliasing( bổ sung khử răng cưa)
Ba hình vẽ từ Scribblenauts (NDS). Con kangaroo trong bản gốc đã được khử răng cưa. Bạn có thể chỉ cho tôi
điểm khác biệt? Nó hầu như không đáng chú ý. Những sprite này không được hưởng lợi từ việc khử răng cưa.
Phong cách của trò chơi tương đối đơn giản, vì vậy việc khử răng cưa là không cần thiết.

40
 original graphics (đồ họa gốc) no anti-aliasing (không khử răng cưa)
A King Dedede sprite từ Kirby Super Star Ultra (NDS). Đây là nơi mà việc thiếu khử răng cưa trở nên đáng chú ý. Phong cách
này là tạo ra hình dạng mềm và mịn. Nếu không có khử răng cưa, tất cả các chi tiết sẽ bị mất.

original graphics (đồ họa gốc) no anti-aliasing (không có khử răng cưa)

An Unown từ Pokémon Crystal (GBC). Sprite không có AA tạo cảm giác khối. Đồ họa ban đầu có rất nhiều AA.
Trong trò chơi, sprite được hiển thị trên nền trắng. Vì sprites có thể có tối đa 4 màu, chúng đã tối đa hóa AA.
Màu đen không có AA tạo cảm giác khắc nghiệt trên nền trắng tinh.

original graphics (đồ họa gốc) no anti-aliasing (không có khử răng cưa)
Chân dung từ Fatal Fury 2 (GB). Loại bỏ AA làm cho sprite dễ đọc hơn, nhưng phải trả giá: có ít chi tiết hơn. Để
tận dụng tối đa bảng màu gameboy, tốt nhất bạn nên thêm AA.

41
 original graphics (đồ họa gốc) anti-aliased (khử răng cưa)

Objects from Rhythm Heaven / Paradise (NDS). Hầu hết đồ họa trong trò chơi này hoàn toàn có màu sắc, sắc
nét và răng cưa. Điều này được thực hiện để bắt chước phong cách nghệ thuật của Ko Takeuchi. Tuy nhiên,
bằng cách thêm AA nhẹ, các sprites có một cái nhìn mềm mại hơn.

L: Original graphics (đồ họa gốc) R: Extra anti-aliasing (thêm khử răng cưa)
Portraits from Metal Gear: Ghost Babel (GBC). Ở đây, sự khác biệt chỉ đáng chú ý khi phóng to. Khi những
bức chân dung này được hiển thị ở độ phân giải nhỏ, bạn hầu như không thể nhận ra sự khác biệt. Các
hình dạng đủ sạch để ích cần tới khử răng cưa.

original graphics (đồ họa gốc) no anti-aliasing (không có khử răng cưa)
Fuka Kazamatsuri từ Disgaea 4 (PS3). Các sprite này là các bản vẽ thu nhỏ đã được các họa sĩ pixel chỉnh sửa. Nếu bạn
loại bỏ tất cả các AA, có rất ít sự khác biệt. Màu sắc có độ tương phản thấp không cần nhiều AA. Tuy nhiên, vì điều
này được hiển thị ở độ phân giải HD trên Playstation 3, nên khử răng cưa mượt mà là điều bắt buộc.
42
 original graphics (đồ họa gốc) no anti-aliasing (không có khử răng cưa)
Advance Wars (GBA). Như với Disgaea, sprite này đã được thu nhỏ và chỉnh sửa theo cách thủ công để phù
hợp với những hạn chế của nó. Họ đã sử dụng AA để bảo tồn các chi tiết của tác phẩm gốc. Không có nó,
hình ảnh chỉ là một mớ hỗn độn.

original graphics (đồ họa gốc) with anti-aliasing ( có khử răng cưa)
SMW2: Yoshi’s island (SNES). Rất tiếc! Phong cách nghệ thuật của trò chơi rõ ràng là theo phong cách bút chì
màu. Do đó, sprite này cần phải sắc nét và sắc nét. Khử răng cưa làm cho nó tồi tệ hơn.

Kết luận

Anti-Aliased ƯU NHƯỢC
+Làm mịn các đường cong trên - Tẻ nhạt nếu lạm dụng
các sprite nhỏ - Làm mờ sprites nhỏ
+ Cần thiết cho các sprite lớn
+ Phụ trợ cho hoạt ảnh

Aliased
+ Làm cho các mảnh nhỏ Tạo đường viền răng
dễ đọc hơn cưa -Sắc nét và khối
+ Giới hạn màu sắc của bạn
+ Nhanh hơn

43
Khi nào là cần thiết?
Tác giả khách mời: Temmie Chang (Tuyo)

Temmie tập trung vào vẽ các đường trơn tru và dễ

đọc . Mặc dù thoạt nhìn có vẻ hơi khử răng cưa
nhưng cô ấy sử dụng nó khá chiến lược.
Anti-Aliasing được sử dụng để làm mịn những
vết răng cưa không thể tránh khỏi.

Rõ ràng
Nhân vật, khuôn mặt và đôi mắt thường thu
hút sự chú ý của mọi người. Tốt nhất là làm
cho chúng rõ ràng, dễ nhận biết và dễ đọc.
Độ tương phản cao
Nếu bạn có 2 màu có độ tương phản
cao, hãy thử pha trộn chúng bằng cách
sử dụng một số pixel trung gian.
Chi tiết
Khu vực này chứa rất nhiều đường cong
nhỏ. Các đường cong nhỏ hơn thường có
nhiều răng cưa hơn. Nó yêu cầu nhiều AA
hơn các đường cong lớn hơn.
Độ đày nét vẽ
Khử răng cưa được sử dụng để thêm
hoặc bớt một ít độ dày của nét vẽ.
Bằng cách thêm AA, bạn có thể làm cho
mọi thứ trông dày hơn hoặc mỏng hơn.

44
Cách áp dụng
AA chỉ đơn giản là đặt các pixel vào các góc nhỏ để làm cho đường nét và hình dạng mượt mà hơn.
Nó giống như đệm trên một chiếc ghế dài!

Những ví dụ này sẽ giúp bạn xác định AA tốt từ AA xấu. Chúng bao
gồm từ đơn giản đến phức tạp.

Tôi nên thêm bao nhiêu khối?

Khoảng một nửa chiều dài của đoạn thẳng. Quá ít vẫn tốt hơn là Tôi khuyên bạn nên kết hợp
quá nhiều. 1 và 2 sắc thái màu. Hãy tìm
kiếm một số sprite yêu
Tôi nên sử dụng bao nhiêu sắc thái màu (shades) ?
thích của bạn có AA. Hãy
Một để bắt đầu thực hành.
thử và xem cách họ làm
Hai cho kết quả mượt mà hơn.
điều đó. Xem những gì phù
Ba nếu bạn có đủ màu sắc và cảm thấy tự tin.
hợp với BẠN.
quá nhiều AA làm mờ ranh giới giữa nghệ thuật điểm ảnh và nghệ thuật vectơ

Tôi sẽ điền vào những góc nào?

Các trang tiếp theo sẽ chỉ cho bạn một số kỹ thuật để giúp bạn!

45
Flat curves ( Đường cong phẳng)
Dưới đây là một số ví dụ về đường cong phẳng. Chúng hiếm gặp đối với các sprite nhỏ, nhưng phổ biến hơn với
pixelart lớn hơn. Nếu bạn không hài lòng với hiển thị răng cưa, bạn vẫn có thể thêm AA.

Darkstalkers 3 (Arcade/PS1)

Longer steps = Longer AA (đường dài hơn = AA dài hơn)

Ghi nhớ
Có rất nhiều trường hợp ngoại lệ. AA dài hơn không phải lúc nào cũng cần
thiết. Bạn có thể có các khối ngắn hơn. Nó hoàn toàn phụ thuộc vào bạn!
Luôn đảm bảo bạn đã thu nhỏ hình lại và tự đánh giá.
46
 Mặc dù bản vẽ không phải là nghệ thuật pixel, nhưng về mặt kỹ thuật,
chúng được tạo thành từ các pixel trên màn hình. Thuật ngữ kỹ thuật
cho điều này là hình ảnh đồ họa raster, hoặc trong tiếng Anh đơn giản
là: "hình ảnh trên lưới pixel"”.

Hãy phóng to một đường cong phẳng nằm ngang. Sau đó,
chúng tôi sẽ so sánh nó với một đường có nhiều đường chéo
hơn.
Hat in Time (PC)

Lưu ý rằng đường cong càng dốc thì càng có ít màu sắc hơn.

Tất nhiên, đối với nghệ thuật pixel, nó sẽ quá mờ với quá nhiều màu sắc. Nó sẽ không giống với nghệ thuật
pixel truyền thống nữa, thay vào đó nó sẽ giống như một hình ảnh thông thường.

Longer steps = More shades of AA (bước dài hơn = AA nhiều sắc thái màu hơn)

Tóm lại

47
45° lines ( đường 45 độ)
Khử răng cưa trên đường 45 ° là không phổ biến nhưng vẫn có ngoại lệ! Ở đây, các giới hạn của NES
cho thấy sự thiếu hụt AA một cách độc đáo. Với ít màu hơn, có rất ít hoặc không cần AA.

Kirby’s Adventure (NES)

Sprites với nhiều màu hơn, cung cấp nhiều loại hơn:

Mega Man Battle Chip Challenge (GBA) Kirby’s Super Star Ultra (3DS)

Tâm của đường cong có thể nhạt hơn hoặc đậm hơn; nó phụ
thuộc vào loại đường cong.

48
Convex curve (Đường cong lồi)

Trung tâm có màu sáng. Các

đầu có màu tối.

Concave curve (Đường cong lõm)

Trung tâm có màu đậm. Các đầu

có màu sáng.

Pixel tối hơn hoặc sáng hơn thay đổi trọng lượng của phần 45 °.
49
 Pixel-Logic Bonus #2
Vẫn không chắc chắn về cách tạo một đường cong nhẹ 45 °? Không vấn đề gì!
Đây là một ví dụ về đường cong.

Đường cong sau đây là từ khung màu đỏ nổi bật trên sprite này. Đó là một
phác thảo, nhưng nó có thể dễ dàng được pha trộn với nền.

1. 2. 3. 4.

5. 6. 7. 8.

50
Jagged lines (Đường răng cưa)
Làm gì với một đường răng cưa tự nhiên? Chúng rất hiếm, nhưng vẫn tồn tại. Hãy thử thủ thuật này.

Mong muốn dừng lại ở đó? Tốt, đường đã đủ mịn.

Bạn muốn nó mượt hơn nữa? Thử cái này xem sao.

Điều này hoạt động đối với các loại đường răng cưa khác!

51
 Một số ví dụ về kỹ thuật này

Maho Sensei Negima! Private Lesson 2 (GBA)

Temmie Chang’s isometric Halloween scene (@tuyoki)

Darkstalkers 3 (Arcade/PS1)

52
Line weight (Độ dày nét vẽ)
Thao tác màu sắc có thể giúp bạn thực hiện nét vẽ trông dày hơn hoặc mỏng hơn, ngay cả ở 1 px!
Miệng thường có xu hướng chỉ là một đường đơn giản. Vì vậy, hãy lấy miệng làm ví dụ!

Breath of Fire IV (PS1)

Lúm đồng tiền nhạt, môi sẫm màu.

Lúm đồng tiền sậm màu và xuất hiện dày hơn.

Nhìn này! Cảm giác dày hơn hay mỏng hơn?

DARK = THICKER ( tối màu = dày hơn)

LIGHT = THINNER (sáng màu = mỏng hơn)

Bạn thậm chí có thể thêm các đường sáng hơn trên đầu của một đường cong để tạo lại
nét vẽ (xem ví dụ màu cam và lục lam)
Chỉ cần đặt ở xung quanh, nhưng không sử dụng quá nhiều sắc thái màu!

53
 Quan sát các dòng trên sprite sau đây. Tập trung vào khuôn mặt của họ.
Bằng cách thêm nhiều khử răng cưa, các đường có vẻ dày hơn.
Khử răng cưa ít hơn làm cho các đường sắc nét hơn và mỏng hơn.

Earthworm Jim (Sega Genesis) Disgaea 4, Disgaea D:2 (PS3)

Hãy xem một đường có thể trở nên dày hơn hoặc mỏng hơn một cách dễ dàng như thế nào.
Màu sắc và vị trí pixel tạo nên sự khác biệt!

Ghi nhớ

Không có ích gì khi lạm dụng AA. Bạn có thể nhận

được kết quả tương tự với ít nỗ lực hơn. Trong ví
dụ bên phải, mặt bị mờ gần như giống hệt nhau
trong tất cả các giai đoạn. Vì vậy, không cần quá lạm
dụng AA. Chỉ cần thêm vào 1 hoặc 2 màu.

Độ dày nét vẽ là phức tạp. Đó là cơ sở của chuyển động

subpixeling. Điều này sẽ được tiếp tục trong chương:
“Sub-pixeling”.

54
 Banding ( Dải)

...là Xấu.
Điều này xảy ra khi hai hàng pixel ôm nhau một cách hoàn hảo. Nghe có vẻ dễ thương, nhưng nó thực sự không phải vậy!
Chúng có cùng chiều dài và dính vào nhau.

Little Nemo: Dream Master (NES)

Nó có thể trở nên tồi tệ hơn:

Ghostbusters (Genesis/Megadrive)

tệ nhất, đây là phần nổi của tảng băng

chìm với ví dụ này. Có rất nhiều dải, tôi
sẽ không bận tâm đến nó.

55
 Tại sao điều này lại tồi tệ như vậy?

Nó làm cho các đường cong của bạn trông có khối.

Nó làm cho các đường có vẻ dày hơn bạn mong muốn.
Nó làm mờ đường viền của bạn quá nhiều.
Nó đi theo viền một cách hoàn hảo, dẫn đến việc tạo lớp một bọc cho shading(việc đổ bóng).

Bạn có thể đang nghĩ: "Tôi không thấy có vấn đề gì với nó?"

Điều này là do bạn đang xem nó được phóng to. Khi được xem ở kích thước 1x hoặc 2x, nó thực sự
chảy vào sprite và đó là lúc bạn nhận thấy dải.

56
Làm thế nào để tôi sửa nó?

Loại bỏ một hoặc hai pixel khỏi cạnh.

Thêm một hoặc hai pixel vào cạnh.
Sử dụng Khử răng cưa.

Kiểm tra các mũi tên màu để xem các bản sửa lỗi này!

Dragon Warrior Monsters 2 (GBC)

Trái: sửa dụng dải

Phải: sửa lại theo lời khuyên.

Dải là xấu, nhưng đừng lo lắng.

Đôi khi điều đó là không thể tránh khỏi.
Khi bạn nhìn thấy nó ... hãy sửa nó!
Chỉ cần cố gắng loại bỏ nó càng nhiều càng tốt!

Có những kiểu dải ít quan trọng hơn như dải song song, dải phối màu và dải AA, nhưng chúng
sẽ được đề cập trong chương “Clean-up”.
57
 Pixel-Logic Bonus #3
Vẫn không thấy có gì sai về dải? Hãy kiểm tra.

Nếu có dải trong một bản vẽ kỹ thuật số thông thường, nó sẽ giống như sau:

Không có dải Có dải

Lưu ý rằng đây chỉ là ô tô bóng. Nó sẽ trở nên tồi tệ hơn nếu nó được tô bóng mờ.

Một cách khác để chứng minh dải băng làm ngứa mắt khi làm mờ hình ảnh.

Just...ew! ( eo ôi ^^ )
58
Kết luận
Khử răng cưa là một chủ đề lớn. Đừng lo lắng nếu bạn cảm thấy quá tải. Hầu hết các kỹ thuật này
sẽ trở thành bản năng theo thời gian khi bạn vẽ nhiều pixel art hơn.

Một số người làm nghệ thuật pixel mà không cần bất kỳ AA nào và họ thực hiện một công việc cực kỳ đẹp
mắt! Hãy nhớ tìm kiếm các trò chơi điện tử truyền cảm hứng cho bạn và xem cách họ sử dụng AA.

Shining Force CD (Sega CD)

Food for thought Techniques Avoid

Introduction How to apply Banding
To AA or not to AA? Flat curves 45
When is it necessary? ° lines Jagged
lines Line
weight

Trong chương tiếp theo, chúng ta sẽ tìm hiểu kỹ về màu sắc và cách chọn bảng màu!
59
Chapter 3: Colour (Màu)
Colour
Giới thiệu
Màu sắc rất thú vị nhưng nó có thể trở nên khó nhằn. Chúng là phần chủ quan nhất của sprites khi chúng xây dựng
bầu không khí của một trò chơi / bức tranh.

Batman (1989 , NES) Shin Megami Tensei Mega man 6 (1994 , NES)
(1992 ,SNES)

Super Metroid (1994 ,SNES) Tales of Phantasia (1995, SNES) SMW2: Yoshi’s Island (1995, SNES)

Red Earth (1996 , Arcade) Breath of Fire IV (2000 , PS1)

61
 Left: Drawn to Life (2007, NDS)
Top right : Shovel Knight (2014, Various)
Bottom right : Mighty Switch Force (2013, WiiU/3DS)

Lý thuyết màu sắc là một kỹ năng phổ thông.

Nó có thể được áp dụng cho tất cả các loại hình nghệ thuật: từ hội họa và nhiếp ảnh đến thiết kế nội thất.
Chúng tôi sẽ không đi sâu vào chi tiết ở đây, bởi vì nó là thứ đã được dạy trong trường học và các bài hướng
dẫn về lý thuyết màu sắc được phổ biến rộng rãi trên internet. Màu sắc có thể tạo ra hoặc phá vỡ một hình ảnh,
vì vậy hãy đảm bảo rằng bản thân bạn biết các kỹ năng lý thuyết màu cơ bản.

Đối với Pixel-logic, chúng tôi sẽ chỉ tập trung vào các khía cạnh dành riêng cho nghệ thuật pixel và thiết kế trò chơi.

MỘT SỐ THIẾT BỊ CÓ MÀU VỚI ĐỘ SÁNG THẤP.

Màu sắc không được hiển thị giống nhau trên tất cả các màn hình.
Đó là một vấn đề chung với nghệ thuật. Vui lòng điều chỉnh cài đặt của bạn!

62
 Cách chọn màu
Pixel art là một nghệ thuật kỹ thuật số. Không giống như các phương tiện truyền thống, việc tạo màu hoạt động nhờ các thanh trượt.
Dưới đây là 3 yếu tố tạo nên màu sắc cho nghệ thuật kỹ thuật số. Bạn có thể tìm thấy chúng trong tất cả các phần mềm.

Đối với cuốn sách này, chúng tôi sẽ sử dụng Phương pháp 1 làm tiêu chuẩn
cho các trang trong tiếp theo và phần giải thích đề cập đến việc chọn màu.

Phương pháp 1 – 3 thanh trượt màu

Hue

Saturation

Value

Lưu ý: Một số chương trình sử dụng Brightness thay vì Value. Nó chỉ là một cái tên khác.
Khi thanh trượt thứ ba cho biết Độ sáng, nó chuyển sang màu trắng thay vì màu thuần.

Hầu hết, nếu không phải tất cả các chương trình đều nên có thêm bộ chọn màu.
3 yếu tố này không được hiển thị giống nhau trong mỗi chương trình!

Hue + Saturation / Value Value + Saturation / Hue Hue + Value / Saturation

MSPaint, GraphicsGale , Flash Paint Tool SAI , Photoshop, Pro Motion , Photoshop,
Clip/Manga Studio

Một số chương trình sử dụng hình tam giác hoặc hình tròn để chọn màu
thay vì hình vuông. Đừng lo lắng: Bạn sẽ luôn có những gì bạn cần.
63
Phương pháp 2 – Red, Green, Blue (RGB)

RGB, là một phương pháp tạo màu phụ :

Để có được các màu sáng hơn, bạn thêm nhiều giá trị hơn vào mỗi thanh trượt.

Để có được màu xám thuần túy, hãy cung cấp cùng một giá trị cho mỗi thanh trượt.

Để có được màu sắc nhạt hơn, hãy di chuyển các thanh trượt lại gần nhau hơn.

Một số chương trình giúp bạn trộn

màu bằng cách hiển thị bản xem
trước những màu bạn có thể tạo
ra.
64
Tại sao phải tạo bảng màu?
Có một bảng màu không nhất thiết có nghĩa là có màu sắc ở bên cạnh. Bạn vẫn có thể hút màu trong ảnh nghệ thuật
của bạn. Đừng lo lắng.

Tiết kiệm thời gian

Bạn tiết kiệm được nhiều thời gian hơn trong việc hút
màu, thay vì tạo lại các màu mới hoặc pha trộn chúng.

Giữ cho bạn có tổ chức

Nếu bạn đang sử dụng vô số màu sắc, bạn có thể bị lạc.

Thật là rắc rối khi cố gắng tìm ra màu sắc nếu bạn đang
làm việc với các tác phẩm nghệ thuật lớn.

Làm hình ảnh động dễ

dàng hơn
Bạn càng có nhiều sắc thái màu, càng khó tạo hình ảnh động. Bạn
sẻ không muốn màu sắc nhấp nháy khi ảnh nghệ thuật pixel của
bạn chuyển động.

Ở đây, bảng màu không thực sự Tuy nhiên, điều này chắc chắn
cần thiết, chỉ cần hút màu! đòi hỏi một bảng màu

Guest artist: Justin Cyr Guest artist: Ahruon

Một số chương trình sẽ tự động tạo bảng màu cho bạn, vì vậy bạn không cần phải làm như vậy!

65
Colour ramps ( Dốc màu)
Đây là những đường dốc. Đơn giản!

Nghệ thuật pixel có số ích màu sắc đi chung với nhau.

Một cách tốt để làm điều đó là sử dụng lại các màu giống nhau trên các sắc thái khác nhau.
Bạn không bắt buộc phải làm điều này, nhưng nó có thể tạo ra một số hòa âm thú vị.

X = Shared colours
( màu được chia sẻ)

Palette by Cocefi

Bạn có thể nghĩ: “Điều này khiến tôi khó hiểu”. Không quan trọng bạn hiển thị bảng màu của mình như thế nào.

Miễn là BẠN biết cách sử dụng nó. Thấy không?

Bạn vẫn có thể kết hợp các đường dốc màu!
66
Hue shifting (dịch chuyển màu)
Hue shifting, còn được gọi là “coloured shadows” cũng có thể được áp dụng cho bất kỳ nghệ thuật
tạo hình nào khác. Nó làm cho tác phẩm của bạn trở nên đầy màu sắc và hấp dẫn hơn khi nhìn vào.
Phương pháp 1 - Regular hue shift (dịch chuyển màu đều nhau)

nâu nhạt, được sử dụng cho mọi sắc thái. Với mỗi sắc thái, chúng trở nên đỏ hơn.
Các sắc thái sẽ lạnh u ám . Các sắc thái bây giờ đỏ ấm áp.

Bạn có thể tạo ra các tâm trạng khác nhau cho

màu xanh lá cây bằng cách tạo các điểm nổi bật
và đổ về các màu khác nhau.

Làm điều này bằng cách dịch chuyển thanh trượt màu hue.
Bạn thay đổi màu sắc như thế nào là tùy thuộc vào bạn.

A B A B

Bạn có thể chuyển màu sang trái hoặc phải trên thanh trượt màu.
Đường dốc màu A hơi chuyển sang màu vàng, trong khi màu đường dốc B chuyển sang màu tím.

Đường dốc A trông hơi kỳ quặc. Đường dốc B có lẽ là những gì bạn đã quen thuộc.

67
 Sonic Rush Adventure (2007 , NDS) Seiken Densetsu 3 (1995 , SNES)

Sonic Rush Adventure (2007 , NDS)

Mighty Gunvolt (2014 , 3DS) Sonic 3 (1994 , Genesis)

Coropata (2009 , NDS)

68
 Màu vàng là màu sáng nhất của cầu vồng. Màu tím là tối
nhất. Đây là lý do tại sao mọi người thường dịch chuyển
màu từ vàng sang tím.

Bạn có thể có sự thay đổi màu sắc tinh tế hoặc sự thay đổi màu sắc mạnh mẽ. Đó là một vấn đề của sở thích.
Ngay cả trong thang độ xám, bạn có thể nhận thấy nguyên tắc hoạt động!

Phương pháp 2 - Multiply layers (Nhân các lớp màu)

Thay vì chuyển màu theo cách thủ công từng đoạn dốc màu, bạn có thể thử nghiệm với các sắc thái
màu bằng cách sử dụng nhân các lớp. Bạn có thể tìm thấy chúng trong phần mềm phức tạp hơn.

Palette by Cocefi

Một khi bạn tìm thấy một số kết hợp tuyệt vời, chỉ cần hút lấy màu đó!
Các ví dụ chỉ hiển thị xanh lục, lam và đỏ tươi, nhưng bạn có thể sử dụng các màu khác!
69
 Pixel-Logic Bonus #3
Hue-shift không phải là điều duy nhất
làm việc với Saturation (độ bão hòa) cũng quan trọng!

Sự dịch chuyển độ bão hòa không chỉ giống như sự dịch chuyển hue. Hue được sử dụng để tạo ra một bầu không khí hoặc cảm giác.
Độ bão hòa được sử dụng để làm nổi bật một khu vực cụ thể của shading (đổ bóng).
Đừng nghĩ về màu sắc như những con số. Chỉ cần thử nghiệm và xem những gì phù hợp với bạn.

Tất cả các màu có cùng pha trộn Vùng tối bão Vùng tối không 1 sắc thái
độ bão hòa Độ bão hòa độ bảo hòa- Vùng sáng bão hòa - Vùng được bảo
hòa không bão hòa sáng bão hòa hòa mạnh

Sắc thái sáng hơn có màu rực Sắc thái sáng hơn có màu u ám.
rở.Sắc thái tối hơn thì u ám. Sắc thái tối hơn thì rực rở.

Guest artist: Ahruon

70
Kết luận

Hãy xem hình vẽ Tentacruel này, cả ở dạng ban đầu và các phiên bản được chỉnh sửa thủ công của nó.
Thấy sự khác biệt không? Lựa chọn một màu sắc nhỏ có thể có tác động lớn!

Pokémon Heart Gold/Soul Silver (2009, DS)

Đây chỉ là một vài phương pháp để thay đổi màu sắc.
Điều quan trọng là hãy thử nghiệm và nghiên cứu những bức tranh khác mà bạn thích.
Hue và saturation( Độ bảo hòa) là những yếu tố cần thiết để tạo bóng và khử răng cưa.

71
Black tones (Tông màu đen)
Bạn có thể làm nhiều hơn nữa để thêm phong cách cho các sprite của mình!
Khá nhiều họa sĩ và trò chơi thêm màu đen hoặc chọn màu xám đậm vào sắc thái màu.

Fire Emblem (GBA), Mega Man 7 (SNES), Mario Party Advance (GBA), Legend of Zelda: Link to the Past (SNES),Mario &
Luigi: Dream Team (NDS), Earthbound (SNES), Chrono Trigger (SNES), Breath of Fire IV (PS1)

Không có lý do kỹ thuật nào khiến các họa sĩ pixel hoặc trò chơi chọn làm điều này.
Nó không liên quan gì đến những hạn chế. Nó hoàn toàn là thẩm mỹ!

From L to R : Super Mario Kart (SNES), SMW2: Yoshi’s Island (SNES), SMA3: Yoshi’s Island (GBA), Mario & Luigi: Superstar
Saga (GBA), Mario Party Advance (GBA), Mario & Luigi: Partners in Time (NDS), Yoshi’s Island DS (NDS)

72
 màu đen không bị giới hạn bởi trò chơi hoặc phong cách.
Ngay cả trong cùng một trò chơi hoặc trong cùng một phong cách, bạn có thể có những khác biệt tinh tế:

Pokémon Black & White (2011, NDS)

Không thể nhìn thấy sự khác biệt tinh tế? Hãy làm sáng chúng lên một chút.

Mặc dù màn hình của bạn không hiển thị những màu này, hãy nhớ rằng pixel art của bạn đang được chia sẻ trực tuyến,
trên các nền tảng khác nhau hoặc các hệ thống khác nhau. Độ sáng sẽ khác nhau tùy theo từng thiết bị.

73
Using greys (Sử dụng màu xám)
Greys Màu xám giống như một con Ditto của màu sắc. Chúng có thể dễ
dàng ngụy trang theo cách của chúng thành một sprite mà bạn không
hề nhận ra.
Đặc biệt là với một bảng màu hạn chế. Nó hoạt động tốt với các bảng
màu có bầu khí quyển nguồn ánh sáng đặc biệt: bảng màu ban đêm,
môi trường đỏ rực, ánh sáng xanh độc hại và nhiều hơn thế nữa!

Khi bạn pha trộn 2 màu bổ sung, bạn sẽ có được một màu
xám gần như thuần túy. Nó làm cho màu xám trở nên hoàn
Màu xám loại bỏ sự màu mè.
hảo để pha trộn. Không đẹp, nhưng hữu ích!
Nó làm cho họ trung lập.

The Chaos Engine (1993, Amiga CD32)

Đây là cây trong Boktai: The Sun Is In Your Hand (2003, GBA). Tâm trạng
và ánh sáng tổng thể của cảnh này là màu tím, và như vậy, tất cả các màu
có vẻ khác với màu thông thường của chúng.

Thân cây trông có màu nâu, nhưng dưới ánh đèn ban đêm. Nó
thực sự là một màu xám với chút tím.

Nếu bạn khử bão hòa màu, bạn có thể dễ dàng

đánh lừa thị giác của mọi người và bắt chước
màu sắc dưới một ánh sáng khác! Đó là lý do
tại sao màu xám có thể dễ dàng pha trộn.

Hãy sử dụng màu xám để thay thế màu sắc.

Việc sử dụng màu xám sẽ được đề cập lại trong chương “sub-pixeling”.
74
Lựa chọn màu sắc I
Tác giả khách mời: Cocefi

Black tones (Tông màu đen)

Hãy tránh những màu đen tuyền trừ khi nó thực sự cần
thiết. Bạn có thể sử dụng màu nâu đậm, tím đậm, xanh lá
cây đậm hoặc thậm chí là xám đậm để thay thế!

Shadows (Bóng)
Hãy cho bóng một tông màu. Bất cứ khi nào có thể, tặng
thêm cho màu của bóng với các chi tiết.(đoạn này khó
dịch quá)

Mái nhà hồng mềm có bóng tím mờ. Các chi tiết của Cocefi
có xu hướng màu sắc bão hòa tươi sáng. Bóng của anh ấy
hơi chống bão hòa và dịch chuyển màu.

Thử nghiệm
Đừng ngại thử những cách kết hợp màu kỳ lạ. Có rất nhiều Thử nghiệm & Lỗi liên quan. Đảm bảo xoay quanh các
thanh trượt Hue / Saturation, không chỉ độ sáng để đổ bóng.

75
Lựa chọn màu sắc II
Tác giả khách mời: Syosa (しょさ)

Màu yêu thích của tôi là màu tím đậm (R,G,B)=(84,58,84).

Tôi có thể tạo rất nhiều đường dốc và chuyển màu từ một màu duy nhất. Tôi nghĩ rằng
việc sử dụng lại các màu của bóng tương tự sẽ làm cho nghệ thuật pixel trông đẹp hơn.

Khi tạo đường dốc màu theo hệ màu (đỏ, vàng, xanh lá cây ...). Tôi
đặt màu tối và màu sáng ở cùng nhau càng nhiều càng tốt. Điều này
khiến nó dễ dàng hơn để có được một màu sắc hài hòa tổng thể.

Số lượng màu sắc trên dốc màu của bạn

Phụ thuộc vào kích thước pixel art của bạn.

Đối với các sprite nhỏ, một dốc màu với 2-3 màu là
đủ, ngay cả khi bạn có nhiều màu khác nhau. Bạn
không thể biết sự khác biệt giữa 2 màu sắc tương
tự ở kích thước đó.
Nó không có bất kỳ tác động nào.

76
 Thay đổi màu sắc trong quá trình vẽ
tôi thay đổi màu sắc liên tục. Hãy dành một chút thời gian để nhìn lại. Nhìn vào nghệ thuật pixel của người khác sau đó
nhìn lại bức ảnh của chính bạn. Nếu tôi vẫn cảm thấy không ổn sau khi nhìn lại các màu, tôi thay đổi tất cả từng màu một.

Hiệu chỉnh màu sắc

Điều này thực sự phụ thuộc vào pixel art sẽ được sử dụng để làm gì.

Dùng để in ấn và làm đồ thủ công

Màu sắc có thể bị hạn chế nghiêm trọng, vì vậy hãy sửa nó cho phù hợp.
Syosa đang đề cập ở đây về giới hạn in CYMK đi kèm với in ấn kỹ thuật số. Màu sắc sẽ thay đổi theo bảng màu
này, vì vậy hãy thận trọng khi sử dụng RGB để in.

Dùng cho trình duyệt web

Tôi nhúng hình ảnh vào hồ sơ ICC sRGB cho phép tôi xem và xử lý các tác động của sự thay đổi màu sắc
trong trình duyệt.

Dùng cho trò chơi điện tử

Đôi khi màu sắc không khớp với màu của các hình ảnh khác, vì vậy ngay cả khi màu sắc của hình ảnh
tự nó ổn, đôi khi tôi vẫn phải điều chỉnh nó.

Lời khuyên của Syosa đã được dịch từ tiếng mẹ đẻ của anh ấy: tiếng Nhật.
Người dịch: Alexander Hicks
77
Lựa chọn màu sắc III
Tác giả khách mời: Jinn

Màu sắc và tâm trạng

Trong khi ngôn ngữ cơ thể và nét mặt có thể tạo nên tâm trạng, thì việc vẽ tranh với màu sắc ấm hơn hoặc lạnh hơn
có thể làm tăng tâm trạng! Màu xám có xu hướng là màu trung tính.

Sử dụng màu xanh lam, tím và xanh mòng két có thể mang lại cho bạn ấn tượng về một cảm xúc lạnh hơn /
buồn hơn,trong khi màu đỏ, cam và vàng vàng có thể mang lại cảm xúc ấm áp hơn / hạnh phúc hơn!

Đừng ngại khi chơi với những đường dốc màu của bạn!

Đa dạng hóa màu sắc của bạn sẽ làm cho tác phẩm của bạn thú vị hơn. Nó sẽ phá vỡ cái nhìn đơn sắc. Bạn
có thể đạt được điều này bằng cách sử dụng các màu sắc khác nhau trong cùng một đoạn dốc màu.

Chỉ cần đảm bảo rằng các màu vẫn sẽ hòa trộn tốt với nhau. Thử nghiệm là chìa khóa!
78
Contrast (SỰ tương phản)
Tác giả khách mời: Paul Veer

Readability (khả năng đọc) là ưu tiên số 1 khi chọn màu.

Tôi thích chọn những màu sắc tạo ra nhiều sự tương phản
cho các sprite. Tôi luôn cố gắng có 1 màu chủ đạo cho mỗi
nhân vật do mình thiết kế. Một trong hai loại màu này :

tạo nên hầu hết nhân vật

hoặc làm nổi bật các tính năng quan trọng nhất

Sau đó, tôi sử dụng một màu phụ để thêm các tính năng bổ
sung; thường là màu tương phản nhiều với màu chủ đạo. Độ
tương phản có thể được sử dụng để làm cho nhân vật nổi bật so
với nền. Điều này đặc biệt nhằm vào các trò chơi. Tuy nhiên, đây
không phải là vấn đề với một minh họa tĩnh.

Cá (trái) chủ yếu là màu xanh lá cây. Tôi sử dụng màu vàng để làm nổi bật miệng và
vây của nó để nhấn mạnh vẻ ngoài giống cá của nó. Màu vàng sáng hơn tương phản
tốt với màu xanh lá cây.

Nếu một đường viền màu đen xác định những chi tiết đó, thì hình vẽ sẽ mờ
và khó nhìn hơn. Một sự lãng phí pixel và không gian quý giá!

Paul đã đưa ra một khái niệm rất quan trọng: khả năng đọc, sẽ là chủ đề của Chương 4.
79
 Những hạn chế khác
Nghệ thuật điểm ảnh được sinh ra từ những hạn chế. Màu sắc có thể bị ảnh hưởng bởi các giới hạn. Ngày nay, không
có giới hạn nào, nhưng các họa sĩ vẫn thích thử thách bản thân! Đôi khi nó có thể tạo ra những hiệu ứng đẹp mắt.

Tuy nhiên, khi công chúng nói về đồ họa bit, họ nhầm lẫn giữa
sức mạnh xử lý của giao diện điều khiển với màn hình hiển thị màu sắc.

Các bộ điều khiển có cùng công suất bộ vi xử lý không giống với quy lắc màu.

Sự nhầm lẫn này dẫn đến văn hóa đại chúng gọi đồ họa từ bộ điều
khiển trước năm 1990 là 8-bit và 16-bit cho đồ họa sau năm 1990.
Hầu hết mọi người nhìn thấy sự thiếu màu sắc, nhưng họ không nhận
thức được các quy tắc và giới hạn chính xác.
Tra cứu các hạn chế của từng bộ điều khiển hoặc
máy tính để biết thêm thông tin. Bạn sẽ bất ngờ!
Ngay cả từ năm 2015, các tệp hình ảnh
.GIF ngày nay vẫn có giới hạn màu là 256
màu.
Định dạng được cập nhật lần cuối vào năm
1989 và vẫn là 8 bit trên mỗi pixel. 1 bit cho
phép 2 màu. Trong toán học, 256 = 2 lũy
thừa cho 8 (=28).

NES Commodore64 Sega Master System ZX Spectrum

Double Dragon trông khác nhau trên mỗi bộ điều khiển 8 bit

80
Sprites với màu sắc giới hạn
Lưu ý: Bạn không phải giới hạn màu sắc của mình. Đó là một sự lựa chọn.
Phần này dành cho những người muốn tái tạo các trò chơi điện tử cũ, hack trò chơi điện tử 2D hoặc thích giải trí với
những giới hạn. 1 màu sẽ được gộp từ các màu gần giống nhau. Để dể hiểu, tôi sẽ loại trừ nó ở ví dụ tiếp theo

Sprite của tôi ban đầu có 25 màu (24 + Giảm màu từ 24 xuống 20.
màu trong suốt).
• Thay thế màu xám bằng tông màu da.
Có 1 đường dốc màu cho mỗi màu chính. Vàng - Da - • Áo sơ mi trắng sử dụng tông màu da. Không tệ.
Nâu - Tím - Xanh lá - Xám • Loại bỏ màu xanh mòng két đậm nhất. Nó hầu như không nhìn thấy.

15 màu. Đây là phiên bản cuối cùng tôi quyết định sử dụng. 10 màu. Sprite vẫn còn nguyên vẹn.
16 màu thường là giới hạn cho hầu hết các sprite. Nó trông không kỳ lạ… .yet.

• Hợp nhất tông da với tóc nâu. • Đổi màu vàng sang tông màu da.
• Màu xanh lá cây và màu xanh mòng két hiện có cùng • Tô lại màu xanh lá cây với dải màu xanh mòng két.
điểm nhấn. • Kết hợp các sắc thái tối nhất với nhau
• Đã loại bỏ AA màu cam: hầu như không nhìn thấy nó.

81
 Ngoài 10 màu, sprite đặc biệt này sẽ mất chất lượng, màu sắc và chi tiết.

Tuy nhiên, mỗi sprite là khác nhau. Không có "một quy tắc phù hợp với tất cả" với màu sắc.

Tóm tắt từng bước

82
Cảnh với màu sắc hạn chế
Tác giả khách mời: Jinn

Sử dụng lại màu sắc của bạn để giữ cho bảng màu của bạn nhỏ hơn.
Màu sắc có thể được sử dụng lại trong cùng một tác phẩm mà không làm mất giá trị của nó. Bạn có thể đặt các màu
lại với nhau hoặc là thuộc các đường dốc khác nhau!

Màu đỏ trên tóc = chiếc giường và chỗ đứng ban đêm.

Tông màu da tối = ga trải giường, gối và tường.
Tông màu da sáng = ngọn nến.

Điều quan trọng là đa dạng hóa màu sắc của bạn càng nhiều càng tốt. Nếu các đối tượng khác nhau có
cùng màu chạm trực tiếp vào nhau sẽ làm cho chúng hòa trộn. Bộ khăn trải giường và giường có màu sắc
khác nhau nên không bị pha trộn, trong khi tông màu da và ga trải giường có cùng màu, vì vậy chúng có
cảm giác giống như một tổng thể. Mái tóc có chủ đích màu đỏ để ngăn cách cô gái với bức tường..

83
Ích tới cực hạn
Tác giả khách mời: Cocefi

Đôi khi vì một số lý do cực đoan, chúng ta phải làm việc với một bảng màu xấu xí bị hạn chế nghiêm trọng.

Ôi VL!

May mắn thay, chúng ta có thể làm cho nó trực quan hơn để sử dụng bằng cách sắp xếp lại màu sắc theo cách
chúng ta cảm nhận màu sắc về độ sáng. Một số màu sắc trong cầu vồng "cảm thấy" tối hơn và nhạt hơn.

Ngon~

Đoán bạn có thể gọi nó là Xtreme Hue-shift. Bạn có thể mở rộng bảng màu hơn nữa bằng cách phối màu.
Nhưng hãy lưu ý rằng: phối màu quá nhiều có thể làm cho bề mặt trông có kết cấu hoặc thô ráp.

84
 Kết luận
Màu sắc là tất cả của ngữ cảnh. Nó không chỉ tạo ra tâm trạng hoặc bầu không khí cho nghệ thuật pixel của bạn, nó còn xác định
phong cách. Màu sắc có thể dễ dàng đánh lừa thị giác và với một số thực hành, bạn sẽ có thể sử dụng chúng để làm lợi thế của mình.

Pokémon Heart Gold/Soul Silver (2009, DS)

Food for thought Practice Limitations

(optional)
Introduction Hue shifting Different limitations
How to pick colours Black tones Sprites Scenes
Why make palettes? Greys Extreme limitation
Colour ramps Choosing colours I-III
Contrast

Màu sắc không dừng lại ở chương này. Nhiều khía cạnh khác sử dụng màu sắc làm lợi thế của chúng để tận dụng
tối đa nghệ thuật pixel. Chỉ cần đảm bảo làm mới lý thuyết màu sắc của bạn và nhớ:

Thử nghiệm!

85
 86
Readability
4
Chapter 4: Readability (Khả năng đọc )
Giới thiệu

Đã bao giờ bạn nhìn vào một sprite và tự hỏi: “Cái này được cho là gì? “Việc hiểu sai
các sprite là phổ biến vì chúng thiếu chi tiết.

Zelda: LTTP có một vài sprite như thế.

Agahnim là đỉnh cao của sự hiểu sai về pixel.

Vậy là anh ta đội mũ, hay là để mặt mộc?

Khả năng đọc có nghĩa là Rõ ràng.

Làm thế nào để người xem dễ dàng hiểu những gì bạn đã thể hiện?
Làm thế nào mà pixel art của bạn truyền tải những gì mà bạn đang cố gắn để truyền tải cho khán giả?
Sprite của bạn đọc tốt như thế nào?

87
Kích thước quan trọng ...

Mario đang mỉm cười hay bị sốc khi bạn mất mạng trong Mario 3? Với kích
thước 16x16 pixel, thật khó để biết anh ấy bị sốc với bộ ria mép của mình.
Khi anh ta ở trên một canvas lớn hơn, điều đó dễ nhận biết hơn..
Các họa tiết NHỎ hơn khiến việc truyền tải KHÓ hơn.

SMB (NES) SMB3 (NES) SMB2 (NES) SMW (SNES) SML (GB) SML2 (GB)

Các sprite lớn cần có đường nét rõ ràng và hình vẽ chắc chắn. Các sprite
nhỏ cần có các đặc điểm dễ nhận biết để có thể đọc được. Bạn
không thể ép các chi tiết nhỏ lại theo các sprite nhỏ, vì vậy hãy đảm bảo
điều chỉnh các thiết kế nhân vật.
Kích thước của sprite và canvas của bạn sẽ xác định
trọng tâm của bạn nên là gì? .

Guest artist: Syosa

88
Case Study: Cryamore

Một trong những quyết định quan trọng nhất trong quá trình phát triển Cryamore là kích thước của sprite.

Mô hình sprite gốc cao ~ 190px

ƯU: Rõ ràng và chi tiết ở độ phân giải cao.
Thêm không gian để tạo hoạt ảnh.
NHƯỢC: Thời gian và công sức cho hoạt ảnh.

70% so với mẫu gốc của cô ấy thì cao ~ 130 px

ƯU: Chất lượng độ phân giải cao vừa phải.
Khung được hoàn thành sớm hơn.
Nét mặt được đơn giản hóa.

NHƯỢC: Nhiều vấn đề về khả năng đọc hơn, ít HD hơn.

Ít chi tiết hơn cho thiết kế nhân vật phức tạp. 89
 “ Chúng tôi đã đặt tiêu chuẩn cực kỳ cao khi nói đến
các sprite HD có độ phân giải cực cao. [...] Thành thật
mà nói, sẽ chẳng có gì khác biệt nếu chỉ vẽ tay vào
thời điểm đó. Tất nhiên, chúng tôi có thể chỉ giữ lại
các hình ảnh HD và giảm số lượng khung hình, nhưng
điều đó sẽ khiến mọi thứ trông rẻ hơn gấp mười lần,
[...] Vì vậy, chúng tôi đã ngồi lại và thực hiện một
cách tiếp cận mang tính xây dựng theo cách chúng tôi
đang làm, tách rời từ sự hấp dẫn cảm xúc về việc
chúng ta đã yêu vẻ ngoài này đến mức nào.
Cryamore Dev-Blog

Hoạt ảnh sprite càng nhỏ, ảo giác chuyển động càng

mượt mà. Chỉ cần giảm kích thước, hình ảnh động sẽ
trông mượt mà hơn. Các mảnh nhỏ hơn cũng cho phép
bạn hoán đổi trang phục dễ dàng hơn!

Ranh giới giữa nghệ thuật nhị phân và nghệ thuật pixel bắt đầu mờ khi các hình vẽ quá lớn.
Các trò chơi như Dengeki Bunko Fighting Climax (PS3) là ranh giới nghệ thuật nhị phân.
90
... nhưng pixel quan trọng hơn!
Các sprite lớn hơn có rất ít vấn đề về khả năng đọc. Các sprite nhỏ hơn có xu hướng phức tạp hơn một chút.
Rõ ràng phải không? Nhưng nó không phải là đơn giản.

Super Mario Kart (SNES) đã cải tiến các hình vẽ Yoshi cho phiên bản tiếng Nhật. Khi anh ấy
thu nhỏ trên màn hình, anh ấy sẽ KHÓ ĐỌC hơn. Anh ấy có còn giống Yoshi không??

Ngay cả trong cùng một canvas, các

sprite của bạn luôn có thể được cải thiện.

Họa sĩ khách mời: Neorice/ Guido Bos (@Neoriceisgood)

91
 Pixel-Logic Bonus #5
Việc chỉnh sửa lặp đi lặp lại một sprite là điều phổ biến.
Tạo nhiều phiên bản và để mọi người chọn,
nếu bạn cảm thấy không chắc chắn!

Sprite này từ Pokémon Red / Blue (1998, GB) có nghĩa là một cậu bé
đang chơi Game Boy của mình. Sprite có kích thước trong vòng 16x16.
Tuy nhiên nhiều người xem đây là cậu bé đang cầm cốc. Hầu hết các hình
vuông trông có màu trắng. Nó có 2 pixel màu đen và 2 pixel màu xám để
hiển thị bóng của viền.

Hãy di chuyển các pixel xung quanh và xem liệu chúng ta có thể sửa chữa nó không.

Nếu chúng ta thay đổi sprite một cách mạnh mẽ, chúng ta có nguy cơ tạo ra các vấn đề
mới về khả năng đọc. Hiện tại, có vẻ như Game boy đã trở thành áo và thân của anh ấy.

Chúng ta có thể mở rộng chiếc cốc và di chuyển nó lên để che phủ khuôn mặt nhiều hơn,
nhưng điều này có thể dễ dàng trông giống như một bộ râu hoặc tất cả những thứ khác.
Nó quá lầy lội.

Bây giờ chúng ta có một hình dạng phẳng màu xám với một đường trắng rộng 4 px.
Ánh sáng cao màu trắng làm cho vật thể trở nên 3D hơn. Nhưng nó vẫn trông giống
như một khối lập phương / hay một lăng kính ngẫu nhiên.

Chỉ cần thêm một dòng 2px để xác định khe cắm hộp mực của Game boy, nó sẽ hoạt động!
Điều này trông giống như một đứa trẻ đang ôm Game boy!

Đối với các sprite nhỏ, sự đơn giản thường hoạt động.
Đừng lạm dụng các chi tiết và bám vào các hình dạng đơn giản.

92
Tại sao mỗi pixel đều quan trọng I
Tác giả khách mời: Glauber Kotaki

Độ phân giải rất nhỏ có thể dễ dàng gặp vấn đề với mỗi pixel, bao
gồm cả màu sắc của nó, tạo ra sự khác biệt lớn trong tổng thể. Vì vậy,
vị trí pixel đóng một vai trò quan trọng để người xem hiểu được tác
phẩm của bạn.
Một pixel có thể chỉ thay đổi cách mọi người diễn giải nó!

Thay đổi chỉ một vài pixel có thể tạo nên con dơi này:

Chasm (PC & PS4) (Work in Progress, future release)

93
Tại sao mỗi pixel đều quan trọng II

Đồ họa trò chơi điện tử cũ hơn có thể nhỏ, nhưng vị trí của mỗi pixel không hề nhỏ!
Một khu vực nhỏ như 6 x 6 pixel có thể cung cấp cho bạn một sự đa dạng lớn!

Characters from Technōs’ Crash ‘n’ the boys & River City Ransom (NES/Famicom)

Loạt phim Kunio-kun đã làm cho mỗi nhân vật trông khác nhau bằng cách điều chỉnh một chút pixel của
mắt và kiểu tóc của họ! Chúng đã đủ để thể hiện sự đa dạng.

Ngay cả pixel nhỏ nhất cũng có thể tạo ra sự khác biệt cho đồ họa độ phân giải thấp. Những con bọ cánh cứng từ SMB
hơi giống vỏ rùa với một con mắt to như ngọc trai đen.

Buzzy beetle from Super Mario Brothers (1985, NES)

Trong phiên bản làm lại Super Mario All-Stars (hình dưới bên trái ), chúng trông giống khái niệm hơn.
94
Các tính năng dễ nhận biết
Tác giả khách mời: Ellian

Vì vậy,nếu bạn cần tạo một sprite mới. Kích thước nó thực sự cần là bao nhiêu?
Tự hỏi bản thân một vài câu hỏi:
Tôi có cần phải nhìn thấy bàn tay của họ di chuyển không? Miệng của họ có cần phải được nhìn thấy hoặc hoạt ảnh
không? Biểu cảm khuôn mặt phải đọc được chứ? Họ có đeo hay giữ một món đồ không? Thanh kiếm có một viên
ngọc phép thuật trong đó không?

Bất kể vật đó lớn hay nhỏ,

trên canvas pixel nhỏ, nó cần phải được nhận biết!

Phần nhỏ nhất mà tôi muốn ở đây là biểu cảm trên khuôn mặt.
Tôi không quan tâm đến bàn tay hay các bộ phận cơ thể khác.

Cố gắng tìm ra phần nhỏ nhất cần được nhìn thấy. Khi bạn đã hiểu rõ, thật dễ dàng để tìm ra kích thước
sprite tối thiểu mà bạn có thể làm việc.

Đừng tập trung vào việc đưa từng chi tiết vào sprite của bạn. Tìm hiểu điều gì làm cho nhân vật trở nên độc
đáo và đại diện cho khái niệm tốt nhất. Bạn thường nghe "càng ít thì càng nhiều", và nó có xu hướng đúng.

Nếu bạn có chút nghi ngờ về việc sprite của bạn có thể đọc được hay không, hãy hỏi người khác, và đừng nói
với họ nó phải như thế nào! Tốt hơn nữa, hãy hỏi một người có ít hoặc không có kiến thức về nghệ thuật pixel.
95
Dễ dàng để đọc các chi tiết
Tăng thêm một vài pixel cũng có thể tạo ra sự khác biệt LỚN.

By Michafrar

Với ít không gian hơn, có rất ít chỗ cho nhiều đặc điểm trên khuôn mặt hoặc bàn tay.
Bạn vẫn có thể thêm chúng, nhưng chúng sẽ khiến công việc của bạn trở nên chật chội và lầy lội.

Nếu bạn đang sử dụng nghệ thuật khái niệm, tài liệu tham khảo hình ảnh hoặc bất kỳ loại hướng
dẫn nào,
hãy sẵn sàng hy sinh những chi tiết không quan trọng nếu cần thiết.

Làm việc ở độ phân giải lớn hơn có vẻ dễ dàng hơn, nhưng mọi thứ đều có thể với độ phân giải nhỏ.
Hãy chọn những gì cần thiết, vì vậy đừng lo lắng nếu một số chi tiết không phù hợp với canvas của bạn!

Original art by By Michafrar Guest artist:

Monolith Soft Neorice
96
Chi tiết I - Tay
Các trang tiếp theo sẽ thảo luận về tay và mắt. Chúng tôi sẽ giải quyết nhiều hơn trong các chương
sau. Chúng khó nhất ở quy mô nhỏ. Bạn sẽ không có đủ không gian để pixel từng ngón tay!

1. Bắt đầu bằng cách vẽ các hình dạng. Vẽ đường nhỏ quá khó.

Nghệ thuật đường nét rất phức tạp với hầu như không có bất kỳ khoảng trống nào! Nó sẽ khiến bạn bối rối hơn nữa.
Sử dụng các hình dạng phẳng, sau đó chi tiết hóa. Dễ dàng hơn nhiều! Nó sẽ giúp bạn hình dung bàn tay ở dạng 3D
trong đầu.

2. Vẽ tay như găng tay - sau đó thêm chi tiết.

Không có điểm nào làm nổi bật từng ngón tay. Bạn sẽ không có đủ không gian. Hãy tập trung
vào các hình dạng cơ bản. Ngay cả khi bạn có ngón tay dang rộng, hãy bắt đầu với găng tay.

3. Tập trung vào ngón tay trỏ và ngón tay cái. Nó xác định cả bàn tay.

Ngón tay cái đối nhau và ngón trỏ xác định bàn tay con người. Hai ngón tay đó đủ để thể hiện
sự nắm chặt, véo, trỏ, và nhiều hơn thế nữa.

97
 4. Chỉ vẽ 3 ngón tay và một ngón cái nếu cần.

Phim hoạt hình đôi khi vẽ 4 ngón tay để đơn giản hóa hoạt ảnh. Pixel art cũng vậy. Chỉ vẽ 5
ngón tay nếu bạn có đủ không gian.

5. Sử dụng các màu khác nhau để tách từng ngón tay.

Không phải lúc nào bạn cũng có đủ chỗ để có tất cả các

ngón tay hoặc vẽ phác thảo cho chúng. Càng có nhiều
màu sắc khác nhau, chúng càng nổi bật.
Để biết vị trí của từng ngón tay, bạn sẽ phải thử với độ
sáng của màu sắc. Điểm nổi bật và vùng tối giúp tăng thể
tích cho bàn tay phẳng của bạn!

6. Vẽ bàn tay, thu nhỏ nó và sử dụng làm tài liệu tham khảo.

Làm việc ở quy mô nhỏ có thể khó khăn vì bạn không thể “vẽ” một cách tự phát. Nếu bạn thực sự
gặp khó khăn hoặc sắp đến deadline, hãy vẽ một bàn tay trong chương trình vẽ tranh thông thường
của bạn và thu nhỏ nó lại. Sau đó, sử dụng nó như một tài liệu tham khảo. Bạn cũng có thể nghiên
cứu cách khử răng cưa để giúp bạn một chút.
98
Chi tiết II – đôi mắt
1. mắt là tiêu điểm chính và rất quan trọng.
mắt là tiêu điểm chính và rất quan trọng. Con
người bị quyến rũ bởi cảm xúc và khuôn mặt.
Chỉ vì lý do này, bạn nên đánh bóng các sprite
sinh vật của mình, có thể là động vật hoặc hình
người. Đối tượng của bạn xác định khuôn mặt
bằng cách tìm kiếm đôi mắt. Chúng thường là
điều đầu tiên mọi người chú ý.
Art Guest artist: Temmie Chang

2. Đôi khi không có không gian cho đôi mắt!

Beyond Oasis (Genesis/Megadrive)

Các hình vẽ không có đủ không gian cho bất kỳ đặc điểm nào trên khuôn mặt thường không thể vừa
với mắt vì chúng sẽ nhỏ hơn 1 px. Nếu vậy, hãy tập trung vào các vùng tối trên mặt để tạo vùng
mắt. Nếu bạn không chắc chắn, hãy tra cứu một số tài liệu tham khảo về trò chơi.

3. Mắt kính: hãy làm nó một cách dể dàng!

Ace Attorney Investigations: Miles Edgeworth (NDS) + Tales of the World: Narikiri Dungeon 3

Bạn có thể phải hy sinh chi tiết tùy thuộc vào kích thước sprite. Bạn có thể tập trung vào
Mắt kính và loại bỏ mắt. HOẶC
Phần trên của gọng kính và loại bỏ phần dưới cùng của gọng kính. 99
 4. Một vài pixel tạo ra sự khác biệt lớn khi thu nhỏ.

Guest artist: Anubis Jr

Thoạt nhìn khó có thể biết được, nhưng sự khác biệt một vài pixel có thể mang lại nhiều kết quả. Khi
phóng to, một số vị trí pixel có thể không có ý nghĩa gì đối với bạn. Nó có thể cảm thấy không tự
nhiên nếu bạn đã quen với các nét vẽ. Khi thu nhỏ, một số kết hợp pixel có thể cho mắt một cảm
giác hoàn toàn khác! AA và sub-pixeling thực sự có ích ở đây!

Tròng trắng cũng có thể ảnh hưởng

đến kết quả! Đôi khi đó là một pixel
đơn lẻ, đôi khi là AA hoặc các sub-
pixels .
By Michafrar

5. Mắt có nhiều kiểu, nhưng đừng tránh chi tiết pixel.

Shock Troopers: 2nd Squad (Arcade)

Đôi mắt thường xác định phong cách của bạn. Với pixel, bạn có thể làm bất cứ điều gì bạn
muốn về mắt. Không có giới hạn nào ngoài canvas của bạn. Bạn có thể phát triển thêm
phong cách của mình nhưng cũng giống như nghệ thuật thông thường, hãy đảm bảo trau dồi
kỹ thuật của bạn.

6. Sử dụng Khử răng cưa tinh tế nếu cần.

Guest artist: Thernz

Như đã thấy trong Chương 2, AA có thể cải thiện độ rõ nét. Mang lại kết quả tốt!
100
Thiết kế nhân vật & Tỷ lệ
Đầu so với Cơ thể

Super Back to the Future 2 (SNES, 1993, Japan exclusive)

Đầu to có nhiều lợi thế. Chúng dành chỗ cho cảm xúc và biểu cảm và thể hiện rõ ràng nhân vật là ai. Đó
là một sự lựa chọn theo phong cách nên nó có thể không phù hợp với mọi hoàn cảnh. Đầu là tài liệu tham khảo
chính cho tỷ lệ người và chúng dễ dàng thay đổi!

Castlevania: Aria of Sorrow (GBA), Castlevania: Dawn of Sorrow (NDS)

Bạn có thể khắc họa các nhân vật với tỷ lệ thực. chúng tập trung vào ngôn ngữ cơ thể. Do đó, bạn nên
chú ý đến thể tích, bóng râm và thể trạng với các khu vực hạn chế này.Đảm bảo sử dụng hình bóng. Nhân vật
của bạn có tính cách và hành động.
Tạo cá tính cho cơ thể bằng cách đa dạng hóa các tư thế và tỷ lệ cơ thể
101
 Các tỷ lệ khác nhau có các chức năng khác nhau.
Tỷ lệ bạn chọn phụ thuộc chủ yếu vào mục đích sử dụng sprite của bạn. Tác phẩm nghệ thuật, biểu tượng
người dùng, sprite thế giới, mô hình đối thoại, các góc nhìn khác nhau: bạn hãy đặt tên cho nó!

Lyn - Fire Emblem (GBA)

Riou - Suikoden II (PS1)

Mario & Luigi: Superstar Saga (GBA)

Pixelart tìm ra cách điều chỉnh tất cả các thiết kế nhân vật để phù hợp với các khu vực nhỏ.
102
Silhouettes (hình bóng)
Feat. Tác giả khách mời: Glauber Kotaki

Một hình bóng rõ ràng cho thấy các đặc điểm quan trọng như đầu, chân tay, vải, v.v..
Bất cứ điều gì làm nổi bật hành động hoặc chức năng của nhân vật hoặc đối tượng là một khởi đầu tốt.
Điều này cũng rất hữu ích hơn nếu bạn định làm hoạt ảnh nó .

Streets of Rage 2 Streets of Rage 3

Streets of Rage - giống như hầu hết các phần tiếp theo - sẽ cải thiện hình ảnh của chúng theo thời gian.
Hình bóng của Signal đẹp hơn trong phần 3 khi tư thế, nắm đấm và kiểu tóc của anh ấy được làm nổi bật.

Hình bóng không hiển thị quá nhiều, nhưng nó có

thể đọc được bằng cách sử dụng các màu
khác nhau theo mọi cách trong bản vẽ.

Duelyst (PC) (Open Beta, 2016)

Vẽ một hình bóng cơ sở thô và lấp đầy các chi tiết

là một phương pháp hay. Cố gắng không che phủ
mọi thứ và nếu điều đó xảy ra, hãy sử dụng độ
tương phản màu để phân biệt các tính năng. Chasm (PC & PS4) (WIP, future date)

103
Thiết kế màu sắc
Feat. Tác giả khách mời: Paul Veer

Mang lại cho nhân vật của bạn màu sắc chính và phụ, mang lại cho chúng các hiệu ứng phụ đẹp mắt.
Thiết kế của chúng trở nên dễ nhận biết hơn và dễ đọc hơn. Không bao gồm các chi tiết không cần thiết trên
sprite của bạn. Chia nhỏ chúng thành 2 hoặc 3 màu chính giống như các chi tiết dễ nhận biết khác.

Nuclear Throne (PC, Steam)

Cá? Đó là anh chàng màu xanh lá cây với đôi môi và vây màu vàng!
Phiến loạn? Cô ấy đeo một chiếc khăn lớn màu xanh lam.
Robot? Anh ta được xác định bởi con mắt đáng sợ màu đỏ của mình, ngăn cách trên và dưới.

Các nhân vật nổi tiếng thường thấy trong nhiều trò chơi có thiết kế với màu sắc rực rỡ.
Mario Sonic Pikachu

Chọn màu sắc phù hợp để thể hiện các tính năng nhân vật của bạn. Màu sắc sai dẫn đến nhầm lẫn.

Mũi hay là mỏ ???
Swoopers từ Super Mario World (SNES)
là những con dơi. Tuy nhiên, mũi của
chúng có màu cam, khiến nó trông
giống như một con chim có mỏ. Các trò
chơi sau này đã sửa lỗi này.
104
Tại sao cánh tay của Yoshi lại có màu cam?
Đây không phải là do giới hạn về đồ họa.
Có lẽ vì vậy mà các cánh tay sẽ không hòa trộn
với phần thân chính, nhưng than ôi, chúng trông
giống như cái kiềng của yên ngựa. Super Mario
Maker (WiiU) đã sửa nó. Vấn đề này tương tự với
mái tóc hồng khét tiếng của Link từ Zelda: LTTP.
Light & Shadow (vùng sáng và vùng tối)
Tác giả khách mời: Glauber Kotaki

Việc vẽ phác thảo có thể chiếm rất nhiều không gian quý giá, vì vậy thay vào đó, hãy sử dụng các tông màu sáng
và tối có thể là một mẹo nhỏ.
Ánh sáng được sử dụng để hiển thị các chi tiết quan trọng,
Điểm ảnh tối lấp đầy hình bóng hoặc phác thảo các tính năng khác nhau.
Ánh sáng và bóng tối có thể thay đổi vai trò tùy thuộc vào màu nền hoặc nguồn sáng của bạn. Sử dụng cả
hai cùng nhau để tạo hình dạng, thể tích và độ sâu.

Chasm (PC & PS4) (WIP, future release)

Các tông màu tối nhất không chỉ được sử dụng làm bóng râm mà còn để tạo chiều sâu và các yếu tố phác thảo!
Các tông màu sáng nhất làm nổi bật các góc cạnh và các chi tiết quan trọng.

Sử dụng một nguồn sáng khác (ví dụ: trong ví

dụ này, từ phía dưới) để phân biệt các cơ và
các bộ phận cơ thể khác.
Duelyst (PC) (Open Beta, 2016)

105
Khoảng cách và tiếp tuyến

Khoảng cách đề cập đến mức độ xa nhau của mọi thứ. Nếu hai khu vực của bản vẽ pixel chạm vào nhau,
người xem có thể gặp khó khăn trong việc phân biệt điều gì đang xảy ra. Khoảng cách là sử dụng không
gian hạn chế để chứa nhiều thông tin nhất có thể. Nếu bạn sử dụng quá nhiều không gian trong sprite của
mình, hãy cho nó thêm không gian để thở!

Hãy nghĩ về nó giống như khoảng cách giữa các chữ cái với các phông chữ!
Ví dụ: miệng cần có khoảng trống ở trên và dưới, vì vậy bạn có thể biết đó là miệng. Nếu miệng chạm vào cằm,
hoặc thậm chí là mũi, sẽ không rõ đó là gì.

Nuclear Throne (PC, Steam)

Một cách là loại bỏ nội tuyến.

Chúng có thể cản trở khả năng đọc như đã thấy trong Chương 1 (tr9), Chương 3 (tr20) và trong chương
này ở trang trước mà bạn vừa đọc! Chúng không tệ, nhưng có thể gây khó chịu.
106
Một cách khác là sắp xếp lại các pixel.

Trong Super Mario Brothers 3, bộ đồ ếch có

nghĩa là có đôi mắt trên đỉnh đầu của Mario
hoặc Luigi. Cách các pixel được giãn cách
khiến nó trông giống như đôi tai thỏ! Ngoại
trừ một khung tốt:“Mario đang đá vào vỏ“
chắc chắn là đầu ếch. Hãy sử dụng nó làm tài
liệu tham khảo để khắc phục điều này..
Top row: Original Bottom
row: Edited

Tôi không chỉ loại bỏ nội tuyến màu đen, tôi

còn đơn giản hóa thiết kế. Mắt trắng hoàn
toàn không có mí. Con ngươi bây giờ là 2x2
pixel và không hòa trộn với đường viền!

Đây là cách chúng tôi diễn giải mắt ếch nếu chúng ở chế độ HD
(hàng trên = chưa chỉnh sửa, hàng dưới = đã chỉnh sửa).

107
 Di chuyển các khu vực và thêm không gian

Trước khi làm lại Pokémon Ruby / Sapphire / Emerald (GBA), Brendan đã tạo ra
một số nhầm lẫn: Đó là tóc trắng hay là một chiếc mũ? Tư thế quay lưng không
giải quyết được vấn đề: tóc của anh ấy được sơn màu xanh lam và hòa hợp với
băng đô!

Nếu chúng ta sử dụng khoảng trống giữa mắt và tóc mai, chúng ta sẽ tạo ra một
đường tiếp tuyến!!

Chúng ta có thể tạo thêm khoảng trống cho tóc bằng

cách chọn một phần của khuôn mặt và di chuyển nó
sang bên phải. Bây giờ mái tóc có chiều rộng 2px, đủ để
nó nổi bật. Hãy chắc chắn để thử nhiều phiên bản!

Bảng màu không cho phép có màu nâu đậm. Vì vậy, để vẽ tóc, chúng ta phải sử dụng tông màu da tối
nhất và làm cho tóc dễ nhận thấy hơn.

108
Sprites và hình nền
Sprites phải luôn nổi bật so với hình nền cho mục đích chơi trò chơi.
Bạn muốn khán giả của mình tập trung vào điều gì?

Nếu bạn không làm trò chơi, bạn vẫn muốn phân biệt nền với các đối tượng. Điều này xảy ra trong các
phương tiện khác như Nhiếp ảnh. Đó là khả năng đọc.

Thêm đường viền

Hiệu chỉnh màu sắc

Lấy nét (tiền cảnh sắc nét / hậu cảnh mờ hơn)

Tak: Mojo Mistake (NDS)

109
 Nghiên cứu điển hình: Kirby and the Amazing Mirror

Kirby and the Amazing Mirror (GBA) đã quyết định đưa những bức tranh có độ chi tiết cao làm nền. Không có gì
ngạc nhiên khi cả 3 kỹ thuật đều được sử dụng:

Vật thể và hình vẽ có đường nét rõ ràng để nổi bật.

Màu sắc của nền nhẹ nhàng hơn để tôn lên khu vực trước.

Màu sắc của hậu cảnh nhẹ nhàng hơn để tôn lên tiền cảnh.

110
Khử răng cưa & phối màu
Các kỹ thuật nâng cao hơn như AA và phối màu có thể không có cơ hội được sử dụng, vì chúng chiếm
không gian quan trọng.

Như đã thấy trong Chương 2, AA có thể cải thiện một chút khả năng đọc khi được sử dụng vừa phải.

From Kirby’s Dream Land 2 (GB)

King Dedede sprite ban đầu (trái) có AA tinh tế để làm sạch các đường cong. Sprite bên phải cũng tốt, nhưng thiếu
màu sắc và dễ hiểu sai các đốm màu của pixel.

From Jewel Master (Genesis)Left:

Original. Right: Edited.

Phối màu (tô bóng ca rô) khá vô dụng trên các sprite quy mô nhỏ. Phối màu hoạt động tốt trên các bề
mặt có kết cấu hoặc nghệ thuật pixel lớn hơn. Nó làm cho sprite của bạn trông thô và kém mịn hơn.

Điều này sẽ được trình bày chi tiết trong chương có tiêu đề: “Phối màu”.
Một kỹ thuật ít phổ biến hiện nay, nhưng rất hữu ích cho những hạn chế về màu sắc.
111
Làm thế nào để phát hiện các vấn đề về khả năng đọc
Sử dụng hình thu nhỏ xem trước.

Khi làm việc trên một bức tranh, hãy đảm bảo thu nhỏ
rất nhiều. Để ngăn chặn điều này, bạn cũng có thể có
một bản xem trước vĩnh viễn về tác phẩm của bạn
trông như thế nào ở độ phân giải thực của nó.
(1x- 100% khích thước)

Ví dụ này nằm trong Graphics Gale.

By Michafrar

Làm mờ hình ảnh.

Sprites rất có thể sẽ trông mờ trên các thiết bị khác

nhau, hoặc thậm chí mắt người sẽ làm mờ các pixel
khi nhìn từ xa. Làm mờ cũng có thể giúp bạn tìm dải.

Nếu nó trông xấu khi bị mờ, bạn phải quay lại và sửa nó
trong phiên bản pixel.

By Michafrar

Waifu2x ( tên nghe hay vl các ông ạ)

Waifu2x cho phép bạn nâng cấp bất kỳ hình ảnh nào,
không chỉ là nghệ thuật pixel. Nó nâng cấp công việc
của bạn, giảm mức độ tiếng ồn và cẩn thận tối ưu hóa
công việc của bạn để có độ phân giải cao hơn.

Khi các đường cong trông không ổn, bạn có thể muốn quay
lại và sửa những đường cong đó! Nó… cũng rất tuyệt.

112
Kết luận

lớn hay nhỏ, nghệ thuật pixel đôi khi có thể tạo ra sự nhầm lẫn. Với không gian hạn chế, đôi khi chúng ta phải hy
sinh chi tiết để giữ cho mọi thứ rõ ràng và dễ đọc.
Hãy nhớ rằng mọi pixel đều quan trọng.
Nếu bạn không chắc về khả năng đọc của sprite của mình, đừng ngại quay lại và sửa chữa mọi thứ!
Làm công việc nhỏ này là một thách thức, nhưng nó sẽ khiến bạn nhận ra tầm quan trọng của mỗi pixel.

Food for thought Tips and tricks Art design

Introduction
Size matters…
…but pixels matter more!
Why every pixel matters I Why
every pixel matters II
Recognizable features
Easy to read symbols Ch. design & Proportion
Symbols I - Hands Silhouettes
Symbols II - Eyes Colour design
Spacing and tangents Light & Shadow
Anti-Aliasing & Dithering How Sprites and backgrounds
to spot readability issues

Pokémon Red/Blue/Green/Yellow (GBA)

113
Chapter 5:Dithering ( Phối màu)
114
Giới thiệu
Phối màu là một kỹ thuật tạo độ chuyển màu bằng cách sử dụng các màu sắc hạn chế.
Bạn sử dụng các mẫu để trộn màu.

Chỉ với một 2 màu sắc, bạn có thể tạo ra ảo giác của 3 màu hoặc nhiều hơn!

Phối màu thường gắn liền với những ngày đầu của pixelart.
Đồ họa máy tính cũ hơn được tận dụng tối đa giới hạn màu của chúng với kỹ thuật phối màu.

~ 56 unique colours. 7 unique colours. 4 unique colours.

Pixel art? x Pixel art? Pixel art?

115
Khi nào sử dụng phối màu

Phối màu quá nhiều biến ảnh nghệ thuật pixel của bạn trông GỒ GHỀ và SẦN SÙI.
Nó cung cấp cho nghệ thuật pixel một kết cấu sạn không cần thiết.
NHƯNG
Tỷ lệ đổ màu lớn mà không có phối màu dẫn đến các khu vực Bằng phẳng và Có vằn.

Theo thời gian, đồ họa trò chơi ngày càng thêm nhiều màu sắc. Phối màu ít phổ biến hơn bây giờ.
Nó đòi hỏi nhiều không gian để được sử dụng đúng cách, vì vậy đó là lý do tại sao nó hiếm khi được tìm thấy trong
sprites nhưng đôi khi trong nền. Nó cũng làm tổn hại đến khả năng đọc, như đã thấy trong Chương 4, tr.26.

Để hiểu tần suất và mức độ phối màu được sử dụng, hãy nghiên cứu
nghệ thuật trò chơi và học hỏi từ các trò chơi yêu thích của bạn. Bạn sẽ
học được rất nhiều điều chỉ từ việc quan sát. Tuy nhiên, hãy thử tô bóng
bằng các hình dạng sạch sẽ trước.

Street Fighter Alpha 2 (PS1, Arcade, various consoles)

Khi nào tôi nên thử phối màu?

• Gradients (Chuyển màu) sử dụng quá nhiều màu để làm thủ công.
• Khi Không đùng hoạt ảnh. Nghiêm túc đó.
• Họa tiết (xem phối màu cách điệu).
• Hạn chế về màu sắc.
• • Hình nền: bầu trời, không gian, các khu vực rộng lớn có thể trông trống rỗng hoặc bằng phẳng.
116
Đây là một sprite từ Monster in My Pocket (NES). Phiên bản được pha trộn hoàn toàn ở trên cùng bên trái là
phiên bản gốc khi nó xuất hiện trong trò chơi trong giới hạn của NES. Những cái khác là phiên bản sửa đổi.

ƯU NHƯỢC
PHỐI MÀU - Thô ráp
+ Phù hợp với hạn chế màu sắc
- Mất thời gian
+ Bầu trời hoặc nền rộng lớn - Kết cấu không cần thiết
- Không thích hợp cho sprites
- Vô dụng cho màu sắc tươi
- Cản trở hoạt ảnh
- lắc lư khung hình

ĐỔ BÓNG MỊN
- Có thể trông phẳng
+ Sprites và gạch lát kích thước nhỏ - Chuyển màu không tốt
+ sprites dể đọc hơn
+ Tốt hơn cho hoạt ảnh
+ Cảm giác được sơn mềm hoặc bóng mờ

117
Phối màu ca rô

Đây là những kiểu phổ biến nhất bạn dể tìm thấy vì chúng đa dạng nhất.
Dưới đây là tất cả các mức độ sáng trong 'gia đình' ca rô.

Nếu bạn bị lạc, hãy nhớ mỗi cấp độ với một mẫu.
Ca rô, thập tự giá, hình vuông, kim cương, v.v.

Mario Tennis (Gameboy Colour)

Bạn có thể chọn bao nhiêu mức độ phối
màu mà bạn muốn giữa 2 sắc thái. Tất cả
phụ thuộc vào sở thích hoặc độ dài của
chuyển màu hoặc bạn có bao nhiêu sắc
thái màu.
118
Nếu bạn phải làm việc trên các khu vực lớn
hơn, bạn có thể tự do phối màu một chút,
miễn là bạn không bao giờ có pixel rộng (2x1
hoặc 2 pixel chạm vào nhau).
Phối màu cho đường cong

Các đường cong có thể phức tạp hơn để phối màu, vì vậy hãy đảm bảo bạn đang quan sát kỹ để xem nó
trông như thế nào. Đôi khi bạn có thể nhận được các pixel kép trông không đúng vị trí. Khi điều này xảy
ra, bạn có thể chọn và trượt phối màu mà bạn đã có, thay vì làm lại.

Nếu phối màu của bạn là một

phần của tập hợp ô gạch , điều
này có thể không tránh khỏi.
Điều này là do tập hợp ô gạch
luôn là một số pixel chẵn.
Nếu điều này xảy ra, hãy đảm bảo có 2 ô
1 ô, được sao chép và 2 ô, một ô hơi khác
gạch khác nhau.
nhân đôi một chút

Ecco the Dolphin (Genesis/Mega Drive)

119
 Contrast (Tương phản)
Khi bạn không có giới hạn về màu sắc, bạn nên sử dụng phối màu một cách thận trọng. Tốt nhất bạn nên tránh nó.
Mục tiêu của bạn là phối màu hòa trộn các màu một cách liền mạch mà không làm chúng nổi bật. Nếu sự khác biệt
giữa 2 màu quá cao (độ tương phản cao), bạn có thể không nên phối màu chúng.

Với độ tương phản thấp, nó có cảm với độ tương phản cao, nó trông khá khắc nghiệt!
giác nhẹ nhàng hơn.

Earthworm Jim (Genesis/Mega Drive)

Pokémon Mystery Dungeon 3:
Explorers of the Sky (NDS)

Sonic Advance 2 (GBA)

Phối màu ca rô hữu ích nhất cho các vùng chuyển màu bao phủ các khu
vực rộng lớn. Giữ độ tương phản thấp sẻ phối màu mượt mà hơn.

120
 Các mẫu khác
Đường song song

Một loại phối màu được tìm thấy trong các trò chơi Genesis / Mega Drive, nhưng ngày nay có thể được sử dụng cho các mục đích phong cách.
Đối với TV CRT, chúng có khả năng phối màu 50-50 hiệu quả hơn so với các bộ điều khiển thông thường.

Left and centre: Vectorman Right:

Donald Duck in Maui Mallard

Các đường kẻ có thể được sử dụng làm vết bẩn hoặc làm mờ với bảng màu hạn chế. Các đường kẻ có tác dụng làm mờ tốt
hơn so với các đường caro. Điều này chỉ hoạt động đối với hoạt ảnh hạn chế, KHÔNG khả thi với hoạt ảnh mượt mà.

Pokémon Crystal (GBC)

Ca rô phù hợp hơn cho chuyển màu. Các đường song song dành cho các thủ thuật tạo sắc thái vùng đệm và độ
mờ cho các TV CRT cũ. Để biết thêm ví dụ, hãy xem trang 16.

121
 Discontinued lines ( Dường gián đoạn)

Một biến thể của các đường song song. Sự khác biệt duy nhất là
điều này hiển thị nhiều giá trị và mức độ chuyển màu hơn. Nó
cũng có thể thêm một hiệu ứng gọn gàng.

Beyond Oasis / The Story of Thor (Genesis/Mega Drive)

Pokémon Mystery Dungeon3: Strip Poker: aSGoC (PC DOS) Earthworm Jim (Genesis/Mega
EoS (NDS) Drive)

Ecco the Dolphin (Genesis/Mega Drive)

Dents ( Vết lõm)

Một biến thể của phối màu ca rô hoặc các đường song song. Nó chỉ sử
dụng 1 dòng ca rô. Chúng giống như vết lõm hoặc răng.
Phối màu này rất hữu ích cho các kết cấu nếu bạn có ít không gian.
Tuy nhiên, loại này không phù hợp với việc chuyển màu!
122
Intertwined dithering (Phối màu đan xen)

Kolibri (Sega 32X)

Phối màu đan xen (len lỏi, chồng lên nhau, v.v.) có các mảng phối màu đi vào các mảng đậm hơn hoặc
nhạt hơn nhiều. Chuyển màu đôi khi quay trở lại các mảng sáng hơn trên đường đến sắc thái tối nhất. Các
bản vá khác nhau của kẻ caro được đan lại với nhau.

Ecco the Dolphin (Genesis/Mega Drive)

Nếu bạn gặp khó khăn khi thực hiện việc này theo cách thủ công, hãy tạo 2 lớp phối màu và để chúng chồng lên nhau!

Bạn vẫn có thể làm thủ công, nhưng có 2 lớp để không bị lạc!

World of Illusion (Genesis/Mega Drive)

123
 Random dithering (Phối màu ngẫu nhiên)

Phối màu ngẫu nhiên không có nhiều suy nghĩ áp đặt nó. Bạn vẫn cần đảm bảo chuyển màu từ
sáng đến tối một cách liền mạch. Phối màu ngẫu nhiên có thể thu được bằng cách đặt các pixel
bằng tay một cách ngẫu nhiên ở đây và ở đó. Tuy nhiên, nó thường là kết quả của các bộ lọc, công
cụ chỉnh sửa ảnh hoặc phun sơn.

Đây không thực sự là pixelart được làm thủ

công, vì vậy bạn vẫn nên sửa nó theo cách
thủ công. Nó có vẻ khá lười biếng, vì vậy hãy
sử dụng nó theo những cách khéo léo và
Kirby’s Dreamland 3 (SNES) trên những canvas lớn..

Chuyển màu giảm xuống còn 4 màu với phối màu tự động.
Nó vẫn cần thao tác nhiều và trông giống như nhiễu loạn ngẫu
nhiên.

Tất nhiên, phối màu ngẫu nhiên có thể được thực hiện bằng tay. Bạn có thể tạo hiệu ứng này từ đầu, nếu muốn. Bạn
bắt đầu bằng cách sơn một số sắc độ màu và kết thúc bằng cách pha trộn các cạnh với nhiễu loạn ngẫu nhiên.

By Guest artist YAA

Trong hầu hết các trường hợp, phối màu ngẫu nhiên không được khuyến
khích. Cố gắng tạo các mẫu hoặc tiles (ô gạch mẫu) từ chúng (xem trang 12)

124
Stylised dithering ( Phối màu cách điệu)
Bây giờ đây là nơi mọi thứ trở nên thú vị!

Hãy sáng tạo!

Các hình thức phối màu trước đây khá thô. Với phối màu cách điệu, bạn có thể áp dụng các kết cấu
của riêng mình để tạo ra các sự chuyển màu mà không có cảm giác thô ráp! Hãy nhớ rằng bạn cần
không gian để sử dụng những thứ này.
Phối màu cách điệu là một cách tuyệt vời để bắt đầu và vui chơi với các kết cấu!

By Michafrar Shovel Knight (PC)

Kirby’s Adventure (NES) Street Fighter Alpha: Warriors’ Dream (GBC)

125
 Bạn thậm chí có thể lấy phối màu ngẫu nhiên (từ trang 10) và biến chúng thành các tập hợp ô lặp lại để tránh
chúng trông hỗn loạn. Sự ngẫu nhiên này được kiểm soát, thay vì lỏng lẻo.

Crash ‘n’ the boys: Street Challenge (NES) Crystalis (NES)

Đừng nhầm giữa kết cấu với chuyển màu!
Chuyển màu là sự chuyển đổi từ sáng sang tối. Kết cấu là cảm giác của vật liệu. Phối màu cách
điệu có thể là sự kết hợp hoặc cả hai, hoặc chỉ là các sự chuyển màu thông thường.
Không phải lúc nào các Kết cấu cũng cần một sự chuyển màu từ nhạt đến đậm!
Phối màu có thể cung cấp Kết cấu nếu bạn sử dụng nó cho các bản vá, nhưng không phải dưới dạng
Chuyển màu.

Kết cấu Chuyển màu Kết cấu kết hợp chuyển màu
Những đồ họa dưới đây có kết cấu, nhưng không có phối màu cũng như không chuyển màu.

By Michafrar Guest artist: Neoriceisgood Guest artist:Anubis

Jr

126
Nghiên cứu điển hình: SMW2:Yoshi’s Island

Yoshi’s Island nổi bật với cách phối màu cách điệu. Chỉ riêng trên ảnh chụp màn hình này đã có rất nhiều ví dụ.

Một điều khác cần chú ý là Yoshi's Island đã chọn để có chuyển màu bóng mờ mịn cho bầu trời.
Không có phối màu và nó vẫn tốt.

127
Không chỉ đơn thuần là chuyển màu
Breaking through cel-shading (Đột phá đổ bóng mờ)
Một cách hiện đại để sử dụng phối màu là đột phá đổ bóng mờ. Ngay cả với màu sắc không bị giới hạn, việc phối màu đôi
khi bắt chước việc nhẹ nhàng đổ bóng mờ. Hãy nghĩ cách sử dụng phối màu này giống như một nét cọ lem nhem.

Pokémon Fire Red/ Leaf Green (GBA)

Điểm nổi bật của sừng Gengar hòa vào vùng tối chính tối màu hơn, thay vì đổ bóng mờ. Bạn có thể thực hiện
kỹ thuật tương tự, nhưng chỉ sử dụng bóng đệm trong đường dốc màu của bạn.

Cái này đổ bóng mờ có vẻ tốt nhưng ở đây phối màu trông đẹp hơn …

Mixing colours ( Trộn màu)

Phối màu có thể giúp bạn pha trộn màu sắc, đặc biệt là trên màn hình mờ. Tuy nhiên, bạn sẽ chỉ sử
dụng kỹ thuật này nếu bạn đang làm việc với các màu sắc hạn chế.

128
Hãy xem kỹ thuật này được sử dụng với một số cách phối màu song song được sử dụng trong bản vẽ Genesis /
Mega Drive này. Kết quả trông không đẹp theo tiêu chuẩn hiện đại, nhưng nó trông đẹp trên TV CRT.

Đồ họa máy tính sau thời điểm này sẽ có nhiều màu hơn và thậm chí nhiều lớp trong suốt (alpha) hơn, vì vậy
kỹ thuật này ngày nay cực kỳ hiếm. Tuy nhiên, các màn hình đồ họa cũ hơn như chế độ CGA 4 màu được
hưởng lợi rất nhiều từ việc có thêm các giá trị bằng cách pha trộn màu lục lam, đỏ tươi, đen và trắng!

Space Racer (PC DOS)

Chúng ta đã thảo luận ngắn gọn về vấn đề này trong chương 3 (trang 25), nơi với 4 màu, bạn có thể dễ
dàng nhận được nhiều giá trị hơn!

129
Brushes for dithering?(Cọ vẽ để phối màu)
Khi việc phối màu tốn nhiều thời gian, có nhiều cách để sử dụng cọ phối màu!
Một số chương trình này sử dụng các mẫu phối màu hoặc cọ vẽ để giúp bạn tăng tốc độ.
Không cần phải “copy-paste” tất cả các kiểu phối màu ca rô đó.

Pro Motion GraphicsGale Graf x2

và các chương trình khác cũng cho phép bạn tạo cọ vẽ.

Thú vị hơn, họa sĩ và nhà phát triển trò chơi Dan Fessler (@DanFessler) nghiên cứu cách vẽ HD
Index cho Photoshop giúp thao tác phối màu dễ dàng hơn.

Article: danfessler.com/blog/hd-index-painting-in-photoshop
Preview video: youtu.be/7Q36EyvaYG8
Support the indie game Chasm! www.chasmgame.com

Hãy nhớ pixel art là về quyền kiểm soát, vì vậy hãy đảm bảo chỉnh sửa kết quả của bạn theo cách thủ công!
130
 Trước khi có các layers (lớp trong suốt) ...
The Sega Genesis (Mega Drive) chủ yếu dựa vào phối màu đường kẻ. Nó pha trộn màu sắc khi chơi bộ điều
khiển trên đầu ra hình ảnh chất lượng thấp hơn (cáp đồng trục Bắc Mỹ, đầu ra RF hoặc cáp ăng-ten PAL)

Top to bottom:
Comix Zone, Earthworm Jim and Donald Duck in Maui Mallard (Genesis/Megadrive)

The Super Nintendo , đã sớm được phối màu trong vòng đời của nó, nhưng các trò chơi sau này đã sử dụng các alpha layers thích hợp.

Super Mario World (SNES)

131
Phối màu không phải là mới
Phối màu có thể bắt nguồn từ nhiều phương pháp nghệ thuật cũ hơn.
(Cross) hatching là hình thức lâu đời nhất của việc sử dụng các mẫu để thể hiện tông màu và giá trị bằng
cách chỉ sử dụng 1 màu. Nó có thể được tìm thấy trong các bản vẽ bằng bút chì, in ấn, khắc, khắc gỗ, vv ...

Pointillism cũng yêu cầu các chấm nhỏ riêng biệt để tạo ra một hình ảnh. Nghệ thuật truyền thống không
chỉ giới hạn ở dạng lưới, vì vậy cách trộn màu này là tự do và có tổ chức.

Paul Signac Entrée du port de Marseille (1911)

Monochrome graphics (Đồ họa đơn sắc), chẳng hạn như MacPaint chỉ có thể hiển thị 2 màu:
đen và trắng. Nhiều mẫu phối màu pixel đã được sử dụng để hiển thị thang độ xám.

Works by Susan Kare(1984)

132
Kết luận

Nhiều họa sĩ pixel chọn không sử dụng phối màu.

Tất cả đều phụ thuộc vào sở thích.

Rất có thể bạn sẽ không sử dụng nó nhiều. Nó có thể khá tốn thời gian và khó khăn để làm đúng. Bạn
có thể chọn để tránh nó và dính vào các hình dạng chặc chẻ và sạch sẽ.

Ghi nhớ: LESS is MORE (CÀNG ÍCH là CÀNG NHIỀU )

Dù sao thì phối màu cũng là một công cụ mạnh mẽ. Có một số điều kỳ diệu để tạo ra với mỗi mẫu. Nếu bạn chọn phối màu,
hãy sử dụng nó một cách điều độ.
Nó không được nổi bật hoặc mâu thuẩn với các hình ảnh khác.

Food for thought Techniques Trivia

Introduction Checkered dithering Brushes for dithering?
When to use dithering Other patterns Before transparent layers
Stylised dithering Dithering isn’t new

Lord Monarch (MegaDrive)

133
Chapter 6: Game Perspectives ( Phối cảnh trò chơi)
 Giới thiệu
Phối cảnh là cách thế giới được nhìn bằng mắt người.
Một đối tượng càng xa, nó trông càng nhỏ. Càng gần nó, nó trông càng lớn.
Nó là một phần không thể thiếu của nghệ thuật và minh họa.

Khi tạo các hình minh họa pixel art, phối cảnh là một kỹ năng cần thiết.
Vì vậy, khi tạo trò chơi điện tử, bạn cần cân nhắc những điều sau:

Trong hầu hết các trò chơi 2D, không có góc nhìn thực hoặc điểm hội tụ. Là họa sĩ và nhà thiết kế, chúng ta cần suy nghĩ thấu
đáo để tạo ra những thế giới có thể khám phá! Nhiều phối cảnh trò chơi trong chương này là các phép chiếu giả 3D, có nghĩa là
chúng ngụ ý 3 chiều - chiều dài, chiều rộng và chiều sâu -
nhưng thực sự chỉ là trường 2D.

Sử dụng góc nhìn có lợi cho trải nghiệm chơi trò chơi của bạn.
Đảm bảo hình ảnh của thế giới và nhân vật phù hợp với thiết kế trò chơi của bạn.

135
 Từ vựng về phối cảnh

Đây là phần bổ sung nhanh về một số từ vựng về phối cảnh sẽ được sử dụng thường xuyên trong chương này.

Plane (Mặt phẳn)

Một bề mặt phẳng 2D hiển thị chiều dài và chiều rộng. Nó
giống như một bức tường, trần nhà hoặc sàn nhà vô hạn.

Axis (Trục)
Một đường hình học có hướng cố định.
Trục Y lên và xuống, trục X là trái và phải, và trục Z đi tới lui.

Vanishing point (Điểm hội tụ)

Do góc nhìn, hai đường thẳng song song gặp nhau tại một điểm.
Giống như một con đường kéo dài về phía chân trời và biến mất
thành một chấm duy nhất.

Projection (phép chiếu)

Cách một chế độ xem 3D được vẽ trong 2D. Hãy nghĩ về nó giống
như cách thế giới được hiển thị trên bản đồ.

Orthographic
Góc nhìn phẳng không có phối cảnh.

Chúng tôi sẽ tránh toán học nhiều nhất có thể, nhưng chúng tôi sẽ đề cập đến Chiều rộng là
X, Chiều dài là Y và Chiều sâu là Z khi nói về kích thước hoặc trục.

136
Orthographic projections (Phép chiếu vuông góc)
Side-scroller (mấy cái này khỏi dịch nha ^^)

Top-Down

Top

Isometric

45° Dimetric

Oblique

137
Multiview drawings (Bảng vẽ đa góc nhìn)

Đây là những góc nhìn phẳn không có phối cảnh.

Chúng khá phổ biến trong hầu hết các trò chơi 2D.
Mọi thứ đều vuông góc trong một lưới 90 ° song song và cùng một tỷ lệ.

FRONT/SIDE VIEW TOP DOWN VIEW TOP VIEW

Các góc nhìn này thiếu chiều sâu, vì vậy bạn có thể di chuyển parallax (thị sai) để thêm phối cảnh.
Chỉ có thể nhìn thấy 1 hoặc 2 mặt phẳng khi chơi trò chơi trên mặt phẳng 2D.

Chỉ có thể nhìn thấy 2 mặt phẳng và không có điểm hội tụ, mọi thứ
trông giống như một lưới hình vuông. Các đường thẳng đứng và
ngang đều tạo thành góc 90 °. Tuy nhiên, hình học chỉ là một phương
thức. Bạn có thể vẽ mọi thứ ở bất kỳ góc độ nào bạn muốn.

138
Side view

Đây là góc nhìn phổ biến nhất đối với các trò chơi 2D. Nó thường được kết hợp với việc nhân vật di chuyển
trên nền đất và bắn súng vì nó tập trung vào chuyển động dọc và ngang trên 1 mặt phẳng duy nhất.

Trình di chuyển ngang 2D có nhiều thể loại nhưng thường bám vào các góc nhìn tương tự, không chỉ có 1:

Cross section (Máy ảnh ngay phía trước, thế giới giống như một lát cắt)

Top-down view (Máy ảnh hơi cao so với mặt đất)

Oblique view (Mặt trước phẳng, nhưng các mặt bên bị nghiêng)

Các góc nhìn rất lý tưởng để thể hiện các bật hành lang.
Cho dù ở chế độ xem nào, Đường dọc mà nhân vật đi không thay đổi. Ngay cả khi có vẻ như bạn có thể đi
dọc lên hoặc dọc xuống, bạn vẫn luôn bị mắc kẹt với một con đường 2D duy nhất.

139
 Castlevania Chronicles (PS1) Donkey Kong Country 3 (SNES)

Shovel Knight (PC, Various) Frogatto (to be released)

Megaman X2 (SNES) Ristar (MegaDrive)

140
Top-down view

Lưới được tạo thành từ các ô vuông giúp việc tạo ra các thế giới và môi trường trở nên dễ dàng.
Nó thường được liên kết với việc di chuyển tự do trên bản đồ và nó thích hợp cho việc thăm dò khám phá thế giới.

Bạn có thể có các biến thể khác nhau của góc từ trên xuống.
Nó phụ thuộc vào mức độ cao hay thấp của máy ảnh.

Front > Top Front ≈ Top Front = Top Top > Front
Like Beat em’ ups. Common angle. Easier for tilesets. Good for altitude.

Mercs (Arcade) Top (L-R) : Mother 3 (GBA), Pocky & rocky (SNES)
Bottom (L-R) : Advance wars (GBA), The Story of Thor 2 (Sega Saturn)
141
 Các trò chơi góc nhìn từ trên xuống thường xem thế giới từ trên cao, ở góc 45°.

Zombies Ate My Neighbors (SNES) Mario & Luigi: Superstar Saga (GBA)

Tuy nhiên, một số trò chơi thám hiểm hầm ngục (như tựa game 2D Zelda) nhìn vào một căn phòng với camera được đặt
ngay phía trên. Góc nhìn phía trên này không còn là orthographic nữa và giống như chế độ xem phối cảnh 1-point (1 điểm )
. Kết quả là, căn phòng có phối cảnh trong khi các đồ vật thì không. Thay vào đó, chúng xuất hiện ở góc từ trên xuống.

LoZ: Link to the Past (SNES) Goof Troop (SNES)

142
 Vấn đề về phối cảnh của The Zelda

Overworld example. Dungeon example.

Thật kỳ lạ, bên ngoài ngục tối, trò chơi Zelda áp dụng góc nhìn top-down truyền thống . Điều này trông khác
rất nhiều so với góc nhìn 1-point được sử dụng trong các phòng trong ngục tối.

Tất cả các đối tượng được xem ở một camera nghiêng 45 °, nhưng căn phòng ở 90 °. Mọi thứ có vẻ đúng khi sprites ở
gần bức tường phía bắc (A). Khi sprites ở gần bức tường phía nam (B), chúng không có ý nghĩa. Về mặt kỹ thuật, nhân vật
sẽ xuất hiện giống như (C) nhưng bạn sẽ không thể nhìn thấy anh ta rất rõ.
Bằng cách lật ngược màn hình, chúng ta có thể thấy tại sao các sprite ở B trông rất sai, nhưng phối
cảnh vẫn giữ nguyên. Cứ như thể Link đang nằm trên sàn..

Nếu các bức tường chắn tầm nhìn, bạn có thể dễ dàng loại bỏ chúng và
tạo “bức tường thứ 4” vô hình. Một số trò có đủ các bức tường; một số
khác xóa chúng để hiển thị sàn nhiều hơn.

143
 Top view

Đây là một danh mục phụ của các góc nhìn từ top down. Chế độ xem này CHÍNH XÁC 90 °
(nếu bạn đang nhìn thẳng xuống dưới). Lựa chọn thiết kế này không phổ biến và chỉ phù hợp
với một số kiểu chơi trò chơi cụ thể. Bạn có thể tìm thấy các ví dụ thực tế về phong cách này
trong bản đồ địa lý, bản thiết kế và sơ đồ mặt bằng..

Twin Cobra II (Arcade) Contra 3 (stage 2) (SNES) Hotline Miami (PC)

Một số trò chơi Mode 7 có bản đồ ở góc nhìn này được chuyển đổi trong trò chơi để mô phỏng các góc nhìn khác..

Chế độ xem này rất tốt cho các góc nhìn từ trên không, nhưng nó thiếu
chiều sâu. Nếu bạn muốn tập trung vào chiều cao, các góc nhìn sau đây là
lựa chọn tốt hơn: Top down,dimetric (góc xiên) và planometric oblique (góc
vuông). Xem tr.12 và 19 để biết thêm!

144
Paraline views

Đây là các góc nhìn cung cấp chất lượng ba chiều trên màn hình 2D.
Phối cảnh này cho thấy 3 mặt của một đối tượng, tại mọi thời điểm.
Mọi thứ đều ở mức độ chân thực như nhìn bằng mắt thường.

Axonometric shapes*

ISOMETRIC 45° DIMETRIC OBLIQUE

Lấy nét trên tất cả các Tập trung vào Mặt Tập trung vào Mặt
mặt phẳng (TOP + phẳn nằm ngang phẳng thẳng đứng
SIDES). (TOP). (FRONT).

Isometric có nghĩa là Dimetric có nghĩa là Oblique có nghĩa là mặt

tất cả các trục đều chỉ có 2 trục bằng trước phẳng, phần còn
bằng nhau. nhau. lại nghiêng.

* Có nhiều góc nhìn axonometric hơn, chẳng hạn như "trimetric", vì vậy nếu bạn muốn đọc chuyên sâu hơn, hãy tìm sách của Francis DK Ching. 145
 Isometric view

Isometric pixel art thường được kết hợp với đường chuyển động chéo, vì lưới có dạng
hình thoi với bội số của các góc 30 °. Tuy nhiên, bạn không thể có các đường 30 ° chính xác
trong nghệ thuật pixel, vì vậy mọi người đều sử dụng các bậc thang 2 pixel. Về mặt kỹ
thuật, đây là 26,5 °, nhưng nó gần nhất với đường 30 °. Việc xây dựng thế giới dễ dàng
hơn nhiều với phương pháp “2 pixel” này.

Top (L-R) : Landstalker (Megadrive), Final Fantasy Tactics Advance (GBA), Solstice (NES) Bottom (L-R) :
Harry Potter 1 (GBA), Final Fantasy Tactics Advance (GBA), Kingdom Hearts: CoM (GBA)

Điểm độc đáo ở đây là lưới được làm bằng các khối gạch kim cương, không phải hình vuông.
Điều này khiến việc lắp vào các lưới vuông và căn chỉnh chúng trở nên khó khăn hơn.

Những ô này không sắp xếp tốt theo lưới vuông nhưng chúng đẹp hơn đối với nghệ
thuật pixel dạng tự do. Khu vực nơi các đường kết nối trông rất sạch sẽ.
Những ô này sắp xếp hoàn hảo và phù hợp cho việc phát triển trò chơi và lát gạch.
Thật không may, các khu vực mà các đường cắt nhau là chunky (pixel kép) và không
146 đẹp mắt khi nhìn vào
 Thay vì sử dụng các đường kẻ, sẽ dễ dàng hơn nếu sử dụng
các hình dạng không cần đường kẻ để biểu thị từng viên kim
cương, chẳng hạn như bàn cờ(mặt phẳng ca rô). Sử dụng
phương pháp này để tránh bị chunky!

Một viên kim cương được trải trên 2 ô vuông. các viên
kim cương liền kề khác nằm trên 4 ô.

Hãy thử vẽ một bàn cờ để luyện tập!

Không quan trọng nếu bạn thích xếp gạch hay không. Bạn sẽ luôn cần một lưới để dẩn dắt bạn. Nếu bạn
sử dụng hình nền dạng tự do cho trò chơi, bạn sẽ phải biến chúng thành một bản đồ có thể chơi được.
Nó có thể trông độc đáo hơn, nhưng có thể là một cơn ác mộng để lập trình nếu bạn phải biến nó thành
một bản đồ. Đảm bảo rằng bất cứ thứ gì bạn vẽ đều có thể có sự va chạm hợp lý.

Một tác phẩm isometric dạng tự do họa sĩ Các hình nền isometric lát gạch của Luminous Arc
khách mời: Temmie Chang (NDS)

Trong một lưới isometric, bạn có thể xây dựng tất cả các loại vật phẩm. Không phải mọi thứ nhất thiết phải có khối.
Hình khối và hình trụ có thể có nhiều cá tính và có đủ hình dạng và kích cỡ.

Kingdom Hearts: Chain of Memories (GBA) 147

 Making objects (Vẽ các đối tượng)

Khi vẽ các đối tượng, bạn có thể tiếp cận chúng theo hai cách:
Bạn có thể ước chừng bằng mắt, hoặc bạn có thể dựng khung cho
chúng.

Khi bạn ước lượng bằng mắt, bạn: Nhìn bề Khi bạn dựng khung cho chúng, bạn :
ngoài ước tính số đo. Có thể dễ dàng giải Sẽ chậm hơn nhưng cách chính xác
cấu trúc đối tượng thành các hình dạng hình hơn.Sử dụng các đường hướng dẩn và
nhận được kết quả chính xác nhất.
học đơn giản
Lưu ý: Cách ước lượng bằng mắt chỉ tốt theo kiến thức của họa sĩ, bạn nên xây dựng trước để bạn nắm rõ cách vẽ ước lượng.

Chỉ với một khối lập phương đơn giản, bạn có thể tạo ra tất cả các loại vật
thể!

Một hình trụ có thể được biến thành một gốc cây hoặc
một cái thùng.
Một kim tự tháp có thể được biến thành một mái nhà
hoặc một chiếc lều.
Một hình nón có thể được biến thành một cái cây hoặc một cái tháp.
Một hình cầu có thể được biến thành một cây nấm hoặc một cái bát.

Vẽ đường tròn trên mặt phẳng nằm ngang

1. 2. 3. 4.

Vẽ đường trung tuyến. vẽ hình bầu dục xung quanh . Vẽ vòng tròn bên trong. ............................Và Xong!

148
Vẽ đường tròn trên mặt phẳng thẳng đứng

1. 2. 3. 4.

Tìm đỉnh của hình nón / kim tự tháp

1. 2.

3. 4.

5. 6.

149
 Chuyển đổi sprite sang góc nhìn isometric

1. 2. 3. 4.

1. Chuẩn bị sẵn sprite có thể di chuyển của bạn (sử dụng các đường kẻ để hướng dẫn bạn nếu cần).

2. Xiên nó 30° (0.5)

3. Điều chỉnh sprite bằng cách di chuyển các bộ phận xung quanh để thêm chiều sâu hơn.

4. Dọn dẹp và lấp đầy những khoảng trống. Sửa chữa những sai sót còn lại.

Quan trọng: Không xiên đối tượng theo cách ngược lại.
Xiên nó theo hướng đối tượng (hoặc nhân vật) đang hướng mặt.

Tại sao 87% ?

Nếu bạn chỉ xiên hình vuông của mình, nó sẽ không
có các cạnh bằng nhau! Với sự trợ giúp của lượng
giác, bạn có thể tìm hiểu cách giữ viên kim
cương như nó vốn có. Chiều dài bạn cần là cosin
của 30 °, bởi vì bạn đang

Cos 30° = khoảng 0.866/1

Đó là khoảng 87% độ dài ban đầu,nhưng một

khi bị lệch nó sẽ trở lại bình thường!

(Hết hình học không gian rùi tới lượng giác. Lúc học cấp 3 tui
150 cứ nghĩ những kiến thức này cả đời sẽ chã bao giờ đụng tới)
Terrain (Địa hình)
Hầu hết các isometric đều có diện tích bằng phẳng. Bạn có thể có các độ cao khác nhau, nhưng bạn sẽ
thường có các bệ, tháp hoặc cao nguyên hình khối. Địa hình bằng phẳng là dễ dàng nhất để lập trình và
vẽ. Không nhiều trò chơi điện tử 2D có độ dốc. Ví dụ dưới đây từ Kirby's Dream Course là một tài liệu
tham khảo tốt cho độ dốc của isometric.

Captured using Kirby’s Dream Course Editor v. 1.13b by Devin Acker.

Trong các game nhập vai dựa trên lưới như Final Fantasy
Tactics Advance 2, những con dốc này sẽ chỉ xuất hiện ở 4
hướng vì game-play chỉ có 4 hướng.

151
 45° Dimetric

Đây là một quan điểm rất không phổ biến. Nó hoạt động tốt nếu một bản đồ có cấu trúc cao
mà bạn không muốn tác phẩm nghệ thuật của mình cản trở lối chơi.
Các kỹ thuật tương tự của nghệ thuật isometric cũng được áp dụng, nhưng thay vì 30 °, chỉ có
2 cạnh là 45 °, vì vậy về cơ bản các đường hướng dẩn của bạn là một loạt các pixel 1x1. Trục
tung là 90 ° nhưng hai trục còn lại là 45 °.

L-R: Earthbound (SNES - Fourside ONLY), Boktai 2: Solar Boy Django (GBA), Nox (PC)

Chế độ xem này đôi khi được coi là oblique , bởi vì mặt phẳng trên cùng là
orthographic. Nó không giống như một góc nhìn oblique, cho đến khi bạn xoay nó!
Các tên gọi khác bao gồm axonometric oblique, hoặc kế hoạch oblique hoặc thậm
chí là khu quân sự oblique và thường là oblique hình vuông. Một ví dụ đáng chú ý
là Sim City, trên SNES.

152
Oblique

Các mặt phẳng phía trước là orthographic, rất phẳng và không có phối cảnh.
Tuy nhiên, tất cả các mặt phẳng khác đều nghiêng về một phía và vẫn song song. Thông
thường, chúng nghiêng 45 ° nhưng đôi khi nó có thể là đường kẻ 2x1.
+ Hãy nghĩ:“side-scrollers(mặt hông bị kéo giản ) + 2 mặt phẳng nữa”.
Các mặt phẳng phía trước tuân theo các quy tắc orthographic của lưới 90 °.
Trên cùng và bên cạnh tuân theo các đường lưới 45° có kích thước 1x1 pixel (nhưng đôi khi bạn có thể
có đường 2 x 2 hoặc đường 3 x 3).

L-R: Earthbound (SNES), Double Dragon II (NES), Pacmania (Arcade)

Nếu bạn đang gặp khó khăn với chế độ xem này, bạn có thể sử dụng kỹ thuật xiên (đã đề cập trước đó ở
tr.17) để biến bản đồ từ trên xuống thành bản đồ xiên. Chỉ cần dốc bản đồ theo chiều dọc 45 ° (hoặc 1 đơn vị)
thay vì 30 °.
153
True Perspective ( Phối cảnh đúng)

Nghệ thuật pixel không được sử dụng cho trò chơi thường tuân theo các quy tắc
của nghệ thuật thông thường.

L: Không có điểm hội tụ,

tất cả các kích thước bằng
nhau.
R: Góc nhìn chân thực với
điểm hội tụ.

Một vật thể được nhìn từ một góc độ từ trên xuống cũng sẽ tuân theo các quy tắc phối cảnh bình thường và có
hình dạng của nó bị lệch về phía một điểm hội tụ. Dù ở góc nhìn nào, các đường nét sẽ bị lệch. Trò chơi có môi
trường 3D với kết cấu sprite để trông giống như chế độ xem từ trên xuống truyền thống. Ví dụ dưới đây là của
Pokémon Black / White (NDS).

Đồ họa gốc. Phiên bản Orthographic (by user GuyPerfect).

True Perspective không phải là duy nhất đối với các trò chơi 3D. Trong hình ảnh minh họa trò chơi có thể dễ dàng bắt chước
phối cảnh.

154 Cyberbots (Arcade) Real Bout: Fatal Fury 2 (Neo Geo/Arcade)

Trò chơi 2D có thể có góc nhìn phối cảnh, nhưng kết quả là nó yêu cầu các sprite tăng hoặc giảm kích thước.
Thường mất quá nhiều thời gian và năng lượng để thực hiện việc này theo cách thủ công, vì vậy các trò chơi mới
hơn sử dụng công cụ của chúng để tự động thay đổi kích thước các hình vẽ.

Indiana Jones and the Fate of Atlantis (MSDOS)

Dưới đây là một số trò chơi có các mô hình thu phóng, thủ công và / hoặc tự động.

Star Ocean 2 (PS1) Saga Frontier (PS1)

Contra (Level 2, NES) The World Ends With You (NDS)

155
 Pixel-Logic Bonus #6
Để hiểu thêm về cách chế độ xem 2D đánh lừa mắt bạn, dưới đây
là một số cảnh hậu trường của trò chơi 3D mô phỏng chế độ xem
top-down.

Trong cuộc hỏi đáp của Iwata về The Legend of Zelda: A Link between Worlds (N3DS), giám đốc Hiromasa Shikata
và nhóm của ông đã báo cáo rằng họ đã trải qua rất nhiều thử nghiệm và sai sót với góc nhìn top-down. Với góc
nhìn 3D này, bạn thực sự không nhìn thấy khuôn mặt của các nhân vật mà chỉ nhìn thấy đỉnh đầu của họ. Bạn sẽ
khó nói đó là có phải nhân vật mình đang điều khiển là Link. Sau đó, Eiji Aonuma (nhà sản xuất của bộ truyện) đã
tiết lộ rằng nhiều đối tượng trong trò chơi được đặt ở một góc để cải thiện khả năng hiển thị.

Một góc nhìn top-down kiểu mẫu thật sự có rất nhiều vấn đề.
“ Nếu bạn thực hiện nó một cách sách vở, nó trông không thú vị chút nào.
Vì vậy, bạn phải làm giả nó - nhưng theo một hướng tốt hơn.
Satoru Iwata

Kỹ thuật này không phải là một thứ gì đó mới mẻ đối

với các nhà phát triển trò chơi. Nó đã được sử dụng
trong các trò chơi cũ hơn như Pokémon trên
Nintendo DS. Ví dụ này cho thấy rằng hàng rào và
cây cối được làm bằng sprite đặt ở góc 45 °.

156
Clarity Issues (Vấn đề rỏ ràng)

Trong Chrono Trigger trên SNES (và sau đó là PS1 và NDS), bạn du hành khắp thế giới ở góc nhìn top-down.
Trong phần sau của trò chơi, một con tàu bay được gọi là “The Black Omen” xuất hiện và trôi trên mặt đất. Hình
dạng của công trình này khá kỳ dị. Rất dễ hiểu sai.

Đây là hình dáng của con tàu. Con tàu thực tế chưa bao giờ được xuất bên
ngoài map thế giới và 1 màn chiến đấu trên boong. Con tàu chỉ được nhìn
thấy từ 1 góc (phía trước).

Cách đơn giản nhất để tránh bất kỳ sự nhầm lẫn nào là chỉ cần lật
con tàu theo phương thẳng đứng. Với những điều chỉnh đơn giản,
nó không còn có thể bị nhầm lẫn với một tòa tháp.

Hãy nhớ thăm dò í kiến từ những người khác để tránh các vấn đề về khả năng đọc!
157
Using guidelines (Dùng đường hướng dẩn)
Tác giả khách mời: Cocefi

Khi bạn xây dựng một cảnh isometric, hãy sử dụng lưới và các đường hướng dẫn để hỗ trợ bạn.
Trước tiên, bạn có thể phác thảo nó trong một chương trình khác hoặc đơn giản là đi thẳng vào nghệ thuật pixel.

Ngay cả các dạng hữu cơ cũng sử dụng các hình dạng hình
học làm hướng dẫn!
1. 2. Làm theo hình dạng bên
Xây dựng một hình dạng ngoài của hình bầu dục…
thô chỉ với một vài hình và bạn có thể dễ dàng
bầu dục. phác thảo hàng lá!
Nếu không được,
Chúng giống như bộ hãy điều chỉnh các
xương của vật thể. hình bầu dục một
chút.

3. 4. 5.

Block shapes within the tree.(hổng biết dịch ) Xác định chi tiết và đổ bóng. Thêm các điểm nổi bật và vùng tối.
Đây không chỉ là một hướng dẫn về cách vẽ cây. Vấn đề ở đây là lý giải cấu trúc các hình dạng và giúp chúng hướng
158 dẫn cho bạn. Bạn có thể sử dụng điều này cho BẤT KỲ PHỐI CẢNH NÀO!
Showing scale (quy mô hiển thị)
Hầu hết các phép chiếu đều hiển thị thế giới trò chơi từ góc nhìn của một con chim. Trò chơi điện tử 2D
thường cho phép bạn nhìn vào hộp giày từ trên xuống hoặc từ bên cạnh vì chúng là những góc quay dễ dàng
nhất. Tuy nhiên, để thể hiện một cảm giác về quy mô đòi hỏi phải suy nghĩ đến những thứ bên ngoài chiếc
hộp.
Tại sao không có cảnh góc thấp và chỉ có trong các đoạn cắt cảnh?
Trong các cảnh quay ở góc thấp, người chơi gần như không thể
biết họ đang đi đâu. Nó có thể quản lý ở chế độ 3D vì người chơi
có thể dễ dàng di chuyển camera xuống dưới.
Trong trò chơi 3D, bạn thấy các cảnh quay ở góc thấp trong
Shadow of the Colossus (PS2), vì trò chơi đang thay đổi tâm
trạng và thể hiện cảm giác về quy mô. Kỹ thuật này giống như
một thiết bị kể chuyện, vì vậy trong các trò chơi nghệ thuật
pixel 2D, bạn sẽ chỉ thấy chúng trong các đoạn cắt cảnh
Metroid Zero Mission (GBA)

Bạn có thể phân biệt các khung cảnh thành 2 mặt phẳng để tạo cảm giác về quy mô.
LoZ: Minish Cap (GBA)

Bạn có thể sử dụng Mode 7 để mở rộng quy mô ...................... hoặc trải rộng đồ họa trên 2 màn hình.
SMW2: Yoshi’s Island (SNES) Super Metroid (SNES)
159
Kết luận
Cách khán giả trải nghiệm thế giới của bạn là một vấn đề khá lớn.

Với trò chơi, góc nhìn mà bạn sử dụng sẽ xác định trải nghiệm của người chơi. Đừng cảm thấy bị giới hạn bởi 7
phép chiếu được thảo luận trong chương này. Hãy nhớ rằng người chơi sẽ nhìn thế giới bằng góc nhìn này trong
suốt toàn bộ trò chơi. Còn với vẽ tranh, bạn có thể thoải mái vẽ theo bất kỳ góc độ nào bạn muốn. Bạn có nhiều tự
do hơn nhưng bạn vẫn phải tuân theo các quy tắc cơ bản về phối cảnh!

Quick info Types of views Extra info

Introduction Multiview drawings Clarity issues
Orthographic projections Paraline drawings Using guidelines
True perspective Showing scale
160
Chapter 7: Clean-up (Dọn dẹp)
Giới thiệu
Clean-up mô tả tất cả các bước hoàn thiện và những cải tiến có thể có. Ngay cả khi bạn nghĩ rằng mình đã
hoàn thành, bạn có thể thực hiện một số điều chỉnh trước khi kết thúc ngày làm việc.

Roughs Clean-Up Complete

By guest artist: Yaa

Nếu bạn đang tạo một trò chơi điện tử hoặc chỉ đơn giản
là tạo pixel art để giải trí, rất có thể bạn sẽ nhận được
phản hồi về tác phẩm của mình. Điều này có thể ở dạng
mẹo hoặc lời khuyên về cách sửa chữa một số thứ. Điều
quan trọng là bạn cũng phải tự đánh giá công việc của
mình, ngoài việc người khác đánh giá nó.

Kết quả là bạn sẽ phát triển hơn với tư cách là một hoạ sĩ!

Nếu bạn muốn nắm bắt các mẹo dọn dẹp, hãy xem lại và kiểm tra:

Giới thiệu Khử răng cưa Màu sắc Khả năng đọc
...Nhưng điểm ảnh quan trọng
Vậy tôi nên bắt đầu từ dùng AA hay không dùng AA Chọn màu I hơn
đâu ở phần “Old School” Đường răng cưa Chọn màu II Silhouettes (hình bóng)
Hardware Dải màu Vùng sáng & vùng tối & tiếp
tuyến

162 Các mẹo dọn dẹp khác sẽ xuất hiện trong các chương tiếp theo!
From rough to clean (Từ thô đến sạch)
Một số trò chơi điện tử để lại đồ họa chưa hoàn thành trong dữ liệu của
chúng để sử dụng làm trình giữ chỗ. Nó cho người trong cuộc cái nhìn
về phương pháp của mỗi họa sĩ. Hãy thử nhớ lại sơ đồ trong Chương
Giới thiệu và chúng ta hãy xem xét kỹ hơn về chúng.

Hình dạng • Tinh chỉnh • Hoàng thiện

Trong Pokémon Black2 và White2 (NDS), robot này có một

phiên bản beta. Phương pháp được sử dụng ở đây có vẻ
giống như một sự kết hợp giữa làm việc với đường nét và
hình dạng. Các bộ phận cơ thể đã được di chuyển xung
quanh và đầu đã được thu nhỏ.
Trong ví dụ này, hình ảnh đã được vẽ lại một hoặc
hai lần ở các kích thước khác nhau. pixel art cũng
trải qua một vài thay đổi về màu sắc. Nghệ thuật
đường nét ở đây được điêu khắc và sau đó tinh
chỉnh ở cuối.
Pokémon Black2 & White2 (NDS).

Sprite by Michafrar, By guest artist: Yaa

character by Nintendo

Những hình vẽ này rất thô trong giai đoạn đầu của chúng. Chúng nằm giữa các khung hình của hoạt ảnh. Sẽ dễ dàng
hơn khi sử dụng các vũng màu cho các khung hình ở giữa này. Bằng cách này, bạn làm việc nhiều hơn với vùng sáng và
vùng tối, và ít hơn với các đường nét. 163
 Đường nét • Màu sắc • Kết thúc
Sử dụng một bản phác thảo rất thô, và sau đó hoàn thành nó trong pixel art.

Dudley from Street fighter III (Arcade; Dreamcast)

Trong JoJo's Bizarre Adventure (Arcade, DC, PS1), có

dữ liệu của các sprite chưa hoàn thành. Trò chơi
này (giống như hầu hết các trò chơi Capcom khác)
tạo ra đồ họa của nó bằng cách số hóa các bản vẽ
trên giấy. Phiên bản cuối cùng chỉ là một sắc thái
đơn giản. Có một số thay đổi khác được thực hiện
trong giai đoạn vẽ nét. Một số thay đổi là tinh tế,
Phiên bản đầu tiên Phiên bản cuối cùng những thay đổi khác thì hoàn toàn khác.

Kết quả cuối cùng có thể trông hoàn toàn khác với hình vẽ đầu tiên.
Đừng lo lắng nếu tác phẩm của bạn thay đổi so với bản phác thảo ban đầu của bạn.

164
 Những sprite này của Petshop và Zangief đã có nhiều thay đổi.
Cả hai đầu của chúng đã được làm sạch rất nhiều trong giai đoạn đổ bóng.

Jojo’s Bizzare Adventure (Arcade; DC, PS1) and Street Fighter Alpha 2 (Arcade)

Khi không có nhiều chỗ cho các đường nét, các họa sĩ không phụ thuộc nhiều vào nghệ
thuật đường nét. Với nghệ thuật pixel, thông thường phiên bản cuối cùng trông hoàn
toàn khác với bản phác thảo, như bạn có thể thấy với Zangief.
Nếu bạn gặp khó khăn trong việc lấy chi tiết trong nghệ thuật đường nét của mình, hãy thử sử dụng
hình dạng thay vì nghệ thuật đường nét.
Nghệ thuật đường nét chủ yếu hữu ích khi bạn đang xây dựng một cấu trúc hình học.

By guest artist Cocefi

165
Adjusting your sprite (Điều chỉnh tác phẩm của bạn)

Bạn luôn có thể cải tiến theo cùng một phong cách nghệ thuật. Trong các trò chơi Mega man X trên Super
Nintendo, nhân vật chính không có thay đổi nào đối với hình tượng mặc định của anh ta. Tuy nhiên, nhân
vật Zero được cung cấp màu sắc tươi sáng hơn, cải thiện tư thế, hình bóng và hình dạng sạch sẽ hơn.

Nghệ thuật là chủ quan. Mọi người đều có mục yêu thích của riêng họ.
Không phải tất cả các thay đổi đều là cải tiến cho tất cả khán giả của bạn..

Như bạn có thể biết, những thay đổi

về thiết kế cũng được thực hiện để
phù hợp với thị hiếu. Tuy nhiên,
chúng tôi sẽ không thảo luận về
những điều này trong cuốn sách này.
Magical Chase (TurboGrafx-16) Sonic 3(Beta) (Sega Megadrive)

Những điều cần lưu ý khi điều chỉnh sprite:

Hình bóng Thiết kế Màu sắc Hình dạng pixel Ánh sáng Khả năng
đọc
ĐÂY KHÔNG PHẢI LÀ DANH SÁCH KIỂM TRA. Chúng tôi sẽ sử dụng các ví dụ này để dễ hiểu trong các trang sau.
Có nhiều khía cạnh khác ngoài cuốn sách này.
166
 Ví dụ từ Trò chơi
Bonewalker from Fire Emblem: The Sacred Stones (GBA) Điều chỉnh

Kích thước hộp sọ lớn hơn cho

phép nhiều không gian hơn cho Thanh kiếm 3D hơn và làm cho
các chi tiết và biểu tượng phụ hình bóng dễ đọc hơn. Tương
tự với miếng vải xung quanh
cho mắt và miệng.
xương chậu của anh ấy.

Bảng màu không khác Hình bóng dễ phân biệt

nhiều, nhưng ánh sáng và Các tư thế ít cứng nhắc hơn, đáng sợ hơn. Chúng
có nhiều cá tính hơn. hơn và rộng hơn nhiều.
bóng tối rõ ràng hơn.

Frostwind boss from Drawn to life (NDS) Điều chỉnh

Với sự khác biệt chỉ 1 pixel, đồng tử

Một đường sẫm màu mới phác thảo trông nhỏ hơn. Một pixel màu trắng
má của con rồng. Bây giờ chúng nổi đó tạo nên sự thay đổi.
bật hơn. Phiên bản cũ có 1 hình dạng
lớn của màu chàm ,tuy nhiên đây là
một lựa chọn không tồi.

Một bóng tối hơn bao quanh

miệng. Nó sắc nét hơn nhiều. Ngoài
ra còn có một số điểm A-A để làm
Màu sắc rực rỡ hơn. mềm nét vẽ.
167
Barry from Pokémon Platinum (NDS) Điều chỉnh

Diamond/Pearl (2006) Platinum (2008)

Hình bóng mới của Barry gần với

Khuôn mặt đã được làm lại hoàn toàn. Mắt phải sạch hơn và hốc sprite của anh ấy hơn. Chân và
mắt hiện là 90 °. Nụ cười rộng hơn và dễ phân biệt hơn với mũi. tay của anh ấy nổi bật hơn và mái
Hàm bây giờ có khử răng cưa và đường viền mượt mà hơn. tóc của anh ấy có tóc dựng thẳng.

Bàn tay nhỏ hơn và dễ đọc hơn. Hình dạng của

các pixel có màu tương tự cũng sạch hơn. Đơn Sprite năm 2008 bao gồm các chi tiết chính
giản hơn nhiều. xác hơn so với bảng mô hình của anh ấy.
Không chỉ tư thế mà còn cả tóc và cổ áo.

Pokémon sprites nói chung là một ví dụ tuyệt vời về điều chỉnh trong quá trình phát triển.
168
Knuckles the Echidna’s goal sign (Sega Mega Drive) Điều chỉnh

Sonic & Knuckles

Sonic 3’s Prototype Sonic 3 & Knuckles locked onto Sonic 2

Giữa các phiên bản này, sự khác biệt lớn duy nhất được nhìn thấy ở bức ảnh chân dung bên phải. bên trái và giữa chỉ có sự
khác biệt về điểm nổi bật và hình dạng tóc. Cái ở giữa (được sử dụng trong trò chơi cuối cùng) có một hình ảnh phản chiếu
sáng bóng trong mắt của nó. Đôi mắt cũng sắc nét hơn nhiều. Hãy nhớ rằng 1 pixel có thể tạo ra sự khác biệt.

Vì lý do nào đó, hình ảnh của Sonic 2 của Knuckles có màu đỏ xung quanh miệng.
Điều này không đọc tốt chút nào và trông giống như nhiễu ngẫu nhiên (điểm ảnh lạc). Nó
trông ổn nếu không có các pixel màu đỏ và không thực sự cần phối màu.

Drill platform from Pulseman (Sega Mega Drive) Điều chỉnh

Sử dụng ánh sáng khác

nhau làm cho đối tượng
xuất hiện 3-D hơn.
Đường viền cũng được tô
bóng. Các cạnh cũng được
làm tròn.

Bóng râm trong cái cũ không

hợp nguồn sáng.
Trong phần mới, bạn có thể
thấy nền tảng đổ bóng lên
mảnh màu đỏ.

169
Cleaner Shapes (Hình dạng sạch hơn)
Đôi khi, việc dọn dẹp đòi hỏi một chút độ chính xác của pixel.
Đây là nơi mà ngôn ngữ hình dạng ra đời. Các điểm ảnh cùng
màu tụ lại với nhau thành hình dạng. Chúng tôi sẽ gọi chúng
là shapes( hình dạng ). Những người khác gọi chúng là
clusters (cụm), clumps (cục), chunks (mảnh), blocks (khối),
v.v..
Puyo-Puyo (Super Famicom)

Nếu bạn đã quen thuộc với trò chơi Puyo-Puyo, hãy

thử tưởng tượng các pixel giống như puyo kết tụ lại
với nhau. Điều này xảy ra khi các puyos cùng màu ở
cạnh nhau. Có thể thử xem chúng như những khối
Rock Climbing. Đó là một so sánh xa vời, nhưng nó có
thể hữu ích.

Nghệ thuật vectơ rất giống với nghệ thuật pixel. Nghệ thuật vectơ được tạo ra từ các hình dạng hình học
có thể được thu phóng vô hạn. Các hình dạng không bị mờ và tất cả đều có thể được chỉnh sửa tự do.

Vectorized portrait from

Metal Gear Solid 3:
Subsistence (PS2)

MGS3 (PS2)
Cứ như thể mỗi khối màu là 1 ô khảm. Khi những hình dạng này sạch sẽ và được chế tác tốt, chúng
sẽ làm cho hình vẽ của bạn dễ đọc hơn một chút!
170
 Một loại hình nghệ thuật khác là về ngôn ngữ hình dạng, là in khắc gỗ và in Linocut. Nó tập trung vào các hình
bóng hoặc hình dạng gần nhau. Một số yếu tố của hình ảnh Notan xuất hiện trong các bản in khắc gỗ.

Những bản in này sử dụng các khối gỗ chạm khắc để in hình

bóng. Những thứ này trông rất giống với stencils (giấy nến)
mà bạn sẽ thấy trong graffiti. Khi bạn xếp một số hình dạng
chồng lên nhau, bạn sẽ có được một hình ảnh đầy đủ màu sắc.
Loại hình nghệ thuật này phổ biến trên toàn thế giới, nhưng
đặc biệt thịnh hành ở Nghệ thuật Nhật Bản và Châu Á.

Seymour Road Studios, UK

Một so sánh cuối cùng mà chúng ta có thể thực hiện với nghệ thuật sử dụng ngôn ngữ hình dạng dựa trên các ghi chú từ Walt
Stanchfield’sDisney Drawing Classes Trong những ghi chú này, anh ấy nói về thuật ngữ “lazy lines” (“đường lười biếng”).

“ Khi nói chuyện với Dan Jeup vào một ngày nọ, anh ấy đã đề cập đến “những đường lười biếng”.
Anh ta đang đề cập đến những đường nét không mô tả bất cứ
điều gì, những thứ như hình dạng, kết cấu, độ mềm hoặc độ cứng.
Nó giống như những gì bạn nhận được khi theo dấu một thứ nào đó, một sự giống nhau tổng thể của đường nét.
Walt Stanchfield

Đây có thể là về đường nét, nhưng nó cũng liên quan đến hình dạng và bóng đổ! Ý tưởng tương tự có thể
được áp dụng cho các bức tranh và tất nhiên là… nghệ thuật pixel! 171
 Nó không nhất thiết là về mức độ sạch sẽ của mỗi hình dạng riêng lẻ.
Cũng giống như nghệ thuật độ nét cao hoặc nghệ thuật truyền thống, nó giống với bạn áp dụng nét vẽ tốt
như thế nào và tất cả các nét vẽ đó kết hợp với nhau như thế nào trong tác phẩm cuối cùng của bạn.

Lemmings (PC, Amiga & more) Castlevania: Symphony of the Night (PS1)

Hình dạng sạch hơn truyền tải nhiều thông tin

nhất và thường sẽ đẹp hơn. Đồ họa trong PlayStation có thể có đồ họa cao
Lemmings (trái) bị nhiễu và đồ họa trong cấp hơn, nhưng khi giảm xuống
còn 5 màu độc đáo, những tảng
Castlevania (phải) bị cắt sạch sẽ. Khi bạn tạo kết
đá này sẽ VẪN trông thuyết phục
cấu, các hình dạng sạch sẽ sẽ đáng tin hơn. hơn.

Ngôn ngữ hình dạng này không loại trừ tính năng
Khử răng cưa. Trên thực tế, AA có thể giúp cải
thiện hình dạng của bạn một chút!
AA sẽ không phải là ân huệ cứu rỗi của bạn. Nó
chỉ được sử dụng để làm mềm các đường nét và
hình dạng của bạn, vì vậy cuối cùng đó là tất cả về
kỹ năng vẽ.
Shin Megami Tensei II (PS1

Castlevania X: Rondo of Blood (TurboGrafx-16)

Tác phẩm nghệ thuật phối màu cũng được tạo hình, với sự phối màu pha trộn các cell shading .
172
 Bản vẽ của bạn sẽ, bắt đầu với
hình dạng của ánh sáng và bóng
tối, ngay cả nếu bạn thích bóng
chi tiết...

... giống như nghệ thuật truyền thống!

Odin’s Sphere fan art by guest artist: Yaa

Làm sạch bóng đổ rất quan trọng đối với các
tác phẩm đơn giản và chi tiết. Bạn không thể
vẽ hình dạng của ánh sáng và bóng tối mà
không suy nghĩ.
Thân cây bên trái có 4 sắc thái chính và trông giống như
có cell shading . Thân cây bên phải có tới 8 sắc thái
trong dải màu của nó và có độ chi tiết cao
Mother 3 (GBA) and Alundra (PS1)

Nắm bắt được điều này cũng giống như vẽ tranh thông thường; nó xảy ra theo thời gian. Bạn sẽ thấy vị trí nhất định của pixel có
thể truyền tải ánh sáng và bóng tối tốt hơn so với các đường nét có thể.

Nếu bạn thực sự quan tâm đến khái niệm xác định hình dạng, hãy xem loạt bài này của MarcoBucci.
Trong tập 4, Bucci nhấn mạnh lý thuyết này trong hội họa, nhưng nó cũng có thể chuyển
sang nghệ thuật pixel!

Title: Good Shapes - 10 Minutes To Better Painting - Episode 4

Preview video: youtu.be/-ZknWKTpc90

Việc sửa chữa các hình dạng của nghệ thuật pixel của bạn cũng mang tính chủ quan vì mỗi họa sĩ có sở thích
và giả thuyết riêng của họ. Nó rất được khuyến khích để học hỏi từ những người khác. Nếu bạn quan tâm đến
vấn đề nitty-gritty, hãy yên tâm là cộng đồng Pixelation.org sẽ cung cấp cho bạn một cái nhìn. 173
 Multiple versions (đa phiên bản)
Trước khi hoàn thành một sprite, bạn có thể không hoàn
toàn hài lòng với giao diện cuối cùng. Bước cuối cùng đôi
khi có thể cảm thấy giống như một vòng xoay. Bạn có thể
phải đi vòng quanh trước khi tìm thấy lối ra phù hợp. Bằng
cách tạo nhiều phiên bản của cùng một sprite, bạn có thể
chọn phiên bản yêu thích của mình.

Trong Chương 4, chúng ta đã thảo luận về cách một pixel duy nhất có thể tạo ra sự khác biệt.
Thay đổi một số pixel sẽ không tạo ra sự khác biệt lớn, nhưng chúng vẫn có thể tạo ra một hiệu ứng tinh tế!

by Michafrar
Khi bạn không chắc cái gì trông đẹp hơn, hãy tạo nhiều phiên bản và để những người khác bình chọn cho bản yêu thích của
họ. Nếu bạn ở một mình, hãy nghỉ ngơi và so sánh với đôi mắt tinh tường để tự mình chọn lấy một phiên bản.

By guest artist: Steven McCarthy

Với ít không gian, có thể rất khó để tạo pixel chính xác những gì bạn muốn. Tiếp tục cố gắng cho đến khi bạn
nhận được một kết quả tốt. Nếu không có gì hiệu quả, cố gắng suy nghĩ rộng ra và làm cái gì đó mới lạ.

Không phải lúc nào cũng có những khác biệt nhỏ. Không quá chắc
chắn về toàn bộ sprite? Thử vẽ nhiều bản phác thảo để bạn có thể
cảm nhận được tư thế hoặc tâm trạng.
By guest artist: Shawn Martins

174
The Selection tool (Công cụ chọn vùng)
Thay vì vẽ lại các pixel từ đầu, bạn có thể chọn các vùng trên bản vẽ
của mình và di chuyển chúng. Điều này có thể giúp bạn tiết kiệm rất
nhiều thời gian. Nếu bạn vẽ hoặc tạo hoạt ảnh kỹ thuật số, bạn phải
đã quen thuộc với công cụ này.
Công cụ lasso cũng có thể hữu ích, nhưng đôi khi nó quá nhạy
để kiểm soát. Công cụ lasso là một tên gọi khác!

by Michafrar, character by Nintendo

Bạn có thể di chuyển các bộ phận xung quanh và sửa đổi sprite của mình.
Nếu công việc của bạn không phải trên mô hình, bạn có thể thực hiện các thay đổi đơn giản với công cụ chọn vùng.
Điều này có vẻ khá rõ ràng, nhưng đừng quên công cụ này tồn tại. Hãy nhớ tinh chỉnh và sửa chữa mọi thứ khi bạn
thực hiện.

Bạn có thể dễ dàng sửa chữa mọi thứ bất cứ lúc nào và di chuyển các bộ phận xung quanh:

175
 Đây là một ví dụ về một sprite đã được cải thiện bằng cách sử dụng công cụ chọn vùng.
Cả hai hình vẽ này đều được làm bởi cùng một họa sĩ (Michafrar).

Before After

Vậy làm cách nào để thực hiện những thay đổi tinh vi đó?

Sub-pixeling đã được nhắc đến nhiều lần .

Ngay cả những thay đổi nhỏ nhất cũng có
thể cải thiện hình ảnh của bạn.
Hãy đón chờ nó ở Chương 8.

176
 Scaling & Rotating (Thu phóng và xoay)

Khi bạn được giao nhiệm vụ thu nhỏ một sprite, bạn phải hy sinh các chi tiết và chú ý nhiều hơn đến khả năng
đọc. Hãy xem lại chương Khả năng đọc và các trang “Các vấn đề về kích thước…”

Khi bạn chỉ đơn giản là thay đổi kích thước của sprite, bạn sẽ kết
thúc với một bức tranh ghép có pixel. Trông khá lộn xộn! Có vẻ
như rất nhiều công việc, nhưng bạn hoàn toàn có thể dọn dẹp
nó. Sử dụng các mãnh vụn pixel đã thay đổi kích thước làm cơ sở
và vẽ lại các tính năng và đường nét quan trọng.

Bạn sẽ chuyển đổi giữa dụng cụ hút màu và bút chì rất nhiều! Vì vậy, hãy tận dụng chúng thật tốt.

Đây là một trong những bài tập tốt nhất để học nghệ thuật pixel một cách trực quan.
Việc sửa đổi các mảnh vụn bị thu nhỏ sẽ khiến bạn phải suy nghĩ kỹ về vị trí đặt pixel.
Hãy thử tự làm điều đó ! Đó là một cách thực hành tốt :D 177
 Việc dọn dẹp tương tự có thể được thực hiện trên các hình vẽ phóng to, nhưng nó nghiên nhiều hơn về thao tác vẽ.
Thường thì nên bắt đầu lớn rồi tới nhỏ sẽ tốt hơn là làm ngược lại.

by Michafrar

By Cocefi
Tuy nhiên, làm sạch thường được sử dụng hơn đối với các sprite xoay . Bạn có thể xoay các bộ phận cơ thể hoặc hình nền
thường xuyên hơn là thay đổi kích thước chúng. Quá trình này giống nhau: đục & thêm pixel giống như là bạn hút màu & vẽ lại
trên sprite.

178 Sprite by Guest artist Don.

Sharpness (Độ sắc nét, độ rỏ nét)
Phải giữ được độ sắc nét khi bạn có một sprite nhỏ bé! Độ sắc nét không
chỉ là độ mờ hay rõ của hình ảnh. Màu sắc, độ tương phản và hình dạng
cũng đóng một vai trò quan trọng. Nếu bạn sử dụng bộ lọc “làm sắc nét”
(“sharpen” filter) , bạn có thể thấy màu sắc và hình dạng của hình ảnh bị
ảnh hưởng như thế nào. Tuy nhiên, chúng tôi ở đây để làm điều đó theo
cách thủ công. Vì vậy,ta sẻ không sử dụng bộ lọc.

Chỉ áp dụng lời khuyên trên trang này nếu bạn cảm thấy cần thiết. Dưới đây là một số phương pháp
để giữ cho hình vẽ của bạn sắc nét và dễ đọc, ngay cả khi ở khoảng cách xa.

1 Làm việc với nhiều vùng sáng và vùng tối hơn, không phụ thuộc quá nhiều vào nét vẽ.

Hand 1 được vẽ bằng nghệ thuật đường nét, nhưng nó tạo ra những vệt màu khó đọc. Việc phân biệt các
đối tượng dễ dàng hơn bằng cách sử dụng các hình dạng sáng tối rõ ràng trên Hand 2. Độ tương phản cao
hơn cũng làm cho nó dễ đọc hơn!

2 Thêm nhiều điểm nổi bật hơn

By Cocefi By Yaa

3 Thêm các đường tối hơn để làm cho mọi thứ trở nên nổi bật

By Yaa
179
Various possible tweaks (Những điều chỉnh có thể có)
Contrast (Tương phản)

Jackie Chan’s Action Kung Fu (TurboGrafx-16)

Không cần điều chỉnh bất kỳ pixel nào, bạn có thể thay đổi độ tương phản trong màu sắc. Bạn chỉ cần làm điều này
bằng cách tô màu lại mọi đường dốc của bảng màu hoặc bằng cách sử dụng các thanh trượt màu và sau đó sửa chúng
theo cách thủ công. Lưu ý: Độ tương phản có thể là tâm trạng, màu sắc, độ bão hòa và các giá trị.

Tangents (Tiếp tuyến)

Đây là nguyên tắc tương tự được thấy trong các hướng dẫn về truyện tranh và bản vẽ truyện. Đường viền tiếp tuyến có
thể nổi bật. Nếu bạn sử dụng điều này trong hoạt ảnh, bạn có thể thoát khỏi điều này, vì vậy đừng lo lắng về những
trường hợp đó!
Light & Shadow (Vùng sáng và vùng tối)

Thay đổi màu sắc thường là không đủ, bạn còn phải xem xét những điều sau: nguồn sáng, vùng sáng, vùng tối, các
khu vực khác. Bạn sẽ phải làm việc với các hình dạng, ánh sáng và bóng tối để thực hiện các sửa chữa cần thiết.
180
Character modelling & details (Mô hình và chi tiết nhân vật)

Sprite by Michafrar, Character by Nintendo

Các thay đổi cũng có thể liên quan đến việc tham khảo các trang mô hình nhân vật hoặc cách thiết kế được xây dựng. Nếu bạn
đang thêm / bớt chi tiết thì sẽ tốt hơn khi có tài liệu nguồn để thực hiện các đánh giá.

Proportions (Tỷ lệ)

Với công cụ chọn vùng (hoặc công cụ lasso), bạn có thể

dễ dàng di chuyển các bộ phận xung quanh. Pixel art
rất dễ chỉnh sửa, vì vậy tỷ lệ của bản vẽ có thể được
thay đổi ngay cả khi ở bước cuối!

Perspective (Phối cảnh)

Khi phối cảnh trên sprite của bạn trông không đúng trong lần thử đầu tiên, bạn luôn có thể sử dụng công cụ
chọn vùng và chỉnh sửa các phần. Với sprite thùng đã được điều chỉnh này, bạn sẽ thấy nắp trên to hơn và
thân nhỏ hơn. Để đảm bảo các đối tượng bạn vẽ nằm trong cùng một góc nhìn, chỉ cần đặt các hình vẽ cạnh
nhau để phát hiện ra bất kỳ sai sót hoặc khác biệt nào.

181
 Từ khi bắt đầu đến kết thúc - I

Đối với sprite này, tôi phải tiết kiệm thời gian và quyết định
bắt đầu từ một bản phác thảo. Từ đó, tôi thu nhỏ nó thành
kích thước ảnh nghệ thuật pixel. Một bản phác thảo để có
được cá tính và cảm giác phù hợp, sau đó một bản khác để
tạo ra nghệ thuật đường nét rõ ràng hơn.

Thay vì đi thẳng vào việc vẽ đường nét, tôi sẽ giải quyết sprite
này theo từng khu vực. Hãy bắt đầu với chiếc áo khoác.
Character by RiddicTH

Bất kể bạn sử dụng phương pháp nào, quá trình này thường là:
Màu - Bóng đổ - Chi tiết

Tôi không phác thảo khuôn mặt, vì kích thước canvas quá hạn chế và có rất ít chỗ cho chi tiết. Vì vậy, chỉ
trong trường hợp tôi giữ bản phác thảo trên một layer(lớp). Bàn tay đủ lớn, vì vậy nó đã có thể phác thảo.
Thông thường, bạn có thể vẽ pixel từng ngón tay một.

Tôi đã làm cho khóe mắt được xác định rõ hơn. Tuy nhiên, khuôn mặt cần một vài chỉnh sửa để trở nên đúng đắn.
182
 Đối với sprite này, tôi đã tạo ra nhiều phiên bản của nụ cười của cô ấy và quyết định đi theo sở thích của
tôi (miệng khép lại). Kiểm tra lại phần Đa phiên bản của chương này!

Trong giai đoạn cuối cùng này, tôi quyết định điều chỉnh màu sắc trong nét vẽ để mang lại cảm giác tương
phản tốt hơn, đồng thời thêm chi tiết vào phần dưới cùng của hình ảnh. Với việc vẽ các đường sáng hơn ở
phía dưới, nó ngụ ý một cảm giác về độ dày của đường kẻ mà khó có thể nhìn thấy với đường viền màu
đen tuyền. Chúng ta cùng xem xét phong cách dàn ý này trong Chương 1!

Để làm cho đường viền nổi bật, tôi đã thêm các pixel tối hơn để làm cho nó sắc nét hơn. Điều này liên 183
quan đến phần Độ sắc nét của chương này.
Từ khi bắt đầu đến kết thúc II
Tác giả khách mời: Shawn Martins

Nếu bạn đã quen với việc phác thảo trên một canvas nhỏ,
bạn có thể trực tiếp tạo một bản phác thảo thô bằng bút vẽ
pixel. Sau khi bản phác thảo hoàn thành, các màu cơ bản sẽ
được bố trí trên bản phác thảo.

Họ thường bắt đầu bằng cách vẽ chi tiết một khu

vực, để thiết lập phong cách, màu sắc và ánh
sáng. Tuy nhiên, không có gì là vĩnh viễn. Điều này
rõ ràng khi nhìn vào những thay đổi được thực
hiện trong quá trình này.

Đôi chân đã trải qua nhiều lần thay đổi. Nhiều phiên bản khác nhau đã được thực hiện để làm cho tư thế
năng động hơn. Như chúng ta đã thấy trước đây, việc thử các thiết kế khác nhau trước khi chọn mẫu
cuối cùng là điều khá phổ biến.

Sau khi hoàn thành cặp giò :D, nhiều chi tiết hơn sẽ được thêm vào phần còn lại của sprite. Thỉnh thoảng, họa sĩ
quay lại để điều chỉnh các phần đã hoàn thành trước đó. Điều này liên quan đến việc di chuyển các bộ phận xung
quanh bằng công cụ chọn vùng và vẽ lại các bộ phận từ đầu. Những thay đổi cần thiết là tùy thuộc vào đánh giá của
họa sĩ. Một khi họ hài lòng với giao diện cuối cùng, sprite đã hoàn thành!
184
Từ khi bắt đầu đến kết thúc III
Tác giả khách mời: Yaa

Yaa bắt đầu một cảnh với một bản phác thảo trực tiếp rất
thô bằng pixel. Nguồn sáng được thiết lập ngay từ đầu. Bằng
cách đó, dễ dàng hơn để tìm màu cho các nhân vật và đồ
vật, thay vì bắt đầu từ màu trắng và làm nền sau cùng..
Dưới đây là một số phần cụ thể của việc vẽ tác phẩm,
từng bước một.

185
 Kết luận

Drawn to Life (NDS)

Ban đầu, bạn có thể không coi quá trình “dọn dẹp” là nhiệm vụ hiển nhiên. Nó khá tinh tế trong thực hiện, nhưng
có thể tạo cho một sự khác biệt rất lớn.

Dọn dẹp trong nghệ thuật pixel tương tự như làm sạch trong Hoạt hình 2D. Họ có cùng tư duy và logic. Bạn
sửa lại các phần thô ban đầu và làm sạch chúng theo đúng nghĩa đen bằng cách xem lại chúng một cách chi tiết.

Tất cả những điều chỉnh và thay đổi này xảy ra ở bất kỳ giai đoạn nào trong công việc của bạn.
Tất cả các kỹ thuật từ chương trước đóng một vai trò trong việc dọn dẹp.

Hầu hết các thay đổi xảy ra khi bạn nhận được phản hồi hoặc tự động phê bình tác phẩm của mình, vào những bước cuối cùng.
Đừng ngần ngại cải thiện sprite của bạn, ngay cả khi bạn nghĩ rằng bạn đã hoàn thành!

Food for thought Tips and tricks

Introduction Cleaner shapes
From rough to clean Multiple versions
Adjusting your sprite Selection tool
From start to finish I & II Scaling & rotating
Sharpen
Various possible tweaks
186
Chapter 8: Subpixeling
187
 Giới thiệu

Super Metroid (SNES) Metal Slug 3 (Neo Geo) Darkstalkers 3 (Arcade, PS1)

Bạn có thể đã nghe nói về subpixeling. Nó thường thấy trong các idle animation (chuyển động nhàn rỗi) và các chuyển động
rất tinh tế.Nhiều trò chơi thời kỳ vàng đã sử dụng kỹ thuật này. Những đồ họa này đã truyền cảm hứng cho các họa sĩ ngày nay.

Đây là 1 pixel. Còn đây là một subpixel, Cái này này cũng không thể
nhưng không thể hiển thị
Pixel là đơn vị nhỏ nhất của độ phân giải. Chúng tôi KHÔNG thể đi đến bất kỳ thứ gì nhỏ hơn, cũng như
không thể chia đôi hình vuông pixel . Vì vậy, chúng ta phải giả vờ và tìm cách bắt chước nó.

Subpixeling tạo ảo giác về thứ gì đó nhỏ hơn 1 pixel.

Subpixel có nghĩa là " dưới một pixel" hoặc "nhỏ hơn một pixel".

Subpixeling là một thủ tục nâng cao và phức tạp. Nếu bạn đang gặp khó khăn, thì đừng lo lắng.
Nó không phải lúc nào cũng cần thiết, nhưng đó là một thử thách thú vị để trau dồi kỹ năng hoạt ảnh của bạn.

Sprite by Michafrar, character by Nintendo

Khi bạn nhìn thấy biểu tượng này, có nghĩa là hình ảnh có phiên bản hoạt ảnh (Hay hoạt hình). Bạn có thể mở các
hoạt ảnh này và lướt qua các khung. Chúng có thể được tìm thấy trong thư mục kỹ thuật số ở chương này.
188
When & How (Khi nào và cách nào)
Subpixeling có thể được tìm thấy trong

Still images (Ảnh tĩnh) Animations (Hoạt ảnh)

Đối với ảnh không chuyển động, subpixeling được gọi là khử răng cưa và đường nét đậm. Đối với các mô hình hoạt
hình, nó được gọi là hoạt hình subpixeling. Cả hai đều dựa trên cùng một kỹ thuật để tạo ra ảo ảnh: khử răng cưa.
Nói chung, thuật ngữ này được sử dụng để nói riêng về hoạt hình. Mong là bạn đã hiểu!

Easing in and out (Dể dàng vào và ra)

Để tăng thêm hoặc giảm tốc độ hoạt ảnh, các họa sĩ sắp xếp các bản vẽ của họ trong mỗi
khung hình gần nhau hơn hoặc xa hơn. Điều này có thể dễ dàng được điều chỉnh. Rất khó để
vẽ các chuyển động một cách chặt chẽ mà không bị lung lay, lắc lư; để ngăn điều này xảy ra,
Iconoclasts (PC,PS4,Switch) thay vào đó bạn vẽ subpixel cho inbetweens (những khung hình ở giửa).

Idle animations (Chuyển động nhàn rỗi)

Khi nhân vật không hoạt động, bạn có thể chọn tạo chuyển động lắc lư liên tục, chuyển
động tinh tế - hoặc một chút của cả hai. Subpixels sẽ cung cấp cho bạn những chi tiết
bổ sung mà bạn không thể có được bằng cách chỉ vẽ tự do hoặc di chuyển các bộ phận.
Iconoclasts (PC,PS4,Switch)

Giving life to still parts (Mang lại sự sống cho những phần tĩnh lặng)
Khi bạn tạo các chuyển động lớn, một số bộ phận có thể bất động. Cung cấp cho những
khu vực đó các subpixel sẽ giúp nó ít nổi bật hơn. Nếu bạn tạo hoạt ảnh ở độ nét cao,
bạn có thể quen với kỹ thuật line boiling (đường bay hơi) để tránh mọi thứ đứng yên.
Metal slug attack (Mobile)

Small resolutions (Độ quân giải nhỏ)

Khi bạn có canvas có kích thước 32x32 pixel trở xuống, việc tạo các hình ảnh có thể đọc được
sẽ khó hơn. Hơn nữa, việc tạo ra những chuyển động đáng tin cậy trong một không gian chật
LOZ: Minish cap (GBA)
hẹp như vậy thậm chí còn khó hơn. Thật khó khăn hơn khi chỉ di chuyển các bộ phận.

Wind effects, laughter, shaking, shivering, and staggering (Hiệu ứng gió, tiếng cười,
rung chuyển, rùng mình và loạng choạng)
Các chuyển động mà nhân vật hoặc vật thể hầu như không di chuyển có thể dễ dàng hưởng lợi
Sonic Mania (Various)
từ một số subpixels.
 Shifting pixels (Dịch chuyển những Pixel)

Pixel giống như cốc nước. Chúng ta có thể đổ một ít nước vào cốc tiếp theo. Nó trải rộng 2 cốc pixel, nhưng tổng
số vẫn là 1 cốc nước pixel. Đây là một trong những nguyên tắc của subpixeling .

Lượng nước trong cốc = độ sáng của màu.

Để di chuyển pixel ½ px về phía trước, ta chuyển pixel tiếp theo tối hơn hoặc sáng hơn.

Khi tạo hoạt ảnh trong subpixels,

Giá trị và Màu sắc được chuyển sang pixel tiếp theo.

Một pixel đi lạc như ví dụ trên hiếm khi xảy ra.

Các điểm ảnh luôn được bao quanh bởi các hình dạng, đường viền hoặc
nền. Thay vào đó, những gì bạn sẽ nhận được là cái này.

Sonic Mania (PS4, Switch, PC, XBO)

Không phải mọi giá trị của pixel đều cần phải được thay đổi. Đôi khi bạn có thể di chuyển pixel một cách bình thường! Bạn
không nhất thiết phải di chuyển mọi pixel trên canvas vì điều đó có thể tạo dải. Một số bộ phận có thể vẫn nằm yên, không có
bất kỳ thay đổi nào. Chuyển động và khả năng đọc quan trọng hơn việc lạm dụng subpixeling.
190
 Pixel-Logic bonus #6
Dịch chuyển pixel là nguyên tắc cơ bản của subpixeling.
Dưới đây là một số giải thích khác để giúp bạn.

Nếu cốc nước không bị cắt, hãy thử xem cặn dưới nước là cốc chứa chất lỏng màu, như sữa và cà phê!

1 cốc đầy có thể được rót theo cách khác, vì vậy bạn có thể có nhiều chất lỏng trong 1 cốc hơn cốc kia.
Subpixels không phải lúc nào cũng ½ pixel. Chúng không cần phải được đi chuyển chính xác 50%

I Chúng tôi đặc biệt khuyên bạn nên sử dụng lại các màu đã có trong sprite của bạn cho
các subpixel.
D Đừng bận tâm sử dụng toán học để xác định những gì bạn cần. Chỉ cần chọn một màu ở giữa.
Hãy thoải mái tạo ra những màu sắc mới, nhưng hãy nhớ đừng để mất dấu chúng!

Bạn cũng có thể gọi kỹ thuật này là pixel bơi pixel, chuyển, hoặc thậm chí pixel chảy máu.
Có thể thử xem các điểm ảnh phụ giống như các hồn ma hoặc các điểm ảnh nhòe nhoẹt khi chúng di chuyển.

starting frame(khung bắt đầu) inbetweens(khung ở giửa) ending frame(khung kết thúc)

Khi một đường hoặc hình dạng di chuyển ra xa, nó có thể để lại một số AA. Giống như một lớp vỏ của chính nó. Đôi khi nó trông
giống như một hàng pixel bóng ma từ khung hình trước đó! Hãy nhớ KHÔNG để lại bất kỳ AA sáng màu nào trên đường viền.
Bạn sẽ tìm thấy thêm về điều này trên trang “Chuyển động”.
191
 Line weight (độ dày của nét vẽ)
Chúng ta đã thảo luận ngắn gọn về độ dày của nét vẽ trong chương 2, vì vậy hãy thoải mái làm mới bộ nhớ của bạn. Subpixels
cho phép bạn làm những gì bạn thường làm trong tác phẩm nghệ thuật HD. Loại subpixeling này thực sự chỉ là AA!

Puyo-Puyo (Super Famicom)

Line width Thin edges Thin center & more

Chúng ta có thể chứng minh rằng các

đường sẽ nhạt hơn khi chúng mỏng
hơn, bằng cách thu nhỏ các đường
này. Hình dạng và các cạnh cũng trở
nên sáng hơn về màu sắc.
Tuy nhiên, mọi thứ chỉ trở nên sáng sủa hơn khi được tô
bóng từ tối sang sáng. Điều này có nghĩa là điều ngược lại
xảy ra khi làm việc trong các hình dạng tối.

Kết luận
Nền trắng Nền đen

192
Độ dày nét vẽ trong sprites

Những ví dụ này phải đủ rõ ràng để dễ dàng nghiên

cứu! Chúng có Độ dày nét vẽ khác nhau. Chú ý đến
(giá trị) độ sáng của tất cả các pixel dùng để khử răng
cưa..
Mario & Luigi:
Superstar Saga (GBA)

By guest artist Anubis Jr. Character by Nintendo

Metal Slug 6 (Arcade, PS2) By guest Artist YAA The Legend of Zelda: Minish Cap (GBA)

193
By guest Artist YAA
 The Legend of Zelda: Minish Cap (GBA)

Các vết nứt mỏng hơn trong đá này kết thúc bằng các pixel nhạt hơn. Các vết nứt sâu hơn sử dụng các điểm ảnh tối hơn.

Rất dễ nhầm độ dày với đổ bóng

Chúng có thể trông giống như đổ bóng nhẹ hơn hoặc các mảng tối hơn, và điều đó
không sao cả! Cuối cùng, có thể sử dụng được nhiều hiệu ứng cho việc khử răng cưa.

Adding and removing weight (Thêm bớt độ dày)

Trong ảnh phóng to này, bạn có thể thấy cách khử răng cưa hoạt động như subpixels. Tập trung vào mặt nạ
xung quanh mắt của nhân vật để thấy sự khác biệt. Phiên bản X có mặt nạ mắt lớn hơn phiên bản Y.
1 2 3 4

by Michafrar

1. Phía trên mắt bên trái có AA nhạt hơn trong phiên bản Y, làm cho đường kẻ mỏng hơn.
2. Phía trên mắt bên phải có một hàng subpixel AA sáng hơn trong phiên bản Y.
3. Phía dưới mắt bên trái có AA sáng hơn trong Phiên bản Y.
4. Không thay đổi độ sáng, nhưng AA tối ngắn hơn.

Như chúng ta đã thấy nhiều lần trước đây,

mọi pixel đều có thể tạo ra sự khác biệt. Đôi
khi làm sáng hoặc tối AA tạo ra subpixeling
và tạo ra các kết quả khác nhau..
Upscaled with waifu2x.udp.jp

194
Split pixels (Tách pixel)

the equivalent
of drawing
Phân tách pixel là khiến một pixel trải rộng trên 2 khối.
Một pixel hoàn chỉnh không thể tồn tại như thế này, vì vậy giá trị
của nó được chia thành 2 pixel, mỗi pixel bằng 50% độ sáng của nó.

Hãy sử dụng các phân tách pixel này làm mọi thứ tốt hơn.

by Michafrar Nếu các nét vẽ ở dạng HD Những gì bạn tưởng tượng Chuyển qua pixel

Khi chúng tôi thu nhỏ những hình ảnh

này về kích thước ban đầu (1x), kết quả
gần như giống hệt nhau! Điều này chứng
tỏ rằng subpixeling quan trọng. Hãy thử
sử dụng phân tách pixel để thể hiện độ
dày của nét vẽ tốt hơn!

Trong một số trường hợp, bạn có thể

thêm một chút độ tối (độ sáng) vào 1
bên của pixel được chia nhỏ. Đây thực
sự chỉ là AA kết hợp với các pixel chia
nhỏ.
The Legend of Zelda: Minish Cap (GBA)

Thường có những khu vực mà pixel chia

nhỏ có thể hữu ích. Chúng không phải
lúc nào cũng cần thiết nhưng có thể tạo
ra những thay đổi tinh tế. Bạn cũng có
thể thấy các pixel bị phân tách này sử
dụng lại màu xám đã được sử dụng
trong bảng màu.
Pokémon Black & White (NDS)

195
Tricking the eye (Đánh lừa thị giác)
Đây là một số thủ thuật hoặc tạo ảo giác để đánh lừa thị giác. Đây là những điều cực kỳ tinh tế, bạn nên ghi nhớ.

Bending shapes (uốn cong các vật thể)

Trên cây nho xanh này, phần đường chéo có AA được đặt ở các góc khác nhau. Các subpixel này đẩy một hình dạng
sang một hướng nhất định - trong khi tất cả đường viền là giống hệt nhau! Mọi pixel đều quan trọng ở đây.

Tâm trí của bạn

nhận thức được
gì:

Skewing shapes (làm nghiên vật thể)

Hướng và vị trí của AA của bạn có thể làm

nghiên vật thể theo mọi cách.

Bạn không có khả năng sử dụng điều này cho

hình ảnh tĩnh, nhưng nó có thể cung cấp
thêm sự tinh tế trong các hoạt ảnh của bạn.

Thinning out shapes ( làm mỏng vật thể)

đường ngang có thể mỏng hơn các

đường dọc và ngược lại.Hiệu ứng này là
rất tinh tế nên nó có thể dễ dàng bị bỏ
qua.
The Legend of Zelda: A Link to the Past (Super Nintendo)

196
Selective Outline (đường viền có chọn lọc )
Các đường viền chọn lọc thường bị nhầm với các đường viền đổ bóng và khử răng cưa xung quanh các cạnh.
Đó là những gì chúng đang có, nhưng chúng phục vụ một mục đích khác. Vậy tại sao đường viền bị đứt đoạn?

Coloured outline (viền màu) Selective outline (viền chọn lọc) Shaded outline( viền đổ bóng)

Darkstalkers 3 (PS1/Arcade), Super Gem Fighter Mini Mix (Arcade, Saturn, PS1)

Các đường viền có chọn lọc làm cho các đối tượng tiền cảnh kết hợp đẹp hơn với môi trường xung quanh.
Khi 1 layer trượt qua layer khác, các AA được đặt cẩn thận này sẽ làm cho quá trình di chuyển mượt mà hơn. Các
họa sĩ thường viết tắt “selective outline”( “đường viền có chọn lọc”) là “sel-out".

Klonoa: Empire of Dreams (GBA)

viền chọn lọc chỉ được sử dụng trên các lớp có nền trong suốt. Nếu các đối tượng chồng lên nhau trong môi
trường có màu trung tính, chúng sẽ trông mượt mà hơn với đường viền chọn lọc. Đó là tất cả về ngữ cảnh.
Những đường đứt đoạn này thường sẽ
trông đẹp nhất trên nền tối. Trên nền
sáng, chúng thường trông lởm chởm.

Nếu đối tượng của bạn CHỈ xuất

hiện trên nền tối, bạn có thể sử
dụng các đường viền có chọn lọc
một cách an toàn. Trong thực tế,
tốt nhất là bạn nên làm như vậy!
Darkstalkers 3 (PS1/Arcade)
197
Nó trở nên phức tạp khi nền có cả vùng tối và vùng sáng hơn. Quả bóng này có thể trông đẹp ở phía trước tảng đá, vì đường
viền chọn lọc kết hợp tốt với nó. Chúng trông không đặc biệt đẹp trong mọi tình huống.

by Michafrar

Overview

Heavier selective outline

Đường viền chọn lọc đậm hơn

Lighter selective outline

Đường viền chọn lọc nhạt hơn

Tạo các đường viền chọn lọc đầy đủ hơn và ít phân đoạn hơn.
Bạn có thể làm gì để
Tránh tất cả đường viền chọn lọc ở cùng nhau. Sử dụng các kiểu đường viền khác
tránh các vấn đề:
Sử dụng các gợi ý của AA và áp dụng chúng cho các kiểu đường viền khác.

Vậy subpixeling liên quan gì đến điều này?

Bạn có thể có đường viền chọn lọc sáng hơn hoặc tối hơn cho các sprite của mình; Tuy
nhiên, tất cả phụ thuộc vào nền tảng. Nếu sprite thường ở trong môi trường tối, bạn có
thể muốn cung cấp cho chúng đường viền chọn lọc tối hơn: đường viền đổ bóng với các
pixel AA tối hơn để pha trộn các cạnh với màu nền.
Theo một cách nào đó, nó giống như độ dày đường nét,
nhưng đối với các đường viền.
Nó sẽ tỏ ra khá hữu ích trong việc tạo hoạt ảnh cho những
đường viền này với subpixeling.

198 Top: LOZ: Minish Cap (GBA) Bottom: Iconoclasts (PS4,Switch,PC)

 Direction (Phương hướng)
Đã bao giờ xem hoạt ảnh 3D với tính năng khử răng cưa bị tắt
chưa? Với kết xuất 3D trong đồ họa raster, bạn có thể dễ dàng
thấy các đường cong có các đường pixel cong vênh như thế nào.

Lưu ý rằng, từng khung hình, đỉnh đầu cảu nhân vật rút lại khi nhân vật di chuyển xuống dưới.

Pikachu 3D model from Pokémon X & Y (Nintendo 3DS)

Vậy tại sao điều này lại xảy ra? Đó là do cách các đường di chuyển xung quanh trong đồ thị toán học.
Đây là hình ảnh cận cảnh của một hình parabol. Đối với những người hiểu biết về toán học: những gì
đang xảy ra ở đây là f(x): x² + n (hay y= ax²+bx+c , có ai còn nhớ đồ hàm số bậc 2 là gì hông ??? )

Khi đường cong di chuyển xuống, đầu nhọn sẽ mở rộng.

Điểm ảnh trên mỗi hàng thoát ra hai bên.
Tại một thời điểm, đường cong cắt qua một hàng mới
và các pixel mới BẬT RA tạo thành chu kỳ tiếp tục.

Trong hoạt ảnh, răng cưa không phải là vấn đề vì bạn chỉ bắt gặp trong tích tắc. Tuy nhiên, khi đường cong
của bạn bật ra một hàng mới hoặc thu lại xuống một hàng thấp hơn, hãy tránh đi chuyển các pixel đơn lẻ.

Nhắm mục tiêu ít nhất 2 đến 3 pixel khi bật các hình dạng và đường thẳng ra
Đây là quy tắc chung để tạo hoạt ảnh cho các subpixel trên đường thẳng, đường cong và hình dạng.

Hoạt ảnh subpixeling yêu cầu bạn phải

nhân đôi một khung hình và chỉnh sửa nó một chút.
lật qua lại giữa các khung hình để kiểm tra xem các pixel dịch chuyển như thế nào!
199
 Hướng của subpixeling đi theo góc của hình dạng
dạng bất kể hoạt ảnh chung đang hướng đến nơi nào.
ví dụ. : nếu góc nằm ngang = subpixeling nằm ngang ,
nếu góc thẳng đứng = subpixeling là thẳng đứng

Bạn có thể thấy rằng chiếc áo choàng này cong theo chiều ngang, do đó subpixel cũng theo chiều ngang.
Nó di chuyển lên và xuống,nhưng mà hướng của subpixel qua trái và phải vào các thời điểm đặc biệt.

Red Earth (Arcade)

Nếu bạn bối rối, hãy ghi nhớ mẹo này với đôi tay của bạn. Ngón cái là chuyển động chính và nó di chuyển độc lập. 2 ngón còn
lại thường chỉ về cùng một hướng.

pixel có thể lên hoặc xuống nhưng cũng có thể sang trái và phải tùy thuộc vào góc độ.
Điều này hoạt động với toàn bộ pixel hoặc subpixel . Hãy luôn tập trung vào góc độ.

Trong các tệp hoạt hình kỹ thuật số (bao gồm trong chương này), bạn có thể thấy
200 một bộ sưu tập các hình dạng hoạt hình khác nhau. Tìm thư mục "hình dạng”.
 Pixel-Logic bonus #7
Tại sao nó trông giống như pixel đi lên / xuống khi chúng ta di chuyển chúng sang trái / phải?
Các subpixel trong chuyển động phần nào dựa trên ảo ảnh quang học.
Dưới đây là một số ví dụ khác để giúp bạn hiểu hơn về nó.

Hoạt ảnh có vẻ như nó đang đi theo một chiều, nhưng một số khu vực lại di chuyển theo cách khác.
Nó thực sự là một ảo ảnh quang học.

Đường kẻ đang di chuyển xuống dưới màng hình … hay nó di chuyển theo chiều ngang?

Hãy xem các pixel cong vênh như thế nào trong thực tế, bằng cách xem hình ảnh này từ King of Fighters XII (Arcade, PS3,
XB360). Đồ họa pixel 2D từ trò chơi đó được tạo ra với sự trợ giúp của các mô hình 3D. Hãy nhớ rằng thủ thuật subpixeling
này chỉ hoạt động đối với các bản vẽ có khoảng cách gần nhau!

Bạn có thể thấy toàn bộ cơ Tuy nhiên, khi chúng tôi phóng to ngực, các đường kẻ, hình
thể chuyển động lên xuống. dạng và bóng đổ dường như đang di chuyển sang trái và phải.

Một cái tên giúp giải thích chuyển động vuông góc có thể là vẫy qua lại; như một làn
sóng truyền lên và xuống nhưng cũng đồng thời chuyển tiếp và ngược lại. Các họa sĩ
thường có thuật ngữ riêng cho các kỹ thuật, vì vậy hãy thoải mái đặt cho nó một cái tên
của riêng bạn. Nó cũng có thể được gọi là gợn sóng. Bất cứ điều gì giúp bạn hình dung
kỹ thuật này sẽ thực hiện nó: đu dây, nhỏ giọt, trượt, bạn hãy đặt tên cho nó!
201
Motion (sự chuyển động)
Khử răng cưa sau mỗi chuyển động hoạt ảnh của bạn. Subpixeling hầu như khử răng cưa xung quanh để
tạo ra ảo giác chuyển động.
Cục nhày này có một đường viền chọn lọc, nhưng cũng
có AA ở bên trong. Khi nó bị bật lại, đường viền kéo dản
ra khi nó đi lên dẫn đến các hàng mới xuất hiện..

Thông thường, bạn có thể thay đổi toàn bộ pixel đối với các sprite được cel-shaded mà không có AA. Khi bạn giới
thiệu các màu mới, bạn sẽ cần subpixel một số dốc màu. Bạn sẽ thường xuyên gặp phải khử răng cưa trên các cạnh
của hình dạng.
Con voi này chuyển động toàn bộ ; có rất nhiều điều
đang diễn ra! Để làm cho việc nghiên cứu dễ dàng hơn,
chúng ta sẽ chỉ xem xét kỹ tai của con voi. Có rất nhiều
màu và rất nhiều khung, vì vậy chúng tôi sẽ đơn giản hóa
nó với ít AA hơn để làm cho nó dễ đọc hơn.

Metal Slug 3 (Neo Geo)

Bạn nên sử dụng càng ít sắc độ càng tốt

khi khử răng cưa để lấy subpixeling. Con
số lý tưởng sẽ là 1 hoặc 2 sắc thái cho
AA. Nó cung cấp cho bạn các sắc thái
vừa đủ để tạo ra những hình ảnh đẹp
mắt cho các hoạt ảnh của bạn.
Đầy đủ màu sắc - 5 khung hình hoạt ảnh trong đó vành tai di chuyển sang trái. Không cần tạo các sắc thái mới trong
bảng màu của bạn, chỉ cần sử dụng
lại các màu hiện có để tạo
subpixeling! Ngay cả khi không có các
sắc thái ở giữa, bạn vẫn có thể thay
đổi toàn bộ pixel , hoàn chỉnh với
những gì bạn đã có. Bất kỳ màu bổ
sung nào cũng giúp cho quá trình di
Giảm màu - các mũi tên hiển thị hướng của các subpixel. chuyển mượt mà hơn.
202
 Subpixeling không chỉ là di chuyển mọi thứ qua lại. Đối với những ví dụ này, hãy tìm kiếm Người lính
A, B và C trong thư mục hoạt ảnh đi kèm với chương này .Hãy phân tích.
Người lính A Người lính B Người lính C

🗴 ≈ �
Bạn không thể chỉ di chuyển pixel lên và Nó đã trông đẹp hơn! ở đây pixel Sự dịch chuyển pixel được bù đắp và
xuống qua ba khung hình để làm cho được dịch chuyển nhiều hơn qua các bộ phận cơ thể duy chuyển theo
một nhân vật thở được. Kết quả này bốn khung hình và được canh một vòng cung. Hoạt ảnh này cũng
trông có vẻ cứng nhắc. Những thay đổi thời gian tốt. Tuy nhiên, nó vẫn mượt hơn với các khung hình cực kỳ
pixel đơn giản như thế này chỉ hoạt động trông giả tạo nếu nhân vật chỉ di quan trọng. Nó được làm chậm ở
đối với những khung hình ở giửa.
chuyển lên và xuống.. các khung hình chính.

Không phải tất cả các pixel đều phải di chuyển để có chuyển động
đáng tin cậy.
Chỉ với đủ subpixels, bạn không cần phải tạo hoạt ảnh cho mọi phần của mọi
khung hình. Bạn có thể bỏ đi với một số bộ phận cơ thể không cử động được.
Một số pixel có thể thay đổi, một số pixel khác có thể bị đóng băng hoặc bị trễ.
Điều quan trọng nhất là chuyển động.
Alien Infestation (NDS)

Tương tự như vậy, không phải mọi bộ phận cơ thể đều cần phải được dịch
chuyển pixel.
Đơn giản chỉ cần subpixel các khu vực được hưởng lợi từ nó. Bạn không cần phải thêm nó
vào toàn bộ sprite. Con cua Smasher này có subpixeling trên chân và bụng của nó.
Tuy nhiên, vỏ của nó di chuyển bình thường giống như bạn làm hoạt ảnh các bản vẽ thông
thường. Nó được sao chép cho mọi khung hình và chỉ đơn giản là trượt đi.
Metal Slug 6 (Arcade, PS2)

Cuối cùng, bạn có bao nhiêu subpixel tùy thuộc vào bạn.

Nhân vật của bạn thậm chí có thể có bóng không di chuyển.
Đối với những chuyển động tinh tế nhất, bạn có thể để các pixel bơi bên
trong sprite và đường viền sẽ không di chuyển một pixel nào.
Iconoclasts (PS4, PC, Switch) Mọi thứ diễn ra ở bên trong đường viền.

Một số thuật ngữ hoạt ảnh đã bắt đầu xuất hiện trong chương này.
Để thực sự hiểu về subpixeling, bạn sẽ cần hiểu những điều cơ bản về Animation (Hoạt ảnh,
hoạt hình , chuyển động). 203
 Nghiên cứu điển hình: Capcom
Không phải tất cả các hoạt ảnh mượt mà đều cần có subpixel. Nhiều hình
ảnh động từ thời kỳ hoàng kim của Capcom không có nhiều subpixel vì kích
thước lớn của chúng. Hầu hết các chuyển động được tạo ra dễ dàng bằng
chuyển động các in-betweens( khung hình ở giửa) đơn giản và chuyển động
pixel đầy đủ. Tuy nhiên, thường có những chuyển động tinh tế với AA được
đặt cẩn thận, và ĐÓ là nơi bạn sẽ tìm thấy các subpixel.
Darkstalkers 3 (PS1/Arcade)

Bất cứ khi nào những đồ họa này có subpixeling, chúng đã đi trước thời đại một
chút. Người ta thường biết rằng hình ảnh động của Capcom đầu tiên được viết thô
trên giấy. Mặc dù các đường nét thô đã được số hóa, nhưng không chắc những
subpixel này là một sự trùng hợp ngẫu nhiên. Đây chỉ là suy đoán, nhưng bằng cách
nghiên cứu cách số hóa nghệ thuật đường nét trong lưới pixel, các họa sĩ Capcom có
thể đã nắm bắt được các chuyển động subpixel. Những tác động này hoàn toàn có
chủ đích. Tại SNK Corporation, họ thậm chí còn gọi đây là kỹ thuật “0,5 pixel”.
JoJo’s Bizarre Adventure: Heritage for the Future (PS1/Arcade).

Để ý xem ngực anh ấy di chuyển lên như thế nào. Góc của các đường / hình dạng nằm ngang có nghĩa là các subpixel phát
triển theo chiều ngang, mặc dù ngực đang di chuyển lên trên.

Bạn có thể thấy các kỹ thuật subpixel khác nhau trong cùng một sprite.
Không phải tất cả các chuyển động đều giống nhau.

1. Ngực (thở): di chuyển pixel + các hàng bật ra

2. Chuyển động phụ (Gió): AA vẫy qua lại

JoJo’s Bizarre Adventure: Heritage for the Future (Ps1/Arcade).

204
 Readability (khả năng đọc)
Người xem thường tập trung vào khuôn mặt hoặc đôi mắt của nhân vật ngay từ cái nhìn
đầu tiên. Tốt nhất bạn nên tránh làm mờ các đặc điểm trên khuôn mặt. Nếu hình dạng
mắt biến đổi quá nhiều, nó sẽ lòi ra ngoài một cách không mong muốn. Nếu bạn làm
subpixel nó, nó phải cực kỳ tinh tế.
Owlboy (PC/PS4/Switch)
Khi nhân vật của bạn chỉ di chuyển 1 pixel, bạn vẫn có thể thay đổi pixel trên
khuôn mặt, nhưng inbetweens (khung hình ở giửa) sẽ trông rất mờ - ngay cả ở tốc độ khung hình nhanh.

Metal Slug 1/2/X (Various)

Bạn có thể thay đổi các giá trị pixel trên các giá trị in-betweens( khung hình ở giửa)
xuất hiện trên màn hình khá nhanh chóng. Nó ổn nếu những in-betweens (khung hình ở
giửa) này trông sôi nổi. Sau cùng, chúng xuất hiện trên màn hình chỉ trong tích tắc. Điều bạn
KHÔNG muốn xảy ra là các khung hình này xuất hiện trên màn hình lâu hơn. Điều này có
nghĩa là không phải lúc nào việc tạo dáng cho chuyển động trong subpixel cũng đảm bảo hoạt The Legend of Zelda:The
động. Chuyển động thẳng về phía trước thường dễ dàng hơn. Điều này hoàn toàn phụ Minish cap (GBA)
thuộc vào độ tự tin của người họa sĩ. Bất kể kỹ thuật nào được sử dụng,
bạn sẽ tạo subpixeling bằng cách nhân đôi các khung hình. Một giải pháp tốt là có các key inbetweens(khung hình ở giữa quan trọng), tức là
gần hơn và tương tự như key frame(khung hình chính). Tất cả những điều này sẽ được trình bày chi tiết trong chương tiếp theo: Animation..

Một cách dễ dàng để giữ mọi thứ nhất quán là:

có nhiều khung hình trong đó khuôn mặt thay đổi giữa 2 vị trí, nhưng đầu,
cơ thể và mọi thứ xung quanh nó sẽ dịch chuyển pixel.
Scott Pilgrim vs. the World: Iconoclasts
The Game (PS3,XBLA) (PC,PS4,Switch)

Ngực và vai thay đổi 0,5 pixel,

nhưng đầu thì không.
Megaman X4 (Sega Saturn, PS1)

Nếu chúng ta lấy subpixel khuôn

mặt, nó sẽ không dễ đọc lắm.
205
Advanced pixel shifts (duy chuyển pixel nâng cao)
Subpixeling with arcs (subpixeling duy chuyển vòng cung)

Đây là khung hình số 7 và số 8 của hình ảnh động Aladdin ném

quả táo này. Khung 7 chuyển tiếp thành khung 8 với subpixel.
Đây là một ví dụ rõ ràng về sự chuyển động theo đường chéo
của các subpixel. Hướng là 45 ° nhưng đó là sự kết hợp của các
pixel được chuyển theo chiều dọc và chiều ngang.
Aladdin (Megadrive)

Bạn có thể chuyển các pixel theo đường

chéo, nhưng đừng suy nghĩ quá nhiều về nó.
Nó không cần phải chính xác về mặt toán học.

Chỉ cần di chuyển AA về hướng chính.

Điều quan trọng là sự duy chuyển mang
theo nhiều màu sắc hơn.

Wargroove (Switch, PC, PS4,XBO)

Những gì bạn muốn ghi nhớ là cảm giác chung về hướng và các vòng cung. Từ khóa ở đây là CHUNG. Bạn có thể có
chuyển động bị trì hoãn hoặc thay đổi vòng cung. Hoạt ảnh trên lặp lại và chứa 6 khung hình. Subpixeling ở đây tuân
theo một chuyển động tròn. Tất cả điều này xảy ra bên trong một khu vực nhỏ hơn 3x2 pixel.

206 Sonic Mania (Switch, PC, PS4)

 Intense pixel shifts (Duy chuyển pixel nhanh)

Bạn có thể hiểu rõ hơn về cách lấy subpixeling khó hơn bằng cách nghiên cứu các mô hình
được kết xuất 3D. Rất nhiều vị trí pixel được tạo tự động, vì vậy không có vị trí nào trong
số này được đặt bằng tay. Vì vậy, việc gỡ rối tất cả là tùy thuộc vào họa sĩ (và chúng ta).
Donkey Kong Country (SNES)

Bản gốc 3D

Làm đơn giản

Điều quan trọng là phải thiết lập các điểm extreme : đó là những khung hình chính nơi chuyển
động bắt đầu và kết thúc. Các khung hình in-betweens( khung hình ở giữa) là những khung hình
mà bạn sẽ phải loay hoay với việc lấy subpixeling..

extreme inbetweens extreme

Một số Idle animation 2D (chuyển động nhàn rỗi 2D) có thể trông cực kỳ phức tạp hoặc thậm chí
không thể làm subpixelled bằng tay. Chúng vẫn đáng để nghiên cứu. Xác định các khung
extreme trước;
tìm hướng mà in-betweens (khung hình ở giửa) dịch chuyển sau.

Một số hiệu ứng đẩy việc pixel dịch chuyển đến giới hạn của nó. Nó gần như trở
nên ổn đến nỗi một số người có thể khó tin rằng nó được làm thủ công.

by guest artist Cocefi

207
 More uses of subpixeling( nhiều cách để sử dụng subpixeling)

Đôi khi, các hình ảnh động có những hình bóng di chuyển CỨNG
NHẮC. Nếu chúng di chuyển, chúng sẽ chỉ di chuyển nhẹ. Tất cả các
chuyển động diễn ra trong sprite. Điều này có nghĩa là bạn không thể
sử dụng công cụ onion skin tool trong các chương trình hoạt hình.
Metroid Zero Mission (GBA)

Hiệu ứng này chỉ đơn giản là chuyển màu pixel. Nó thực sự chỉ là subpixeling thông thường.

Sử dụng subpixeling tinh tế khá hữu ích cho các hiệu ứng rung như:
Layđộng Cười rung người
Hiệu ứng gió Bị choáng váng
Đèn nhấp nháy Rùng mình vì lạnh
Chao đảo & lắc lư Chuyển động sửng sốt
Mighty Switch Force 2 (WiiU/3DS)

Không phải lúc nào bạn cũng có thể sử dụng AA khi làm việc với ít màu sắc. Thay vào đó, có để toàn bộ pixel
bơi bên trong sprite. Nguyên tắc cũng giống như dịch chuyển subpixel, nhưng thay vào đó là toàn bộ pixel.

Super Metroid (Super Nintendo)

Đôi khi, các pixel hoàn chỉnh di chuyển khắp sprite như thể chúng
đang bơi. Bạn vẫn có thể thay đổi màu sắc và pixel bằng AA nhưng
hãy nhớ sử dụng các màu bạn đã có trong sprite.
Đừng tạo những cái mới trừ khi thực sự cần thiết.

Ash from Iconoclasts (Switch, PC, PS4)

Hãy tìm “Ash” trong thư mục hoạt hình đi kèm với chương này.
Bạn sẽ tìm thấy bản phân tích hoàn chỉnh của mọi khung hình và tất cả các subpiceling.
208
 Nghiên cứu điển hình: Owlboy

Owlboy - released in 2016 – với nghệ thuật và hoạt hình của Simon Andersen, một nhà phát triển tại D-pad Studio.
Owlboy là một kỳ quan về hình ảnh và có nhiều ví dụ về subpixeling.
Hãy phân tích một số hình ảnh động dễ dàng (nhưng phức tạp) này.

Chuyển động nhàn rỗi của Otus có 2 khung hình chính.

A là điểm thấp nhất của trạng thái nhàn rỗi. B là điểm cao nhất. Đây là các extremes. Ngoài
việc cao hơn 1 pixel, khung hình B gần như giống với khung hình A.
Nếu hoạt ảnh này chỉ dài 2 khung hình, nó sẽ khá bấp bênh. Subpixeling được sử
dụng để làm cho quá trình chuyển đổi này mượt mà hơn.

A inbetween B inbetween A
Tôi đã gộp các in- betweens (khung
hình ở giữa) theo thứ tự . Vì nhân vật
chỉ di chuyển lên 1 pixel, nên khó
hơn để phù hợp với một in-
between . Đó là lý do tại sao
subpixeling được sử dụng. Để ý xem
mũi thay đổi hình dạng như thế nào.

Hình ảnh động đầy đủ thậm chí còn có nhiều in-betweens hơn. Đây không phải là "chen vào giữa" các in-betweens(khung hình ở giữa).
Những cái này favour (hổ trợ) cho các keyframes A & B (Khung hình chính A&B). Chúng gần hơn và giống hệt với các keyframes
(khung hình chính) này.
Điều này được gọi là easing (nới lỏng) trong hoạt hình truyền thống. Chúng tôi sẽ trình bày kỹ thuật này chi tiết hơn
trong Chương 9.

209
 Dưới đây là chi tiết đầy đủ về cách nhân vật được tạo hoạt ảnh.

Subpixeling chỉ hiển thị ở những khu vực nhỏ nhất.

Hình ảnh của Mandolyne này được làm hoạt ảnh theo cách thông thường nhưng vẫn có các Subpixel.
Chú ý cách nút váy của cô ấy để lại một vệt khi nó di chuyển qua lại.

The collar has

split pixels too!

Khi khuôn mặt của cô ấy nghiêng, các pixel được dịch chuyển cẩn thận và khử răng cưa bắt đầu xuất hiện.
Không biết liệu họa sĩ có sử dụng lối tắt xoay vòng hay không,
nhưng nó có thể là một thủ thuật hữu ích mà bản thân bạn có thể sử dụng. Hãy nhìn lại chương về Dọn dẹp.

210
Một vài mẹo khác
Outlines can grow extra pixels (Đường viền có thể tăng thêm pixel)

Đôi khi bạn có thể thêm pixel hoặc xóa pixel trên các
góc tròn để làm cho hoạt ảnh chuyển động nhiều hơn.
Nó giúp bạn thêm động lực vào các sprite của bạn.
hãy sử dụng điều này với sự điều độ!
Quick but cheap subpixels (Các subpixel nhanh nhưng rẻ) Fire Emblem: Blazing Blade (GBA)

Một cách nhanh chóng nhưng không đáng tin cậy để tạo ra các subpixel :
1. Giảm và khóa màu sắc của sprite
2. Thay đổi kích thước 200%, không bị mờ (nearest neighbour)
3. Chọn tất cả, di chuyển sprite (ngang hoặc dọc ) 1 pixel
4. Thay đổi kích thước 50%, vì vậy nó quay trở lại kích thước 1x, nhưng lần này với tính năng làm mờ được bật.
Starting frame What a blurry mess clean-up

Wargroove (Switch, PC, PS4,XBO)

Hãy nhớ rằng: Pixel art là việc bạn có toàn quyền kiểm soát tác phẩm của mình. Phương pháp này khá rẻ
tiền và sẽ không hoạt động trừ khi bạn chỉnh sửa thủ công. Nó tốt cho những người mới bắt đầu muốn hiểu
rõ hơn về dịch chuyển pixel. Đây là một tài liệu tham khảo tốt, tuy nhiên nó không đảm bảo các inbetween
cho hoạt ảnh.

Subpixeling ≠ Moving shading (Subpixeling ≠ bóng đổ động)

Rất dễ nhầm Subpixeling với “đổ bóng động” nhưng điều đó không chính xác. Nếu
bạn nghĩ rằng bóng mờ chỉ đơn giản là di chuyển xung quanh, nó sẽ chỉ khiến bạn
thêm bối rối. Đó là về chuyển động, không phải bóng râm và ánh sáng.

Metal Slug Attack (Mobile)

DO NOT overdo subpixeling (KHÔNG NÊN lạm dụng tính năng subpixeling)
Bạn sẽ cần thực sự chắc chắn để thực hiện những chuyển động tinh tế nhất. Nếu bạn làm quá tay, mọi thứ sẽ giống như
đang tan chảy hoặc giống như thạch. Hơn nữa, subpixeling rất tốn thời gian. Đừng làm điều đó nếu bạn không cần.
211
Kết luận

By Michafrar

Nhân đôi khung và dịch chuyển pixel xung quanh. Tóm lại, đó là subpixeling. Đây là kỹ thuật duy nhất dành cho các
inbetweens quy mô nhỏ. Có thể tạo subpixeling chỉ bằng cách sao chép và dịch chuyển một sprite duy nhất.

“ Đó là một kỹ thuật mà trong đó bằng cách thay đổi một chút màu sắc của
các điểm ảnh xung quanh, đối với mắt người, nó trông giống như các điểm
ảnh di chuyển khoảng 0,5 pixel.
Kazuhiro Tanaka
Designer for Metal Slug at SNK1
Subpixeling là kỹ thuật ít được ghi chép nhất trong nghệ thuật pixel.
Biết được thực tế này, hãy tận dụng mọi cơ hội để tải xuống các sprite bạn tìm thấy và nghiên cứu chúng kỹ hơn.
Đó là cách tốt nhất để học kỹ thuật này.

Food for thought Still images Animation

Introduction Line Weight Split Direction
When & How pixels Tricking the Motion
Shifting pixels eye Selective Readability
outline Advanced pixel shiftsA
few more tips

Nếu bạn chỉ là người vẽ tranh minh họa, phần Pixel Logic về độ dày nét vẽ sẽ hữu ích nhất cho bạn . Nếu bạn là một người làm phim
hoạt hình, bạn có thể nhận thấy một số thuật ngữ và kỹ thuật đã được đề cập ngắn gọn. Vui lòng đọc chương này một lần nữa sau khi
bạn đã hoàn thành cuốn sách hoặc bắt đầu học hoạt ảnh. Mọi thứ sẽ bắt đầu có ý nghĩa hơn khi bạn đã biết cách tạo hoạt ảnh.

212
1
Tanaka elaborating on the “0.5 pixel technique” used at SNK. from Weekly Famitsu August 9, 2018, n°1547, translated by Alistair Wong at siliconera.com
Chapter 9: Animation (Hoạt ảnh, hoạt hình)
 Giới thiệu

Trở thành một 2D Animator cũng giống như sử dụng song ngữ:
Hai ngôn ngữ bạn cần biết là vẽ và hoạt ảnh.
Thêm nghệ thuật pixel vào hỗn hợp và bây giờ bạn đã có ba. Bây giờ bạn nói được ba thứ tiếng.

.
Hoạt hình đã là một hình thức nghệ thuật được ghi chép lại nhiều.
Hoạt hình hiện đại lâu đời hơn nhiều so với nghệ thuật pixel, ít nhất là cả thế kỷ. 12 nguyên tắc của hoạt hình mà chúng ta
biết ngày nay có từ những năm 1930. Trong chương này chúng ta sẽ tập trung đặc biệt vào trò chơi hoạt hình.

Tuy nhiên, đừng lo lắng. Chúng tôi sẽ cung cấp cho bạn một khóa học về hoạt ảnh
cơ bản.

Cũng như nhiều người khác, lời khuyên đầu tiên của tôi là mua cuốn sách sau:

by
The Animator’s Survival Kit Richard Williams
Lý do đây là một trong những cuốn sách hay nhất là vì R. Williams phá vỡ
những điều cơ bản về chuyển động và diễn xuất. Tôi thực sự giới thiệu
phiên bản iPad của cuốn sách vì nó có các phần hoạt ảnh.

Hai trong số những nhà làm phim hoạt hình đã truyền cảm hứng cho Williams là
Ollie Johnston & Frank Thomas. Hai nhà làm phim hoạt hình kinh điển này đã viết
“Disney Animation: The Illusion of Life”. Họ là hai trong số Chín Bô lão đã thiết lập 12
nguyên tắc của hoạt hình mà chúng ta biết ngày nay, từ những năm 1930 trở lại đây.

Hai cuốn sách này dạy mọi thứ về kỹ thuật vẽ tay truyền thống, nhưng các nguyên tắc mà nó bao gồm áp dụng cho
mọi hình thức. Nếu bạn muốn cải thiện hoạt ảnh, hãy xem xét mở rộng tầm nhìn của bạn. Đừng chỉ chăm chăm
vào nghệ thuật pixel. Vẽ, sơn và tạo hình ảnh động theo những cách khác!
214
 Học như thế nào?
Nếu bạn từng cảm thấy lạc lõng, hãy nhớ rằng hoạt hình là nghiên cứu về chuyển động. Đây
không phải là định nghĩa sách giáo khoa về hoạt hình nhưng nó sẽ nhắc nhở bạn nên tập
trung vào điều gì trong trường hợp bạn gặp khó khăn. Điều này có nghĩa là nghiên cứu chuyển
động của sinh vật, vật thể và lực lượng. Nghiên cứu này sẽ bao gồm cả chuyển động thực tế
và phóng đại. Một nhà làm phim hoạt hình thường xuyên nghiên cứu về cuộc sống thực,
nhưng cũng có xu hướng tìm cảm hứng từ các phương tiện hoạt hình trước đây.

.
Hoạt ảnh tốt dựa vào các khung hình chính có thể đọc được.
Bản vẽ vững chắc là rất quan trọng.

Nếu các key frames ( khung hình chính) của bạn quá giống nhau, khán
Fire Emblem: The Sacred Stones (GBA)
giả sẽ khó nhìn thấy điều gì đang xảy ra. Thêm in-betweens (các khung
hình ở giữa) không phải là cách sửa chữa hoạt ảnh. Cho dù chuyển
động trơn tru đến đâu, chuyển động vẫn trông không thuyết phục. Sử
dụng hiệu quả các key frames (khung hình chính) sẽ cho phép tạo ra
hình ảnh động hấp dẫn hơn. Tong chương READABILITY và CLEAN-UP, chúng ta đã thấy
Pixel art đã cung cấp cho bạn ít hoặc không có không gian hình bóng có tác động tới trực quan mạnh mẽ như thế
nào. Với hoạt hình, nguyên tắc này càng quan trọng hơn.
cho các các in-betweens (các khung hình ở giữa), vì vậy bạn
cần phải đi đúng nước cờ của mình.
Điều quan trọng là hoạt ảnh sprite của bạn phải trông đẹp mắt, nhưng điều quan trọng hơn là bạn phải tạo cảm giác dễ chịu.

Hãy phân tích. Bạn sẽ hiếm khi tìm thấy hướng dẫn từng bước chính xác cho thứ
bạn cần. Nghe có vẻ khá đáng tiếc, nhưng không phải vậy. Ngôn ngữ cơ thể, diễn
xuất, biểu cảm, phong cách; đây là tất cả những điều tuyệt vời để học tập!

Khi bạn tìm thấy một sự tương quan, có thể là cuộc sống thực, một bộ
phim, trò chơi hoặc hoạt hình:
1.Duyệt từng khung hình một.
2.Tìm extremes. Đây là những key frames ( khung hình chính) nơi mà bản vẽ ở vị trí cao nhất của chúng, thường là ngay trước khi
thay đổi hướng.
3.Sử dụng các extremes làm hướng dẫn. Tự vẽ các bản vẽ chi tiết và phân tích, thay vì sao chép từng khung hình một.
4.Tạo kiểu cho nó (trừ khi các tư thế đã được nhấn mạnh quá mức).
Bằng cách này, bạn giải mã cách thức hoạt động của chuyển động; sẽ giúp bạn vào lần tiếp theo khi bạn tạo hoạt ảnh cho một thứ gì đó.

215
 Timelines in softwares (Các mốc thời gian trong quần mềm)
Thời gian là tốc độ của các hành động xảy ra trên màn hình. Trong hoạt ảnh, điều này đề cập đến số lượng bản vẽ
hoặc khung được sử dụng để hiển thị một hành động. Tuy nhiên, các mốc thời gian phức tạp hơn một chút với các
tốc độ khung hình khác nhau.
Hoạt ảnh One’s = mọi khung hình là duy nhất, 1 khung hình là 1 bản vẽ
Hoạt ảnh Two’s = khung hình được nhân đôi, 2 khung hình là 1 bản vẽ
Hoạt ảnh Three’s= tăng gấp ba lần, 3 khung hình là 1 bản vẽ
… bạn có thể có bốn, năm. Danh sách cứ kéo dài.
Tùy thuộc vào phần mềm hoặc chủ đề được sử dụng, chúng sẽ trông khác nhau, nhưng bạn sẽ luôn nhận ra chúng.

Adobe Flash/Animate Aseprite

Aseprite (custom skin) TV Paint Clip Studio Paint

.
Tuy nhiên, hoạt hình 2D không bao giờ là bất biến này. Các khung hiển thị trên màn hình trong các khoảng thời
gian khác nhau.
Hoạt ảnh kết hợp một, hai và nhiều khung hình hơn.

Một số mốc thời gian tập trung vào các khung hình đơn. Họ không nhóm cùng một hình ảnh thành 1 khung mở rộng.

Sprite by Danieru SMB3 (NES)

Aseprite GraphicsGale Adobe Photoshop

Pro Motion

Với những mốc thời gian này, bạn sẽ phải thiết lập độ dài của chúng theo cách thủ công để biến chúng thành hai hoặc
ba. Bạn không mở rộng độ dài của chúng bằng cách nhóm các khung trên dòng thời gian, mà bằng cách đặt độ dài của
chúng riêng lẻ.

216
How fast drawings appear (Bản vẽ xuất hiện nhanh như thế nào)

 Dưới đây là một số tài liệu tham khảo để giúp cả người làm phim hoạt hình truyền thống và nhà
phát triển trò chơi. Ví dụ: nếu bạn có "two’s" ở 24 khung hình / giây, họ sẽ cảm thấy giống như
12 bản vẽ một giây
Video hoạt hình tiêu chuẩn Trò chơi hoạt hình tiêu chuẩn
24 FPS 60 FPS 30 FPS
One's 24 drawings per second 60 drawings per second 30 drawings per second
Two's 12drawings per second 30 drawings per second 15 drawings per second
Three's 8drawings per second 20 drawings per second 10 drawings per second
6drawings per second 15 drawings per second

The length of each frame (Độ dài của mỗi khung hình)
Cách các phần mềm khác nhau biểu thị thời gian có thể khác nhau. Để giúp bạn, đây là những con số bạn
cần biết "một" và "hai" là bao nhiêu thời gian nếu bạn đã quen với "24FPS" hoặc chơi trò "60FPS"..

Video hoạt hình tiêu chuẩn Trò chơi hoạt hình tiêu chuẩn
Terms used at 24 FPS drawings
per second at 60 FPS Length in game
/ 60 0.02 sec 1 frame
/ 30 0.03 sec 2 frames
on One's 0.04 sec 24 / 2 frames
/ 20 0.05 sec 3 frames
15 0.06 sec 4 frames
/
0.08 sec
on Two's 0.08 sec 12 5 frames
0.1 sec
/ 10 6 frames
/ 7 8 frames
to
on Three's 0.12 sec 8
6
0.17 sec
10 frames
on Four's 0.17 sec

Hãy nhớ: Những con số này được làm tròn lên hoặc xuống để dễ nhớ hơn.
0.01 giây = 1/ 100th giây = 1 centi giây. 1 Mili giây = 1/ th
1000 giây.
Nếu phần mềm của bạn yêu cầu mili giây hoặc centi giây, hãy sử dụng các số ở đây bên dưới.
0.02 seconds 0.03 seconds 0.04 seconds 0.05 seconds 0.06 seconds 0.08 seconds 0.1 seconds 0.12 seconds 0.17 seconds
16 milliseconds 33 milliseconds 42 milliseconds 50 milliseconds 50 milliseconds 83 milliseconds 100 milliseconds 125 milliseconds 167 milliseconds

Aseprite GraphicsGale Pro Motion

217
 Key techniques (Các kỹ thuật chính)
Squash and Stretch (nén lại và giản ra)

Darkstalkers (PS1 Arcade)

Đây là kỹ thuật trực quan nhất. Những người mới bắt đầu biết rõ điều đó trước khi họ bắt đầu tạo hoạt ảnh. Nó làm cho hình
ảnh động trở nên sống động hơn và cho thấy trọng lượng và chuyển động của các sinh vật và đồ vật khác nhau. Trên thực tế,
bóng nảy là một trong những bài học đầu tiên mà các hoạt ảnh viên học để nắm được các kỹ thuật nén và kéo căng. Số lượng
bạn nén và kéo giãn phụ thuộc vào mức độ mạnh mẽ hoặc tinh tế của chuyển động. Một yếu tố khác là độ nặng và độ dày của
đối tượng. Đảm bảo rằng bạn biết khi nào nên sử dụng mô hình và,
khi nào để không mất kiểm soát. Hãy ghi nhớ: bạn cần bảo toàn khối lượng của
vật thể. Nếu bạn bóp một vật gì đó theo chiều cao, bạn cũng cần phải kéo dài
nó theo chiều rộng. Nói tóm lại: bảo tồn khối lượng.
Kirby Mass Attack (NDS)

Anticipation (Đoán trước)

Phantasy Star II (Mega Drive)
Dự đoán là phần “Lấy đà” trong“Chuẩn bị…
lấy đà… Hành động!”
Đó là thời điểm bạn chuẩn bị một hành động, bất
kể tinh vi hay mạnh mẽ đến mức nào. Bạn nói
những gì bạn sẽ làm, và sau đó làm điều đó.
Dự đoán là rất quan trọng đối với hoạt ảnh hạn
chế. Đôi khi một khung là đủ. Những gì bạn thể
hiện cho khán giả của mình là sự tích tụ năng
lượng.
“Bạn không nhìn thấy, nhưng bạn cảm nhận được nó

Ace Atorney: Phoenix Wright (NDS)

Chuyển động thường đi theo hướng TRÁI NGƯỢC với hành động chính đang diễn ra.
Giữ dự đoán cho các trò chơi điện tử nói chung là ngắn hoặc không tồn tại. Nếu
bạn muốn hoạt ảnh phát ngay khi bạn nhấn một nút. Nếu hoạt ảnh chỉ đơn thuần
là để tô điểm hoặc cần một kích thích , hãy nhớ thêm một số dự đoán thú vị.
218
Castlevania Symphony of the Night (PS1)
 Breakdown

?
Đây còn được gọi là vị trí vượt qua. Khung chính mới làm cho hoạt ảnh thay đổi hướng đi của nó. Hãy nghĩ về nó
giống như một tuyến đường thay thế hoặc thêm một khung hình chính đặt ở giữa. Để đi từ A đến B, bạn có thể
thêm sự thú vị! Lấy cảnh này từ bộ phim live action His Girl Friday năm 1940. Diễn viên Cary Grant đang chỉ tay.
Bạn tưởng tượng anh ta đi từ A đến B như thế nào? Cách nhanh nhất là nâng cánh tay của anh ấy lên.

Thay vào đó, diễn viên đổi hướng và tạo một vòng cung bằng cánh tay của mình.
Động tác này làm cho việc chỉ tay của anh ấy trở nên nghiêm khắc, hách dịch hơn.
Đây chỉ là một trong nhiều khả năng. Bạn có thể có TẤT CẢ các loại breakdown.

Alucard’s turning animation – Castlevania Symphony of the Night (PS1)

Rescued Prisoner of War – Metal Slug (Arcade, NeoGeo)

Breakdowns cho phép các nhà làm phim hoạt hình thêm nhiều đặc điểm đa dạng và độc đáo vào
hoạt ảnh của họ. Thay vì đi từ A đến B, chúng tôi đi từ A X B. Trong quyển sách The Animator’s
Survival Kit, chương thứ tám của cuốn sách nói về sự linh hoạt. Williams đã viết chi tiết về Breakdown!

Để có thêm nhiều tài liệu tuyệt vời về chủ đề này, tôi thực sự khuyên bạn nên
Xem các hội thảo và video về Gumroad của Toniko Pantoja.

Gumroad Workshop: Preview video:

gumroad.com/stringbing youtu.be/wdPbiy-8BRo

219
 Ease in and out (làm diệu sự bắt đầu và kết thúc của một hình động)

Việc Ease in and out giống hệt như với hoạt ảnh 2D thông
thường. Không có sự khác biệt lớn lúc đầu. Ease có nghĩa là các
in-betweens (khung hình ở giửa) sẻ hổ trợ key farme( khung
hình chính).

Nói một cách ngắn gọn: đó là gia tốc. Tăng tốc độ và giảm tốc độ.

Street Fighter III (Arcade, DC)

Bạn có thể thấy rằng khi tất cả các khung hình được xem cùng một lúc, các in-betweens( khung hình ở giửa) gần nhau hơn là những
khung hình Ease in and out. Thực hiện chậm và kết thúc của hành động là yếu tố quan trọng để có các chuyển động tự nhiên đẹp mắt.

Easing and subpixeling

Khi bạn quyết định tự do biến đổi và di chuyển các bộ phận xung quanh, 1 px là khoảng cách tối thiểu. Khía cạnh độc đáo duy nhất
của nghệ thuật pixel là nếu bạn muốn đặt in-betweens RẤT gần với key frame (khung hình chính), thì subpixeling sẽ được sử dụng.
.

Iconoclasts (PS4,PC, Switch)

Tốc độ chậm của các subpixel giúp các key frames (khung hình chính) gần nhau.
Trên thực tế, bạn có thể sao chép, dán khung hình gần nhất và sửa đổi nó!
Subpixeling được sử dụng cho các khung hình cụ thể này.

Timing chart: và

220
 Nếu khó đọc biểu đồ thời gian hoạt ảnh trước đó, hãy xem xét những điều
sau: Trong cả hai trường hợp, khung 2 hổ trợ cho 1 và khung 4 hổ trợ cho 5.
Chúng gần giống nhau hơn so với khung 3. Khi khoảng cách giữa cả hai bản vẽ
là siêu gần , đó là lúc bạn cần subpixel.

Khung A * là một bản sao của A nhưng được chỉnh sửa với subpixeling. Phần inbetween này giúp dễ dàng nhập hoặc xuất nhân vật
vào key frames (khung hình chính). Tương tự như vậy, B * là một bản sao của B nhưng pixel cũng bị dịch chuyển một chút.

Metal Slug Attack (Mobile)

Subpixeling sẽ chỉ được sử dụng cho những cảnh quay chậm và những chuyển động tinh tế nhất.
Thay vì phải chen chúc với các subpixel ở khắp mọi nơi, Hãy làm việc với strong key frames (khung
hình chính vững chắc) TRƯỚC.

Moving holds
Red Earth (Arcade)

Đây là những chuyển động khi hành động bị dừng lại, nhưng nhân vật từ từ tiếp tục di chuyển khi họ giữ tư thế.
Moving holds là cực kỳ hiếm trong nghệ thuật pixel, bởi vì nó sẽ làm tăng số lượng khung hình duy nhất theo cấp số
nhân! Nhiều khung hình hơn có nghĩa là bộ nhớ lưu trữ nhiều hơn, vì vậy bạn sẽ hiếm khi thấy chúng trong các trò
chơi điện tử cũ hơn. Hãy coi kỹ thuật này là một cách để tối đa ease.

Trong phần phụ lục, bạn có thể tìm thấy hai phiên bản của hoạt ảnh moving hold này.

Hold thường xuyên là khi các nhân vật "giữ một tư thế". Đây không phải là một hình
ảnh động nhàn rỗi mà chỉ đơn giản là nhân vật sắp dừng lại. Không có gì di chuyển, vì
vậy nhiệm vụ của bạn là nhấn mạnh các bộ phận nhỏ hơn khác chuyển động trên một
Sonic Advance (GBA) cơ thể để giữ cho nó sống động và chuyển động.
Để biết thêm thông tin về holds, hãy xem phần "Follow-through".
221
 Smears (vệt ảnh)

Smears (vệt) là những in-betweens (khung hình ở giữa) bắt chước hiệu ứng của chuyển động mờ.
Owlboy (PC,PS4,Switch)

Elongated smears (vệt ảnh dài)

Đây là một in-between (khung hình ở giữa) được kéo

dài ra. Chúng được sử dụng để hiển thị mờ chuyển
động trong một khung hình duy nhất. Nó kết nối hai
khung chính với nhau. Những khung hình này không
nên ở trên màn hình quá lâu. Chúng xảy ra nhanh đến
mức bạn không thể luôn luôn biết rằng chúng tồn tại.
Street Fighter III (Arcade, DC) Martial Masters (Arcade only)
Chúng là một trò lừa thị giác.

Fire Emblem Binding Blade (GBA) Owlboy (PC,PS4,Switch) Iconoclasts (PS4,PC, Switch) Street Fighter III (Arcade, DC) Owlboy (PC,PS4,Switch)

Tốt nhất là có các vệt hoạt ảnh trên tốc độ 24 khung hình / giây (hoặc khoảng 0,05 giây).

Multiples ( nhiều vệt ảnh)

Smears (vệt ảnh) với của hình ảnh sau. Chúng là một phiên bản thay thế của
vệt ảnh kéo dài. Đây là khi nhân những vệt ảnh của các đối tượng lên. Công
việc này cũng giống như những vệt ảnh kéo dài. Tùy thuộc vào bạn để cảm
thấy những gì hiệu quả nhất. Marvel vs Capcom 2 (Arcade,
Dreamcast, + )

Boogerman (Mega Drive)

Chúng hoạt động tốt hơn với các chu kỳ lặp lại so với các vệt ảnh kéo dài.

Mario&Luigi Bowsers Inside story (NDS) Dragon Force (Sega Saturn)

Trong chương 5, chúng ta đã thấy những trò chơi có điểm mờ được pha trộn
trong những dịp hiếm hoi. Phương pháp này hiện đã lỗi thời và chỉ hoạt động trên
TV ống CRT. Ngày nay nó không hiệu quả lắm, vì vậy hãy cố gắng tránh chúng.
222 The Mask (Super Nintendo)
 Overshoots (hành động lố) (tui biết ,dịch nghe rất phèn ^^)

Street Fighter Alpha (Arcade, PS1)

Overshoots( hành động lố) là khung hình mà phần hoạt ảnh đi qua điểm đến của nó, chỉ để nhảy trở lại khung hình
chính. Đó là một kiểu giật, giống như một cái lò xo bị kéo căng trở về trạng thái mặc định của nó. Richard Williams
gọi đây là những “hard accents”, nhưng trong ngành công nghiệp hiện đại, chúng tôi gọi đây là “overshoot” (“sự
lố”). Đôi khi một vài in-betweens (khung hình ở giửa) đặt nhân vật trở lại khung hình chính, những lần khác thì quá
trình overshoot (hành động lố) diển ra nhanh và không cần in-betweens (khung hình ở giửa).
.
Bạn có thể thay đổi tác động. Đôi khi, chỉ cần hành động lố 1 pixel là đủ để di chuyển một phần cơ thể đi 1 pixel.
Bạn có thể không nhìn thấy nó, nhưng bạn có thể cảm nhận được.

Marvel vs. Capcom 2 (Arcade, PS2, Dreamcast) Mickey Mania (Mega Drive)

Một số hình động lố có thể kết hợp với vệt ảnh. Vệt Phóng đại hành động lố bằng các sử dụng squash
ảnh này sẽ vươn xa hơn khung hình chính. &stretch (nén lại và giản ra). Toàn bộ cơ thể có thể hành
động lố luôn.

Hãy nhớ rằng hành động lố không chỉ xảy ra trong hai chiều. Phối cảnh
luôn được áp dụng, ngay cả với các đối tượng 2D.
Wild Woody (Sega Saturn)

Hành động lố giúp các chuyển động nhanh chóng và bật lên đẹp mắt hơn.

Pocket Fighter / Super Gem Fighter Mini Mix (Arcade, PS1) 223
 Overlap & Follow-through (Chồng chéo & chuyển động theo đà )
Overlapping action (Hành động chồng chéo)
Một số bộ phận của vật thể hoặc cơ thể dẫn dắt tất cả chuyển động. Khi nó di chuyển, các phân đoạn
khác sẽ theo dõi chúng. Một bộ phận dẫn đầu, những bộ phận khác theo sau.

Overlapping actions (Hành động chồng chéo) là tất cả các phần hoặc đối tượng theo sau với độ trễ. Khi hành động
hoàn tất, các bộ phận sẽ tiếp tục chuyển động. Đây là follow-through (chuyển động theo đà). Những tác động này
áp dụng cho bất cứ thứ gì được kéo bởi một lực bên ngoài. Đây không phải là một chuyển động phụ.
Nhân vật này, Alphonse, có hai phần riêng biệt.
Chúng chồng lên nhau ở các thời điểm khác
nhau. Cánh tay và đầu dẫn dắt chuyển động,
trong khi phần thân theo sau với độ trễ nhẹ.
Chân đơn giản là không cử động gì cả.
Owlboy (PC,PS4,Switch)

Chuyển động chồng chéo có thể đơn giản hơn ví dụ trên. Tốt nhất bạn nên
lên kế hoạch cho hoạt ảnh của mình trước, dù đơn giản hay khó.
Luôn bắt đầu với hành động đẩn dắt của
bạn và rút ra các hành động kéo theo sau.
Metal Slug Attack (Mobile)
.

Martial Masters (Arcade only)

Overlapping pixels (pixel chồng chéo)

Rất dễ mất dấu vết của subpixeling, vì vậy hãy lập kế hoạch cho hoạt ảnh của bạn một cách cẩn thận.
Hơn nữa, chúng ta có thể áp dụng
nguyên tắc hoạt ảnh này cho một
khu vực nhỏ với các pixel chồng lên
nhau. Khi 1 pixel di chuyển, các
pixel khác sẽ mất một hoặc hai
khung để bắt kịp. Chúng bị trì hoãn.
224 Freedom Planet (WiiU, PC, PS4, Switch)
 Subpixels cũng có thể mở rộng hoạt ảnh. Chúng có thể được
sử dụng như các hành động chồng chéo ở dạng pixel.
Mighty Switch Force 2 (WiiU, N3DS)

Việc phải làm trễ pixel sẽ làm tăng số lượng khung hình và tạo ấn tượng về nhiều chuyển động hơn. Giống như subpixeling, nó
cung cấp cho bạn nhiều không gian hơn để tạo hoạt ảnh. Trong thực tế, nó là subpixeling với toàn bộ pixel!
frame 1 frame 2 frame 3 frame 4 frame 5

Hãy gọi chúng là

pixel bị trì hoãn

Ngoài ra, bạn có thể mở rộng các pixel để kết nối chúng lại với nhau. Tuy nhiên, điều này có thể
làm nổi bật không mong muốn. Luôn phát lại hoạt ảnh của bạn để xem nó có phù hợp không.
frame 1 frame 2 frame 3 frame 4 frame 5

Hãy gọi cúng là

pixel co giãn

By Guest Artist Danieru

Metal Slug Attack (Mobile)

Nếu bạn muốn tạo hoạt ảnh cho các hình dạng 45 ° bằng subpixels, tốt nhất bạn không nên có
AA. Sẽ gọn gàng hơn nhiều khi có các pixel chồng lên nhau. Các khung hình tự nó sẽ không
còn hình dạng 45 ° sạch sẻ nữa, nhưng quá trình chuyển đổi sẽ trở nên mượt mà hơn.

Nếu bạn có các hình dạng có đường viền hoặc khử răng cưa, mọi thứ sẽ RẤT lộn xộn ở 45 °.

Pixels trì hoãn (AA) Pixels co giãn (AA)

225
 Follow-through (Chuyển động theo đà)

tóc của Zero chuyển động theo đà sau khi anh ta chém. Nó phản ứng với chuyển động của anh ta bằng cách duy chuyển trở lại (Megaman X4 (Sega Saturn, PS1)

Chuyển động theo đà sẽ làm tăng thêm chuyển động cho các nhân vật và đồ vật của bạn.
Chúng làm cho các chuyển động trở nên thực tế hơn. Nếu bạn làm việc với các khung hình hạn
chế, chúng cũng có thể tạo ra ảo giác rằng có nhiều chuyển động hơn thực tế. Các bộ phận
này tiếp tục chuyển động sau khi hành động hoàn tất, do đó có tên follow-through (chuyển
động theo đà).

Sprite người dơi này thậm chí còn có một chút subpixeling cho chuyển động theo đà của chiếc
áo choàng của hắn. Nó khá ấn tượng đối với một sprite NES, nhưng cũng không phổ biến.
Batman (NES)
Chuyển động theo đà có thể yêu cầu một số subpixeling để có được một kết thúc suôn sẻ tốt
đẹp. Điều này sẽ giúp làm cho giai đoạn “lấy đà” của hoạt ảnh trở nên thuyết phục hơn.
.

Metal Slug Attack (Mobile)

Tóm tắt

Overlap : DRAGGING (chồng chéo: lôi kéo theo) Follow-through : SETTLING (Chuyển động
theo đà: quán tính)

226
 The Four Methods (Tứ đại phương pháp :D)
Giống như trong chương giới thiệu, có một số cách để bắt đầu một bức vẽ tĩnh. Tuy nhiên, hoạt ảnh pixel biết
4 phương pháp được sử dụng để đi từ đầu đến cuối. Các phương pháp này là về cách tạo pixel art, cụ thể
hơn là các bản vẽ thô cho mọi khung hình sau đó là quá trình làm sạch

Silhouetteanimation Recyclingframes (tái sử Start fromTraditional (bắt SimpleLineart (vẽ

(Bóng chuyển động) dụng khung hình) đầu từ vẽ truyền thống) đường nét đơn giản)

Tất nhiên hai (hoặc ba) phương pháp của hoạt hình truyền thống rõ ràng vẫn áp dụng cho nghệ thuật pixel.
Pose to Pose (Vẽ từng tư thế một): lập kế hoạch công việc của bạn với các khung hình chính, thêm các khung hình bên trong để kết
nối chúng.
Straight Ahead(Thẳng tiến): tạo hoạt ảnh cho các khung hình khi bạn di chuyển, ứng biến theo cách của bạn qua mốc thời gian.
Pose to Pose + Straight ahead: Sự kết hợp của cả hai phương pháp

Silhouette (Hình bóng)

Hình bóng rất hữu ích cho các chuyển động lớn

By Michafrar

Cách bạn vẽ nguệch ngoạc hình bóng của mình là tùy thuộc vào bạn. Nếu bạn vẽ bóng
của mình giống như một bản vẽ thông thường, điều đó cũng tốt! Kỹ thuật này thiên về
hình dạng hơn là một cái bóng thực sự. Kết quả cuối cùng mới là điều quan trọng..

Hình bóng cũng có thể là những vũng màu . Kỹ

thuật này hoạt động tốt để lập kế hoạch hoạt ảnh
của bạn. Điều này giúp bạn theo dõi màu sắc trên
nhân vật của mình từ sớm. Bạn có thể sửa đổi, sử
dụng lại hoặc chỉnh sửa các bộ phận bất kỳ lúc nào.
227
By guest artist YAA
 Recycling frames (Tái sử dụng các khung hình )

tái sử dụng rất hữu ích để giữ một phong cách nhất quán và duy trì mô hình.

Bản thảo thô

Làm sạch

by guest artist Syosa

Một lần nữa, công cụ chọn vùng là người bạn tốt nhất của bạn với nghệ thuật pixel. Với công cụ này,
bạn có thể sử dụng và KẾT HỢP những điều sau để giúp vẽ ra các tư thế mới :

Copying Resizing Sliding Rotating Cutting Skewing

(Sao chép) (thay đổi kích thước) (dịch chuyển) (xoay) (cắt bỏ) (làm xiên)
Bằng cách phân tích các sprite và hình ảnh động trực tuyến, bạn có thể biết rằng pixel art có các khung
hình tái sử dụng rất nhiều bộ phận cơ thể. Bạn có thể biết một số khung cần sửa đổi Không cần phải vẽ
lại mọi thứ từ đầu với pixelart.
Khi bạn có một bản vẽ pixel cơ sở vững chắc, bản thân sprite đó sẽ trở thành tài nguyên
chính của bạn. Nhân bản các sprite và sửa đổi chúng sẽ giúp bạn tiết kiệm thời gian.

Mighty Switch Force 2 (WiiU/3DS) Metal Slug 3 (NeoGeo, PS2, Various)

Những điều cơ bản là làm cho các bộ phận bị co lại, kéo căng hoặc dịch chuyển. Một khi bạn nắm được các kỹ thuật
này, bạn sẽ có thể kết hợp chúng. Thay vì vẽ một khung mới, bạn có thể có được những khung thực sự phức tạp bằng
cách xiên và xoay. Mọi thứ sẽ trông thô ráp, nhưng đó là bởi vì bạn vẫn phải làm sạch sprite.

Metal Slug 3 (Arcade, Neo Geo)

Hãy thử tìm cách tiết kiệm thời gian cho bản thân bằng một số cách tái sử dụng minh.
228
 Mỗi khung hình bạn vẽ là một tài nguyên. Có thể sao chép và biến đổi chúng.

by Michafrar

TUY NHIÊN, phần quan trọng là làm việc đầy đủ với các khung hình bằng cách biến đổi và thổi
hồn cho chúng để làm cho chúng trông khác biệt với các khung khác.

Bạn KHÔNG thể chỉ dịch chuyển các bộ phận cơ thể xung quanh và để nó ở đó. Nếu bạn không chỉnh
sửa chúng, nhân vật của bạn sẽ trông giống robot hoặc giống như "tweened".

Phương pháp này có thể so sánh với kỹ thuật "Place and Trace" "Địa
điểm và Dấu vết" được sử dụng trong hoạt hình 2D truyền thống *.

Kết hợp cả hình bóng và phương pháp

tái sử dụng để tạo ra những
inbetweens(khung hình ở giữa các khung
hình chính) thô nhanh hơn nhiều. Điều
Base này đòi hỏi phải dọn dẹp nhiều hơn
frames
nhưng bạn sẽ có cảm giác về hoạt ảnh
cuối cùng sớm hơn rất nhiều.
Wargroove (PC, PS4, Switch, XBO)

“Tôinhưcảmchuyểnthấyđộngrằngcủavới mộthoạtconảnhngựatheođang
phong cách bóng, toàn bộ mọi thứ sẽ chuyển động cùng một lúc, giống
chạy. Việc sử dụng lại các khung hình sẽ thuận tiện cho việc hiển
thị các biểu cảm nhỏ và cử chỉ của con người. Tôi sử dụng cả hai kỹ thuật này.
Thị các Syosa/しょさ

.
Kỹ thuật này song hành với phương pháp "Tái sử dụng khung".
Bạn có thể kết hợp các phương pháp!
Với một chút kinh nghiệm, nó có thể tăng tốc công việc của bạn lên rất nhiều!

Place and Trace (also called shift and trace or even lift and trace) is a technique where traditional 2D animators use a previously drawn frame as a guideline to draw inbetweens
* or new keyframes. This drawing is placed underneath a blank frame so it can be loosely traced or transformed. This technique helps objects,features and characters stay uniform. 229
 Start from Traditional Art (Bắt đầu từ nghệ thuật truyền thống)

Left: Captain Commando (Arcade, SNES) Top: Darkstalkers (Arcade, PS1) Right: Street Fighter III (Arcade, Dreamcast)

Điều này đề cập đến cách truyền thống của hoạt ảnh trên giấy hoặc phần
mềm như Adobe Photoshop, Adobe Flash, TVPaint và Toon Boom Harmony.

Ngày nay, kỹ thuật này bao gồm:

- Đầu tiên, vẽ hoạt hình ở độ nét đậm hơn.
- Sau đó, thu nhỏ các khung hình xuống kích thước thân thiện với pixel.
- Cuối cùng, truy tìm hoặc chỉnh sửa các khung của hình ảnh động.

Nhiều người đề cập đến Capcom khi nói về kỹ thuật này.

Trước đây, các họa sĩ 2D Capcom sẽ sử dụng giấy kẻ ô vuông để tạo hoạt ảnh cho
các nhân vật, sau đó số hóa và tô màu các khung hình trên máy tính. Nhiều hãng
phim sẽ sử dụng phương pháp này. Một số công ty sẽ sử dụng sự trợ giúp của
các họa sĩ hoạt hình 2D bên ngoài; những người khác làm việc trong nhà. Cách
mỗi studio số hóa khung hình hoạt hình của họ là khác nhau, nhưng quy trình
chính vẫn giữ nguyên các hình vẽ Earthworm Jim được tô màu trước. Bằng cách
nghiên cứu nhiều bản quét và cảnh quay beta, bạn có thể biết các bản vẽ đã bị
thay đổi trong các giai đoạn của nghệ thuật pixel.

Ngày nay, các bản phác thảo sơ bộ đều được thực hiện trên máy tính.

. Dưới đây là một số thủ thuật giúp số hóa công việc của bạn thành pixel, bất kể phần mềm:
Thu nhỏ mà Giảm màu Tăng Làm sắc
không làm mờ sắc tương phản nét
Sau khi hình ảnh được tối ưu hóa, tất cả sẽ được làm sạch từ đó. Rốt cuộc, pixel art là về việc có quyền kiểm soát.
230
Nếu bạn cần tạo lượng hoạt ảnh cực lớn, một khả năng là tạo mô hình 3D trước.
Kết quả được tạo ra với các mô hình này vẫn được coi là pixelart, vì chúng vẫn đòi
hỏi kỹ năng và kiến thức về nghệ thuật pixel trong giai đoạn làm sạch. Một trò chơi
nổi tiếng với kỹ thuật này là The King of Fighters XI, nhưng bạn có thể tìm thấy nó
trong các trò chơi cũ hơn như Sonic 2, Mickey Mania và Kirby Super Star. Công ty
Arc System Works sử dụng mô hình 3D để tạo ra các nhân vật với các trò chơi như
One Piece: Great Pirate
Colosseum, Dragon Ball Z: Extreme Butōden and the Blazblue series. One Piece: Great Pirate Colosseum (N3DS)

INếu bạn quan tâm đến việc tìm hiểu cách số hóa tác phẩm của mình hơn nữa, hãy
xem trang web tuyệt vời: 2dwillneverdie.com chuyên về phương pháp này.

Chúng tôi đã nói về phương pháp truyền thống trước đây. Hãy nhìn lại những trang trước:
Introduction Readability Clean-up
So where do I start? p 8-9 From rough to clean p 164
Symbols I – Hands #6 p 98
Old school” hardware p 11 From start to finish - I p 182

Line art (nghệ thuật đường nét)

Kỹ thuật này rất đơn giản: nó giống như hoạt ảnh kỹ thuật số thông thường.
Cho dù bạn tạo hoạt ảnh trên giấy hay trên máy tính, bạn sẽ bắt đầu với:

Vẽ nét Tô màu Đổ bóng Làm sạch

By guest artist YAA

Mỗi khung cần được tô bóng riêng từ đầu. Phương pháp này thoạt nhìn có thể nhanh hơn nhưng mất khá nhiều thời gian.
Nó là pixelart từ đầu đến cuối. Đó là những gì làm cho nó khác biệt so với phương pháp truyền thống.
231
 Limited frames (Khung ảnh hạn chế)
Hai khung là mức tối thiểu . Thật không may, chúng tôi không thể có bất kỳ vòng cung hoặc cách nào để
chỉ ra cách mọi thứ đi từ A đến B. Hoạt ảnh sẽ chỉ nhấp nháy. Chúng ta có thể học hỏi từ điều này, chúng
ta cần ít nhất một khung hình thứ ba, một breakdown để hiển thị hướng hoặc vòng cung.
.
Bạn cần truyền tải nhiều chuyển động nhất với số lượng bản vẽ thấp nhất. Đây là khó khăn thực sự.
Chúng hữu ích để bao gồm việc có hoạt ảnh hạn chế nhưng dễ chịu, bên cạnh các tư thế khung hình chính cơ bản:
một khung chính vững chắc để dự đoán nếu có thể: một breakdown, một "điểm giữa "
một overshoot frame cho những chuyển động linh hoạt .vẽ hình bóng chính xác để mô tả hành động.
The following advice is inspired by Mariel Cartwright (@kinucakes)

by Michafrar

Số lượng khung hình tối thiểu cho một Thay vì quay đi quay lại, bạn có thể định Các hành động chồng chéo cũng có thể
vòng lặp thuyết phục a là 3 khung hình. vị các đối tượng trong một vòng tròn được thu hẹp xuống còn 3 khung hình

Mức tối thiểu này thậm chí còn phù hợp với các
hoạt ảnh chạy. Bạn có thể có một vòng lặp 3 khung
trong đó các chân có thể hoán đổi cho nhau.
by Michafrar 1 2 3 1 2
Metroid (NES)

Bạn cũng có thể có 4 khung hình trong

đó một trong các khung hình được sử
dụng lại (thường là breakdown). Bằng
1 2 3 1 2 3
3 1 2 3 1 2 cách này, hoạt ảnh có thể lặp lại.
Castlevania III (NES) Ducktales (NES)

Ngay cả với những giới hạn nghiêm ngặt, bạn vẫn có

thể trở nên rất biểu cảm với các hình ảnh động lặp lại!
Treasure Master(NES)

Gặp một chút rắc rối với chu kỳ đi bộ?

Làm cho một nhân vật băng qua màn hình thay vì để họ đi bộ tại chỗ.
Theo dõi nơi chân tiếp xúc với mặt đất. Sau khi hoàn tất, hãy đặt lại vị
trí khung của bạn trở lại chính giữa.
 The Onion skin (vỏ hành tây)
Công cụ vỏ hành tây hiển thị cho bạn khung hình trước và khung hình tiếp theo,
giúp bạn vẽ in-betweens nhưng với nghệ thuật pixel thì có điều kiện kèm theo.

Khung ảnh cách biệt Các khung hình quá giống nhau
Công cụ vỏ hành tây chỉ hoạt động tốt cho nghệ Biến vỏ hành tây trở thành một mớ hỗn
thuật đường nét để ước chừng in-betweens. độn khi bạn có vô số màu sắc.

Frame A Frame B Onionskin In-between Chúc may mắn …

ều đó …

Nếu bạn may mắn, đường viền của bạn có thể được hoàn thiện mà không
gặp nhiều rắc rối như thế này: Nếu bạn không sử dụng nét vẽ để tạo hoạt
ảnh nghệ thuật pixel, thì vỏ hành tây không phải lúc nào cũng hữu ích.

.
Bạn có thể tìm thấy một nút vỏ hành tây trong hầu hết các phần mềm hoạt hình. Một số phần mềm có thể gọi nó là "light table".

Pro Motion GraphicsGale Aseprite

Điều này không cần phải nói: hãy chú ý đến cách bạn sử dụng
vỏ hành tây. Hãy subpixel hình chiếc ô này xuống dưới.
Vỏ hành tây này cung cấp cho bạn đủ thông tin để phân biệt.
Thật không may, đó là một hình dạng sai lệch.
Bạn thực sự không thể vẽ giữa các dòng, giống như với hoạt hình
truyền thống. Có rất ít hoặc không có không gian để làm điều đó.
Giải pháp tốt nhất là hổ trợ (vẽ gần giốn với) khung hình chính
để những in-betweens của bạn duy trì hình dạng.. 233
 Line boiling (bốc hơi đường vẽ)

Rakugakids (N64)

. bốc hơi là hiệu ứng lung lay của các đường vẽ tay. Đây thường là kết quả của việc vẽ từng pixel cho
từng khung hình một. Với rất nhiều pixel chặt chẽ với nhau, có khả năng một số pixel trong số đó có thể
"chập chờn”.
Boiling is inevitable with traditional art, but can be avoided with digital arts.
Nguyên nhân:

In-betweens hổ trợ sai khung hình. Chuyển động không theo vòng cung Subpixeling (nếu được sử dụng) không được căn chỉnh tốt.

Khắc phục:
• Sử dụng công cụ chọn vùng càng nhiều càng tốt. dịch chuyển các bộ phận xung quanh.
• Sử dụng Subpixeling để đảm bảo các khung hình chuyển tiếp mượt mà với thời lượng chặt chẽ.
• Hãy tiết kiệm, sử dụng hình ảnh động hạn chế. Tuy nhiên, rủi ro mà bạn chấp nhận là có hoạt ảnh bị giật. Một số
họa sĩ và khán giả nhận thấy nghệ thuật pixel có tốc độ khung hình cao quá khô khan, quá sạch sẽ. Tìm sự cân
bằng tốt đẹp giữa những hạn chế cũ và những khả năng hiện đại. Bạn không cần phải tuân theo bất cứ điều gì.

Một số trò chơi cố gắng bắt chước phong cách vẽ tay, các trò chơi như
SMW2: Yoshi's Island (SNES) và Ragukakids (N64). Những trò chơi này
có mục đích là bốc hơi nét vẽ, chúng chỉ đơn giản là bắt chước hình ảnh
động rung lắc. Tuy nhiên Yoshi's island chỉ sử dụng kỹ thuật này cho
hình nền và vật thể. Nhân vật và kẻ thù được làm hoạt hình mà không
có bốc hơi nét vẽ..

bốc hơi nét vẽ đặc biệt đáng chú ý khi các nhân vật được vẽ lại cho mọi khung hình
mặc dù chúng đang đứng yên. Với nghệ thuật truyền thống, nó thường được sử dụng
như một hiệu ứng phong cách phổ biến. Với pixelart, nó không được phiên dịch tốt
bởi vì nó ở độ phân giải thấp, vì vậy sẽ có rất ít chỗ để bốc hơi nét vẽ.

lineboil* cleaned up*

Một khung hình lẻ có thể làm rối hình ảnh động.
Street Fighter III (Arcade) * Ví dụ này là hoạt hình nghiêm ngặt. Kiểm tra phụ lục để xem nó.
234
 Parallax scrolling (dịch chuyển thị sai )
Để thêm nhiều độ sâu hơn, bạn có thể sử dụng phối cảnh cho nền hoặc sử dụng dich chuyển thị sai:
chia nền của bạn thành các lớp và di chuyển ở các tốc độ khác nhau:
.
Mảnh phong cảnh càng gần, nó di chuyển càng nhanh.
Càng ra xa, nó di chuyển càng chậm.Bầu trời hoặc
các vật thể rất xa như mặt trời, mặt trăng, các vì sao
và núi hiếm khi di chuyển.

Phong cảnh chuyển động như trong một chuyến đi ô tô!

Có 3 kiểu dịch chuyển thị sai đặc biệt cung cấp 3 hiệu ứng độc đáo.

Tất cả các lớp di chuyển theo cùng một hướng, Các lớp di chuyển theo các hướng ngược Các vòng nền, mặt trước là từng khung hình
nhưng chúng di chuyển với tốc độ khác nhau. nhau. Cảnh quay khiến camera xoay. - camera xoay

Rayman (PS1) Ninja Gaiden (NES) Mickey Mania (Megadrive)

235
 Top down views ( góc nhìn top-down)
Parallax Scrolling (dịch chuyển thị sai ) không chỉ dành cho các bức ảnh cuộn. Chúng có thể dễ dàng được sử dụng trong các chế độ xem
top-down như trong The Legend of Zelda: Minish Cap (GBA). Chú ý cách phiến cỏ di chuyển trên lá.

Stretching and skewing (Kéo giãn và làm xiên)

Nền có thể kéo giãn và xiên để tạo phối

cảnh. Mỗi đường quét pixel được duy
chuyển với tốc độ khác nhau với sự trợ
giúp của mã lập trình.
Street Fighter II Turbo (SNES)

Lấy nét ở hậu cảnh xa khi nhân vật bơi lên. Chú ý cách các dầm gỗ di chuyển xuống.

Để đạt được hiệu ứng này, các họa sĩ đã tạo ra cả sàn và trần của
các thanh dầm trong một nội dung duy nhất. Các tia được kéo dài
khi nhân vật đi lên và đi xuống, để lộ ra hai bên.
Donkey Kong Country 2: Diddy's Kong Quest (SNES)

. Nếu bạn muốn biết về các kỹ thuật mã hóa này, hãy xem video tại Game Hut. JonBurton, giám
đốc của Traveller's Tales tiết lộ tất cả các thủ thuật lập trình của anh ấy ở đó.
http://www.gamehut.com/
236
 Kết luận
Đối với một số người, nghệ thuật pixel đồng nghĩa với hoạt hình. Đối với những người khác, nó đồng nghĩa với hình ảnh minh họa.
Cho dù bạn có tạo hoạt ảnh hay không, hãy suy nghĩ điều này:

Tạo hoạt ảnh là một kỹ năng có thể chuyển nhượng.

Điều này có nghĩa đó là một khả năng có thể được áp dụng trong các lĩnh vực khác. Đó là một kỹ năng siêu quý giá nếu
bạn muốn tạo video, trò chơi máy tính hay chỉ đơn giản là muốn phát triển sự nghiệp của mình. Bạn không cần phải xuất
sắc về hoạt ảnh, nhưng học nó sẽ dạy cho bạn một số thủ thuật thú vị mà bạn có thể áp dụng ở những nơi khác!

Hoạt ảnh cũng là một chủ đề mở rộng.

Chương này có thể bao gồm nhiều chủ đề nhất, nhưng một cuốn sách đơn giản là không đủ! Đó là một chủ đề đa dạng và
phức tạp với những phương pháp riêng. Cho đến ngày nay, các họa sĩ vẫn tiếp tục viết về nó, thảo luận về nó và thiết lập
những phong cách mới. Hoạt hình nghệ thuật pixel là một thể loại phụ của cả nghệ thuật và hoạt hình. Nó đòi hỏi bạn
phải kết hợp kiến thức của bạn về từng thứ, vì vậy nó có giá trị cho sự phát triển nghệ thuật của riêng bạn để tìm hiểu về
các nguyên tắc cơ bản của hoạt hình nói chung!
Quan trọng nhất, hãy vui vẻ. Làm hoạt ảnh là một công việc khó khăn, nhưng
bạn có thể cảm thấy rất hài lòng khi thấy mọi thứ trở nên sống động!

Advance Guardian Heroes (GBA)

Food for thought Key techniques Animation concepts

Introduction Squash & Stretch The Four methods
How to study Anticipation Silhouette animation
Recycling frames Start
Timelines in pixel art Breakdown Ease from traditionalSimple
in and out lineart
Smears Limited frames
Overshoots The Onion skin
Overlap & Follow-through Parallax scrolling 237
 Phần kết
Lời bạt
Sau khi viết đi viết lại cuốn sách này trong bốn năm qua, thật khó để tìm ra những lời kết hay. Pixel art là sự kết hợp hài hòa giữa vẽ
và điêu khắc chính xác. Đặc điểm nổi bật của loại hình nghệ thuật này là sẽ luôn là sự chính xác và khả năng kiểm soát mà bạn mang lại cho các
tác phẩm nghệ thuật của mình. Đây là những gì làm cho nó trở thành một phương tiện và không phải là một phong cách. Đến giờ, nhiều bạn đã
biết điều này rồi.

Biết cách vẽ là một yêu cầu. Đó là một kỹ năng bạn cần phải nắm vững trước khi học những kỹ năng mới. Để chạy, trước tiên
bạn cần học cách đi bộ; A có trước B. Các nhà làm phim hoạt hình được cho biết rằng vẽ là một kỹ năng cơ bản. Các họa sĩ Pixel cũng
cần được nói như vậy. Nghệ thuật pixel chả là gì nếu không có cảm giác minh họa và hội họa tốt. Để trở thành một họa sĩ pixel thành
thạo, bạn cần phải giỏi vẽ hoặc hội họa. Thông thường, nếu có điều gì đó trông không ổn với hình vẽ của bạn, thì nguyên nhân rất có
thể liên quan đến bản vẽ. Tôi đã đưa đoạn này vào ngay phần đầu của cuốn sách, nhưng tôi đã được biết lời khuyên này có thể khá
nản đối với những người mới bắt đầu. Tuy nhiên, tôi cảm thấy đó là một bài phát biểu cần thiết để cung cấp cho những người mới
đến, bất chấp điều đó nghe có vẻ khắc nghiệt như thế nào đối với những người không phải là họa sĩ, những người thực sự muốn thử
nghệ thuật pixel. Ngay cả những phong cách tối giản hay những hình vẽ có độ phân giải siêu thấp cũng sẽ yêu cầu một số hiểu biết về
màu sắc và hình dạng.

Nghệ thuật điểm ảnh bắt nguồn từ các trò chơi điện tử. Do đó, hầu hết các sprite được giới thiệu trong hướng dẫn này
được dùng làm tài liệu tham khảo, nghiên cứu và phân tích. Tôi thực sự khuyên bạn nên làm như vậy. Trên thực tế, tôi mong các bạn
nghiên cứu và học hỏi từ các trò chơi điện tử và các họa sĩ đã làm việc cho chúng. Thật dễ dàng để chỉ cần duyệt nghệ thuật trực tuyến
và chỉ gặp một họa sĩ duy nhất tạo ra những hình ảnh tuyệt đẹp. Nhưng bạn không nên nghiêm túc học tập từ cô ấy / anh ấy một
mình. Những họa sĩ này có nguồn cảm hứng của riêng họ. Bạn nên kiểm tra xem điều gì đã dạy họ nghệ thuật pixel. Nếu bạn chỉ đơn
giản là nghiên cứu cách diễn giải của một họa sĩ, bạn sẽ không hiểu họ đến đó bằng cách nào. Tác phẩm của bạn sẽ trở thành một sự
bắt chước của một sự bắt chước, nếu đó là tất cả những gì bạn biết. Bạn vẫn có thể có một họa sĩ yêu thích của mình, nhưng hãy luôn
cố gắng chú ý đến nhiều họa sĩ hơn và nhiều trò chơi hơn.

Cuối cùng, cuốn sách này không có bài tập, vì vẽ là một kỹ năng phong phú. Thật khó để đánh giá công việc của bạn nếu không có một
cộng đồng hoặc một lớp học. Nếu bạn muốn đào tạo, tùy thuộc vào bạn để tìm những gì truyền cảm hứng cho bạn và kết hợp một số yếu tố
mới vào tác phẩm nghệ thuật của bạn. Bất kỳ điều gì chưa được đề cập trong cuốn sách này đều dành riêng cho các hình thức nghệ thuật khác
(kết cấu, đổ bóng) hoặc phát triển trò chơi điện tử (bộ xếp hình, triển khai công cụ, v.v.). Bạn có thể tiếp tục cuộc hành trình của mình và tìm
thêm các tài nguyên và hướng dẫn.

Hãy tò mò. Khi bạn xem qua Pixelart, bạn thấy thú vị, hãy lưu nó và ZOOM IN (phóng to nó ra)!

238
Họa sĩ khách mời

Anubis Jr. Temmie Chang

Twitter: @Anubis_Jr Twitter: @tuyoki
Website : anubis-works.tumblr.com Website : temmiechang.tumblr.com

Glauber Kotaki Jenna Brown

Twitter: @unseven Twitter: @cyanatar Website :
Website : glauberkotaki.com cyanatar.com

Paul Veer Cocefi

Twitter: @pietepiet Website : Twitter: @chickysprout
pietepiet.com Website : pixosprout.tumblr.com

Dani Oliver Neorice

Twitter: @ahruon Twitter: @Neoriceisgood
Website : ahruon.tumblr.com Website : neorice.com

Ellian Syosa
Twitter: @ThisIsEllian Website Twitter: @sy0sa
: thisisellian.com Website : collet66.blog52.fc2.com

Jinn Thernz
Instagram: jinnpixel Website : Twitter: @thernz
http://jinn.art.br/ Website : thernz.tumblr.com

Justin Cyr YAA

Twitter: @JUSTIN_CYR Twitter: y_a_a_m_m_y
Website : justinpaulcyr.tumblr.com Website : http://yaa-tum.tumblr.com/

Steven McCarthy Shawn Martins

Twitter: @1988StevenM Twitter: @puppiesandanime
Website : 1988stevenm.carbonmade.com/ Website : puppiesandanime.tumblr.com/portfolio

A big thank you to The

An online archive that catalogues sprites and backgrounds from video games. This website iswhere I
Spriters Resource
started as a young rookie pixel artist. Thank you to Mark Brown (GMT),
Dazz (Daniel Brown), Shane Gill (DYKG) & everyone who worked on the website!

www.spriters-resource.com
239
Selected Bibliography
Magazine: “MegaForce #4” January-February 1992, pages 31-34, issued by Mega Press, S.A.R.L. Book: Neo-
Geo Hardware Specification” booklet, page 93, issued by SNK Playmore Corporation
Video: 新 サラリーマンライフ トップリポート ビデオゲーム開発室
ブームの仕掛人たちニューメディアＩＮビジネス情報武装するオフィス ほか at http://p.twipple.jp/mznVY
Video footage: SEGA Documentary 1993 Part II, at youtu.be/-M8RIc6Ek0Q
Video footage: Fatal Fury 3 Neo Geo CD - Promotional commercial ー Paul Signac Entrée du port de Marseille (1911) ー Pixel Works by Susan Kare(1984)Iwata Asks: The
Legend of Zelda: A Link Between Worlds ｰ at http://iwataasks.nintendo.com/interviews/#/3ds/a-link-between-worlds/0/3
Photograph , from the Seymour Road Studios ー Footage from "His Girl Friday " from 1940, © Columbia Pictures
Behind the Scenes at Sega: The Making of a Video Game by Nicholas Lavroff ー Shiny Entertainment - Earthworm Jim "The Making Of"Documentary: toco toco -
Akira “Akiman”Yasuda, Illustrator ｰ at https://www.youtube.com/watch?v=RxIXilYv0kM

Copyright Information
Fan works
Page 7: Penguin design © Nintendo – Page 9: Venusaur © The Pokémon Company, Game Freak, Nintendo Co. ; Yoko Littner © Gainax; Velvet, Odin Sphere © Vanillaware
– Page 18: Space Invaders © Taito Corporation – Page 40: Metaknight © Nintendo Co., Hal Labs. – Page 50: Rosalina © Nintendo Co. – Page 65: Shovel Knight, Shield Knight © Yacht Club Games
– Page 91: F-zero, Captain falcon © Nintendo Co. – Page 96+181: Shulk, Xenoblade Chronicles © Monolith Soft, Nintendo Co. – Page 181: Inkling, Splatoon © Nintendo;

Authentic works
Page 11: Felicia © Capcom; illustrated by Akira “Akiman”Yasuda – Page 12: Comix Zone © Sega – Page 20, 30 : Metroid II: Return of Samus, Super Metroid © Nintendo Co. ; Cave Story © Studio Pixel, Nicalis, Inc. – Page 21: Finn,
Adventure Time ©The Cartoon Network, Inc. D3 Publisher Inc. ; Half-Minute Hero © Marvelous Entertainment Inc.
Chapter 1 - Page 22, 24: Sakura, Street Fighter © Capcom – Page 23, 24: Earthbound, Mother 2, Mother 3 © Shigesato Itoi, Nintendo Co. ; Heihachi, Tekken © Bandai Namco Entertainment Inc. – Page 24: Treecko © The Pokémon
Company, Game Freak, Nintendo Co. – Page 27: Metal Slug © SNK, SNK Corporation – Page 28: Tuna head © Nippon Ichi Software, Inc.; Curses ‘N Chaos © Tribute Games – Page 30: Super Mario Brothers, Mario & Luigi, Metroid ©
Nintendo Co., Sonic The Hedgehog, Streets of Rage © Sega ; Castlevania © Konami – Page 31: Shatterhand © Jaleco, Natsume ; Ganon, Bowser, Wario, Mother 3tm © Nintendo Co. ; Shonen Jump: Jump Ultimate Stars ©Nintendo,
Gambarion ; One Piece © Eiichiro Oda ; Scott Pilgrim vs. the World: The Game © Ubisoft ; Shovel Knight © Yacht Club Games – Page 32: Wario Land 4, Princess Peach © Nintendo Co. ; Kirby Squeak Squad © Nintendo Co., Hal Labs.
; Magical Taruruuto-Kun ©Tatsuya Egawa, Shueisha ; Chrono trigger © Square-Enix ; Boktai 3© Konami ; Riviera: The Promised Land © STING – Page 33: Adventures of Batman and Robin © Warner Bros., Konami ; Enchanted
GBA © Disney Interactive ; Congo’s Caper © Data East ; Hamelin No Violin Damaki ©Enix ; Funky Kong, Metroid Fusion © Nintendo Co. ; Castlevania © Konami ; Monster World © Sega ; Dragon Quest, Slime © Square-Enix ;
Sam & Max © Steve Purcell – Page 34: Ristar © Sega ; Pulseman © Game Freak, Sega ; Alundra © Matrix Software ; Parodius © Konami ; The Legend of Zelda, Link, Goron, Samus, Metroid: Zero Mission © Nintendo Co. ; Hsien-Ko,
Darkstalkers © Capcom ; Shantae © Wayforward technologies – Page 35: Lanturn, Mawile, Dugtrio, Muk, Pokémon Diamond/Pearl/Platinum © The Pokémon Company, Game Freak, Nintendo Co. – Page 36 : Klonoa, Kos-Mos,
Xeno-saga © Namco Bandai ; Hagar, Final Fight, Street Fighter, Chun-li, Zangief © Capcom
Chapter 2 - Page 38: Kirby © Nintendo Co., Hal Labs. – Page 39: Starfox 2, Fox McCloud © Nintendo Co. – Page 40: Scribblenauts © Warner Bros. – Page 41: King Dedede, Kirby © Nintendo Co., Hal Labs. ; Unown © The Pokémon
Company, Game Freak, Nintendo Co. ; Fat Fury © SNK – Page 42: Rhythm Tengoku © Nintendo Co. ; Metal Gear, Solid Snake, Mei-ling ©Konami ; Fuka Kazamatsuri © Nippon Ichi Soft- ware, Atlus – Page 43: Advance Wars, Andy ©
Intelligent Systems, Nintendo Co. ; Yoshi, Yoshi’s Island, Super Mario © Nintendo Co. –Page 46: Donovan Baine, Hsien-Ko, Darkstalkers © Capcom – Page 48: Kirby
© Nintendo Co., Hal Labs. ; Lan, Mega Man Battle Chip Challenge © Capcom – Page 52: Negima! © Ken Akamatsu, Kodansha ; Jon Talbain, Darkstalkers © Capcom – Page 53: Breath of Fire © Capcom – Page 54: Earthworm Jim
© Doug TenNapel ; Laharl © Nippon Ichi Software – Page 55: Little Nemo Dream Master © Capcom; Bill Murray as Peter Venkman, Ghostbusters Genesis © Sega – Page 57: Dragon Quest/ Dragon Warrior © Square-Enix –
Page 59: Shining Force © Sega
Chapter 3 - Page 60-85: Pokémon Heart Gold © The Pokémon Company, Game Freak, Nintendo Co. – Page 61: Batman © DC Comics, Warner Bros, Sunsoft ; Shin Megami Tensei© Atlus; Megaman 6, Red Earth, Breath of Fire IV ©
Capcom ; Super Metroid, Yoshi © Nintendo Co. ; Tales of Phantasia © Namco Bandai – Page 62: Drawn to Life © THQ ; Shovel Knight © Yacht Club Games ; Mighty Switch Force © Wayforward Technologies – Page 68: Sonic Rush
Adventure, Sonic 3 © Sega, Sonic Team; Seiken Densetsu 3 © Square-Enix; Mighty Gunvolt © Inti Creates ; Coropata © Lukplus – Page 71: Tentacruel © The Pokémon Company, Game Freak, Nintendo Co. – Page 72: Lyndis, dart, Fire
Emblem © Intelligent Systems, Nintendo Co.; Dr. Wily, Protoman, Megaman 7, Breath of Fire IV © Capcom ; Bowser, Mario Party Advance, Link, The Legend of Zelda Link to the Past, Luigi, Mario & Luigi Dream team, Yoshi & related
Mario games © Nintendo Co. ; Earthbound, Ness © Shigesato Itoi, Nintendo Co. ; Magus, Frog, Chrono Trigger © Square- Enix. – Page 73 -74: Lenora, Elesa, Grimsley, Shauntal, Pokémon Black & White, Ditto, Pokémon Crystal © The
Pokémon Company, Game Freak, Nintendo Co. – Page 74: The Chaos Engine © The Bitmap Brothers
; Boktai: The Sun Is In Your Hand © Konami – Page 79: Nuclear Throne © Vlambeer – Page 80: Double Dragon © Technōs Japan, Arc System Works
Chapter 4 - Page 87-88: Agahnim, The Legend of Zelda, Link to the Past, Super Mario & related games © Nintendo Co. – Page 89-90: Cryamore, Esmyrelda Maximus, Bliss Barson © NostalgiCO ; Persona 4 Arena © Atlus ;
Guilty Gear XX © Arc System Works ; The King of Fighters XIII © SNK ; Tales of Destiny © Namco Bandai ; Disgaea, La Pucelle Tactics © Nippon Ichi Software – Page 91: Yoshi, Super Mario Kart
© Nintendo Co. – Page 92 : Pokémon Red, Green, Blue © The Pokémon Company, Game Freak, Nintendo Co. Page 93: Chasm © Bit Kid, Inc – Page 94: Crash ‘n’ the boys & River City Ransom © Technōs Japan
; Buzzy beetle, Super Mario © Nintendo Co. – Page 96: Shulk, Xenoblade Chronicles © Monolith Soft, Nintendo Co. – Page 99-100: Beyond Oasis © Ancient, Sega ; Ace Attorney, Shock Troopers © Capcom ; Tales of the World ©
Namco Bandai – Page 101: Marty Mcfly, Doc Brown, Back to the Future II, Super Back to the Future II © Universal Pictures Inc. ; Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami – Page 102: Lyndis, Fire Emblem ©
Intelligent Systems, Nintendo Co. ; Riou, Suikoden II © Konami ; Bowser, Super Mario © Nintendo Co. – Page 103,105: Streets of Rage © Sega ; Duelyst © Counterplay Games, Bandai Namco ; Chasm © Bit Kid, Inc – Page 104, 106,
107: Nuclear Throne © Vlambeer; Super Mario World, Super Mario Brothers 3, Yoshi, Super Mario © Nintendo Co. –Page 108: Brendan, Pokémon Ruby, Sapphire, Emerald © The Pokémon Company, Game Freak, Nintendo Co. –
Page 109: Tak: Mojo Mistake © THQ – Page 111: Kirby and The Amazing Mirror, Kirby, King Dedede © Nintendo. Co, Hal Labs.; Jewel Master © Sega – Page 113: Pokémon Red, Blue, Green, Yellow © The Pokémon
Company, Game Freak, Nintendo Co.
Chapter 5 - Page 116: Street Fighter Alpha © Capcom – Page 117: Monster in My Pocket © Konami, Ultra Games – Page 118: Mario Tennis © Nintendo Co. – Page 119: Ecco the Dolphin© Sega

240
Page 120: Pokémon Mystery Dungeon 3 © The Pokémon Company, Game Freak, Nintendo Co. ; Earthworm Jim © Doug TenNapel ; Sonic Advance 2 © Sega– Page 121: Vectorman © Sega – Page 121: Vectorman © Sega ; Donald
Duck © Disney Interactive ; Scizor © The Pokémon Company, Game Freak, Nintendo Co. – Page 122: Beyond Oasis © Sega, Ancient; Earthworm Jim © Doug TenNapel ; Ecco the Dolphin© Sega – Page 123: Kolibri © Sega,
Appaloosa Interactive – Page 124: King Dedede, Acro © Nintendo Co., Hal Labs − Page 125: Shovel Knight © Yacht Club Games ; Kirby’s Adventure © Nintendo, HAL Laboratory ; Street fighter Alpha © Capcom − Page 126:
Kunio-kun © Technōs Japan; Crystalis © SNK Corporation ; Cereza, Bayonetta © Sega, Platinum Games − Page 127: Super Mario World 2 : Yoshi’s Island © Nintendo − Page 128: Gengar, Nidorino © Game Freak, The Pokémon
Company, Nintendo − Page 129: Space Racer © Loriciel Software − Page 131: Comix Zone © Sega ; Earthworm Jim © Doug TenNapel ; Super Mario World © Nintendo − Page 132: Mega man © Capcom − Page 133: Lord
Monarch © Nihon Falcom, Sega, Epoch Co., EMI Music Japan
Chapter 6 − Page 128: The Legend of Zelda: The Minish cap © Nintendo − Page 140: Castlevania © Konami ; Donkey Kong Country 3 © Nintendo ; Shovel Knight © Yacht Club Games ; Megaman X ©Capcom ; Ristar ©
Sega − Page 141: Mercs © Capcom ; Mother 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Pocky & Rocky © Natsume Inc.; Advance Wars © Intelligent Systems, Nintendo ; The Story of Thor 2 © Sega − Page 142: Zombies Ate My
Neighbors © Konami, LucasArts; Mario & Luigi: Superstar Saga © Nintendo, Alphadream ; The Legend of Zelda: A Link to the Past © Nintendo; Goof Troop © Capcom, Disney Interactive − Page 143: The Legend of Zelda: A Link to
the Past, The Legend of Zelda: The Minish Cap © Nintendo − Page 144: Twin Cobra II © Taito Corporation; Contra 3 © Konami; Hotline Miami © Devolver Digital − Page 146: Landstalker © Sega; Final Fantasy, Kingdom Hearts ©
Square-Enix Corporation ; Harry Potter © Warner Bros. Solistice © Rare Ltd. − Page 147: Luminous Arc © Marvelous Inter- active Inc. Kingdom Hearts © Square-Enix Co, Ltd, Disney Interactive − Page 151: Final Fantasy © Square-
Enix Corporation − Page 152: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory, Creatures Inc.; Boktai © Konami; Nox © Westwood Studios, EA Pacific; SimCity (Nintendo) © Maxis, Nintendo, Electronic arts (brand) − Page
153: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory Double Dragon © Technōs Japan, Arc System Works; Pacman © Bandai Namco − Page 154: Pokémon Black/White, Cynthia, Hilbert © Game Freak, The Pokémon
Company, Nintendo; Cyberbots © Capcom; Fatal Fury © SNK Corporation − Page 155: Indiana Jones and the Fate of Atlantis © LucasArts; Saga Frontier, Star Ocean, The World Ends With You © Square Enix Co., Ltd.; Contra ©
Konami − Page 156: The Legend of Zelda: A Link Between Worlds, Pokémoon Diamond Version © Nintendo − Page 157: Chrono Trigger © Square Enix Co., Ltd. − Page 159: Samus Aran, Kreid, Metroid, The Legend of Zelda: the
Minish Cap, Super Mario World 2: Yoshi’s Island © Nintendo

Chapter 7 − Page 161: Dudley, Street Fighter © Capcom ; Pokémon Black2 & White2 Version © Game Freak, The Pokémon Company, Nintendo ; Rosalina, Super Mario © Nintendo− Page 164-165: Jojo’s Bizarre Adventure ©
Hirohiko Araki, Shueisha Inc., Capcom ; Zangief, Dudley, Street Fighter © Capcom− Page 166: Zero, X, Megaman X © Capcom; Sonic The Hedgehog © Sega− Page 167: Fire Emblem © Intelligent Systems, Nintendo ; Drawn to
Life © THQ, 505 Games− Page 168: Pokémon Platinum Version, Charmeleon, Pikachu © Game Freak, The Pokémon Company, Nintendo− Page 169: Knuckles The Echidna © Sega ; Pulseman © Game Freak, Sega− Page 170:
Puyo Puyo, Puyo pop © Sega; Metal Gear Solid 3: Subsistence © Konami− Page 172: Lemmings © Rockstar North Ltd.; Castlevania © Konami
; Shin Megami Tensei © Atlus Co., Ltd.− Page 173: Odin’s Sphere © Vanillaware, Atlus ; Mother 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Alundra © Matrix Software, Sony Interactive Entertainment Inc.− Page 175-176:
Captain Toad © Nintendo − Page 177: Pokémon HeartGold & Soul Silver version © Game Freak, The Pokémon Company, Nintendo− Page 180: Jackie Chan’s action Kung Fu © Hudson Soft, Konami − Page 186: Drawn to
Life © THQ, 505 Games
Chapter 8 − Page 187-188: Metal Slug © SNK Corporation ; Super Metroid, Samus Aran © Nintendo; Darkstalkers © Capcom; Toad © Nintendo − Page 189-190: Iconoclasts © Joakim Sandberg; Metal Slug Attack © SNK
Corporation; The Legend of Zelda: The Minish cap © Nintendo, Capcom; Sonic Mania © Sega− Page 193: Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Braixen, Pokémon © Game Freak, The Pokémon Company,
Nintendo; Metal Slug © SNK Corporation− Page 195: Tingle, The Legend of Zelda © Nintendo; Chikorita, Pokémon © Game Freak, The Pokémon Company, Nintendo − Page 196: The Legend of Zelda: A Link to the Past © Nintendo
− Page 197: Darkstalkers © Capcom; Klonoa © Bandai Namco − Page 198: Iconoclasts © Joakim Sandberg; The Legend of Zelda: The Minish cap
© Nintendo, − Page 199: Pikachu, Pokémon © Game Freak, The Pokémon Company, Nintendo − Page 200: Red Earth © Capcom − Page 201-203: King of Fighters, Metal Slug © SNK Corporation ; Alien Infestation © Sega ;
Iconoclasts © Joakim Sandberg − Page 204: Darkstalkers © Capcom; Jojo’s Bizarre Adventure © Hirohiko Araki, Shueisha Inc. − Page 205: Owlboy © D-pad Studios; Metal Slug © SNK Corporation; Tingle © Nintendo;
Iconoclasts © Joakim Sandberg; Scot Pilgrim © Bryan Lee O’Malley; Zero, X, Mega man © Capcom − Page 206: Aladdin © Virgin Entertainement, Disney Interactive ; Wargroove © Chucklefish Ltd.; Sonic The Hedgehog ©
Sega − Page 207: Diddy Kong © Nintendo; Street Fighter (Alex) © Capcom − Page 208: Samus Aran, Metroid © Nintendo; Mighty Switch Force ©
Wayforward Technologies; Iconoclasts © Joakim Sandberg − Page 209-210: Owlboy © D-pad Studios − Page 211: Fire Emblem © Intelligent Systems, Nintendo; Wargroove © Chucklefish Ltd.; Metal Slug © SNK Corporation
Chapter 9 − Page 213: Castlevania, Richter Belmont © Konami − Page 215: Fire Emblem © Intelligent Systems, Nintendo;− Page 216: Super Mario, Super Mario Bros. 3 © Nintendo
– Page 218-219: Darkstalkers © Capcom ; Kirby Mass Attack © HAL Laboratory, Nintendo; Phantasy Star © Sega, Ace Attorney © Capcom ; Castlevania, Richter Belmont, Alucard © Konami; Metal Slug © SNK Corporation −
Page 220: Street Fighter, Makoto © Capcom ; Iconoclasts © Joakim Sandberg − Page 221: Metal Slug Attack © SNK Corporation; Red Earth © Capcom; Knuckles the Echidna © Sega, Sonic Team − Page 222: Owlboy © D-pad
Studios; Street Fighter © Capcom ; Martial Masters © Andamiro Entertainment, International Games System Co., Ltd. ; Fire Emblem © Intelligent Systems, Nintendo; Icon- oclasts © Joakim Sandberg ; Boogerman © Interplay
Entertainment Corp; Mario & Luigi: Superstar Saga © Nintendo, Alphadream ; Dragon Force © Sega, J-Force; The Mask © Black Pearl Software − Page 223: Street Fighter, Karin, Hsien Ko, Darkstalkers © Capcom ; The Hulk,
Mickey Mouse © Marvel, The Walt Disney Company; Wild Woody © Sega − Page 224-225: Owlboy © D-pad Studios; Metal Slug Attack
© SNK Corporation; Martial Masters © Andamiro Entertainment, International Games System Co., Ltd. ; Freedom Planet © GalaxyTrail; Mighty Switch Force © Wayforward Technologies; − Page 226: Zero, X, Mega Man © Capcom;
Batman NES © Sunsoft Corporation, Detective Comics; Metal Slug Attack © SNK Corporation; − Page 228: Mighty Switch Force © Wayforward Technologies; Metal Slug Attack © SNK Corporation − Page 229: Wargroove ©
Chucklefish Ltd. − Page 230: Darkstalkers, Captain Commando,Street Fighter, Felicia, Chun-li, Ryu, Babyhead © Capcom ; Earthworm Jim © Doug TenNapel − Page 231: One Piece: Great Pirate Colloseum © Eiichiro Oda, Bandai
Namco, Arc System Works − Page 232: Metroid, Samus Aran © Nintendo; Simon Belmont, Castlevania © Konami; Ducktales NES © Capcom, The Walt Disney Company; Treasure Master © ASC Games − Page 233: Metal Slug ©
SNK Corporation − Page 234: Rakugakids © Konami; Super Mario World 2: Yoshi’s Island © Nintendo; Street Fighter, Chun-li ©
Capcom − Page 235: Rayman © Ubisoft Entertainment SA; Ninja Gaiden © Tecmo Co., Ltd.; Mickey Mania © The Walt Disney Company − Page 236: The Legend of Zelda: The Minish Cap, Donkey Kong Country 2 © Nintendo ;
Street Fighter II © Capcom − Page 236: Advance Guardian Heroes © Treasure, Ubisoft

Software (logo, mascots & screenshots)

Graphicsgale © Human Balance ｰ Microsoft Paint XP, Microsoft Paint Vista © Microsoft ｰ Aseprite © David Capello ｰ Pro Motion © Cosmigo ｰ ペイントツールSAI, Easy Paint Tool
SAI © SYSTEMAX Software Development ｰ GIMP, GNU Image Manipulation Program © The GIMP Development Team ｰ Adobe Photoshop CS6, Adobe Flash © Adobe Systems
241
 Ôi không! Bạn đã đọc đến cuối ...

Cảm ơn bạn đã đọc.

Điều này đánh dấu sự kết thúc của Pixel-Logic. Mọi bản cập nhật trong tương lai sẽ có những thay đổi nhỏ.
Nếu bạn muốn được cập nhật về những gì sẽ xảy ra tiếp theo, hãy truy cập pixellogicbook.com.
Nếu bạn có thêm bất kỳ câu hỏi nào, hãy để lại email cho tôi tại pixel.logic@outlook.com
Cảm ơn sự kiên nhẫn và ủng hộ của bạn. Bây giờ ... đã đến lúc sáng tạo với pixel!

(ôi mệt vl, cuối cùng cũng dịch xong. Chúc các bạn đọc luôn bình an, vui vẽ và hạnh phúc trong công việc cũng như bên người
thân và gia đình nha. )

242