設計圖像素和開發像素_游戲開發的像素藝術設計

設計圖像素和開發像素

Pixel art is a large part of the legacy of game development. Every Pokemon game up until their X/Y series was rendered entirely with pixel art, Ragnarok Online (2000) was one of the first commercial works to feature 3D rendering along side pixel art characters. Even when early games tried to push the limits of 3D rendering such as Doom or Quake, they relied on Pixel Art based billboards to render their characters.

像素藝術是游戲開發遺產的很大一部分。 直到X / Y系列中的所有口袋妖怪游戲都完全使用像素藝術進行渲染,《仙境傳說Online》(2000年)是首批在側面像素藝術角色上進行3D渲染的商業作品之一。 即使早期的游戲試圖突破諸如Doom或Quake之類的3D渲染的極限,他們也依靠基于Pixel Art的廣告牌來渲染角色。

局限性和準則 (Limitations & Guidelines)

Colors have 4 channels, R, G, B, and Alpha (transparency), and most modern devices use an 8 bit per channel (for a maximum of 256 possible brightness levels per channel) for image files and displays. On old game consoles like the Gameboy, Super Nintendo, Genesis, and even the GBA, developers had to deal with tighter color requirements. The Gameboy only had 4 shades to choose from, the Gameboy Color had a 5-bit (for a max of 32 possible brightness levels) per channel display, and could display a maximum of 56 colors, though normally it was far less. Pixel art was born from these limitations.

顏色具有4個通道 (R,G,B和Alpha(透明度)),大多數現代設備使用每個通道8位(每個通道最多256個可能的亮度級別 )來存儲圖像文件和顯示。 在諸如Gameboy,Super Nintendo,Genesis甚至GBA之類的舊游戲機上,開發人員必須應對更嚴格的顏色要求。 Gameboy僅具有4種陰影可供選擇,Gameboy顏色每通道顯示具有5位(最多32種可能的亮度級別),并且最多可以顯示56種顏色 ,盡管通常它要少得多。 像素藝術就是從這些限制中誕生的。

In addition, older devices had limited amounts of ram. The Commodore 64’s resolution was 320 by 200 pixels, and so if you wanted a 4 bit display, you would need 4 bits for every pixel (64,000) on the screen, for a grand total of ((64000 * 4)/8)/1000 = 32kb of ram, which was often times more than the amount of ram in the entire computer!

另外,較舊的設備的內存數量有限。 Commodore 64的分辨率為320 x 200像素 ,因此,如果要顯示 4位 ,則屏幕上的每個像素(64,000)需要4位 ,總計((64000 * 4)/ 8)/ 1000 = 32kb的ram ,通常比整個計算機中的ram還要大!

In addition, on the Nes, sprites were very small images, so often times you would be limited by the size a sprite could be, constrained to a 8x8 grid. You could only have 64 of these sprites on a screen at any given time.

另外,在Nes上,子畫面是非常小的圖像,因此通常您會受到子畫面大小的限制,并被限制在8x8網格中。 在任何給定時間,屏幕上只能有64個這些精靈。

We’re now free to use all 2563 colors if we want, make pixel art at any size, but bear in mind restrictions are what makes pixel art distinct from other forms of art. Even to this day we have places like PixelJoint keeping these restrictions alive.

現在,我們可以隨意使用所有2563顏色,可以制作任何尺寸的像素畫,但是請記住,限制使像素畫與其他形式的畫有所不同。 直到今天,我們都有像PixelJoint這樣的地方可以保留這些限制。

像素藝術與 數碼繪畫 (Pixel Art Vs. Digital Paintings)

Pixel Art is an image that was designed pixel by pixel.

像素藝術是按像素設計的圖像。

It’s different from other forms of art like digital painting or line art in that every pixel is important, whereas those forms of art avoid that level of precision.

它與數字繪畫或線條藝術等其他藝術形式的不同之處在于,每個像素都很重要,而這些藝術形式卻避免了這種精確度。

調色板 (Palette)

A palette is a color ramp, from low to high, and should be characterized by complex, hue shifting tones. You shouldn’t have a pallette that’s linear but rather, have one that mixes colors together.

調色板是從低到高的色階,其特征應在于復雜的色調偏移色調。 您不應該擁有線性的調色板,而應該擁有將顏色混合在一起的調色板。

Most artists start with an average color for the piece that they’re doing, then add highlights and shadows to that.

大多數藝術家從他們正在做的作品的平均顏色開始,然后向其添加高光和陰影。

Image for post

A good idea is to use complementary colors to help blend colors together. Purple or Teal work well for shadows, whereas yellows and whites work for specular highlights.

一個好主意是使用互補色來幫助將顏色混合在一起。 紫色或深綠色適合陰影,黃色和白色適合鏡面反射高光。

It’s best to have a maximum of 15 colors per sprite (with transparency being the 16th color).

最好每個精靈最多包含15種顏色(透明度為第16種顏色)。

輪廓 (Silhouette)

Image for post

The lead cartoonist for Spongebob Squarepants, Sherm Cohen, suggested that silhouettes should communicate the idea of a character’s action. This applies not only to animation, but also to all forms of art, including pixel art, the silhouette is what makes or breaks a piece.

海綿寶寶的首席漫畫家謝爾姆·科恩(Sherm Cohen)建議,輪廓應傳達角色動作的想法。 這不僅適用于動畫,還適用于所有形式的藝術,包括像素藝術,輪廓是決定成敗的要素。

You want your silhouette to be solid, with no jagged lines, and would paint on top of that silhouette.

您希望自己的輪廓是堅實的,沒有鋸齒狀的線條,并會在該輪廓上繪畫。

Image for post

One technique to make this easier is to use Layer masks, in Photoshop, this is done by Layer > Layer Mask > From Transparency. This will make painting easier by letting you draw strokes without worrying about the silhouette you worked so hard on.

一種簡化方法是在Photoshop中使用圖層蒙版,方法是通過“ 圖層”>“圖層蒙版”>“來自透明膠片”來完成 。 通過讓您繪制筆觸而不必擔心您辛苦工作的輪廓,這將使繪畫變得更容易。

抗鋸齒和可讀性 (Anti-Aliasing and Readability)

Since pixel art is normally small, it can become difficult to communicate intricate details within a small space, so an artist is fighting between anti-aliasing and readability.

由于像素圖通常很小,因此在狹小的空間內傳達復雜的細節可能會變得困難,因此藝術家正在抗鋸齒和可讀性之間作斗爭。

Anti-Aliasing is the process of making edges smoother by blending them with their surrounding pixels.

消除鋸齒是通過將邊緣與周圍像素混合來使邊緣更平滑的過程。

Readability is how easily you can distinguish details in an image. Generally, The more anti-aliased an image, the less readable it is.

可讀性是您可以輕松區分圖像中的細節的方式。 通常,圖像的抗鋸齒度越高,可讀性就越差。

One way to improve readability is to add outlines to your sprite. That’s not always a good idea, such as for environments, but for characters and objects, outlines are a great stylistic choice.

一種提高可讀性的方法是在您的Sprite中添加輪廓。 對于環境而言,這并不總是一個好主意,但是對于字符和對象而言,輪廓是一個不錯的樣式選擇。

底紋 (Shading)

Image for post

Dithering is to gradate colors together via a pattern. Generally you want to avoid mechanical dithering and op for a pattern based effect instead.

抖動是通過圖案將顏色一起著色。 通常,您要避免機械抖動,而是選擇基于圖案的效果。

In this sprite of Perfect Chaos from Sonic Adventure DX, I dithered the image with intricate water simulation. Proper anti-aliasing and careful shapes and edges made the water look almost photo-realistic.

在Sonic Adventure DX的Perfect Chaos中,我通過復雜的水模擬對圖像進行了抖動處理。 正確的抗鋸齒以及仔細的形狀和邊緣使水看起來幾乎像照片一樣真實。

后期處理 (Post-Processing)

Often times your original choice of colors wasn’t the best one, so post-processing could serve as a way to correct your colors and make them stand out.

通常,您最初選擇的顏色并不是最好的顏色,因此后期處理可以作為校正顏色并使它們脫穎而出的一種方法。

Image for post

Curves — The curve tool is a method of adjusting the ratio of colors on an image. On Photoshop this can be found at Image > Adjustments > Curves, and on Gimp at Colors > Curves.

