משחקי משחק חופשי

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

בניית משחק דפדפנים מרובי משתתפים בזמן אמת בפחות מיום – חלק 1/4

האם אתה משחק משחקים. אה! חשבו אי פעם לבנות אחת בעצמכם. הממ.. משחקים נראים קשים לבנייה. עם המון יצירות נעות מעורבות (ממש תרתי משמע), פיתוח המשחק נראה כאילו זה מוגבל ל- Devs ששקעו את רגליהם עמוק אל תוך המים הקדושים של רשתות, מתמטיקה, גרפיקה וכדומה. עם זאת, כאשר הרשת מתפתחת כל כך מהר ועם כל הפרוטוקולים והספריות החדשים שנמשכו בשנים האחרונות, זה עכשיו סופר פשוט להתחיל עם בניית משחקי מרובי משתתפים מבוססי דפדפן. במאמר זה נבחן את יישום שלב אחר שלב של משחק מרובה משתתפים בזמן אמת של פולשים חלליים (אה, הנוסטלגיה!) עם Phaser3 ובזמן אמת. אירחתי את המשחק האחרון בכתובת https: // space-invaders-multiplayer.הרוקאפ.com/ בשבילך לנסות את זה. לאורך הדרך, נבין את הארכיטקטורה, עיצוב המערכת, פרוטוקולי הרשתות מאחורי זה, ונראה גם את האזהרות שיש לזכור בבניית משחקים מבוססי דפדפן מרובה משתתפים. סדרת הדרכה זו מחולקת לארבעה חלקים:

• חלק 1: מבוא למושגי המשחקים וספריית פאזר
• חלק 2: הערכת פרוטוקולי רשת לאפליקציות בזמן אמת
• חלק 3: יישום הקוד בצד השרת כדי לשמור על כל השחקנים בסנכרון
• חלק 4: מסיים את קוד הצד של הלקוח כדי להציג את המשחק

דבר אחרון לפני שנתחיל. מאמר זה מניח הבנה בסיסית של JavaScript ו- Express/Nodejs. אנסה להסביר את כל השאר ככל האפשר ����‍����

בואו נקבל משחק!

חלק 1 – מבוא למושגי המשחקים ופייסר

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

כללי משחק לפולשי שטח מרובי משתתפים

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

רכיבים של משחק מרובי משתתפים בזמן אמת

למרות שזה נראה כאילו יש חבורה של דברים שקורים מאחורי משחק בזמן אמת ברשת, הם באמת מסתכמים בשלושה רכיבי ליבה:

בואו נסתכל על כל אחד מאלה.

1. נכסים

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

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

2. פיזיקה

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

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

3. רשת

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

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

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

באמצעות Phaser 3 כדי להוסיף נכסים ולאפשר פיזיקה

פייזר הוא מס עם מקור פתוח וב- WebGL מעלה מסגרת JavaScript עבור HTML5. אנו נשתמש בפייסר 3 כדי לבנות את המשחק. הסיבה לכך שאני מציין באופן ספציפי את הגרסה היא שיש שינויים רבים שבירים בין פאזר 2 ל -3 כולל התחביר. כמו כן, במקרה שאתה מחפש להוסיף כמה תכונות חדשות ומגניבות למשחק בעצמך בעתיד, עליך לדעת מה/איפה להסתכל.

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

יש סדרת הדרכות וידאו טובה באמת לפייסר שהייתי ממליץ אם זו הפעם הראשונה שלך לעבוד עם פייסר 3.

בגרסת ה- TL; DR שלה, עם Phaser3, אנו יכולים לציין אובייקט config שיש לו את המידע על הבד והמשחק עצמו, כולל גודל הבד, תכונות הסגנון שלו, סצינות שונות הכלולות במשחק שלנו (נדון בקרוב), סוג מנוע הפיזיקה (שכן לפייסר יש רבים) וכו ‘.

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

זה אולי נשמע קצת מבלבל מכיוון שעדיין לא ראית קוד. בואו נעשה את זה הבא.

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

