אנימציה ותמונות בעזרת ImageLoader

לשיעור הקודם – שימוש ב Sprite


בשיעור זה נלמד כיצד לטעון תמונות ולנגן אנימציה ב HTML5 בעזרת ImageLoader.

לחץ כאן להרצת הדוגמא.

ה ImageLoader הוא הרחבה של Shape. האמת שהתלבטתי, מכיוון שב AS3 הוא יורש מ Sprite. אבל בסופו של דבר לא רציתי להכביד על ה JS מבחינת הביצועים ולכן בחרתי לרשת מ Shape.

נסתכל בקוד הבא:

     var image1 = new DisplayObject.ImageLoader("assets/Sprites/beholder.png");
    stage.addChild(image1);
    image1.x = 50;
    image1.y = 50
    var image2 = image1.clone();
    image2.currentframe = 3;
    image2.setFps(45)
    stage.addChild(image2);
    image2.x = 150;

ננסה להבין אותו:
השורה הראשונה יוצרת ImageLoader ומעבירה לו את הכתובת של התמונה, המכילה את האנימציה.
בהמשך מוסיפים אותו לבמה במיקום 50 על 50.
השורות הבאות יוצרות עוד Image, שמשתמש באותו מקור כמו הראשון, ולכן בשביל לחסוך בזיכרון חשוב מאוד להשתמש ב clone ( זו הסיבה שכתבתי אותו ).
אני מכוון את ה currentframe שלו ל 3 בשביל שכל אחת מהאנימציות תתחיל בנקודה שונה.
לאחר מכן אני משנה את הפריימים לשניה בעזרת setFps.
ומוסיף אותו לבמה.
שימו לב ששיניתי רק את מיקום ה X שלו. כל שאר הערכים של image2 שווים לערכים של image1 ולכן הם מופעים באותו Y.

תמונה 1 - אנימציה על Canvas

תמונה 1 - אנימציה על Canvas



הקוד לא יהיה ברור ושמיש אם לא נבין כיצד יוצרים אנימציה ב HTML5.
בכדי ליצור אנימציה על ה Canvas צריך תמונה שתכיל פריסה של כל האנימציה כמו בתמונה הבאה: תמונה 1 – אנימציה על Canvas למעשה בכל פריים אני גוזר את החלק המתאים ומעתיק אותו ל Canvas



















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

     var explo = new DisplayObject.ImageLoader("assets/Sprites/explosion.png");
    explo.cols = 4;
    explo.totalframes =8;
    explo.width = 71;
    explo.height = 100;
    stage.addChild(explo)

והנה הקוד המלא:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ImageLoader - JavaScript AS3 Sample 3 </title>
    <script type="text/javascript" src="DisplayObject/Shape.js"></script>
    <script type="text/javascript" src="DisplayObject/Sprite.js"></script>
    <script type="text/javascript" src="DisplayObject/ImageLoader.js"></script>
    <script type="text/javascript" src="InitStage.js"></script>
</head>
<body>
<script type="text/javascript">

    CreateStage(700,500,45);
    var image1 = new DisplayObject.ImageLoader("assets/Sprites/beholder.png");
    stage.addChild(image1);
    image1.x = 50;
    image1.y = 50
    var image2 = image1.clone();
    image2.currentframe = 3;
    image2.setFps(45)
    stage.addChild(image2);
    image2.x = 150;

    var explo = new DisplayObject.ImageLoader("assets/Sprites/explosion.png");
    explo.cols = 4;
    explo.totalframes =8;
    explo.width = 71;
    explo.height = 100;
    stage.addChild(explo)

</script>
</body>
</html>

לסיכום
מקווה שהקלתי במשהוא על המעבר של מפתחי Flash ל HTML5.

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

כתיבת תגובה

האימייל לא יוצג באתר.

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>