Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Animation
Design

יצירת גרפיקת דו-מימד מסוג Sprite עבור Unity 4.3 בתוכנת Inkscape

by
Length:LongLanguages:

Hebrew (עברית) translation by Shir Agami (you can also view the original English article)

Unity הינו מנוע חזק לפיתוח משחקי מחשב. עדכון מספר 4.3 שהוסף לו כלל כלים חדשים לפיתוח משחקי דו-מימד, ובכך סל דרכים נוספים לפיתוח משחקים אלו. במדריך הבא אראה לכם כיצד להשתמש בתוכנת Inkscape ליצירת דמויות אותן תוכלו להעלות ל-Unity 4.3 ולהשתמש בהן.


נקודות שיש לקחת בחשבון

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

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

1. צרו את הדמות

שלב 1

פתחו את תוכנת Inkscape, ובחרו בקובץ (File) > חדש (New). מהתפריט שנפתח, בחרו את הגודל שמתאים, או הכי קרוב, לרזולוציית המשחק שלכם. 640 על 480, 800 על 600, או 1024 על 768, הן רזולוציות נפוצות למשחקי PC. עבור הפרויקט הזה אני אשתמש ברזולוציה של 800 על 600.

Create a New Document
אם אתם עובדים עם מפתח משחקים, תוודאו איזו רזולוציה הם רוצים! עם זאת, היתרון של אמנות מבוססת וקטור היא שתמיד אפשר לשנות בהמשך את הגודל של הדמות.

שלב 2

צרו שכבה חדשה על-ידי לחיצה על שכבה (Layer) > הוספת שכבה (Add Layer) [Shift-Control-N]  וקראו לה "Sketch". הגדירו אותה כ-מתחת לשכבה הנוכחית.

Create a New Layer
עבודה בשכבות שומרת על קבצים נקיים וקלים לניהול.
Name your Layer
תתנו שמות ברורים לשכבות כדי שתוכלו לזכור מה נמצא בכל שכבה.

שלב 3

שרטטו באופן כללי כיצד תראה הדמות. במקרה הזה, השתמשתי בשרטוט שיצרתי בתוכנת Sketchbook Pro. אני נוהגת לצייר לפחות שתי פעולות שונות שהדמות תבצע. כך יש לי מושג טוב לגבי האופן שבו אנפיש אותה בהמשך, ולגבי החתיכות אליהן אני צריכה לחלק אותה.

אתם יכולים פשוט להעתיק ולהדביק את השרטוט מהתוכנה האחרת, או לגרור את הקובץ לתוך Inkscape.

אם אתם גוררים את הקובץ ל-Inkscape, תבחרו ב-embed, לא ב-link. אתם תמחקו את השרטוט בהמשך מכיוון שהשרטוט לא דרוש לכל התהליך.

Embed Image
שרטוט כללי עוזר לכם להבין באופן יותר ברור את הרעיון לדמות, ומונע מכם מלעבוד באופן עיוור.

שלב 4

שנו את גודל הדמות לגודל שנוח לכם לעבוד איתו על ידי שימוש בחצי ההגדלה.

לחצו על השרטוט ונעלו את הפרופורציות שלו על ידי הקלקה על האייקון של המנעול (Lock Icon).

Lock your Proportions.
נעילת הפרופורציות מונעת עיוון של הדמות.

שלב 5

מכיוון שלוח הצבעים שקיים ב-Inkscape לא נראות יפה במשחקים, אני נוהגת להכין פלטת צבעים משלי, מראש.

אפשר לערוך את לוח הצבעים של Inkscape על ידי כניסה לתיקייה של Inkscape > כניסה לתיקיית Share > כניסה לתיקיית Palettes.

Editing your Inkscape Palette
הקובץ יכול להיות במקום שונה. זה תלוי במערכת ההפעלה של המחשב שלכם.

שלב 6

לחצו עם מקש ימני על הקובץ "Inkscape.gpl", ובחרו לפתוח אותו בתוכנה לעריכת טקסט. אני השתמשתי ב-Wordpad.

כעת תוכלו להוסיף נתוני RGB ו-Hex משלכם לרשימה, והם יופיעו בסדר שבו כתבתם אותם. אם אתם לא מכירים את מערכות הקודים של Hex ו- RGB, תחפשו טבלאות שלהם באינטרנט, או תבדקו מה הקוד לכל צבע בלוח הצבעים בכל תוכנה שהיא לעיבוד תמונות.

אתם יכולים למצוא את אחת מהטבלאות כאן:

הנה הטווחים בהם השתמשתי לחלקים השונים של גוף התמנון, לאלו מכם שאוהבים לאסוף לוחות צבעים:

גוף ראשי:

  • Hex code: #6E0454 84 4 110
  • Hex code: #A4005C 92 0 164
  • Hex code: #BC1878 120 24 188
  • Hex code: #DC4470 112 68 220
  • Hex code: #EB636D 109 99 235
  • Hex code: #F39383 131 147 243
  • Hex code: #FAC9AC 172 201 250

עיניים

  • 49 33 57 #392131

קונכיית החילזון

  • 89 48 52 #343059
  • 126 70 67 #43467E
  • 150 87 62 #3E5796
  • 192 105 90 #5A69C0
  • 232 150 103 #6796E8
  • 238 175 126 #7EAFEE
  • 217 199 126 #7EC7D9

גוף החילזון

  • 60 71 132 #84473C
  • Hex code: #A5674F 79 103 165
  • Hex code: #CE894E 78 137 206
  • Hex code: #F3B46B 243 180 107
  • Hex code: #F9CE64 100 246 249
  • Hex code: #F9E57A 122 229 248
  • Hex code: #FBFB9E 158 251 251

אתם יכולים להעתיק-ולהדביק את הקודם לקובץ ה-.gpl ולשמור אותם, והצבעים יהיו ב-Inkscape בפעם הבאה שתפתחו את התוכנה.

אני ממליצה שתשמרו עותק אל קובץ ה-.gpl המקורי במקרה ומשהו משתבש.

Add the codes as they are displayed in the file where you would like them to appear in order.
תוסיפו את הקודים כפי שהם מופיעים בקובץ. אתם יכולים לשנות את הסדר כך שהצבעים יופיעו בסדר שאתם תקבעו.

שלב 7

ציירו את הגוף הראשי של התמנון. אני משתמשת במעגל לגוף התמנון. הגדרתי את עובי המברשת ל-3.5 פיקסלים בהגדרות הפרוייקט (Shift-Control-F), אבל אתם יכולים להגדיר את המברשת שלכם לפי מה שמתאים לכם.

Draw the Body with the Circle Tool

שלב 8

ציירו כל זרוע כחתיכה נפרדת על שכבה חדשה תוך שימוש בכלי Beuzer Curve Tool (Shift-F6). 

Creating a Leg with Bezier Curves
זכרו, כדי לקבל קו מעוקל אתם חייבים ללחוץ על מקש העכבר לאחר שהקלקתם כדי למקם את הנקודה השנייה, ולגרור את העכבר לכיוונים שונים.

שלב 9

במקום לקבוע באופן ידני את העובי והצבע של כל זרוע, אפשר ללחוץ על עצם שמעוצב בעיצוב שאנחנו צריכים (לדוגמא, המעגל) > להעתיק אותו (Control-C) > ללחוץ על עריכה (Edit) > הדבק עיצוב (Paste Style, or Control-Shift-V) בכדי ליישם את העיצוב של העצם המועתק.

Paste Object Style
זו דרך טובה כדי לוודא שהעיצוב של כל החתיכות אחיד.

אתם יכולים לצייר את הזרועות בתנוחות (פוזיציות) שונות, כך שתוכלו להשתמש בהן ליצירת אנימציה.

לחלופין, תרצו אולי לצייר את כל הגוף עם השרועות בתנוחות שונות אם אתם לא רוצים שהזרועות יזוזו באופן עצמאי.

