תחילת העבודה עם Phaser לפיתוח משחקים

Phaser הוא מסגרת ליצירת משחקי וידאו דו-ממדיים. הוא משתמש ב- HTML5 Canvas כדי להציג את המשחק ו- JavaScript להפעלת המשחק. היתרון של שימוש ב- Phaser על פני JavaScript של וניל הוא שיש לה ספרייה ענפה שמשלימה חלק ניכר מהפיזיקה של משחקי וידאו ומאפשרת לך להתרכז בעיצוב המשחק עצמו.

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

למה להתפתח עם Phaser?

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

בטעינה מוקדמת, נכסי המשחק מועלים ומועברים למשחק.

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

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

הגדר את המערכת שלך לפיתוח משחקים עם

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

באמצעות XAMPP כדי להגדיר localhost אם עדיין אין לך התקנה אחת.

מה זה 127.0 0.1, Localhost או כתובת Loopback?

ראית "localhost" במחשב שלך, אבל מה זה? מה הפירוש של כתובת 127.0.0.1? נפרצתם?

הקוד שלהלן יביא אותך לפעולה. זה קובע סביבת משחק בסיסית.

כדי לרוץ, המשחק ידרוש תמונת PNG בשם "gamePiece" שנשמרה בתיקיית "img" במקום המקומי שלך. לשם פשטות, דוגמה זו משתמשת בריבוע כתום 60xgame de60px. המשחק שלך צריך להראות בערך כך:

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

הסבר על קוד ההתקנה

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

כדי שמשחק Phaser יפעל, עליכם לייבא את ספריית Phaser. אנו עושים זאת בקו 3. בדוגמה זו קישרנו לקוד המקור, אך אתה יכול להוריד אותו למארח המקומי שלך ולהפנות גם לקובץ.

הרבה מהקוד מגדיר עד כה את סביבת המשחק, המשתנה config חנויות. בדוגמה שלנו, אנו מגדירים משחק פאזרים עם רקע כחול (CCFFFF בקוד צבע hex) שהוא 600 פיקסלים על 600 פיקסלים. לעת עתה, פיסיקת המשחק הוגדרה מִקמֶרֶת, אבל פייזר מציע פיזיקה שונה.

סוף סוף, סְצֵינָה אומר לתוכנית להפעיל את טען מראש פונקציה לפני תחילת המשחק וה- לִיצוֹר פונקציה כדי להתחיל את המשחק. כל המידע הזה מועבר לאובייקט המשחק שנקרא מִשְׂחָק.

קָשׁוּר: 6 המחשבים הניידים הטובים ביותר לתכנות וקידוד

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

תמונת gamePiece נוספה למשחק בפונקציית create. שורה 29 אומרת שאנחנו מוסיפים את gamePiece image בתור ספרייט שמאלי 270px ו 450px למטה מהפינה השמאלית העליונה של אזור המשחק שלנו.

עושה את חתיכת המשחק שלנו לזוז

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

הוספת פונקציית עדכון

סצנה חדשה בתצורה:

סצנה: {
טען מראש: טען מראש,
ליצור: ליצור,
עדכון: עדכון
}

לאחר מכן, הוסף פונקציית עדכון מתחת לפונקציית היצירה:

עדכון פונקציה () {
}

קבלת תשומות מפתח

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

var gamePiece;
var key קלט;

יש לאתחל את משתנה keyInput כאשר המשחק נוצר בפונקציית create.

פונקציה create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

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

עדכון פונקציה () {
אם (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
אם (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
אם (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
אם (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

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

הוספת מכשולים למשחק

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

פונקציה טעינה מוקדמת () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('מכשול 1', 'img / מכשול1. png');
this.load.image ('מכשול 2', 'img / מכשול2.png');
}

ואז כל ספרייט מכשול יהיה צריך להיות מאותחל בפונקציית היצירה, ממש כמו משחק המשחק.

פונקציה create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
מכשול 1 = this.physics.add.sprite (200, 0, 'מכשול 1');
מכשול 2 = this.physics.add.sprite (0, 200, 'מכשול 2');
}

לגרום למכשולים לזוז

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

מכשול1.y = מכשול1.y + 4;
אם (מכשול 1. y> 600) {
מכשול1.y = 0;
מכשול 1.x = Phaser. מתמטיקה. בין (0, 600);
}
מכשול2.x = מכשול2.קס + 4;
אם (מכשול 2. x> 600) {
מכשול 2. x = 0;
hindacle2.y = Phaser. מתמטיקה. בין (0, 600);
}

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

איתור התנגשויות

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

בספריית הפיזיקה של Phaser יש גלאי קוליידר. כל שעלינו לעשות הוא לאתחל אותו בפונקציית היצירה.

this.physics.add.collider (gamePiece, מכשול 1, פונקציה (gamePiece, מכשול 1) {
gamePiece.destroy ();
מכשול. להרוס ();
מכשול 2. הרס ();
});
this.physics.add.collider (gamePiece, מכשול 2, פונקציה (gamePiece, מכשול 2) {
gamePiece.destroy ();
מכשול. להרוס ();
מכשול 2. הרס ();
});

שיטת ה- collider דורשת שלושה פרמטרים. שני הפרמטרים הראשונים מזהים אילו אובייקטים מתנגשים. אז למעלה, יש לנו שני colliders להגדיר. הראשון מזהה מתי משחק המשחק מתנגש במכשול 1 והמתנגש השני מחפש התנגשויות בין משחק המשחק למכשול 2.

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

נסה את פיתוח המשחק עם Phaser

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

מבוא זה יתחיל בעבודה, אך נותר עוד הרבה ללמוד. הדבר הנהדר בפייזר הוא שהרבה מפיזיקת המשחק נעשית בשבילך. זוהי דרך נהדרת להתחיל בעבודה עם משחקי דו מימד. המשך לבנות על קוד זה ולחדד את המשחק שלך.

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

כיצד להשתמש ב- DevTools של Chrome כדי לפתור בעיות של אתרים

למד כיצד להשתמש בכלי הפיתוח המובנים של דפדפן Chrome כדי לשפר את אתרי האינטרנט שלך.

על הסופר