בואו נגיע ישר למסך המשחק לעת עתה. נדאג לדפי ההשקה וה- Leaderboard, בהמשך. המשחק שלנו יהיה דף HTML עם בד שניתן עליו. בד זה יחזיק וינהל את המשחק בפועל. אז בואו ניצור קובץ, קראו לו אינדקס.html . כדי לשמור על דברים מסודרים, נאחסן את כל קבצי ה- HTML שלנו בתיקיה שנקראת תצוגות וכל קבצי JavaScript בצד הלקוח בתיקיה בשם Public . בואו נתחיל את התצוגות/אינדקס.קובץ HTML עם שלד בסיסי:

כפי שאתה יכול לראות, כל מה שאנחנו עושים כאן הוא קישור לקבצי CSS ו- JS שנוסיף בקרוב, אך חשוב מכך את הקישור ל- Phaser JS CDN. אתה יכול להעתיק את ה- CSS ישירות מפרויקט GitHub

מלבד זאת, בתוך גוף ה- HTML, יש לנו DIV עם תעודת זהות של משחק משחק . זה המקום בו נוסיף את בד המשחק שלנו דרך JavaScript.

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

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

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

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

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

1. שיטת ה- PreLoad () מקבלת את כל המשאבים שאנו זקוקים להם, מכל מקום שהם נמצאים, טוענת אותם ומקדמים אותם מוכנים למועד בו נרצה להוסיף אותם למשחק שלנו.
2. שיטת Create () מתבצעת פעם אחת כאשר המשחק פועל לראשונה. אנו יכולים להוסיף את כל האתחול המשתנה, הגדרות האנימציה וכו ‘, בשיטה זו.
3. שיטת העדכון () מבוצעת ברציפות בלולאה כל עוד המשחק דולק ומכאן שהוא מסוגל לעדכן כל העת את אובייקטי המשחק לפי היגיון המשחק. אנו נעדכן את האווטרים, יורה כדורים, נעביר את הספינה, והכל בשיטה זו..

טעינת נכסים ויצירת אנימציות

בואו נמשיך להעמיס כמה נכסים עכשיו. הגדר את השיטה PRELOAD () כדלקמן

אירחתי במקור את המשחק הזה ב- Glitch המאחסן את כל הנכסים בדלי שלו, שניתן להחזיר על ידי קישור CDN. אתה יכול להשתמש באותו, אחרת Amazon S3 היא אפשרות פופולרית נוספת.

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

כפי שאתה יכול לראות, העמסנו נכס שפריץ בפייסר באמצעות זה.לִטעוֹן.SpriteSheet () ושלח לו שלושה פרמטרים:

• המזהה
• נתיב לקובץ בפועל
• מידות הקובץ (בפיקסלים).

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

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

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

בשיטת Create (), נגדיר את האנימציה לפיצוץ זה:

השתמשנו בזה של פאזר.אנימציות.שיטה ליצור () ליצירת האנימציה. שיטה זו נמשכת:

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

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

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

כל המאמרים בסדרה זו:

• חלק 1: מבוא למושגי המשחקים וספריית פאזר
• חלק 2: הערכת פרוטוקולי רשת לאפליקציות בזמן אמת
• חלק 3: יישום הקוד בצד השרת כדי לשמור על כל השחקנים בסנכרון
• חלק 4: מסיים את קוד הצד של הלקוח כדי להציג את המשחק

שחרור נפרד הרלוונטי למדריך זה זמין ב- GitHub אם תרצה לבדוק זאת.

אתה יכול גם לעקוב אחר פרויקט GitHub לפיתוחים האחרונים בפרויקט זה.

אם יש לך שאלות, אנא אל תהסס לפנות אלי בטוויטר @srushtika. ה- DMs שלי פתוחים 🙂

קטגוריה: בניין מרובה משתתפים

Chimeraland הוא חופשי לשחק ב- Open World Sandbox Survival MMORPG (משחק תפקידים מקוון מרובה משתתפים מאסיבי) למחשב (Windows) ו- Mobile (Android/iOS) שפותח על ידי Pixel Soft והפורסם על ידי Level Infinite. המשחק מוגדר בעולם פרהיסטורי, מיתי […]

