יוצר פיקסל ארט

מהו יוצר פיקסל ארט?

יוצר פיקסל ארט הוא כלי ציור שבנוי סביב רשת קבועה: במקום משיכות מכחול חופשיות, מניחים פיקסלים בודדים, משבצת אחר משבצת. המגבלה הזו היא כל הקסם של פיקסל ארט: ספרייטים של משחקים, אייקונים רטרו, אווטרים ואיורים בסגנון 8 ביט נוצרים כולם מבחירה מכוונת של כל פיקסל ופיקסל.

העורך הזה נותן לכם את ערכת הכלים הקלאסית של עורך ספרייטים: עיפרון, מחק, מילוי ודוגם צבע על רשתות מ-8x8 עד 64x64, וגם אנימציה פריים אחר פריים עם תצוגה מקדימה חיה. ייצאו את התוצאה כ-PNG חד בכל גודל, כ-GIF מונפש או כגיליון ספרייטים מוכן למנוע משחק.

ומכיוון שזה Coddy, הציור שלכם הוא גם קוד. לחיצה אחת הופכת את הרשת למערך דו ממדי ב-Python, לקטע קוד של canvas ב-JavaScript, לאמנות box-shadow ב-CSS, ל-SVG או ל-CSV שאפשר לפתוח בגיליון אלקטרוני. דרך כיפית לראות שתמונות הן בעצם מערכים של ערכי צבע.

מה תלמדו תוך כדי יצירת פיקסל ארט

• תמונה היא מערך דו ממדי: כל פיקסל הוא איבר אחד עם ערך צבע. ייצוא הקוד מראה את הציור שלכם בדיוק כך, שורות ועמודות של קודי hex.
• פלטות קטנות נראות טוב יותר. ספרייטים קלאסיים משתמשים ב-4 עד 32 צבעים; ההגבלה מכריחה צורות נקיות וצלליות קריאות.
• אנימציה היא רק פריימים. מחזור הליכה או מצמוץ הם קומץ רשתות שונות מעט שמוצגות ברצף, וייצוא ה-GIF מנגן אותן במהירות שבחרתם.
• הגדלת פיקסל ארט דורשת אינטרפולציית nearest-neighbor. ייצאו ב-16x או ב-32x והמשבצות יישארו חדות לגמרי; הגדלה חלקה הייתה מטשטשת אותן.

איך ליצור פיקסל ארט, צעד אחר צעד

1. 1

   בחרו גודל רשת

   התחילו בקטן: 16x16 או 32x32. רשתות קטנות מכריחות צורות פשוטות וקריאות, ורוב הספרייטים הקלאסיים של משחקים הם 16x16 או 32x32. אפשר להחליף גודל אחר כך בלי לאבד את הציור.

2. 2

   שרטטו את הצללית

   השתמשו בעיפרון לקווי מתאר ובכלי המילוי לשטחים גדולים. ציירו קודם את הצורה הכללית בצבע אחד, ואז הוסיפו פרטים. לחיצה ימנית (או המחק) מנקה פיקסל.

3. 3

   הצללה עם פלטה קטנה

   בחרו 2 או 3 גוונים לכל חומר: בסיס, הארה וצל. הפלטה המובנית מסודרת כך שקל למצוא את הסולמות האלה, ודוגם הצבע אוסף כל צבע שכבר נמצא על הקנבס.

4. 4

   הנפישו (אופציונלי)

   שכפלו את הפריים, הזיזו כמה פיקסלים ולחצו על הפעלה. שניים או שלושה פריימים מספיקים למצמוץ, לקפיצה או להבהוב של להבה.

5. 5

   ייצוא

   הורידו PNG בהגדלה של עד 32x, GIF מונפש או גיליון ספרייטים עם כל הפריימים בשורה. או פתחו את חלונית הקוד והעתיקו את היצירה כ-Python, JavaScript, CSS, SVG או CSV.

טבלת עזר לפיקסל ארט

גדלי קנבס ופורמטי ייצוא נפוצים, ומתי להשתמש בכל אחד.

דוגמאות פיקסל ארט לנסות

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

טעויות נפוצות בפיקסל ארט

• מתחילים על רשת 64x64. קנבסים גדולים מסתירים צורות חלשות: למדו על 16x16, שבה כל פיקסל הוא החלטה.
• משתמשים ביותר מדי צבעים. אם בספרייט שלכם יש 40 צבעים, אין לו סגנון. בחרו סולם קטן לכל חומר והיצמדו אליו.
• מגדילים ייצוא עם החלקה. פיקסל ארט חייב להיות מוגדל ב-nearest-neighbor (הכלי הזה עושה את זה בשבילכם), אחרת הוא הופך לבליל מטושטש.
• מייצאים ספרייטים על רקע לבן. השאירו את הרקע השקוף פעיל לכל דבר שנכנס למשחק או מונח מעל תוכן אחר.
• מנפישים עם יותר מדי פריימים. תחושת המשחק הקלאסית מגיעה מ-2 עד 4 פריימים שנבחרו היטב, לא מ-16 כמעט זהים.

שאלות נפוצות על Pixel Art Maker