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

14/03/2013

בפוסט הקודם חלק 2 בפיתוח משחקים ב – JavaScript דיברנו על מה זה  Sprite ואיך בעזרת ספרייה EASEJS להציג רצף תמונות מאותו מקבץ תמונות על מנת להציג אנימציה למשתמש.

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

המשימה הראשונה שלנו היא להזיז את הדמות במרחב המשחק, על מנת לבצע זאת נשנה את פונקציית tick באופן הבא:

ראשית, נגדיר תחום משחק – תחום המשחק ימנע מהדמות שלנו לבצע מגבולות המשחק.

בתוך פונקציית tick נוסיף את הקוד הבא:

if (player.x >= id("gameCanvas").width - playerWH) {
    // You reached the end -  We need to walk left
}

if (player.x < playerWH) {
    // You reached the end -  We need to walk right
}

הקוד הנ”ל יבוצע כאשר מאפיין ה – x של הדמות שלנו (player) גדול מרוחב אובייקט ה – gameCanvas, וכאשר מאפיין ה – x של הדמות קטן מרוחב הדמות.

עכשיו נזיז את הדמות במרחב לפי תנאים אלו:

if (player.x >= id("gameCanvas").width - playerWH) {
    // You reached the end -  We need to walk left
    player.direction = -90;
}

if (player.x < playerWH) {
    // You reached the end -  We need to walk right
    player.direction = 90;
}

הקוד הנ”ל משנה את כיון הדמות ל – 90 מעלות או  90- מעלות לפי כיון ההליכה של הדמות.

מה שנשאר לנו עכשיו זה להזיז את הדמות ע”י שינוי מאפיין ה – x של אובייקט player, נוסיף את הקוד הבא לאחר לפי הקריאה ל – stage.update, הקוד אחראי על שינוי מאפיין ה – x בהתאם לכיון הדמות.

vX – תאוצה על ציר – x , ניתן לשינוי וישפיע את התקדמות הדמות במרחב.

player.direction == 90 ? player.x += player.vX : player.x -= player.vX;

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

SNAGHTML20add10

דוגמא באתר

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

נוסיף את השורה הבאה לפני קריאה ל – player = new createjs.BitmapAnimation.

//( spriteSheet  horizontal  vertical  both ) 
createjs.SpriteSheetUtils.addFlippedFrames(playerSprite, true, false, false);

פונקציית addFlippedFrames תשכפל את כל התמונות ב – Sprite ותהפוך אותם בצורה אופקית ו\או בצורה אנכית.

כעת בקריאה לפעולה של הדמות (Jump, Walk וכו) נוכל לראות שכל הפעולות של הדמות (animations) שוכפלו ונוסף לשום הפעולה – h_.

על מנת לבצע הליכה שמאלה נקרא לפונקציית gotoAndPlay ונעביר את הפעולה עם סיומת h_

function tick() {
    if (_action.indexOf("walk") != -1) {
        if (player.x >= id("gameCanvas").width - playerWH) {
            // You reached the end -  We need to walk left
            player.direction = -90;
            player.gotoAndPlay("walk")
        }

        if (player.x < playerWH) {
            // You reached the end -  We need to walk right
            player.direction = 90;
            player.gotoAndPlay("walk_h");
        }

        // Moving the sprite based on the direction & the speed
        player.direction == 90 ? player.x += player.vX : player.x -= player.vX;

    }
    stage.update();
}

image

דוגמא באתר

Add comment
facebook linkedin twitter email

Leave a Reply