שימוש בHTML5 ליצירת משחקי מחשב תלת מימדיים בJavaScript 

ראשית כל, הסבר קצרצר על הקנבס.

הקנבס (canvas), הוא בד ציור, הן בעולם האמנות כמו גם בעולם האינטרנט.

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

לקנבס יש ייתרון גדול מבחינת ביצועים - מה שגורם לGoogle, ולחברות רבות נוספות, לאמץ אותו. בסרטונים שונים ניתן לראות דוגמאות למפתחים שלא מפסיקים לשלב את הקנבס החדש ואת webGL (הAPI שמפעיל אותו) באתרי אינטרנט ואפליקציות שונות. נוכל למצוא אותו בgoogle maps, you-tube, ואף בעסקים "קטנים" (דוגמאות יש באתר שלי, שמופיע בחתימה).

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

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

ראשית כל, הטמעות, מן הסתם. כמה דברים בסיסיים. JQuery, קובץ הCSS שלי, הסקריפט שלי וכמובן babylon.js

 

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

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

if (BABYLON.Engine.isSupported()) { // .....*** my code here ***.... } else { alert("3d is not supported"); }

לאחר מכן, נכריז על המאפיינים הכלליים:

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

var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera1", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene); var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, -100), scene);

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

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

http://noam-gaash.co.il/daysa/

 

התחלתי עם הגדרה של שלושה דברים:

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

var box = new Array(); box[0] = BABYLON.Mesh.CreateBox("Box", 0.2, scene); prize = BABYLON.Mesh.CreateBox("Box", 0.2, scene);   border = BABYLON.Mesh.CreateBox("Box", 5, scene);

הדבר הבא שאני עושה - להציב את הפרס במיקום אקראי. שיהיה אתגר!

prize.position = new BABYLON.Vector3(Math.floor((Math.random() * 24) + 1) / 5 - 2.4, Math.floor((Math.random() * 24) + 1) / 5 - 2.4, Math.floor((Math.random() * 24) + 1) / 5 - 2.4);

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

כיוון שמדד הFPS (מסגרות לשנייה) של האניציה (מדד למהירות המשחק) משתנה מדפדפן לדפדפן, שמתי לי "סטופר" משלי:

setInterval(function() { alpha++;   }, 30); כל 30 אלפיות השנייה, המשתנה הזה יגדל קצת. אם הוא מגיע לעשר, סימן שעברה כשליש השנייה ואפשר לקדם את הנחש צעד קדימה. if ((alpha > 10) && !finished) { alpha = 0; הדבר הראשון שנעשה כשהגיע הזמן לזוז זה לבדוק, האם הנחש כבר הגיע לתפוח? אם כן, צריך להאריך את הזנב (ליצור משבצת חדשה!), להזיז את התפוח למיקום אקראי חדש, ולתת לגולש לא פחות מ300 נקודות! משחק מסובך, אין ספק שמגיע לו. if (Math.pow(prize.position.x - box[0].position.x, 2) < 0.001 && Math.pow(prize.position.y - box[0].position.y, 2) < 0.001 && Math.pow(prize.position.z - box[0].position.z, 2) < 0.001) { //prize relocation tail++; box[tail] = BABYLON.Mesh.CreateBox("Box2", 0.15, scene); prize.position = new BABYLON.Vector3(Math.floor((Math.random() * 24) + 1) / 5 - 2.4, Math.floor((Math.random() * 24) + 1) / 5 - 2.4, Math.floor((Math.random() * 24) + 1) / 5 - 2.4); //score score += 300; } עכשיו, על הנחש לזוז משבצת קדימה. מאיפה זה קדימה? מה עושים? בחרתי להפעיל את זה בצורה פשוטה יחסית: אני מתחיל מחתיכת הזנב האחרונה, וכל חתיכת זנב אני מעביר אל המיקום של חתיכת הזנב שלפניה. לבסוף, את ראש הנחש אני מזיז 0.2 יחידות בכיוון אליו הנחש זז.   //move the tail for (i = tail; i >= 1; i--) { box[i].position.x = box[i - 1].position.x; box[i].position.y = box[i - 1].position.y; box[i].position.z = box[i - 1].position.z; } //move the snake itself if (dir == "x") box[0].position.x += 0.2; else if (dir == "-x") box[0].position.x -= 0.2; else if (dir == "y") box[0].position.y += 0.2; else if (dir == "-y") box[0].position.y -= 0.2; else if (dir == "z") box[0].position.z += 0.2; else if (dir == "-z") box[0].position.z -= 0.2; ושלב אחרון - עלינו לבדוק שני מצבי הפסד -

• הגולש נתקע בזנב של עצמו
• הגולש יצא מהשוליים המוגדרים

if ( box[0].position.x > 2.4 || box[0].position.y > 2.4 || box[0].position.z > 2.4 || box[0].position.x < -2.4 || box[0].position.y < -2.4 || box[0].position.z < -2.4) finish(); for (i = 1; i <= tail; i++) { if ( box[0].position.x == box[i].position.x && box[0].position.y == box[i].position.y && box[0].position.z == box[i].position.z) finish(); } מכאן הכל כבר מוכר  - מופעלת הפונקציה finish, שעוצרת את המשחיק ומעלה הודעת הפסד ידידותית פחות או יותר. מדריך זה פירט על קצה המזלג את הפעולות הבסיסיות שערכתי ע"מ ליצור את המשחק הזה. אני מקווה שהמחשתי את הפשטות שבה ניתן כיום ליצור, בפחות מ200 שורות קוד, משחק מחשב חדשני, שפועל על הדפדפן בלי תוספים מיותרים והכל בזכות טכנולוגית הHTML5 החדשה. לשאלות, הערות והארות אתם מוזמנים ליצור איתי קשר בדוא"ל, באתר האינטרנט ואפילו בפייסבוק שלי. בהצלחה!