Các Kỹ thuật Pixel Art cơ bản
- Hùng Vũ
- Jan 21, 2019
- 13 min read
Xin được tiếp tục loạt bài với phần tiếp theo, về các kỹ thuật cơ bản và khá quan trọng mà một hoạ sĩ pixel art tập sự cần phải lưu tâm. Tuy nhiên, có một điều mà một lần nữa tôi xin phép nhắc lại, đó là bạn hãy học những kỹ thuật này với một tâm thế rằng, khi đã đặt tay vào làm art, thì có nghĩa là gần như tất cả mọi thứ được nêu trong loạt bài sẽ hoạt động và liên kết cùng nhau một cách đồng thời, chứ không phân biệt thành từng phần riêng biệt, do đó đòi hỏi bạn phải biết vận dụng chúng một cách linh hoạt. Ngoài ra, khi nào bạn cảm thấy cần thiết và khi nào bạn thực sự đã đủ trình độ và hiểu rõ được rằng tôi đang làm gì, hãy sẵn sàng gạt bỏ những quy tắc mà bạn thấy cứng nhắc. Nghệ thuật là không biên giới.
Nét
Nét (lines) là một phần gần như không thể thiếu trong một bức tranh pixel. Kể cả nếu bạn là người đã quen với việc bắt đầu vẽ một tấm pixel art bằng cách đổ màu đi chăng nữa, thì sớm hay muộn bạn vẫn sẽ phải đối mặt với nét. Do đó, bạn cần phải hiểu rõ được các nét trong pixel art hoạt động ra sao, và hệ quả thị giác mà chúng gây ra với mắt người là thế nào.
Điều đầu tiên mà bạn cần phải luôn lưu ý, đó là sự nhất quán về độ dày và phong cách của các đường nét. Đa số người mới bắt đầu làm quen với pixel art sẽ bắt đầu bằng cách đi nét—bởi đó là cách quen thuộc vốn đã tồn tại từ quy trình vẽ truyền thống—và kết quả nhận được thường giống như sprite bên trái trong Hình 1.
Các điểm nham nhở (jaggy) hay răng cưa xuất hiện khi một hay nhiều pixel làm gián đoạn một đường nét đều đặn và tự nhiên. Điểm nham nhở cũng có thể xuất hiện khi một nét không được anti-alias (sẽ được nhắc đến ở dưới). Khi người hoạ sĩ chưa có cảm quan về đường nét tốt, thì các cạnh hay các đường nét trong tranh của họ sẽ bị nham nhở, và thường là chúng sẽ tỏ ra rất lộ liễu và khó chịu đối với người nhìn.
Một cách khá cơ bản và dễ nhớ cho người mới, đó là sắp xếp số lượng pixel trên từng chuỗi pixel trên một nét sao cho chúng tăng dần hoặc giảm dần theo thứ tự.
Lưu ý nhỏ là bạn không cần phải lúc nào cũng vẽ các nét bằng cách chấm từng pixel hay từng chuỗi pixel một. Để tiết kiệm thời gian, bạn hoàn toàn có thể đi nét thoải mái như thể bạn đang vẽ tranh bình thường, sau đó bạn chỉ cần dọn dẹp và xoá bớt các pixel thừa đi. Tuy vậy thì kỹ thuật này đòi hỏi bạn phải có cảm quan với các nét cao hơn một chút.
Viền
Đặc biệt đối với các sprite sử dụng trong game—đồng nghĩa với việc sprite sẽ được đặt lên trên rất nhiều các loại background với màu sắc và độ sáng tối khác nhau—thì viền (outline) bao bọc xung quanh sprite trong đa số các trường hợp đều là bắt buộc.
Có một số cách tiếp cận tới outline như sau (xem Hình 4):
Không có outline - cách này ít khi được sử sử dụng, bởi độ nổi của sprite sẽ phụ thuộc rất nhiều vào bản chất của background.
Outline đen - nét ngoài màu đen bao bọc toàn bộ sprite
Outline màu - nét ngoài bao bọc toàn bộ sprite, nhưng không phải là màu đen
Outline màu phụ thuộc (Selective Outlining) - nét ngoài bao bọc (hầu như) toàn bộ sprite, nhưng màu sắc sẽ phụ thuộc vào đổ bóng (shading)
Inline đen (nét trong) - nét ngoài bao bọc toàn bộ sprite, và tại một số vị trí sẽ đi thẳng vào bên trong sprite và trở thành nét trong.
Cá nhân tôi khuyên các bạn không nên sử dụng màu đen làm outline, và tốt hơn hết là không nên sử dụng nét trong màu đen. Màu đen là màu cực điểm, do đó nó rất dễ gây sự chú ý của thị giác và làm hỏng bức tranh trong đa số các trường hợp. Ba phương án tốt nhất bạn có thể chọn đó là (1) không sử dụng outline (2) outline phụ thuộc hoặc (3) inline có màu. Nếu bạn đang làm pixel art cho game, thì khả năng cao là bạn vẫn sẽ phải sử dụng outline, do đó phương án (1) chỉ dành cho một số trường hợp khi bạn có quyền điều khiển background, ví dụ như khi bạn đang vẽ một bức tranh của cá nhân mình.
Outline phụ thuộc (xem Hình 5) là một cách để hoà giải rất hay giữa hai vấn đề: một là việc tự dưng xuất hiện một thứ outline lù lù bao bọc xung quanh sprite sẽ khiến nó nhìn rất kỳ cục và mất tự nhiên, và hai là nếu không có outline làm trung gian (neutralizer) giữa background và sprite thì trong các trường hợp khi màu sắc của background gần với màu của sprite thì sprite sẽ bị chìm vào trong background—rất không tốt nếu đó là một game. Để thực hiện outline phụ thuộc, bạn chỉ việc quyết định màu của các pixel trên outline sao cho tương ứng với nguồn sáng (light source) mà bạn đã sử dụng để quyết định cách đổ bóng với màu sắc bên trong sprite. Lẽ dĩ nhiên, đã là outline thì màu của nó phải tối hơn màu mà nó đang bao bọc xung quanh, vì thế nên bạn cần lưu ý không bao giờ được để cho màu của outline trùng hoặc sáng hơn màu mà nó đang bao quanh. Theo kinh nghiệm cá nhân tôi, bạn thường chỉ cần lùi lại một nấc màu trên thang màu (color ramp) của bạn là đủ. Chúng ta sẽ đi sâu vào màu sắc và cách tạo lập bảng màu và thang màu ở phần sau.
Anti-Aliasing
Anti-Aliasing là một từ chuyên ngành được sinh ra từ kỹ thuật đồ hoạ máy tính cho đến nay vẫn được sử dụng trong các game 3D hiện đại. Nói một cách đơn giản, anti-aliasing là phương thức khử răng cưa xảy ra khi hai mảng mang hai màu cách xa nhau trên bảng màu được xếp cạnh nhau. Đối với đồ hoạ digital cao cấp hơn ngày nay, anti-aliasing hầu như được xử lý hoàn toàn bởi máy tính. Tuy nhiên với pixel art, vì bản chất của nó là tận dụng màu sắc một cách hiệu quả tối đa, nên (phần lớn) lượng anti-aliasing bạn sẽ phải thực hiện bằng tay. Về cơ bản, bạn khử răng cưa bằng cách sử dụng một hoặc nhiều màu trung gian (neutralizer) giữa hai mảng màu đối lập nói trên nhằm làm mượt sự chuyển giao giữa chúng, khiến cho trải nghiệm thị giác của chi tiết đó trở nên thoải mái hơn.
Trong một số các sprite lớn hơn hoặc các sprite có hình dáng đặc trưng hơn, thì bạn sẽ nhận thấy tần suất xuất hiện của các “bậc thang" pixel dài sẽ lớn hơn. Một điều tối quan trọng bạn cần lưu ý, là khi bậc thang pixel càng dài, thì bạn càng cần phải sử dụng nhiều màu hơn để khử răng cưa. Nếu bảng màu của bạn không có quá nhiều màu để bạn sử dụng cho việc khử răng cưa, thì cách tốt nhất là chỉ sử dụng màu đó để khử răng cưa với cường độ như bình thường, chứ tuyệt đối đừng kéo dài nó quá nhiều. Xem ví dụ trong Hình 8 để hình dung.
Đối với các đường chéo không đồng nhất về số lượng pixel trên từng cụm pixel, bạn có thể sử dụng cách áp dụng nhiều anti-alias cho các bậc thang dài hơn, và áp dụng ít anti-alias cho các bậc thang ngắn hơn. Hoặc thậm chí là không cần áp dụng anti-alias cho các bậc thang ngắn.
Một số tác phẩm điển hình thể hiện cách các hoạ sĩ áp dụng anti-aliasing trong pixel art.
Trong phần tiếp theo này, chúng ta sẽ nói một chút về thứ thuốc gây nghiện kinh hoàng đã đốt cháy quá nửa tuổi thanh xuân tươi đẹp của tôi cũng như rất nhiều những họa sĩ pixel trẻ khác, đó chính là Dithering.
Dithering
Hay còn gọi là alpha gradient của thập kỷ 90. Dithering là các cụm pixel có khuôn mẫu được thực hiện để làm mượt sự chuyển đổi giữa hai màu khác nhau mà không sử dụng thêm một màu nào khác. Trong thời đại của màn hình CRT, dithering là một kỹ thuật vô cùng hữu dụng và mạnh mẽ, bởi mọi thứ khi được xuất lên màn hình CRT đều được làm mờ đi. Trong thời đại ngày nay, với các màn hình hiển thị các hạt pixel rõ nét, dithering không còn giữ được độ hữu dụng lớn như ngày xưa. Tuy vậy, nó vẫn là một công cụ được rất nhiều họa sĩ pixel tin dùng để làm texture.
Như trong Hình 10, bạn có thể thấy các mẫu (pattern) dithering khác nhau nhằm thể hiện các mực độ pha màu hay là các mức độ “trong suốt” của màu sắc qua từng mẫu. Mẫu dithering phổ biến nhất bạn thường thấy đó là mẫu dithering 50%, hay còn gọi là checkerboard như bạn có thể thấy ở trên.
Tuy nhiên có một điểm bạn cần lưu ý, đó là khi độ tương phản giữa hai màu gốc càng lớn, thì các mảng dithering sẽ càng hiện ra một cách rõ nét và lộ liễu hơn—một điều bạn không bao giờ muốn, nếu mục đích làm dithering của bạn là để làm mượt màu. Đồng thời, các loại mẫu khác ngoài mẫu 50% cũng sẽ dễ lộ ra rõ hơn. Trong một số trường hợp khi độ tương phản giữa hai màu gốc quá lớn như bạn có thể thấy trong Hình 12, thì tốt hơn hết là bạn nên sử dụng thêm ít nhất 1 màu mới thay vì sử dụng dithering.
Tuy vậy, như đã nói, ngày nay vẫn có cách để các họa sĩ tận dụng được những thế mạnh của dithering—tiết kiệm màu sắc trên bảng màu, qua đó giúp họa sĩ điều khiển màu sắc trên một bức tranh dễ dàng hơn và giúp giữ cho bức tranh có sự đồng nhất về màu sắc, và tạo ra các loại texture; những thế mạnh rất quan trọng.
Các phương thức Dithering
Ngoài phương thức dithering checkerboard hoặc theo các pattern truyền thống trong Hình 10, các họa sĩ cũng có các phương thức dithering khác, tùy thuộc vào mục đích sử dụng hay phong cách (art style) của họ.
Random Dithering
Đúng như tên gọi, phương thức dithering này gần như không có quy tắc gì. Việc duy nhất bạn phải quan tâm chỉ là làm sao cho màu sắc được chuyển đổi một cách mượt mà nhất có thể.
Tuy vậy, phương thức này không phổ biến và cũng không được khuyến khích sử dụng, do mức độ điều khiển của người họa sĩ đối với bức tranh trên cấp độ pixel bị giảm thiểu đáng kể với random dithering, khiến người nhìn có cảm giác người họa sĩ có phần ... lười biếng. Bởi sự thực là thường bạn chỉ cần sử dụng công cụ Spray Can là có thể thực hiện được.
Interlaced Dithering
Interlaced Dithering xảy ra khi bạn có 2 hay thậm chí là nhiều hơn các lớp (layer) dithering chồng lên nhau. Nếu tinh ý bạn có thể nhận thấy interlaced dithering xuất hiện trong bức tranh header của bài viết này rất nhiều. Ngoài ra kỹ thuật này cũng được các họa sĩ pixel hiện đại sử dụng rất nhiều trong việc vẽ mây, sương và núi trong background của một bức tranh hoặc environment trong game.
Kỹ thuật interlaced dithering trong thời đại cũ là một trong những kỹ thuật khó thực hiện nhất, bởi nó yêu cầu người họa sĩ phải nắm cực kỳ rõ quy luật và các mối liên hệ giữa các layer với nhau để xác định được màu sắc của từng-pixel-một (bởi mỗi pixel chỉ có thể mang một giá trị màu duy nhất, và màu đó phải tồn tại trong bảng màu xác định sẵn của họa sĩ). Rất may là ngày nay, với đa phần các công cụ chỉnh sửa ảnh và pixel art đều đã hỗ trợ chức năng layer (trừ MS Paint; bạn vứt cái chương trình đấy khẩn trương ra khỏi máy giúp mình) và bạn có thể tận dụng nó để điều khiển các layer dithering dễ dàng hơn.
Stylized Dithering
Đây là phương thức dithering hiện nay được sử dụng phổ biến và rộng rãi nhất. Đối với cá nhân mình, đây cũng là phương thức dithering hiện đại đáng được thử nghiệm nhất. Nếu trong pixel art cũng có những trường phái mỹ thuật như mỹ thuật truyền thống, mình thiết nghĩ stylized dithering cũng sẽ là đặc trưng của một trường phái vậy.
Stylized dithering là khi bạn sử dụng các pattern đặc biệt, có phong cách và có tổ chức, liên tục lặp lại để làm dithering. Bạn cũng hoàn toàn có thể áp dụng random dithering một phần, và tái sử dụng các đoạn random dithering để tạo ra cảm giác rằng bạn đang làm chủ đoạn dithering thay vì chỉ sử dụng spray can để ... xịt bừa lên bức tranh làm dithering.
Khi đã quen với stylized dithering, bạn sẽ nhận thấy dithering là một công đoạn cực kỳ thú vị và rất gây nghiện. Tuy vậy đừng vì thế mà dithering quá đà. Vấn đề của dithering chúng ta sẽ nhắc đến trong bài sau.
Có thể bạn cần biết
1. Texture vs. Gradient
Đừng nhầm lẫn giữa texture và gradient. Texture là các hoa văn trên bề mặt phẳng, còn gradient là một dãy chuyển đổi màu từ màu này sang màu khác. Khi bạn đang thực hiện dithering, bạn cần hiểu rõ là mục đích của mình đang làm là gì, và hệ quả thị giác của nó sẽ thế nào. Đôi khi dithering vừa được dùng để làm gradient, lại vừa được dùng để làm texture (ví dụ như cỏ hay các bề mặt nhám) nhưng nói vậy bạn vẫn cần phải nắm được quyền điều khiển của bức tranh.
2. Che giấu phong cách đổ bóng Cel-Shading
Ngoài ra, bạn có thể sử dụng dithering như một cách để phần nào làm mờ đi cách đổ bóng gần như là bản chất của pixel art, đó là cel-shading (do số lượng màu thường giới hạn) mà không cần phải sử dụng thêm bất kỳ màu nào khác.
3. Dithering không phải chỉ riêng Pixel Art mới có
Sử dụng các dấu chấm hay các nét để đổ bóng hay tạo texture là kỹ thuật mà các họa sĩ từ truyền thống đến hiện đại đã tin dùng từ lâu, có chăng chỉ là với những cái tên khác như line-shading hay pointillism.
Phần tiếp theo sẽ là một bài khá ngắn để tổng hợp lại một số những sai lầm hoặc những hiểu nhầm mà các họa sĩ pixel mới dễ mắc phải về các kỹ thuật chúng ta đã giới thiệu trong các phần ở trên.
Tầm quan trọng của nhóm Pixel
Cũng giống như trong môn Cờ Vây, mỗi một hạt pixel trong pixel art đều vô nghĩa nếu như không có sự tồn tại của những hạt pixel khác, và (gần như) không có hạt pixel nào quan trọng hơn hạt pixel nào. Ta cũng có thể nói pixel là loài động vật sống theo bầy đàn(?) Như trong Hình 23, các hạt pixel trong hình bên trái chỉ đơn giản là nhiễu (noise), gây đánh lạc hướng chú ý. Nhưng một khi đã được ghép vào cùng các pixel khác, thì chúng lại trở thành anti-aliasing, qua đó mang ý nghĩa quan trọng và hữu ích hơn.
Tuy vậy, như tôi đã mở ngoặc ở trên, trong một số trường hợp rất cụ thể, bạn vẫn cần có những hạt pixel riêng lẻ để đạt được hiệu quả mong muốn. Đa số các trường hợp này là khi bức tranh có kích cỡ rất nhỏ, hoặc chi tiết bạn muốn thực hiện chỉ cần duy nhất 1 pixel đơn lẻ không hơn không kém.
Banding
Banding, hiểu một cách cơ bản, là khi các pixel trên màn hình xếp hàng đều tăm tắp với nhau, qua đó khiến cho người nhìn cảm nhận được rõ ràng sự tồn tại của pixel, của lưới pixel (pixel grid) trên màn hình máy tính. Lỗi banding có một vài trường hợp điển hình khác nhau.
Hugging Anti-Aliasing
Trong Hình 3 là một khối màu đỏ nằm trên nền background màu đen, được khử răng cưa bằng màu đỏ tối. Trong trường hợp này, bạn có thể thấy rằng mặc dù họa sĩ đã sử dụng màu AA, nhưng răng cưa vẫn xuất hiện, đồng thời khối màu này trở nên giống gradient hơn là một khối màu sắc cạnh.
Tất nhiên, nếu viền đỏ tối này là outline, và trong trường hợp cụ thể khi sprite được đặt trên một cái background tối như vậy, thì đành phải chịu. Nhưng nếu được thì tốt nhất bạn nên tránh tình trạng này.
AA Banding
Kể cả khi AA của bạn có hơn 1 màu, thì banding vẫn có thể xảy ra. Cách tốt nhất là bạn nên tránh việc tối ưu hóa khử răng cưa quá đà đến mức màu khử răng cưa của bạn dài ngang bằng bậc thang mà bạn muốn khử răng cưa.
Fat pixel
Fat pixel (pixel béo?) có thể xuất hiện trong một cụm 4 pixel, hoặc trong một nhóm các nét pixel béo, và tệ hơn nữa là các nét liên tục đi đều nhau thẳng hàng như trong hình.
Skip-1 Banding
Kể cả khi đã tách nhau ra đến 1 pixel rồi, thì banding vẫn có thể xảy ra.
Banding chéo
Banding cũng có thể xảy ra với một hàng pixel khử răng cưa chéo, chứ không chỉ có mỗi ngang và dọc.
Mục tiêu Dithering
Tuy bài trước đã nhắc đến vấn đề này, nhưng vẫn xin nhắc lại là bạn cần phải xác định rõ được mục tiêu khi sử dụng dithering là gì. Nếu tất cả những gì bạn muốn chỉ là làm mượt sự chuyển giao giữa hai màu tương phản, thì bạn nên sử dụng dithering ở mức hạn chế nhất có thể. Nếu không, dithering sẽ tạo nên một loại texture bạn không muốn có trên bề mặt.
Pillow Shading
Cái này đa phần vẫn là một dạng lỗi thuộc về hội họa nói chung thì đúng hơn, nhưng vẫn cần phải lưu ý. Đổ bóng (shading) là một công đoạn không thể thiếu để tạo ra chiều sâu cho một bức tranh. Tuy vậy, việc tối quan trọng bạn cần phải lưu tâm khi đổ bóng đó là nguồn sáng (light source), và bạn bắt buộc phải thực hiện đúng theo quy tắc ánh sáng của nó.
Pillow shading xảy ra khi người họa sĩ không quan tâm đến nguồn sáng và cách các vật thể ba chiều hay các bề mặt của vật thể đó tương tác với nguồn sáng, mà chỉ quan tâm đến hình dạng của nó. Kết quả xảy ra sẽ là một dạng gradient với các màu đổ bóng lan đều từ ngoài vào trung tâm bề mặt hoặc từ trung tâm bề mặt ra ngoài, như thể nguồn sáng đang rọi thẳng vào trung tâm của bề mặt đó.
Tuy vậy, vấn đề không phải là bạn không được phép đặt nguồn sáng vào trung tâm. Mà chỉ đơn giản là bạn cần lưu ý đến hình khối ba chiều của vật thể đó và cách nó phản chiếu ánh sáng theo nguồn sáng đó.
Bài viết có sử dụng hình ảnh từ PixelJoint: The Pixel Art Tutorial & dự án Pixel Logic.
Comments