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

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

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

---

---

למה לפתח עם Phaser?

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

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

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

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

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

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

---

---

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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}




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

---

---

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

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

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

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

תהליך קריטי מת שגיאה ב- Windows 10

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

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

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

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

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

גורם לחלק המשחק שלנו לזוז

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

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

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

scene: {
preload: preload,
create: create,
update: update
}

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

כיצד להוסיף כתוביות ב- Windows Media Player

function update(){
}

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

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

var gamePiece;
var keyInputs;

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

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

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

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

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

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

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

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

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

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

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

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

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

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

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

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

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

כיצד להוסיף סימן מים בוידאו

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד להשתמש ב- Chrome DevTools לפתרון בעיות של אתרים

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

קרא הבא נושאים קשורים

• תִכנוּת
• JavaScript
• HTML5
• פיתוח משחק

על הסופר ג'ניפר סיטון(פורסמו 21 מאמרים)

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

עוד מאת ג'ניפר סיטון

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה