פיתוח משחקים ב JavaScript – מבוסס על משחק סופר 8 – חלק 1

07/03/2013

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

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

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

המשחק שפותח עבור מיקרוסופט ישראל – סופר 8 , הינו משחק מבוסס HTML 5 + JavaScript ואני הולך לדבר קצת על איך מתחילים לפתח משחק עם JavaScript ואתה תראו שפיתוח משחקים לא צריך להיות כ”כ מפחיד.

אז איך מתחילים?

  1. סוג המשחק – איזה משחק אתם רוצים לפתח? יש המון קטגוריות של משחקים – אני אצמצם את הרשימה בשבילכם – משחקי שולחן או משחקי וידאו.
    1. משחקי שולחן – לדוגמא איקס עיגול, פאזל, פוקר הינם משחקים אשר המצב של המשחק נשאר סטטי עד לפעולה מצד המשתמש, המשחק לא משתנה עד שבוצעה פעולה ע”י שחקן אחר או על ידי עצמך.
    2. משחקי וידאו – לדוגמא – סופר 8 פאקמן, Bubbels או כל משחק שמשתנה גם בפעולה משתמש וגם לפי זמן. עוד דוגמא זה משחק יריות – גם אם לא תזוז עדיין יגיעו אליך מפלצות והעולם (המשחק) ימשיך לנוע.
  2. שליטה בשפה – נכון אמרתי שזה אל חייב להיות כ”כ מסובך לפתח משחק אבל בשביל לפתח משחק צריך שליטה טובה בשפה שבחרתם.
  3. כלי עזר – אחד הדברים שאני ממליץ הוא לא לכתוב הכל בעצמכם, כל המשחקים הגדולים משתמשים בתשתיות לפיתוח משחקים (כאלו שפותחו על ידם או נקנו), אתה יכול לכתוב אבל פשוט חבל על הזמן שלך לבצע דברים שכבר בוצעו אין ספור פעמים ע”י אחרים, לדוגמא – אם אתה רוצה לממש פיזיקה במשחק על מנת להשפיע על אובייקטים שונים – זה ידרוש לא מעט זמן כתיבה או שתוכל להשתמש בספריה קיימת.

לולאת משחק

אחד המרכיבים החשובים ביותר בפיתוח משחקים נקרא לולאת משחק (Game Loop), לולאת המשחק אחראית על ביסוס לוגיקת המשחק ע”י ציור הגרפיקה במשחק. לולאת המשחק מאפשרת למשחק להמשיך להתקדם גם בלי קבלת פעולות חדשות מהמשתמש.

תחשבו על Notepad, כאשר אנחנו פותחים אותו ולא כותבים  Notepad לא עושה שום דבר.
עכשיו נפתח Outlook.com או Gmail.com ולא נכתוב דבר – ברקע עדיין מתרחשים דברים – נכו שמדובר על Ajax וזה לא קשור למשחק אבל הרעיון שיש תהליכים שרצים ברקע ולא רק מחכים לפעולה של המשתמש.

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

while (!MyGame.stopped) { 
  MyGame.update(); 
}

 

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

אם נשתמש ב – While בשביל לקרוא לפעולות update  (אנחנו מדברים על JavaScript), הדפדפדן כנראה יחסום את הפונקציה וגם לא נהיה הכי יעילים כי אין לנו אפשרות לשלוט במהירות המשחק או במילים אחרות כל כמה זמן אנחנו רוצים לעדכן את האובייקטים במשחק – FPS – Frames Per Second.

פתרון נוסף שנוכל לבצע הוא שימוש ב – setInterval, ואז בצורה קלה מאוד נוכל להגדיר לולאת שתרוץ על פי קצב ריענון הגיוני.

MyGame.fps = 60;

MyGame.update = function () {
    // Move game parts
};

// Start the game loop
MyGame._intervalId = setInterval(Game.update, 1000 / Game.fps);

// To stop the game, use the following:
clearInterval(MyGame._intervalId);