曲線-曲線工具是一種調整圖像上顏色比率的方法。 在Photoshop中,可以在“ 圖像”>“調整”>“曲線”中找到它 ,在Gimp的“ 顏色”>“曲線”中可以找到它

Image for post

Levels — The levels tool is a simple method of adjusting the brightness of colors. The middle handle adjust the mid color balance, the left handle adjusts the darks, the right handle adjusts the highlights. Curves and levels are interchangeable so use whichever you prefer.

色階—色階工具是一種調整顏色亮度的簡單方法。 中部手柄調節中間顏色平衡,左手柄調節暗度,右手柄調節高光。 曲線和水平線是可互換的,因此請使用您喜歡的任何一種。

Image for post

Color Balance — A method of changing the general tonalities of an image. Movie makers often adjust the color balance to have cyan shadows and red orange highlights. Look at any movie and notice just how blue it is!

色彩平衡—一種更改圖像一般色調的方法。 電影制片人通常會調整色彩平衡,使它們具有青色陰影和紅色橙色高光。 看任何電影,請注意它有多藍!

Image for post

Color Replacement — Sometimes what you really need is to manually replace colors. You can do this by using the color selection tool in Gimp (There’s no equivalent functionality in photoshop), just click the icon with a hand and a blue, red, and green square, set your threshold to 0, and select the colors you want to replace. Then use the fill tool and fill the whole selection.

顏色替換-有時您真正需要的是手動替換顏色。 您可以通過使用Gimp中的顏色選擇工具(在photoshop中沒有等效功能)來做到這一點,只需用一只手單擊圖標,然后選擇藍色,紅色和綠色正方形,將閾值設置為0,然后選擇所需的顏色即可。取代。 然后使用填充工具填充整個選擇。

Image for post

To measure the number of colors on your sprite, you can use a tool like Gimp’s Colorcube Analysis.

要測量子畫面上的顏色數量,可以使用Gimp的Colorcube Analysis之類的工具。

更多資源 (More Resources)

  • PixelJoint.com remains the top pixel art community.

    PixelJoint.com仍然是頂級的像素藝術社區。

  • The Twitter account @PixelDailies is a forum for individuals who want to share pixel art with each other.

    Twitter帳戶@PixelDailies是一個論壇,供希望彼此共享像素藝術的個人使用。

翻譯自: https://medium.com/@AlainGalvan/pixel-art-design-for-game-dev-32d22c83a296

設計圖像素和開發像素

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275145.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275145.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275145.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

CF1100F Ivan and Burgers

CF1100F Ivan and Burgers 靜態區間,選取任意個數使得它們的異或和最大 \(n,\ m\leq5\times10^5,\ a_i\in[0,\ 10^6]\) lxl ST表,線性基 如果暴力維護線性基,線段樹時間復雜度為 \(O(n\log^2n)-O(\log^3n)\) 由于重復元素對答案沒有影響&…

深入淺出Nintex——更新PeopleandGroup類型的Field

轉載于:https://www.cnblogs.com/mingle/archive/2011/11/25/2263199.html

從 vue-cli 源碼中,我發現了27行讀取 json 文件有趣的 npm 包

1. 前言大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。已進行四個月了,很多小伙伴表示收獲頗豐。想學源碼,極力推薦訂閱我寫…

自定義view示例_自定義404頁的10個示例(從最佳到最差)

自定義view示例自定義404頁面 (Custom 404 pages) To customize or not to customize your 404 page? I hope by now you know the answer is that, yes, under essentially all circumstances you should customize your 404 page. 404 errors occur when someone attempts t…

BTF:實踐指南

本文地址:BTF:實踐指南 | 深入淺出 eBPF 1. BPF 的常見限制 1.1 調試限制1.2 可移植性2. BTF 是什么?3. BTF 快速入門 3.1 BPF 快速入門3.1 BTF 和 CO-RE4. 結論 BPF 是 Linux 內核中基于寄存器的虛擬機,可安全、高效和事件驅動…

python 混入類MixIn

寫在前面 能把一件事情說的那么清楚明白,感謝廖雪峰的官方網站。 1.為什么要用混入類?(小白入門) 繼承是面向對象編程的一個重要的方式,因為通過繼承,子類就可以擴展父類的功能。 step1: 回憶一下Animal類層…

