HTML5 למפתחי ActionScript3

HTML5 for AS3 Develpersבסדרת שיעורים זו אסביר על ספרייה גרפית קטנה שפיתחתי ל HTML5. הספרייה כתובה כמובן ב JavaScript ומוסיפה את האלמנטים הגרפים Shape, Sprite ו ImageLoader הקיימים ב AS3.
הספרייה נכתבה במטרה להקל על מעבר של מפתחי פלאש ל HTML5, ועל תרגום תוכן פלאשי ל HTML5.
את הספרייה ניתן להוריד מכאן.
קוד למשחקון דוגמא ב HTML5 שיצרתי תוך שימוש בספרייות הללו ניתן להוריד מכאן,
להרצת המשחק לחץ כאן

אז למה בכלל לעבור ל HTML5 כאשר יש כלי נפלא כפלאש על צורותיו השונות?
HTML5 קיבל משנה תוקף כדבר הבא לאחר ההכרזה של ADOBE על אי התמיכה בפלאש בדפדפני הטאבלטים והסמארטפונים. בנוסף ADOBE עצמה רואה ב HTML5 את עתיד ה RIA. בהודעה הזו אני רואה כתחילת הסוף של הפלאש כתוסף חובה בכל דפדפן וככלי פיתוח ל WEB.
סביר להניח שייקח זמן רב עד שהפלאש ב WEB ייעלם. בכל מקרה הפלאש ממשיך להיות איתנו ככלי פיתוח נהדר לפיתוח אפליקציות חוצה פלטפורמות.
בנוסף, לא יכולתי לעמוד בפני הקסם של עוד פלטפורמה גראפית, עוד סביבת פיתוח למישחקים ו RIA, שלא להזכיר את ה WebGL (עוד אעלה פה דוגמאות בהמשך) .

כל הסיבות הללו גרמו לי לצלול לתוך ה API של HTML5

אכן ה JavaScript רחוקה מאוד מ AS3 ואפילו ל AS2 אין היא מתקרבת. אבל מול היתרון של לרוץ בדפדפנים על כל הפלטפורמות קשה לעמוד. ולכן, מוצאים עצמם הרבה מפתחי פלאש עוברים ל HTML5.

הבעיה היא שהתפיסה הגרפית שעומדת בבסיס ה CANVAS שונה מאוד מהפלאש. אין אלמנטים גרפים, אין AddChild ואין MovieClip. למעשה אפילו אנימציית gif לא רצה על Canvas.
אז מה עושים? אם אין בונים!

כאשר בספרייה שבניתי מחלקת הבסיס היא DisplayObject.Shape וממנה יורשים DisplayObject.Sprite ו DisplayObject.ImageLoader למי שתוהה, אז כן יש ל JavaScript יכולות Object-Oriented לא רעות (לא טובות (-: אבל בהחלט אפשר לממש Object-Oriented Design Patterns גם ב JavaScrip ) אבל זה לא הנושא שלנו עכשיו).

את השימוש בספרייה שבניתי אסביר במדריכים הבאים.

שיעור ראשון – הכרת ה Stage ו ה Shape


שיעור שני – שימוש ב Sprite


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

כתיבת תגובה

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

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