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

10/03/2013

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

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

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

לפני שאנחנו נכנסים לקוד צריך להבין להכיר אוביקט חשוב שנקרא – Sprite:

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

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

image

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

<script type="text/javascript">
var stage, player, playerImage, _action;
var playerWH = 64;
var frequency = 4;

function init() {
    playerImage = new Image();
    playerImage.src = "assets/Player.png";
    playerImage.onload = start;
}
</script>

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

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

כפי שניתן לראות מהדוגמא מטה, אנחנו מתחילים ביצירת Stage שיאכלס את האובייקט שלנו, לאחר מכן אנחנו יוצרים אובייקט SpriteSheet ומגדירים את images לתמונה של השחקן, תחת אובייקט frames נגדיר את גודל הדמות (במקרה שלנו 64×64 פיקסלים), ולבסוף והחשוב ביותר וכאן נראה את הכח של SpriteSheet היא הגדרת המצבים של הדמות.

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

    var playerSprite = new createjs.SpriteSheet({
        animations:
        {
            "walk": [0, 9, null],
            "fall": [10, 21, null],
            "jump": [22, 32, null],
            "gamgam": [34, 64, null],
            "stand": [44, 44, null],
            "special_combo": [22, 32, "gamgam"]
        },
        images: [playerImage],
        frames:
            {
                height: playerWH,
                width: playerWH,
                regX: 0,
                regY: 0,
            }
    });
}

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

כפי שניתן לראות בתמונה מטה פעולת “הליכה” מתחילה מתמונה מספר 0 עד תמונה 9.

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

“שם הפעולה” : [מיקום תמונת ראשונה,  מיקום תמונה אחרונה, פעולה הבאה, תדירות]

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

 

SNAGHTML68789ba

דוגמאת קוד באתר

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

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

player = new createjs.BitmapAnimation(playerSprite);
player.x = id("gameCanvas").width / 2;
player.y = id("gameCanvas").height - playerWH;
//player.currentFrame = 2;
player.gotoAndPlay("walk");

stage.addChild(player);

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

image

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

switch (_id) {
    case "fps":
        createjs.Ticker.setFPS(parseInt(value));
        break;
    case "velocity":
        player.vX = parseInt(value);
        break;
    case "frequency":
        frequency = parseInt(value);
        start();
        break;
}

דוגמאת קוד באתר

Add comment
facebook linkedin twitter email

Leave a Reply