FPS – כדי שהעין שלנו תראה “אנימציה” בעצם צריך להזיז רצף תמונות במהירות מסוימת, אם התמונות יזוז לאט מידי נוכל לראות שזה לא אנימציה. המינימום FPS שצריך על מנת ליצור את התחושה שמדובר באנימציה הוא – 17 FPS.

למרות שיצירת לולאת משחק יכול להיראות פשוט מאוד עדיין אני הולך לדבר על ספריה בשם EASEJS, ספריית EASEJS נותנת תמיכה בעבודה עם Canvas ב – HTML 5 ועוזרת בצורה משמעותית לפיתוח משחקים, והיא מכילה אובייקט בשם – Ticker שישמש אותנו כלולאת המשחק.

ראשית נוריד את – http://www.createjs.com/#!/EaselJS ונפתח דף HTML חדש, נוסיף קישור אל הקבצים שהורדנו.

<script type="text/javascript" src="js/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="js/easeljs/geom/Rectangle.js"></script>

<script type="text/javascript" src="js/easeljs/events/EventDispatcher.js"></script>

<script type="text/javascript" src="js/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="js/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="js/easeljs/utils/SpriteSheetUtils.js"></script>

<script type="text/javascript" src="js/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="js/easeljs/display/Container.js"></script>
<script type="text/javascript" src="js/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="js/easeljs/display/SpriteSheet.js"></script>
<script type="text/javascript" src="js/easeljs/display/BitmapAnimation.js"></script>
<script type="text/javascript" src="js/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="js/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="js/easeljs/display/Text.js"></script>

 

נוסיף ל – Body את אובייקט ה – Canvas ונקרא לו – gameCanvas

<canvas id="gameCanvas" width="600" height="100"></canvas>

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

stage = new createjs.Stage(id("gameCanvas"));

כעת מה שנשאר לעשות הוא להוסיף תמונה למשחק שלכם, בעזרת שימוש בפונקציית Bitmap אשר מקבל נתיב לתמונה, נוסיף את התמונה לתוך ה – Stage בעזרת קריאה ל – stage.addChild ונעביר אליו את התמונה שלנו.

לאחר מכן נגדיר את קצב הרענון של המשחק על 30 FPS , בעזרת קריאה ל – (createjs.Ticker.setFPS(30.

ודבר אחרון הוא להירשם לאירוע (Event) בשם – tick, פונקציית tick תופעל כל 33.33 מאיות השניה (1000/30).

 

var stage, image, fpstext;
function init() {
    stage = new createjs.Stage(id("gameCanvas"));
    image = new createjs.Bitmap("assets/Player.png");

    stage.addChild(image);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", tick);
}

כעת כל מה שנשאר לנו הוא לעדכן את המשחק ברגע שפונקציית tick מבוצעת, בשלב הנוכחי אני מזיז את התמונה 10 פיקסלים ימינה , במידה והתמונה הגיעה ל – 600 פיקסלים (קצה תחום משחק) אני מחזיר את התמונה ל – 0. לאחר שביצענו את השינויים נקרא ל – stage.update על מנת לעדכן את ה – Canvas בהתאם לשינויים שביצענו.


function tick() {
    image.x += 10;

    if (image.x > 600)
        image.x = 0;

    stage.update();
}

image

כניסה לדוגמא

עכשיו נוסיף למשחק שלנו שורה טקסט בעזרת שימוש באובייקט – Text, עוד דוגמא לשימוש הקל בעבודה עם Canvas בעזרת EASEJS.

האובייקט טקסט שנוסיף יציג את מהירות ה – FPS של המשחק, נוסיף את הקוד הבא תחת פונקציית ה – init

fpstext = new createjs.Text("fps:", "20px Arial", "#7a1567");
fpstext.x = 0;
fpstext.y = 20;
stage.addChild(fpstext);

ולסיום תחת פונקציית tick נוסיף את השורה הבאה:

fpstext.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";

וזאת התוצאה שנקבל:

image

 

כניסה לדוגמא

Add comment
facebook linkedin twitter email

Leave a Reply