MUCK הוא משחק Roguelike Free* חינם* משחק יחיד והשרתי מרובה משתתפים עבור PC (Windows) מאת המפתח הנורווגי הפופולרי, האמן והיוטובר דני (שעשו גם משחק סרטן וקרלסון). MUCK הוא תערובת נמוך, סתמי ועם זאת (מאוד) מאתגרת של הישרדות (ה.ז. […]

ארגז החול הוא מחזה חופשי למשחק ומשחק-אל-ארון, מבוזר ומונע קהילה אקולוגי ומונע על ידי מחשב (Windows ו- Mac) בפיתוח פעיל (Open Alpha) ובנוי על Blockchain Ethereum (בדומה ל- Decentraland). שחקנים יכולים לבנות, להחזיק, לשתף ו […]

Core הוא אוסף משחקים חופשי להפעלה ופלטפורמת ייצור משחקים הדומה לקרייטה ו- Roblox. Core הוא במילים אחרות רב -גביים של משחקים בחינם לשחק ועולמות לחקור שתוכנן על ידי קהילה עולמית של מפתחים שתוכלו בקלות […]

Crayta הוא פלטפורמה לייצור משחקים משותפים בחינם למשחק ואוסף משחקים ארקייד מרובי משתתפים הבנוי על Unreal Engine 4 למחשב, בדומה לליבה ו- Roblox. שחקנים יכולים לקפוץ פנימה וליצור משחקים יחד בענן, ללא קשר לחוויית התכנות שלהם. מ […]

Wild Terra Online הוא MMORPG בחינם למשחק עם ארגז חול והישרדות, שוכן בעולם פנטזיה מימי הביניים בשליטת שחקנים לחלוטין. לא תצטרך להשלים שרשרת משימות ולהרוג אלף זאבים ליצירת ציוד. הכל הרבה […]

ARK: ההישרדות התפתחה (ניידת) היא משחק הישרדות של Activenture Free-to-Play* ניידים-על ידי סטודיו Wildcard עבור Mobile (Android, iOS), שנקבעו בעולם פרהיסטורי בו שחקנים, שנמצאים על אי, חייבים לשרוד נדידה דינוזאורים ובעלי חיים פרהיסטוריים אחרים, סכנות טבעיות, […]

Untured הוא חופשי לשחק במשחק ההישרדות של ארגז החול של זומבים, משחק יורה למחשב (Windows, Mac ו- Linux) במאמר MMO/Multiplayer Apocalypse Survival ז’אנר (אם כי אתה יכול גם לשחק לבד או ב- COOP ב- PVE). במקום להתמקד ב- […]

Totemori הוא משחק מרובה משתתפים מהנה וחדשני לחופשי משותף בחינם, בו אתה בונה מגדלים כשאתה מנסה להפיל את כולם. Totemori כולל מרובי משתתפים מקומיים לעומת שיתוף פעולה עבור עד 4 שחקנים. שחק נגד חבריך או תרגול נגד בוטים, […]

ליגת הזבל הגלקטי היא זירת Crafter חופשית למשחק תחרותי-יורה מעורבב עם אפשרויות לבניית ספינות כמעט אינסופיות. תבנה כל דבר. להילחם בכל אחד. בחלל. בנה את ספינות הזבל שלך ממש לכל הצורות והגדלים והילחם נגד יצירות של […]

Creativerse הוא משחק מענג למשחק חופשי ומשחק מהדור הבא של MMO MMO על הרפתקאות, חקר ויצירתיות עם חבריך עם חבריך. ועכשיו זה חופשי לשחק. אתה תקוע בעולם עצום ומסתורי שמוקף בבהמות אכזריות ו […]

Gunscape הוא ערכת בניית FPS. זה משחק שמאפשר לך להתפרע עם היצירתיות שלך בארגז חול של פעולה! Gunscape עושה זאת על ידי מתן כלים קלים לשימוש על בסיס ממשק מיקום בלוק שכולם כבר מכירים ליצירת שחקן יחיד […]

Trove הוא חופשי לשחק, voxel voxel mmorpg על ידי Trion For Pc (Windows, Mac), Xbox One, PS4 ו- Nintendo Switch. טרוב כולל אינספור תחומים מלאים במשימות, שידות ואויבים גדולים וקטנים. חקור וצור את הדרך שלך […]

Roblox היא פלטפורמת וידאו מקוונת של משחק וידאו מקוון בחינם (בדומה ל- Core ו- Crayta) המאפשרת למשתמשים לעצב ולשתף את המשחקים והרמות שלהם, ולשחק את כל סוגי המשחקים שנוצרו על ידי משתמשים אחרים, החל מ- [ …]