זכרו שאתם יכולים לחבר חתיכות ביחד על ידי בחירת שתי החתיכות והצמדה שלהן על ידי לחיצה על דרך (Path) > איחוד (Union), או על ידי Control-Shift-+, או פשוט על ידי Control-+ עם לוח המספרים במקלדת.

שלב 10

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

אני לוחצת על איקון העין שליד השכבה Body כדי לכבות אותה.

Paste Object Style II

לכו למצב של עריכה על-ידי נקודות (Edit Path By Nodes) על ידי הקשה על F2, תלחצו על הנקודה אותה אתם רוצים למחוק, ותלחצו על מקש ה-Delete במקלדת.

Delete the nodes you don't want
אתם יכולים להתאים את הקו על ידי לחיצה על הנקודות, או על ידי שינוי סוג הנקודה בסרגל הכלים.

שלב 11

אני רוצה שהזרוע השמאלית תהיה כמעט זהה לזרוע הימנית, ולכן אני אעתיק את הזרוע השמאלית ורק אערוך אותה קלות.

עברו לשכבת ה-Body על ידי לחיצה על אייקון העין שנמצא לידה בתפריט השכבות, כך שתוכלו למקם נכון את הזרוע. לחצו על הזרוע (זה יעביר אתכם באופן אוטומטי לשכבת הזרועות), תעתיקו אותה (Control-C) ואז תדביקו אותה (Control-V).

הפכו את התמונה על שימוש בכפתור לכך (Flip Horizontal button) או עי"י לחיצה על H במקלדת.

Flip Leg

כך יהיה לכם קל יותר ליצור אנימציה של התמנון.

הזיזו את הזרוע למיקום הרצוי. אני גם הצרתי אותה בשביל פרספקטיבה ע"י חיצי ההגדלה/הקטנה.

Moving the leg behind the octopus
אם יש לכם בעיה עם הצמדת התמונה כשאתם משנים לה את הגודל, לחצו על View (לראות) > Snap (הצמד).

שלב 12

אני הולכת להכין את הזרועות הקדמיות ממספר חתיכות כדי להוסיף יותר עומק לתמונה. צרו שכבה חדשה (Shift-Control-N) כדי להוסיך את הזרועות שיהיו ממול לגוף.

הוסיפו אליפסה עם הכלי להוספת אליפסות (Oval Tool), ותעתיקו ותדביקו את העיצוב מהזרועות לאליפסה.

Create the Bottom Part of the Leg
כך, אם נרצה, נוכל להוסיף תנועת קפצוץ לזרועות הקדמיות.

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

Create the top of the leg
עכשיו החלק הזה בזרועה יוכל לנוע באופן נפרד!

שלב 13

עכשיו תעתיקו את הזרוע ותהפכו אותה כדי שתתאים לזרוע השנייה.

Position all the tentacles"
אל תדאגו כרגע על הזווית של הזרועות. זה יותאם ב-Unity.

שלב 14

בואו נוסיף קצת הצללות והבהרות לתמנון לפני שניצור לו פנים. אני עושה את זה על ידי יצירת אליפסות ושימוש באליפסה אחרת כדי "להפחית" חלקים שאני לא צריכה.

Add a Circle
מקמו את ההבהרה היכן שאתם רוצים שתהיה.

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

Add another Circle
לדעתי השיטה הזו מצוינת לבלונים ועצמים אחרים שהם עגולים ומבריקים.

עכשיו תבחרו בשני המעגלים תוך לחיצה על Shift (זה נקרא Shift-Select), ושימו לב שאתם בוחרים במעגל הבהיר אחרון. עכשיו לחצו על Path (דרך) > Difference (הבדל).

Subtract one circle from another
קו הבהרה חלק ויפה!

בחרו (Select) בכל העצמים וקבצו (Group) אותם יחד (Control-G) כדי להבטיח שהם לא יזוזו.

שימו לב: אתם עדיין יכולים להעתיק ולהדביק את העיצוב של עצם מסוים על ידי בחירה ישירה ולחיצה על edit path by note גם כאשר הם מקובצים לעצם אחר.

