כלים ותוכנות ליצירת HTML5

הפעם פוסט אורח. אני גאה לארח כאן לראשונה את ראש הצוות וה-CTO שלנו, אילון קורן. בפוסט הוא יסקור ביסודיות האופיינית לו תוכנות העשויות לסייע במעבר מפלאש ל-HTML5. קבלו אותו במחיאות כפיים סוערות!

* ועוד הערת הקדמה: אני מתנצלת על המראה של הפוסט בנייד ובדואל. זה השתבש בגלל הטבלה. מוסר השכל: להמנע מטבלאות :).

הקדמה

בשנים האחרונות ה- Flash שליווה אותנו שנים רבות, הולך ודועך, ואף לא נתמך בחלק מהפלטפורמות הניידות כגון iPhone ו- iPad .

כחלק מהמאמץ לעבור לעולם ה- Html5 במהירות ובקלות נבדקו, במהלך השנה האחרונה, כלי Html5 הבאים:

• Construct 2
• GameMaker
• Unity3D
• Google Swiffy
• Animatron
• Dedicated JS Libraries like: PhysiJS & Chartist-JS

 

אתרי התוכנות

Construct 2	GameMaker	Unity3D	Google Swiffy	Animatron	Dedicated JS libraries
https://www.scirra.com/construct2	https://www.yoyogames.com/studio	http://unity3d.com/	https://www.google.com/doubleclick/studio/swiffy/	http://www.animatron.com/	http://chandlerprall.github.io/Physijs/http://gionkunz.github.io/chartist-js/

 

עקומת למידה של הכלים ורמת התכנות הנדרשת

Construct 2	GameMaker	Unity3D	Google Swiffy	Animatron	Dedicated JS libraries
			לא נדרש ידע בתכנות	לא נדרש ידע בתכנות
תכנות ברמהנמוכה מאוד
	תכנות ברמה בינונית +				תכנות ברמה בינונית +
		תכנות ברמה גבוהה מאוד

 

תיאור מוצר + יתרונות/חסרונות בקצרה

 

המוצר	יתרונות	חסרונות	דוגמה
משחקים ואינטראקציות 2D ב- Html5 ללא תכנות.	· ברמה הבסיסית אין צורך בידע בתכנות· תומך בהדמיות פיסיקאליות מתוחכמות· המוצר מתעדכן ומשתפר ללא הרף בתדירות גדולה מאוד	· ממשק פחות מובן למתכנתים· אין תמיכה ישירה ב- iOS ו- Android אלא דרך מוצרים צד ג’	https://www.scirra.com/construct2/games
משחקים ואינטראקציות 2D ללא תכנות/עם תכנות.	· דומה ל- Construct 2 אך עם תוספת יכולות תכנות נרחבות· תומך ישירות בהפצה ל- iOS ו- Android	· יקרה פי 2 מ- Construct	https://www.yoyogames.com/showcase
משחקים, אינטראקציות וסרטי וידאו ב- 2D/3D עם תכנות מתוחכם.	· התוכנה המתוחכמת ביותר למשחקים ווידאו· מופעלת בעזרת תכנות ב-JS או C#· תומכת במגוון הרחב ביותר של פלטפורמות להרצה	· יקרה מאוד· תשלום נוסף גבוה לתמיכה בכל פלטפורמה כגון iOS או Android· נדרש תוסף מיוחד להרצה בדפדפנים – אין תרגום ישיר ל- Html5	http://unity3d.com/showcase/gallery/non-gameshttp://unity3d.com/showcase/gallery http://unity3d.com/showcase/gallery/games
ממיר אינטראקציות וסרטוני Flash ל- Html5	· ממיר באופן אוטומטי סרטוני Flash ל- Html5	· לא ממיר אינטראקציות של Flash (כלומר סרטונים הכוללים user input מכל סוג שהוא)· קוד מופק יוצא בצורה של “קופסא שחורה” (לא ניתן לתקן/להוסיף כלום)	https://www.google.com/doubleclick/studio/swiffy/
כלי timeline-based-animation המפיק קוד Html5	· ללא צורך בתכנות· כלי קל וידידותי להפקת אנימציות מבוססות זמן· רץ בכל דפדפן	· כלי חדש יחסית – אין תיעוד רב	http://www.animatron.com/explore#staff-picks
ספריות JavaScript הממלאות צורך מסוים כגון התנהגות פיסיקאלית, גרפים, drag-and-drop וכו’	· תוכנות “רזות” ומהירות	· יש צורך בידע בתכנות· יש לעיתים “התנגשויות” בין הספריות· יש לבדוק את פופולאריות הספרייה לפני השימוש	http://chandlerprall.github.io/Physijs/http://gionkunz.github.io/chartist-js/examples.html

 

תמיכה בפלטפורמות שונות

 

פלטפורמה	Construct 2	GameMaker	Unity3D	Google Swiffy	Animatron	Dedicated JS libraries
	HTML5	X	X		Ximmutable html5	X	X
	XphoneGap/appMobi/CocoonJS	X	X
	XphoneGap/appMobi/CocoonJS	X	X
HD Video			X		X10 min length
Windows Phone 8 Pro	X	X	X
Windows Store Apps Pro	X	X	X
Windows	XNode-Webkit wrapper	X	X
Web Plug-in			X
Linux	XNode-Webkit wrapper	X	X
Mac	XNode-Webkit wrapper	X	X
			X
		X	X
		X	X

 

מחירים לרישיון תוכנה יחיד

 

Construct 2	GameMaker	Unity3D	Google Swiffy	Animatron	Dedicated JS libraries
430$	800$	1500$$75/month** iOS/Android	חינם	$20/month	חינם

 

^* יתכנו הנחות של חינוך בחלק מהתוכנות

^** תמיכה בתוספת מחיר גדולה ל- iOS ו- Android.

 

נספח

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

בקצרה אומר את הדברים הבאים:

• התוכנה היא דמויית PowerPoint המייצרת קוד Html5.
• ניתן להרחיב בה אספקטים מסויימים ע”י תכנות JS .
• היא מתאימה במיוחד לסוג מסויים של אנימציות כמו באתרי פילוסופיה וננופיניון.
• יש לה בעיות ידועות עם טאבלטים וסמארטפונים.
• יש בעיות עם השפה העברית.

ממליץ לרכוש את הגרסא החדשה של התוכנה (גירסא 2) ולהמשיך להתנסות בה.

תודות

תודה לקרן, חגית, ועמית על המידע והתובנות לגבי תוכנת Storyline

תודה ללאה ששולחת לי מדי פעם דברים מענינים, ושהביאה לתשומת ליבי את ספריות ה-JS במסמך זה.

 

אילון קורן

CTO

אורט ישראל