הצגת הניקוד במסך במיקום מוגדר

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

איך עושים את זה? לשם כך נשתמש בפקודה draw.

הגדרת פונט

חשוב לפני ביצוע הפעולות ליצור פונט חדש – קליק ימני על תיקיית הפונטים ובחירה ב – Create Font.

בחלון האפשרויות של הפונט יש לבחור את סוג הפונט וגודל הפונט.

כדאי לתת שם לפונט שיתאר את מטרתו, למשל ScoreFont, או תיאור של הפונט עצמו, למשל ArialBold12, זה תמיד עוזר לי לדעת איך הפונט יראה.

יצירת אוביקט

יש ליצור אוביקט (ללא sprite) עבור הניקוד.

1. בתיקיית objects ניצור אוביקט חדש בשם: "objectScore"

2. לאוביקט יש להוסיף אירוע מסוג Draw

3. לאירוע יש להוסיף את הפעולות (actions) הבאות:

set font – נמצא בלשונית Draw ולבחור את הפונט שיצרנו קודם ScoreFont

set the color – גם נמצא בלשונית Draw ולבחור את הצבע, שימו לב, שיהיה צבע ניגודי לרקע עליו ימוקם הטקסט.

Draw score בלשונית Score עדכנו את האפשרויות לפי:

X= מיקום על ציר הרוחב Y= מיקום על ציר הרוחב, למשל אם נרצה שהניקוד יופיע בקצה השמאלי העליון של החדר נציין עבור X=0, Y=0

שדה caption הוא הטקסט שיופיע עבור הניקוד, כדאי להשאיר את ברירת המחדל "Score:".
אם אפשרות Relative מסומנת, אז המיקום של האוביקט יהיה יחסית להכין שתמקמו את האוביקט בחדר בפועל, אם האפשרות לא תהיה מסומנת מיקום האוביקט יהיה בדיוק ב-X, Y שציינתם.

score

מיקום האוביקט בחדר

1. פתחו את החדר שבו אתם רוצים להציג את הניקוד ובלשונית objects בחרו את אוביקט הניקוד, objectScore.

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

ולאלו מכם שרוצים לראות איך זה מיושם בקובץ עצמו, אני מצרפת דוגמא – אוביקט score שהוספתי למשחק treasure (קובץ gmk).

יצירת אוביקט שזז על המסך באמצעות העכבר

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

שלב ראשון – יצירת sprite לאוביקט

לחצו על אייקון יצירת ספרייט בסרגל העליון create a Sprite

בחלון מאפייני sprite לחצו על Load Sprite וטענו תמונה. אני בחרתי בתמונה burger.

שלב שני – יצירת אוביקט

create an Objectלחצו על איקון יצירת אוביקט בסרגל העליון

בחלון אפשרויות של האוביקט הגדירו את ה-sprite שיצרתם בשלב הראשון לאוביקט, במקרה הזה, את burger.

object

שלב שלישי – הגדרת אירוע ופעולות

הגדרת אירוע step

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

הגדרת פעולות

הפעולה שנבצע תלויה בלחיצה של עכבר, לכן נבצע בדיקה אם נלחץ העכבר ולשם כך נתשמש בפעולה Check Mouse שנמצאת בלשונית control של הפעולות.

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

object Actions

כעת נוסיף את הפעולה שתקפיץ את האוביקט לנקודה בה נלחץ העכבר. פעולה מסוג jump to position  ונגדיר עבורה את מיקום ה-X ו-Y.

עבור מיקום ה-X נציין: mouse_x, עבור מיקום ה-Y נציין: mouse_y. אלו פרמטרים קבועים עבור מיקום לחיצה של העכבר במסך.

כעת מה שנותר לנו לעשות זה להוסיף את האוביקט לחדר ולהריץ את המשחק.

קובץ דוגמא להורדה.

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