פיתוח משחקי HTML5 באמצעות ZIM

פורסם ע"י עמי חניא

הקדמה ורקע

בארבע השנים האחרונות עם נטישת נגן הפלאש בעקבות המאמר והמהלכים של סטיב ג'ובס Thoughts On-Flash, התחלנו תהליך של מעבר מכתיבה בפלאש (as3) ואנחנו עובדים ומפתחים משחקים מבוססי HTML5 בעיקר על בסיסCANVAS, עם ההשקה של ה-CANVAS (קנבס) כתג HTML החלו להיווצר פלטפורמות המאפשרות פיתוח אינטראקטיבי מבוסס קנבס. רוב הפלטפורמות לקחו את ההירכיה ומבנה הקוד בדומה מאוד למבנה שהיה נהוג בפלאש. והחילו אותו עם פקודות דומות מאוד אל ה-HTML5.
הפלטפורמה שאנחנו בחרנו לעבוד איתה לפני ארבע שנים היא CreateJS שנבנתה ופותחה בקוד פתוח בתמיכה רחבה של ADOBE ועוד חברות. ואפילו פרסמנו שני שיעורי וידאו ב-CreateJS.
עם השנים פיתחנו משחקים רבים ב-CreateJS וכיום ADOBE ANIMATE מבוסס על הפלטפורמה הזו ומאפשרת ליצא מדיה ואינטראקטיביות ישירות מהפלאש בפורמט שהוא HTML5 ובצורה תיקנית שעובדת בכל הפלטפורמות והדפדפנים המודרניים.

ZIM – יצירתיות ובקלות

ZIM נוצרה בכדי להפוך את כתיבת הקוד ב-HTML5 לנוחה וקלה.
החסרון הגדול בכתיבה לקנבס הוא החוסר בפקדים / קומפוננטות והרבה פעולות פשוטות מצריכות כתיבה של קוד ארוך ויחסית מסורבל. את זה בדיוק ZIM באה לפתור. ZIM מבוססת על CreateJS ומרחיבה אותה.
דן זֵן (Dan Zen) הוא מרצה וראש המחלקה לניו-מדיה ב-Sheridan College שבקנדה, אחד האנשים המצחיקים, החכמים והיצירתיים שיצא לי לפגוש. דן התחיל לפתח את ZIM לפני כשלוש שנים. והוא עובד ומפתח את הפלטפורמה לאורך השנים, הפלטפורמה נמצאת בשימוש אצל מפתחים רבים ברחבי העולם, ומקומות לימוד משתמשים בה ככלי קל ללימוד פיתוח וכתיבת קוד. 
הכתיבה ב-ZIM נוחה וכיפית ובכמה שורות קוד אפשר לכתוב אפליקציות ווב (ולא רק) עשירות ומגוונות. ZIM נוגעת בכל שכבות הקוד של ה-JS ומאפשרת הרבה מאוד קיצורי דרך ופונקציות שמישות רבות לעבודה מיידית בלי כתיבה של קוד מיותר. מבט בתיעוד של ZIM יראה לנו שאפשר לבצע פעולות רבות הן ברמת הנראות (ZIM DISPLAY), שליטה בכל הקומפוננטות (ZIM METHODS) והן ברמת קוד הג'אווה סקריפט (ZIM CODE,ZIM WRAP), ושליטה אבסלוטית בפקדים השונים (ZIM CONTROLS).

ZIM – איך מתחילים

דן מחזיק ערוץ YOUTUBE מעולה ומלמד שמתחיל מהבסיס של JS אל רמה מתקדמת מאוד.
בערוץ יש כמה פלייליסטים:
CODE ZIRO – שמיועד למתחילים בכתיבת קוד ב-JS ומכסה את כל הנושאים הבסיסיים ב-JS.
ZIM Examples – שמציג דוגמאות שנוצרו ב-ZIM ואיך עשו אותם.
ZIM Bubbling – שמציג את כל החידושים האחרונים ומלמד המון.
אני ממליץ להתחיל ממש מההתחלה ולעבור על הסרטונים וללמוד בצורה יסודית את הפלטפורמה, דן מגיש את החומר בצורה כיפית ומצחיקה.
באתר של ZIM יש המון דוגמאות ואפשרויות למידה. אני אישית אוהב ללכת לתיעוד (ZIM Documentation) להעתיק קטעי קוד שכתובים בו ולהריץ אותו וכך להבין מה עושה הקוד.

למה אנחנו ממליצים על ZIM

במהלך השנה האחרונה בפרוייקטים השונים נדרשנו לפתח מאות משחקים ומשחקוני HTML5, עד שמצאנו את ZIM והתחלנו לעבוד איתה, פעולות פשוטות כמו DRAG AND DROP או פקד SLIDER ואפילו יצירת POPUP רגיל על המשחק היו עבודה רבה שהצריכה המון קוד.
היום עם ZIM בפקודה אחת כל פקד הופך להיות נגרר, אפשר להוסיף גלילה פנימית בקלי קלות, ופופאפים זה משחק ילדים.
זמן הפיתוח של המשחקים (מעבר לחלק הלוגי) התקצר פי חמש, ואנחנו מספיקים לפתח הרבה יותר משחקים, באיכות טובה יותר ובנראות מצוינת.
בקבוצת הפייסבוק ובדף של ZIM ובקבוצת הסלאק (slack) ניתן לבקש מ-דן בקשות לפיתוח, דיווח על באגים ושאלות כמובן והוא משתף פעולה בצורה מעוררת השראה.
ריספונסביות – ל-ZIM יש הכנה מובנת לבניית העמודים לרזולוציות המסך השונות, והתאמה אוטומטית לפי אחוזים, עוגנים וכל מה שמקובל בקוד תומך ריספונסביות.
תמיכה מלאה וביצועים משופרים לפיתוח למובייל – עם ZIM אפשר ליעל את הקוד כך שירוץ בצורה מהירה וטובה במובייל.
גרסאות יוצאות אחת לשבועיים בערך ובכל גרסה יש חידושים מרעננים. ושיפורי ביצועים.
ZIM תומכת גם בספריות שונות של JS שמאפשרות שימוש בפיזיקה (box2d) ובתלת מימד (3D with ThreeJS).

והסיבה הכי חשובה, זה כיף וחוויה לפתח, ועם ZIM הפיתוח מהנה הרבה יותר!

דוגמאות נפלאות לדברים שפותחו ב-ZIM

אם אתם מחפשים משחקי HTML5 המותאמים לכל המכשירים דברו איתנו

למאמר המקורי בבלוג שלנו

אז אם אתם מורים, מפתחים או סתם חובבי קוד (או כאלו שרוצים להכנס לעולם הזה) אני ממליץ על ZIM כהתחלה וחוויה חיובית! ואם יש לכם שאלות נשמח לענות ולעזור.