הסרת רקע בעורך תמונות של Game Maker

אם אתם עדיין עובדים עם Game Maker בגרסה 7.0 (לא ברור לי למה, כיוון שגירסה 8.0 תומכת גם במשחקים שפותחו בגרסה 7.0) תעברו מהר לגרסה 8.0 של Game Maker.

על חלק מהיתרונות כתבתי בפוסט חידושים בגרסה 8.0 של Game Maker והיום אני אדבר על על יתרון נוסף בעורך התמונות – הסרת הרקע.

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

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

אז איך עושים את זה? פשוט. שלושה שלבים.

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

שלב 1 – בחירת התמונות מרצועה

מרצועת התמונות המצורפת בחרתי את 8 התמונות בשורה הראשונה. (שימו לב הגובה והרוחב של התמונות לא זהה בכל שורה) הסבר מלא על עריכה של רצועת תמונות (strip).

scott strip

לאחר לחיצה על OK נקבל את החלון הבא שבו הרקע הוא עדיין ורוד:

strip edit

שלב 2 – מחיקת צבע נבחר

בתפריט יש לבחור בלשונית Images באפשרות Erase a Color:

erase a color

שלב 3 – דגימת צבע

יפתח חלון בו נוכל לבחור את הצבע למחיקה, ע"י דגימה של הצבע שמופיע בתמונה המקורית (צד שמאל):

erase a color
שימו לב, העורך זוכר את הצבע האחרון שנבחר, והוא מוצג כברירת מחדל (מאוד יעיל כשעורכים כמה תמונות מאותה רצועה או בעלי אותו רקע).

בצד ימין נוכל לראות איך תראה התמונה ללא הצבע שבחרנו, כדי לשמור את השינויים יש ללחוץ שוב על OK.

erase a color

אם נרצה לבטל צבע נוסף, נצטרך לבצע שוב את שלבים 2+3, כלומר לשמור את השינויים ושוב לבחור בתפריט את Erase a Color, לא ניתן למחוק שני צבעים בפעולה אחת.

הפעולה תחול על כל סדרת התמונות הקיימות באותו Sprite:

edit strip

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

אהבתם את הפוסט? מעניין אתכם פיתוח משחקי מחשב בדו-מימד? בואו לסדנת Game Maker בפסטיבל אייקון.

נתראה בפסטיבל.

עריכה של רצועת תמונות (strip)

אם אתם צריכים תמונות לדמות עבור המשחק שלכם ואתם לא יודעים או לא רוצים ליצור את הגרפיקה בעצמכם, תוכלו לייבא קבצים מוכנים או ליצור דמות מקובץ strip. מה זה קובץ strip? זוהי רצועה שמכילה את תמונות ה sprite-ים כקובץ אחד.

דוגמאות לקבצים כאלו אפשר למצוא באתר YOYO Games, בקטגוריה Resources ובחיפוש של sprite-ים באינטרנט. כאשר אתם מבצעים חיפוש באינטרנט, הוסיפו את המילה png, במקרה שאתם רוצים תמונות ל- Game Maker 8.0 על מנת שבתוצאות תקבלו תמונות עם רקע שקוף.

ב-Game Maker ניתן לערוך strip-ים ולגזור מהם חלק מהתמונות כדי ליצור sprite.

אז איך עושים את זה?

לצורך הדוגמא אני אשתמש ב-strip שהורדתי מאתר YOYO Games, בקטגוריה Resources. שימו לב, לא לשכוח לתת קרדיט אם נדרש.

strip

במקרה הזה הקרדיט מגיע למשתמש shirsakbc.

השלב הראשון הוא ליצור sprite ע"י לחיצה על האייקון create sprite  בסרגל הכלים.

לאחר שיפתח חלון האפשרויות של ה-sprite יש לבחור באפשרות Edit Sprite ולא Load Sprite כדי לקבל את האפשרויות של עריכה מ-strip.

בחלון עריכת sprite שיפתח יש לבחור בלשונית file  באפשרות Create from strip,  שלחיצה עליה תפתח חלון בחירת תמונה.

Create Sprite

התמונה שנבחרה תוצג כך:

Loading a strip

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

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

number of images – מספר התמונות לחתוך מהרצועה כולה.
Images per row – כמה תמונות לחתוך מכל שורה.
Image width – רוחב של תמונה בודדת.
Image height – גובה של תמונה בודדת.
Horizontal cell offset – (קיזוז אופקי) כמה תמונות צריך לדלג אופקית.
Vertical cell offset – (קיזוז אנכי) כמה תמונות צריך לדלג במאונך.
Horizontal pixel offset (בפיקסלים) כמה פיקסלים לחתוך מהצד העליון.
Vertical pixel offset – (בפיקסלים) כמה פיקסלים לחתוך מהצד השמאלי.
Horizontal separation – כמה פיקסלים יהיו המרווח בין תמונות בשורה.
Vertical separation – כמה פיקסלים יהיו המרווח בין תמונות בטור.

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

בדוגמא הזו בחרתי 4 תמונות, כאשר הרוחב של כל אחת הוא 26 פיקסלים והגובה נשאר 32.

strip edit

לאחר לחיצה על ok יתקבל מסך Sprite Editor שבו עדיין ניתן לערוך את התמונות.

show preview

שימו לב שע"י סימון V בשדה Show Preview ניתן לראות איך תראה הדמות בתנועה. שדה speed במסך הזה מיועד רק עבור התצוגה ואינו המהירות האמיתית של הדמות, אותה יש לקבוע בעריכה של האוביקט.