שלב 15

צרו הבהרות על הזרועות על ידי שימוש בכלי ה-Beizer על ידי לחיצה על Shift-F6. וודאו שאתם מציירים על השכבה שמכילה את הזרוע אותה אתם רוצים להצליל, ושאתם מקבצים (group) את המעגל הבהיר עם הזרוע שאליו היא שייכת. השתמש באותו צבע של המעגל הבהיר הקודם.

Simple Lighting
אתם יכולים להוסיך יותר או פחות קווים בהירים, בהתאם לטעם שלכם.

שלב 16

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

Adding the Eyes
עכשיו יש לו זוג עיניים.

שלב 17

ציירו פה פשוט על ידי יצירת קו מעוקל עם כלי ה-Beizer, והתאימו את ההגדרות של הקו דרך התפריט לקווים (stroke and fill menu, Shift-Control-F).

Create a simple mouth
הגדרתי את עובי הקו ל-3.00 ואת הקצוות לקצוות מעוגלים (Round Cap).
Adjust Stroke Settings
אתם יכולים לשחק עם ההגדות כדי לקבל את העיצוב שאתם רוצים.

שלב 18

החלטתי להוסיף לתמנון עוד הצללות כדי להוסיף לו עוד עומק. אם כשאתם מוסיפים פרטים נוספים הם מופיעים מעל לעצמים שכבר יצרתם, אתם יכולים לקבץ את התוספות החדשות יחד, לבחור ולגזור את העצמים שמאחוריהן (Control-X), ללחוץ על העצם שאתם רוצים להדביק מעליו שנמצא באותה שכבה, ולבחור ב: Edit (עריכה) > Paste In Place (הדבק במקום) או (Control-Alt-V).

Fixing Layer Groups
שמרו על הקבוצות מסודרות כדי שתוכלו לארגן את דף ה-sprite שלכם מאוחר יותר.

שלב 19

הוספתי גם הבהרה שניונית על ידי שימוש בכלי ה-Beizer לקווים מעוקלים (Beizer Cruves) ושימוש בכלי ליצירת מעגלים (Circle tool), רק שהפעם השתמשי בצבע F39383 # כצבע ההבהרה.

למרות שיש מעט תוכנות בפיתוח שמאפשרות הוספה מהירה של הצללות בציורי דו-מימד (למשל Sprite Lamp), הן עדיין בשלבים ראשוניים ומיועדות לציורים מבוססי פיקסלים (pixel art), ולכן נצטרך להוסיף את ההבהרות הנוספות בעצמנו!

Adding Extra Highlights

שלב 20

כדי שהציור יהיה מעניין, אני אוסיך חילזון מעל הראש של התמנון. קודם כל אני אצור את הגוף ע"י כלי ה-Beizer Curve Tool (אפשר לחחוץ על Shift-F6). אני אצור את החילזון על שכבה חדשה, אבל אני לא צריכה להכין עוד שכבה בשביל הקונכייה כל עוד הם מקובצים יחד. אם אתם מעדיפים להשתמש בשכבות נפרדות, אתם יכולים.

Creating the snail body

כמו קודם, אני אמחק פינות וקצוות לא נחוצים ואחליק את הגוף על ידי Edit Path by Node (F2) mode. אתם יכולים גם לבחור מספר קצוות ולהזיז אותם יחד.

Move Multiple Nodes At Once

שלב 21

עכשיו תוסיפו גוונים בהירים יותר כדי להבליט את הנפח של החילזון. גם עכשיו אני אשתמש ב-Beizer Curve tool על ידי לחיצה על Shift-F6.

Adding Highlights to the Snail Body
וודאו שאתם מקבצים יחד את כל החלקים של הגוף כשאתם מסיימים!

אם עשיתם את העיקולים באופן חד מדי ולא יכולים לקבץ אותם מבלי שזה קורה:

Adding Highlights to the Snail Body II
עיקולים שלא מעוקלים לגמרי הם לא טובים! אם בטעות חיברתם את הקווים ונוצרה לכם פינה, פשוט תלחצו על Control-Z כדי לבטל את זה.

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

Adding Highlights to the Snail Body III
קל לתיקון!

שלב 22

כדי לצייר את בסיס הקונכייה, ציירו מעגל עם הכלי לציור מעגלים (Circle Tool, F5). אני השתמשתי בצבע #5A69C0 למתאר החיצוני ובצבע #7EC7D9F למילוי.

Creating A simple shell base

שלב 23

השתמשו בכלי ה-Beuizer Curve על ידי (Shift-F6) כדי ליצור "שקע" בתחתית הקונכייה.

Creating The Bottom of The Shell

שלב 24

השתמשו בכלי ליצירת ספירלה (Spiral Tool) כדי להוסיף את הדפוס הסיפרלי של הקונכייה (F9) וכוונו את העיקולים ל-1.50.

Create a Spiral

כעת סובבו את הספירלה כך שתראה כמו קונכייה אמיתית. שנו את הקצה של הספירלה לעגול (Round cap) כדי להימנע מקצה חד.

Move the spiral

שלב 25

נשתמש שוב בכלי ה-beizer בשביל ההצללות הבהירות. אני אשתמש בצבע לבן, ואכון את העכירות (Opacity) ל-50% כדי שהוא ישתלב בציור. אני יכולים להגדיר את עכירות הצבע בתפריט Fill and Stroke Menu על ידי לחיצה על Shift-Control-F9.

First Highlight
אתם יכולים להשתמש גם בסרגל העמעום (blur slider) כדי לרכך את המראה, אבל אני לא ממליצה על זה בשביל הקונכייה.
First Highlight

שלב 26

המשיכו עם שאר הקווים המבהירים. אין יכולים להעתיק ולהדבק את העיצוב של הקו הראשון על שאר הקווים וזה גם יעתיק וידביק את העכירות שבחרתם, כך זה מקל מאוד על העבודה.

Add the Rest of The Highlights

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


2. יצירת דף הספרייט (Sprite)

שלב 1

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

Delete the Layer

שלב 2

וודאו שהקובץ שלכם שמור לפני שאתם עוברים לחלק הבא (כדאי לציין שבכל מקרה, ליתר ביטחון, אתם צריכים לשמור את הקובץ באופן תדיר). כדי לעשות את זה, תלחצו על קובץ (File) > שמור כ.. (Save As) או לחצו על (Shift-Control-S).

Save Your File
אני לרוב שומרת את הקובץ המקורי ואת דף הספרייט כקבצים נפרדים, כי ככה אני יכולה לזכור איך כל חלקי הדמות הרכיבו את הדמות.

שלב 3

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

זה יהיה מבחן טוב ליכולות הקיבוץ שלכם. אם קיבצתם יחד את כל החתיכות הנכונות החלק הזה צריך להיות די קל. אתם יכולים ללמוד עוד על קיבוץ עצמים ב-Inkscape הודות למדריך שהכנו כאן ב-Tuts+. לחצו-וגררו כל חתיכה כדי לארגן אותן באופן שתאם רוצים.

שלב 4

אני גם מסדרת את קצוות העצמים כך שיתיישרו על אותו קו (ייצרו גבול אחיד). אמנם המחשבים מספיק מהירים כדי שלא תשימו לכך לב, אבל תמיד עדיף לשמור מרווח איפה שאפשר, ולעשות את הדף הכי קטן שאפשר. פתחו את התפריט ליישור עצמים (Align menu) על ידי Shift-Contol-A, וודאו שהגדרת ה-Relative To מכוונת ל-Last Selected ולא על העמוד, כדי שנייצא רק את העצמים ולא את העמוד.

זה אומר שהעצם הראשון מבין כל העצמים הנבחרים ימוקם בקו ישר לפני המיקום של העצה אחרון שנבחר.

Align Objects
אתם יכולים לכון את זה גם ל-First Selected אם אתם מעדיפים.

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