關于字符串流的學習(c++)

/* 字符串流 在字符數組中可以存放字符,也可以存放整數、浮點數以及其他類型的數據。在向字符數組存入數據之前,要先將數據從二進制形式轉換為ASCII代碼,然后存放在緩沖區,再從緩沖區送到字符數組。從字符數組讀數據時,先將字符數組中的數據送到緩沖區,在賦給變量前要先將ASCII…

估計很多前端都沒學過單元測試~

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。已進行四個月了,很多小伙伴表示收獲頗豐。想學源碼,極力推薦訂閱我寫的《學習…

xd可以用ui動效效果嗎_通過動畫使UI設計栩栩如生:Adobe XD和After Effects

xd可以用ui動效效果嗎Note — If you don’t fancy splashing out on an Adobe license, you can trial their products for 14 days each. That should give you more than enough time to play, check it out.注意—如果您不愿意花錢購買Adobe許可證,則可以分別試…

BookMarklet:瑞士軍刀你用了嗎?

Bookmarklet 是一段隱藏在鏈接后面的js代碼,可以收藏在收藏夾。通過這段代碼,我們可以跨瀏覽器(當然,也跨平臺)實現一些工具。比起瀏覽器插件來說,使用更加方便。典型的,dict.cn 網站的工具和有…

第十二周編程總結

這個作業屬于那個課程C語言程序設計II這個作業要求在哪里https://pintia.cn/problem-sets/1127748174659035136/problems/1127749414029729792我在這個課程的目標是更好的學習函數這個作業在那個具體方面幫助我實現目鍛煉了我的編程能力參考文獻c語言程序設計26-1 計算最長的字…

可能是全網首個前端源碼共讀活動,誠邀加入學習

大家好,我是若川。從8月份到現在11月結束了。每周一期,一起讀200行左右的源碼,撰寫輔助文章,截止到現在整整4個月了。由寫有《學習源碼整體架構系列》20余篇的若川【若川視野公眾號號主】傾力組織,召集了各大廠對于源碼…

現代游戲中的UX趨勢

ux設計中的各種地圖游戲UX (GAMES UX) Even though websites and games have matured side-by-side over the past few decades, games have a long and detailed history of user experience. Sure, it was scrappy and fairly rudimentary initially, but the only way you c…

SQL Server 2008 安裝過程中遇到“性能計數器注冊表”..

Windows 2008 系統 SQL Server 2008 性能計數器注冊表作者: 來源: 時間:2010-6-13 完美集成、增強 KindEditor HTML 編輯器今天跟隨部門老大去現場學習,安裝 Windows208 下 SQL Server2008&#xff0c…

你提交代碼前沒有校驗?巧用gitHooks解決

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。已進行四個月了,很多小伙伴表示收獲頗豐。想學源碼,極力推薦訂閱我寫的《學習…

Linux下自動化測試環境的搭建

1.安裝Linux虛擬機,詳情參考 https://blog.csdn.net/qq_22770715/article/details/78558374 https://www.cnblogs.com/Q277227/p/8176564.html 1.1 需要確定IP ,使用 ifconfig 1.2 linux的用戶名跟密碼; 1.3 確定可以遠程ssh登錄&…

code craft_以Craft.io為先—關于我們行業的實踐職業道路的系列

code craft重點 (Top highlight)For the past two decades, digital product design / UX has been shifting to become a more strategic discipline within organizations. Partially because business leaders have started to pay attention to how design-driven companie…

Nginx+httpd反代實現動靜分離

什么是動靜分離為了提高網站的響應速度,減輕程序服務器(apachephp,nginxphp等)的負載,對于靜態資源比如圖片,js,css,html等靜態文件,我們可以在反向代理服務器中設置&…

(建議收藏)前端面試必問的十六條HTTP網絡知識體系

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。已進行四個月了,很多小伙伴表示收獲頗豐。想學源碼,極力推薦訂閱我寫的《學習…

了解 DB2 Version 9.5 中的全局變量(轉)

轉自:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0711zubiri/ 簡介 在關系數據庫系統內部,應用程序和實際數據庫之間的主要交互都是以會話或連接的 SQL 語句形式來實現的。過去,為了在相同會話中實現不同 SQL 語句之…