לצייר פיקסל ארט על רשת, להנפיש פריימים ולייצא ל-PNG, GIF או קוד.
עודכן לאחרונה
ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.
יוצר פיקסל ארט הוא כלי ציור שבנוי סביב רשת קבועה: במקום משיכות מכחול חופשיות, מניחים פיקסלים בודדים, משבצת אחר משבצת. המגבלה הזו היא כל הקסם של פיקסל ארט: ספרייטים של משחקים, אייקונים רטרו, אווטרים ואיורים בסגנון 8 ביט נוצרים כולם מבחירה מכוונת של כל פיקסל ופיקסל.
העורך הזה נותן לכם את ערכת הכלים הקלאסית של עורך ספרייטים: עיפרון, מחק, מילוי ודוגם צבע על רשתות מ-8x8 עד 64x64, וגם אנימציה פריים אחר פריים עם תצוגה מקדימה חיה. ייצאו את התוצאה כ-PNG חד בכל גודל, כ-GIF מונפש או כגיליון ספרייטים מוכן למנוע משחק.
ומכיוון שזה Coddy, הציור שלכם הוא גם קוד. לחיצה אחת הופכת את הרשת למערך דו ממדי ב-Python, לקטע קוד של canvas ב-JavaScript, לאמנות box-shadow ב-CSS, ל-SVG או ל-CSV שאפשר לפתוח בגיליון אלקטרוני. דרך כיפית לראות שתמונות הן בעצם מערכים של ערכי צבע.
התחילו בקטן: 16x16 או 32x32. רשתות קטנות מכריחות צורות פשוטות וקריאות, ורוב הספרייטים הקלאסיים של משחקים הם 16x16 או 32x32. אפשר להחליף גודל אחר כך בלי לאבד את הציור.
השתמשו בעיפרון לקווי מתאר ובכלי המילוי לשטחים גדולים. ציירו קודם את הצורה הכללית בצבע אחד, ואז הוסיפו פרטים. לחיצה ימנית (או המחק) מנקה פיקסל.
בחרו 2 או 3 גוונים לכל חומר: בסיס, הארה וצל. הפלטה המובנית מסודרת כך שקל למצוא את הסולמות האלה, ודוגם הצבע אוסף כל צבע שכבר נמצא על הקנבס.
שכפלו את הפריים, הזיזו כמה פיקסלים ולחצו על הפעלה. שניים או שלושה פריימים מספיקים למצמוץ, לקפיצה או להבהוב של להבה.
הורידו PNG בהגדלה של עד 32x, GIF מונפש או גיליון ספרייטים עם כל הפריימים בשורה. או פתחו את חלונית הקוד והעתיקו את היצירה כ-Python, JavaScript, CSS, SVG או CSV.
גדלי קנבס ופורמטי ייצוא נפוצים, ומתי להשתמש בכל אחד.
| בחירה | הכי מתאים ל | הערות |
|---|---|---|
| רשת 16x16 | אייקונים, favicons, ספרייטים זעירים | גודל הספרייט הקלאסי: כל פיקסל נחשב |
| רשת 32x32 | דמויות משחק, אווטרים | נקודת האיזון בין פירוט למאמץ |
| רשת 64x64 | סצנות מפורטות, דיוקנאות | תכננו קודם את הצללית: 4,096 פיקסלים מתמלאים לאט |
| ייצוא PNG | אווטרים, מדבקות, נכסים | הגדילו פי 16 או יותר כדי שהפיקסלים יישארו חדים |
| ייצוא GIF | אנימציות לצ'אט ולאינטרנט | משתמש בהגדרת ה-FPS שלכם; שקיפות נתמכת |
| גיליון ספרייטים | מנועי משחק | כל הפריימים זה לצד זה ב-PNG אחד |
| ייצוא קוד | למידה, אמנות גנרטיבית | 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))ייצוא הקוד כותב כל פיקסל כצבע hex ברשימה מקוננת, יחד עם קטע קוד של Pillow שמרנדר אותו בחזרה ל-PNG. הגרסה הזעירה הזו מדפיסה את הצורה בטרמינל: הוכחה שתמונה היא רק מערך דו ממדי.
.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;}ייצוא ה-CSS הופך כל פיקסל להיסט box-shadow אחד של div יחיד, טריק פרונטאנד קלאסי. הדביקו אותו בכל דף ושנו את --px כדי לשנות את גודל היצירה כולה.
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
ייצוא ה-CSV שם קוד hex אחד בכל תא. פתחו אותו ב-Google Sheets או ב-Excel, כווצו את העמודות לריבועים והוסיפו כלל עיצוב מותנה שצובע כל תא לפי הערך שלו: פיקסל ארט מיידי בגיליון.
פיקסל ארט הוא אמנות דיגיטלית שבה התמונה נבנית פיקסל אחר פיקסל על רשת קטנה, כך שכל משבצת ממוקמת במכוון. זה הסגנון החזותי של משחקי הווידאו הקלאסיים, והוא עדיין נמצא בכל מקום: משחקי אינדי, אווטרים, אייקונים ותמונות פרופיל מתקופת ה-NFT.
התחילו על רשת 16x16 עם 3 או 4 צבעים. ציירו צללית של משהו פשוט, לב, פטרייה או חרב, ואז הוסיפו גוון הארה אחד וגוון צל אחד. השבלונות המובנות נותנות לכם צורת פתיחה שאפשר לצבוע מחדש ולערוך. פיקסל ארט קל הוא עניין של צורות נקיות, לא של פרטים.
16x16 ו-32x32 הם גדלי הספרייט הקלאסיים והמקומות הכי טובים להתחיל בהם; פיקסל ארט של 32x32 מתאים לרוב דמויות המשחק והאווטרים. השתמשו ב-64x64 רק כשצריך פירוט אמיתי. בייצוא, הגדילו פי 16 או פי 32 כדי שהפיקסלים יישארו חדים בגודל התצוגה.
הוסיפו פריים שני עם כפתור השכפול, שנו כמה פיקסלים (מצמוץ של עין, תזוזה של להבה), הגדירו את ה-FPS ולחצו על הפעלה לתצוגה מקדימה. הורדת GIF מייצאת GIF מונפש בלולאה עם שקיפות, מוכן לאפליקציות צ'אט, ל-Discord או לאתר.
גיליון ספרייטים הוא תמונה אחת שמכילה את כל פריימי האנימציה זה לצד זה. מנועי משחק כמו Unity, Godot ו-Phaser טוענים את הגיליון פעם אחת ומנגנים את הפריימים על ידי הזזת חלון התצוגה. ייצוא גיליון הספרייטים מסדר את הפריימים שלכם בשורה בגודל תא אחיד.
כן. ציירו כל פריים של האנימציה, צפו בלולאה בקצב הפריימים של המשחק, וייצאו גיליון ספרייטים כ-PNG עם רקע שקוף. ייצוא ה-SVG וה-PNG מתאים גם לאייקונים של ממשק ולסטים של אריחים.
הכלי מכסה את אותו תהליך עבודה בסיסי כמו Piskel, ציור על רשת, אנימציית פריימים וייצוא GIF וגיליון ספרייטים, רץ כולו בדפדפן בלי שום התקנה, ומוסיף מעל זה ייצוא לקוד. אם אתם מחפשים עורך ספרייטים אונליין פשוט ומתוחזק, הוא נבנה בדיוק בשביל זה.
טריק קלאסי מהכיתה: מכווצים תאים בגיליון אלקטרוני לריבועים וצובעים אותם כדי ליצור תמונה. ייצוא ה-CSV נותן קוד hex אחד לכל תא, כך שכלל עיצוב מותנה אחד ב-Google Sheets או ב-Excel משחזר את הציור שלכם כתאים צבועים.
פתחו את חלונית הקוד ובחרו פורמט. Python נותן רשימה דו ממדית יחד עם מרנדר של Pillow, JavaScript מצייר אותה על canvas, CSS מרנדר אותה כאמנות box-shadow עם div יחיד, SVG מפיק מלבנים וקטוריים חדים, ו-CSV מזין גיליונות אלקטרוניים. פורמטי המערכים הם היכרות ראשונה מצוינת עם האופן שבו תמונות עובדות בקוד.
כן: חינם, בלי הרשמה ובלי סימן מים. הכול רץ מקומית בדפדפן: היצירה שלכם נשמרת אוטומטית במכשיר ולעולם לא מועלית לשרת.