Organizing the sheet the right way
הדרך הזו לא תגדיל את גודל הדף.
Organizing your sheet the wrong way
זה, לעומת זאת, כן תגדיל את גודל הקובץ, למרות שלא השתמשנו ברווח גדול יותר.

שלב 5

ארזו את הדף באופן הכי צפוץ שאפשר. הרבה תוכנות יכולות לעשות זאת, אבל רבים מוצאים שדהרך הכי מהירה היא לעשות את זה ב-Inkscape.

אם בכל זאת אתם מעדיפים להשתמש בתוכנה (או שכבר ייצאתם כל תמונה באופן נפרד כדי להשתמש במנועי משחק אחרים), אתם יכולים להוריד את Texture Packer:

זה זמין למאק, ווינדוס ולינקס בחינם!

שלב 6

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

שימו לב שהעיניים נמצאו מאוד רחוק ב-texture packing. זה בגלל שהחלטתי להתייחס אליהן כאל עצם אחד מאשר שכל עין תעמוד בפני עצמה. אתם יכולים לעשות זאת ואז להפריד אותן ב-Unity לשני עצמים נפרדים.

A packed sheet

שלב 7

בחרו את כל העצמים בבת אחד על ידי גרירת העכבר מעל העצמים כאילו אתם מנסים להכניס את כולם לאותו מלבן (ראו את התמונה למטה):

Contain the objects
ה"דף" שלי.

שלב 8

עכשיו נייצא את הדף! לחצו על קובץ (File) > ייצא (Export) או על Shift-Control-E. אתם יכולים לייצא את הדף בגודל שתואם לצרכים שלכם, אבל אני שמרתי על אותו הגודל איתו התחלתי ב-InkScape.

Exporting the file
דבר מעולה לגבי וקטורים זה שאם זה לא מתאים למשחק אפשר פשוט לייצא שוב את הקובץ בגודל קטן יותר או גדול יותר.

אתם יכולים לערוך את שם הקובץ בשורה של שם הקובץ כך שתוכלו לזהות אותו. אחרת זה יקבל שם אוטומטי מ-Inkscape לפי הקובץ או קבוצה אחרונה שנבחרה (למשל g720.png).

אולי שמתם לב לאופיה לייצוא העצמים כקבצים נפרדים (Batch Export Objects). כל עצם ייוצא כקובץ נפרד, אבל גודל כל קובץ ייקבע לפי גודל הצורה ב-Inkscape" ולכן תצטרכו להגדיר את גודל הקובץ באופן ידני.

Aימו לב: יש כרגע תקלה ב-Inkscape. אם אתם נותנים שם לקובץ לאחר שבחרתם את כל העצמים, ואז אתם מנסים לייצא אותם כקבצים נפרדים (משתמשים באופציית ה-batch), זה ייצא רק את הקובץ האחרון מכיוון שעכשיו לכל הקבצים יש את אותו שם.

שלב 9

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

Exported File

3. להעלות את זה ל-Unity

בחלק הזה של המדירך אני אניח שאתם יודעים איך לפתוח את Unity ולהתחיל פרוייקט. אם אתם לא יודעים איך לעבוד עם Unity יש הרבה מדריכים למתחילים באתר של Unity. אני רק אסביר כיצד להעלות את דף הספרייט שלכם ל-Unity, וכיצד לחתוך אותו כדי להשתמש בו במשחק שלכם.

שלב 1

פתחו את הפרוייקט וודאו שהוא מכוון למצב של 2D (כדי להקל עלינו) על ידי לחיצה על עריכה (Edit) > הגדרות פרוייקט (Project Settings) > עורך (Editor), ובחירה ב-2D כמצב ברירת מחדל (Default Behaviour Mode).

Changing the editor settings to 2D
תמיד תוכלו לשנות את ההגדרה הזו חזרה אם יותר נוח לכם לעבוד במצב של 3D.
Editor Dropdown for 2D

שלב 2

גררו את דף הספרייט שלכם מהתיקייה בה הוא נמצא לתוך תיקיית ה-Assets.

