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

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



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

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

אז בואו נקפוץ ישר לקוד:

שוב, אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם.
ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-CSS רק מאפס כמה דברים (מוריד שוליים ומגדיר שה-div שבו נמצא המשחק מתפרס על 100% משטח המסך) וב-Typescript נמצאים כל הקלאסים שבהם אני משתמש (מוצגים כאן ברצף, אבל במציאות הם מופרדים לקבצים בודדים, כמו שרואים ב-HTML.
אגב, כדאי שכפתור ה-Result ב-codepen יהיה כבוי כדי לראות את הקוד בכל המסך.

אם תרצו לראות את הפרוטוטייפ בפעולה תלחצו כאן.
להלן הסבר קצר על הקוד:
ה-nameSpace שבחרתי הוא Sokoban כשם המשחק המקורי. זה ה-module שמכיל את כל הקלאסים.

  1. כמו במשחק הקודם (DiamondDigger) הקלאס הראשי נקרא באותו שם של המשחק והוא יורש מ-Game של Phaser. מטרתו היא ליצור את המשחק ולהפעיל את ה-State שנקרא Boot.
  2. הקלאס Boot יורש מ-State של Phaser והוא דואג ל-2 דברים:
    1. לדאוג לכך שהמשחק יוצג במלואו בכל מסך (ע"י ה-ScaleManager)
    2. להוסיף למשחק 2 States שנקראים Preloader ו-Game ולהפעיל את Preloader.
  3. הקלאס Preloader גם כן יורש מ-State והוא דואג ל-2 דברים:
                 1. לטעון spritesheet שזאת למעשה תמונה אחת שמכילה את כל סוגי ה-tiles שהם למעשה:
      • רקע
      • מיקום ריק
      • נקודת היעד
      • ארגז
      • דמות רגילה
      • ארגז על רקע נקודת היעד
      • דמות על רקע נקודת היעד
                 2. להפעיל את ה-State שנקרא Game
  1. הקלאס Game הוא לב המשחק.

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




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

תגובות

הוסף רשומת תגובה

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

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

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

משתנים ב-javascript

היי, לפני כמה שנים פרסמתי את הסרטון הבא על משתנים ב-javascript ורציתי הפעם לשתף את התמלול שלו למי שמעדיף לקרוא טקסט. היי, כאן אסף מקודאקטיב! היום במסגרת HTML ב-5 דקות אנחנו נלמד על משתנים ב-javascript. משתנים הם אבני הבניין של כל שפת תוכנה. הם משמשים אותנו כדי לשמור מידע בזיכרון של המחשב. משתנה הוא כמו קוספא שבתוכה מאחסנים מידע שניתן לשימוש בהמשך. לכל קופסא כזאת יש שם ולאחר שמאחסנים בה את המידע, יהיה אפשר לגשת אליה בהמשך באמצעות השם של הקופסא. לדוגמא: למשתנה קוראים X והמידע שבתוכו הוא המספר 4. או משתנה בשם playerName והמידע שבתוכו הוא המילה "אסף". ב-javascript מגדירים משתנה באמצעות המילה השמורה var (תיקון - נכון להיום רצוי יותר להשתמש ב-let מסיבות שונות הקשורות להתפתחות השפה, לכן אשתמש בהמשך במילה זו) ולאחריה שם המשתנה. let x; הסימן נקודה-פסיק משמש לסיום משפט. javascript היא שפת case sensitive ולכן חשוב להקפיד על גודל האותיות. את המילים השמורות כמו let כותבים באותיות קטנות. שמות של משתנים נהוג לכתוב גם באותיות קטנות. שם של משתנה יכול להכיל אותיות ומספרים...
הוסף רשומת תגובה
המשך לקרוא

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

היי, הפעם אסביר איך להתמצא בממשק של קונסטרקט, איך מורכב המסך הראשי, מהם התפריטים העיקריים שבהם אני משתמש וגם כמה קיצורי מקלדת שימושיים. קודם כל אם אף פעם לא עבדתם עם Construct 3 – שווה להסתכל על מסך הפתיחה של התוכנה (מה שנקרא שם Start page ). בחלק העליון יש כפתורי פתיחת פרויקט חדש, או ישן, משמאל יש גישה לתבניות ופרויקטים לדוגמא, במרכז יש משחקים שלמים שאפשר להיכנס ולראות איך הם בנויים ולמטה חומרי הדרכה מסוגים שונים. בקיצור – כמעט כל מה שדרוש כדי להתחיל לעבוד עם התוכנה נמצא בהישג יד מתוך המסך הזה. משהו שחשוב לדעת לגבי שמירה ופתיחה של פרויקטים בקונסטרקט - ישנם 3 אפשרויות לשמירת פרויקט (וכנ"ל לפתיחה): 1.       CLOUD – הממשק של קונסטרקט מאפשר שמירה ישירות באחד מ-3 שירותי ענן – Dropbox, OneDrive, Google Drive . אם יש לכם חשבון באחד באלה – החיים שלכם יהפכו מאד קלים ופרודוקטיביים בעבודה עם קונסטרקט. תוכלו למעשה לפתוח את הפרויקט שלכם מכל מקום בכל זמן ולהמשיך לעבוד עליו. אני למשל מלמד תלמידים בכיתת מחשבים. בסיום השיעור הם שומרים את מה שעבדו ע...
הוסף רשומת תגובה
המשך לקרוא