יצירת מפה מוקטנת של המסך ב-Game Maker

אחד מהכלים המובנים בGame Maker הוא ה-view (מראה). בעזרת view ניתן להגדיר איזה חלק מהחדר יוצג במסך, באיזה גודל ובאיזה מיקום.

ניתן גם להגדיר האם יראו את אותו view כשהחדר מתחיל ולקבוע אם ה-view יעקוב אחרי דמות מסוימת.

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

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

שלבים ביצירת מפה מוקטנת באמצעות view

שלב 1 – עיצוב החדר

יצרתי חדר ברוחב של 640 פיקסלים וגובה 480 פיקסלים

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

כך נראה החדר:

view of room

שלב 2 – יצירת view

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

עברו ללשונית views. הדבר הראשון שנעשה זה לסמן V בתיבה Enable the use of Views.

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

view
view 1
  1. סמנו V בשדה Visible when room starts עבור view 0.
  2. כעת עברו ל view 1 וגם פה סמנו V בשדה Visible when room starts.
  3. ב-view 1 עלינו לשנות את המאפיינים View in room ו-Port on screen:

View in room קובע איזה חלק מהחדר יוצג בview.

כיוון שאנחנו רוצים להציג את כל החדר נתחיל מהנקודה השמאלית העליונה שבה ה-X הוא 0 וה-Y הוא 0

W – מייצג את רוחב הview שיוצג, במקרה זה כל החדר ולכן 640

H מייצג את הגובה ובמקרה זה 480

Port on screen קובע היכן בחדר ימוקם הview ומה יהיה גודלו.

ה-X הוא 0 וה-Y הוא 300 (הערכים המדויקים של X ו-Y מופיעים בשורה התחתונה של חלון החדר עם מעבר העכבר על הנקודה המתאימה בחדר).

W – מייצג את רוחב הview שיוצג, במקרה זה 180

H מייצג את הגובה ובמקרה זה 190

Object following – מיועד למקרה שאנחנו רוצים שה view יעקוב אחר דמות מסוימת. במקרה זה לא רלוונטי ולכן נשאיר את הבחירה על no object.

עכשיו נשמור את החדר ונריץ את המשחק.

החדר שיתקבל יראה כך:

view room

הסרת רקע בעורך תמונות של 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 במסך הזה מיועד רק עבור התצוגה ואינו המהירות האמיתית של הדמות, אותה יש לקבוע בעריכה של האוביקט.