Change the Box Dimensions to the size of the Document

שלב 3

בחרו בדף בספרייט, ופתחו את חלון ה-Inspector על ידי לחיצה על חלון (Window) > ואז Inspector (על ידי Control-3).

Opening up the Sprite Inspector

שלב 4

שנו את מצב הספרייט (Sprite Mode) ל-Multiple. זה יאפשר לכם לערוך את הספרייט.

step_3.4

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

שלב 5

פתחו את החלון לעריכת הספרייט (Sprite Editor).

Opening The Sprite Editor
אתם יכולים להגיע אליו גם מה-Inspector.

שלב 6

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

Automatic Slicing

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

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

Adjusting the Sprite Boxes
לחצו על Revert כדי לבטל שינויים שעשיתם ושלא יישמתם.

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

שלב 7

מקמו את כל נקודות העוגן להיכן שאתם רוצים שהן יהיו על ידי לחיצה וגרירה של המעגל במרכז כל ספרייט, או על ידי הגדרה ידנית של מיקום ה-X וה-Y תחת ה-Pivot field.

Adjusting the Pivot Points
לחצו על Apply כשאתם מסיימים.

עכשיו אתם יכולים לראות את כל הספרייטים כעצמים נפרדים בתיקיית ה-Asset של הפרוייקט שלכם (Project > Asset Folder).

Assets Folder

שלב 8

עכשיו אנחנו יכולים לגרור את החתיכות לתוך הסצנה כדי ליצור עצמים במשחק (Game Objects). עם זאת, אנחנו קודם כל צריכים עצם ריק (empty game object) על ידי לחיצה על Control-Shift-N ונקרא לו "תמנון" (Octopus).

Create an empty Game Object

לחצו על עצם המשחק בהיררכיה (Hierarchy) ולכו ל-Inspector כדי לתת לזה שם.

Rename your Game Object

שלב 9

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

Adding All The Pieces
יש בעיה קטנה...

שלב 10

אולי שמתם לב שזרועות התמנון לא מסודרות בסדר שאנחנו רוצים אותן. נוכל לתקן את זה על ידי סידור הזרועות בשכבות (Sorting layer) ב-Inspector. בדרך כלל אני יוצרת שכבה חדשה לתמנון, אבל עכשיו אני אשאיר את זה בשכבת ברירת המחדל (default) ואתאים את המספרים.

Change the Sorting Layers
ככל שהמספר גבוה יותר, כל העצם קרוב יותר למצלמה.

שלב 11

עכשיו נשמור סצנה כדי לבחון את אותה ואת הפרוייקט (קובץ [File] > שמור סצנה [Save Scene]). זה בגלל ש-Unity יכול להתרסק כשמתחילים לעבוד על פרטים, אז אני ממליצה לשמור באופן תדיר.

Save the Scene
מכיוון שזה לא באמת משחק אמיתי, אני אקרא לפרוייקט "testscene".

עבודה מצוינת, אתם מוכנים להוספת אנימציות!

לדמות הזו אין אנימציה עדיין אז זה לא שהמשחק מוכן. הכלי ליצירת אנימציות ב-Unity הוא מאוד חדק, אבל לוקח זמן ללמוד אותו!

כדאי לאמנים לדעת כיצד האמנות שלהם נראית במנוע של המשחק, וכיצד להנפיש אותה כדי שהגרפיקה תתאים לפיתוח המשחק. כדאי לציין שגם אחרי שהגעתם לנקודה הזו, אתם יכולים בקלות לעדכן את הדף, להעלות אותו שוב לתיקיית ה-Asset (נמצאת באופן אוטומטי ב-Unity תחת בתיקיית הפרוייקט שלכם שבתיקיית ה-Documents), והמשחק יתעדכן באופן אוטומטי. רק שימו לב שאם אתם משנים את הגדלים של הספרייט בכל צורה שלי, אפילו ע"י הוספת פרטים נוספים, אתם תצטרכו לחתוך שוב (re-slice) את הדף.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.