דילוג לתוכן הראשי

איך להתמצא בממשק של קונסטרקט 3 התוכנה המעולה לפיתוח משחקי מחשב

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

קודם כל אם אף פעם לא עבדתם עם Construct 3 – שווה להסתכל על מסך הפתיחה של התוכנה (מה שנקרא שם Start page).




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

משהו שחשוב לדעת לגבי שמירה ופתיחה של פרויקטים בקונסטרקט - ישנם 3 אפשרויות לשמירת פרויקט (וכנ"ל לפתיחה):
1.      CLOUD – הממשק של קונסטרקט מאפשר שמירה ישירות באחד מ-3 שירותי ענן – Dropbox, OneDrive, Google Drive. אם יש לכם חשבון באחד באלה – החיים שלכם יהפכו מאד קלים ופרודוקטיביים בעבודה עם קונסטרקט. תוכלו למעשה לפתוח את הפרויקט שלכם מכל מקום בכל זמן ולהמשיך לעבוד עליו. אני למשל מלמד תלמידים בכיתת מחשבים. בסיום השיעור הם שומרים את מה שעבדו עליו ואז יכולים להמשיך לעבוד על הפרויקט מהבית, בלי צורך להעביר קבצים ממחשב למחשב.
2.       BROWSER – ניתן לשמור את המשחק בזיכרון של הדפדפן. אם אתם עובדים עם הדפדפן כרום (או כל דפדפן מודרני אחר) אתם בטח יודעים שהוא זוכר המון דברים, כמו הסטוריית הגלישה שלכם, הסיסמאות שלכם וכו'. אותו זיכרון-דפדפן מנוצל כאן על מנת לשמור את קבצי הפרויקט שלכם.
3.    FILE – כמובן שאפשר להשתמש בשיטה המסורתית לשמירת הקובץ באחת התיקיות במחשב, או באמצעי אחסון חיצוני, כמו disk-on-key למשל.

אין יותר קל מלהתחיל פרויקט חדש – רק לוחצים על כפתור NEW PROJECT
בחלון שנפתח רצוי לבחור את אחת מהתבניות ללייאאוט המתאים למשחק שלנו. יש תבניות עומדות או שוכבות  בכמה רמות צפיפות של פיקסלים.
עומדות = Portrait
שוכבות = Landscape
ככל שהצפיפות יותר גבוהה, כך המשחק עשוי להיראות טוב יותר (בהנחה שאתם מכניסים אליו תמונות באיכות גבוהה), אבל למכשיר שמריץ אותו יהיה קשה יותר. מנסיוני האישי, אם אתם בונים משחק למחשב בלבד אפשר לבחור רמת צפיפות גבוהה, אבל רצוי להימנע בכל מקרה מהרמה הגבוהה ביותר (4k), במיוחד אם מדובר במשחק פעולה עם הרבה התרחשויות על המסך. בהרבה מקרים כדאי להתנסות קודם בתבנית ברזולוציה נמוכה ולראות איך זה עובד במכשיר הכי "חלש" שאליו אתם מייעדים את המשחק. מקסימום אפשר לשנות רזולוציה גם תוך כדי עבודה.



אם רוצים התחלה ממש מהירה – אין צורך אפילו לתת שם למשחק. פשוט לוחצים על ENTER (או על כפתור Createבמסך NEW PROJECT ומתחילים לעבוד.

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



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

החלונות שאני הכי משתמש בהם:
Properties – כל הזמן בשימוש. מציג את כל הנתונים לגבי האובייקט\מסך\שכבה שבהם אנחנו נמצאים, או בוחרים כרגע. כשנכנסים לפרויקט חדש למשל, לפני שעושים כל דבר אחר אפשר לראות בחלון הזה את כל הפרטים שקשורים לפרויקט, כמו שם הפרויקט, גודל המסך בפיקסלים, צבע הרקע וכו'. אם נגעתם במשהו, למשל לחצתם על Layout 1 מתוך חלון Project, תוכלו לראות שהתוכן של החלון Properties מתחלף כדי להציג פרטים הקשורים לאותו Layout. אם תרצו לחזור ולראות את פרטי הפרויקט תלחצו על שם הפרויקט בחלון Project.
Project – מציג את מבנה הפרויקט שלנו, כולל שמות הקבצים והאובייקטים, מחולקים לקטגוריות, כמו סאונד, וידאו, פונטים וכו'. נותן מבט-על מאד חשוב ככל שהפרויקט מתקדם.
Layers – כמו בתוכנות אחרות כמו פוטושופ למשל, גם בקונסטרקט יש עבודה בשכבות. כשרוצים שהאובייקטים הויזואליים על המסך יופיעו אחד על גבי השני, הכי קל לסדר אותם בשכבות, למרות שאפשר להסתדר גם ללא שכבות ע"י קביעת סדר ההופעה של אובייקטים באותה שכבה. בגרסה החינמית של קונסטרקט אפשר ליצור עד 2 שכבות בלבד, לעומת אינסוף בגרסאות המשולמות.


קונספט אחד חשוב לפני שנסיים להפעם הוא Layout ו-Event Sheet.
בחלון Project אפשר לראות תיקיית Layouts שבתוכה Layout 1 ותיקיית Event sheets שבתוכה Event sheet 1.
מעל האזור המרכזי אפשר לראות טאבים פתוחים שמייצגים את שני המסכים האלה.
אם אני צריך לפשט את המשמעות שלהם אני אגיד כך:
Layout = גרפיקה
Event sheet = תכנות



ה-Layout הוא למעשה החלק הויזואלי, שאליו גוררים אובייקטים שניתן לראות, כמו במשחק הסופי ואילו Event sheet מכיל את הלוגיקה של המשחק, הכתובה ברשימת אירועים (events), תנאים (conditions) ופעולות (actions). בפרויקט חדש ה-Event sheet מתחיל ריק בדיוק כמו שה-layout מתחיל ריק (דף חלק). לכל אירוע, או תנאי ב-Event sheet אפשר להצמיד פעולה אחת או יותר ואפשר גם לשלב מספר תנאים יחד. אבל הפעם לא אכנס יותר לעומק, אלא אשאיר זאת לדוגמאות של מקרים ספציפיים בהדרכות הבאות.

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

תגובות

פוסטים פופולריים מהבלוג הזה

כלים לפיתוח משחקים בלי ידע בתכנות

מאחר ויש לי די הרבה נסיון בהדרכת תכנות למתחילים (ובפרט בתחום פיתוח משחקים) אני מתעניין כל הזמן בכלים טובים עם ערך מוסף גם לפיתוח משחקים מהיר וגם ללמידה של תכנות על הדרך. לאחרונה החלטתי לפתוח קורס\חוג מקומי לנוער שילמד פיתוח משחקים לחסרי נסיון, או בעלי נסיון בסיסי בתכנות וזה הוביל אותי לבדוק באופן יותר מעמיק אילו כלים קיימים כרגע שעשויים לתמוך בקורס כזה. אחד הקריטריונים החשובים לדעתי בבחינת כלים כאלה היא עד כמה אפשרי ונוח ליצור באמצעותם משחקי HTML5 שאפשר בקלות לפרסם באתר עצמאי, או באתרי מפיצים, כי לשם אני מאמין שהתעשיה הולכת. לכן, קודם כל הלכתי וחיפשתי רשימת השוואה למנועי משחק שמאפשרים ליצור משחקי HTML5 והגעתי לרשימה הזאת. אפשר לראות כאן גם frameworks כמו Phaser, שמאפשרות בניית משחק ע"י תכנות בלבד וגם כלים כמו Construct 2 שלא מצריכות ידע בתכנות בכלל ונותנות ממשק גרפי עם אפשרויות בחירה והזנת פרמטרים מסוגים שונים על מנת להגיע לאותן תוצאות. מנסיוני יש 2 אסכולות של מפתחים: 1. כאלה שבאו מרקע של תכנות פרופר (מדעי המחשב) - מעדיפים לתכנת הכל באמצעות עורכי קוד למיניהם...

איך לבנות פרוטוטייפ של משחק diamondDiggerSaga באמצעות Phaser ו-Typescript

אני אוהב את הבלוג של עמנואל פרונטו:  http://www.emanueleferonato.com/ במיוחד אני אוהב את הפורמט של בניית פרוטוטייפ של משחק ופרסום הקוד שלו. מאחר ובזמן האחרון אני עובד הרבה עם פייזר, באופן טבעי אני מתעניין בפוסטים שלו שעוסקים בפייזר ויש לו כבר די הרבה prototypes של משחקים שהוא כתב ב-Phaser. רק מה, הוא כותב ב-javascript וכל הקוד שלו כתוב בעמוד אחד ארוך. אז החלטתי לקחת את אחד מאבות הטיפוס שהוא כתב ולכתוב את הקוד מחדש בקלאסים של Typescript. זה יותר מאורגן ככה ויותר קל לעיכול לדעתי (גם אם יותר ארוך קצת). בסרטון למעלה אפשר לראות את התוצאה כפי שצילמתי אותה בפעולה - גם בטלפון וגם במחשב. מפתיע לראות כמה קל לכתוב את הקוד הזה, שמהווה בסיס לכל כך הרבה משחקים מוכרים וטובים. אז בואו נקפוץ ישר לקוד: אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם. ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-C...