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

הסתכלו בקטע שבין 29:23 ועד 34:25 בסרטון וידאו הזה. ברט ויקטור מדגים אפליקציה שפיתח לiPad שבעזרתה הוא יוצר אנימציות מבוססות פלאש, רק ללא הסיבוכיות והמורכבות שיש ביצירת אנימציה דומה בעזרת Adobe Flash (שהוא מדגים בתחילת הקטע).
יש לציין שהשיטה המורכבת נהוגה בכל תוכנת אנימציה ועריכת סרטים פופולרית ונחשבת לשיטה טובה ויעילה.

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

1. פשטות בשימוש:
המערכת מחייבת את המשתמש להתעסק כל פעם באובייקט גרפי אחד (רקע/ ארנב/ וכו').

2. משוב מיידי:
המשתמש מזיז את האובייקטים ובזמן אמת רואה את התוצר שלו.

טיפ קטן, והפעם- הגדרת HitArea שונה לאובייקט

כאשר רוצים להגדיר לאובייקט איזור בלתי נראה ש"ירגיש" נכנסים אליו, אפשר לעשות זאת על-ידי שימוש במשתנה hitArea של המחלקה Sprite.
שימוש אפשרי הוא כאשר רוצים שתפריט יפתח, כמו בדוגמה הזו.

קוד פתוח, והפעם- ניגון וידאו בתוך פלאש לא יכול להיות פשוט יותר

המחלקה VideoPlayer הופכת את החיים שלך לקלים מאד אם כל שאתה רוצה הוא לנגן קובץ וידאו בתוך האפליקציה הפלאשית שלך. רק השתמש בפקודה (videoPlayer.play(videoFileName והנה אתה כבר מנגן...

כרגיל, הכל חינמי ופתוח לשימוש חופשי. הנה הקוד שיצרתי איתו את הדוגמא שלפניכם.

הערה: הדוגמא למעלה משתמשת בקבצים שנטענים מהאינטרנט בזמן אמת ולכן יכול להיות שהם נטענים מעט לאט. כמה אפשרויות: א- הורד את הסרטונים אל המחשב שלך; ב) שנה את הלינקים בקובץ לקבצים שנמצאים על המחשב שלך; ג) תן לסרטים לרוץ פעם אחת עד לסיומם ובהרצה שנייה (קורה אוטומטית) הם ינוגנו כמו שצריך.

קוד פתוח, והפעם- כיצד להפוך תמונה לכזו עם רקע שקוף?

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

הנה כל הקבצים להורדה: BitmapDataTools.

קוד פתוח, והפעם- הדרך הנכונה לבנות מערכת בכמה שפות (multi language) בפלאש

האפליקציה שמוצגת כאן מראה את הדרך הנכונה (Best Practice) כשרוצים לפתח בכמה שפות בו זמנית.
על הקונספט עצמו אחראי גדי יוסף ואני ביצעתי.

הקוד המלא וכל הקבצים כאן. כדי להבין איך זה עובד המשך לקרוא.

קוד פתוח, והפעם - ניהול נבון של אנימציות לעצמים ודמויות במשחק

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

כאשר אתה מפתח משחק לבד עוד יש סיכוי שתצליח להסתדר, שהרי אתה עשית את זה בעצמך. אבל כשאתה עובד עם מעצבים גרפיים ואנימטורים, לך תצא מזה...
יש כאלה שאוהבים לעשות אנימציות עם tween של הפלאש (MotionTween או ShapeTween), ויש שאוהבים אנימציה רגילה מבוססת KeyFrame. ומה יקרה אם מתי שהוא הם יחליטו שהם רוצים לשנות את האנימציה או את אורכה?

הפתרון
הממשק שכתבתי כאן מתמודד עם הסוגיות הללו בדיוק. כל אנימציה מיוצגת על-ידי MovieClip אחד. בתוכו האנימטור / המעצב יכולים לייצר איזה אנימציה שהם רוצים: הליכה, ירייה, קפיצה, הבעות פנים למיניהן. האנימציה יכולה להיות מבוססת key frame או classic tween או כל אופן אחר שיבחר.
כל עוד זה נמצא בתוך MovieClip אחד זה לא מפריע. אין כאן הגבלה על אורך האנימציה ואין השפעה של מה שקורה בתוך האנימציה על המשחק עצמו.
הכל קורה במקביל.

הנה כל הקבצים של אפליקציית הדוגמא.

להסברים נוספים איך זה עובד, המשך לקרוא.

יצירת particles עם ביצועים טובים יותר בפלאש בעזרת Stage3D

Particles with Stage3D (with Flash Player 11) from Thibault Imbert

http://www.bytearray.org/?p=3431

http://www.starling-framework.org/

שימוש בחיישנים בעזרת פלאש בר השגה בעזרת Arduino ו-Phidgets

ב2007 יצא לי להכיר את עולם החיישנים לראשונה מקרוב (אתם מוזמנים להציץ על פרויקט "הפרחים של רוזטה").
הנה חיישנים שעובדים בקלות עם הפלאש:
1- מערכת החיישנים של Phidgets

שליטה מרחוק בחיישנים.


2- מערכת החיישנים של Arduino
כתבת הסבר כיצד להתחיל: מחיבור פשוט, דרך שימוש בחיישנים שונים ועד שליטה מרחוק.
as3Glue - ספריה שמקלה על העבודה מול הארדוינו.
קוד פתוח שמראה כיצד להשתמש בגויסטיק חיצוני במשחקי פלאש.
סקירה של מכלול אמצעים וקוד פתוח

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

לקח לי כחצי שעה להבין כיצד אבל זה היה קצת מסובך.
אז הנה הדרך לצרף ספרייה חיצונית בקובץ עם סיומת SWC לפרויקט ActionScript שלך.

הערה: מהו קובץ SWC ?
קובץ SWC מאגד בתוכו מספר מחלקות ActionScript3.0 שניתן רק להשתמש בהן אבל לא לשנות את שכתוב בהן. בדומה למסמך Read-Only. 

קוד פתוח, והפעם - איך להריץ תוכנה במחשב מתוך פלאש (קובץ EXE)

במשך הרבה מאד זמן פלאש לא אפשר לגשת לספריית הקבצים במחשב מסיבות של אבטחה עד שהגיע Air.
עם Air 2.5 אפשר ליצור אובייקט שנקרא NativeProcess שמאפשר פתיחת אפליקציה חיצונית, בין אם היא קובץ הפעלה EXE או קבצי תוכנה כמו python ואולי עוד.

בכל אופן, הנה אפליקציית AIR שמראה כיצד ניתן להריץ כל תוכנה שרוצים: חלון אינטרנט, נגן, צייר וכו'. רק צריך להכניס את הקישור אל הקובץ שרוצים להפעיל. יש לציין שצריך להפעיל את קובץ הEXE, רק הוא יפעל (תדרש התקנה קצרה של האפליקציה). מצורף הFLA ובו הקוד המלא עם ההסברים. כמו כן, הנה קישור מהיר רק להתקנת האפליקציה ללא הקוד.

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

בשבת שעברה פיתחתי משחק ראשון לAndroid בעזרת Flash שהתבסס על המשחק NinJump שהלהיב אותי בתקופה האחרונה. הפיתוח הזה הביא אותי (שוב) למסקנה שמאד קשה יהיה לפתח משחקים לאנדרואיד בעזרת פלאש.

גיליתי שישנה הגבלה של 24 פריימים לשנייה בכל אפליקצית פלאש באנדרואיד, לא משנה מה מגדירים בקוד. יש על זה די הרבה מאמרים וכתבות ברשת שמנסות להגיע, בעזרת אופטימיזציות נוקשות, למקסימום "נפלא" של 24 פריימים לשנייה.

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

קוד פתוח, והפעם - ספירת פריימים לשנייה Frame Per Seconds

 מצאתי את הקוד באתר EFNX כמאד פשוט ויעיל.
רק שתי שורות קוד ויש לכם תצוגה של בכמה פריימים לשנייה רק הפלאש שלכם (או הוידאו).

TowerDefensAR, גרסה ראשונה של משחק במציאות מועצמת

המשימה: להגן על תיבת האוצר.

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

בדף הזה אפשר לראות את המשחק במסך גדול יותר.

איך משחקים?

1. הדפס את שני המרקרים.

2. אפשר לאפליקציה להפעיל את המצלמה שלך.

3. התחל משחק חדש והגן על האוצר!

אנשים לעקוב אחריהם: והפעם, Tom Krcha

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

עדכון מאי 2011:
שמעתי הרצאה שלו בכנס GameIS שנערך השבוע והתרשמתי מאד. הוא המליץ בחום לחכות למנוע Alternativa3D ולהעביר את כל הקוד, גם ה2D להתבסס עליו בגלל אופן העבודה החדש ישירות מול הGPU של המחשב ובכך לחסוך במשאבים.

קוד פתוח, והפעם - העקיבה הכי פשוטה אחרי הפנים שלך (face Detection)

עקיבה אחרי הפנים של המשתמש כבר לא כל כך מסובכת לביצוע מאז שהגיעה ספריית מרילנה (Marilena). המחלקה FaceDetector מאפשרת שימוש נפוץ מאד בזיהוי הפנים והוא הצמדה של אובייקט גרפי (Sprite או MovieClip) אליהם. עכשיו אפשר בשתי שורות קוד להצמיד משקפיים או קרניים למשתמש של האפליקציה שלך! הנה הקוד המלא להורדה.

לתכנת עם פלאש ביעילות עם FlashDevelop

http://www.flashdevelop.org

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

מומלץ בחום לכל מתכנת פלאש!

----------------------
עדכון:

הנה גם debugger חיצוני
http://www.flashdevelop.org/community/viewtopic.php?f=4&t=4660

איך לדעת את המידע על קובץ סאונד דרך הmeta data

כאשר עובדים עם סאונד יש בדרך כלל צורך לדעת את המידע עליו, כמו: אורך הקטע, הכותב, הזמר (במקרה של שיר) וכו'.
הנה דרך יעילה לברר את כל אלה: http://askmeflash.com/qdetail/338/get-metadata-from-streaming-mp3

קוד פתוח, והפעם - כל הקוד במקום אחד

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

בתקווה שזה עוזר למישהו שם בחוץ...

כמו כן, אשמח לקבל תגובות ורעיונות לשיפור וייעול הקוד.

קוד פתוח, והפעם - יצירת קווים ובדיקת פגיעה (hittest) בין קווים ומוביקליפ

 

הDrawingManager היא מחלקה המאפשרת יצירה קלה של קווים.

אבל הבעיה האמיתית שהקוד הזה פותר היא דוקא בדיקת הפגיעה (collision) של קו עם movieClip. מי שינסה להתמודד עם הבעיה הזו יבין שהדבר לא פשוט כל כך מכיוון שאפשר לבצע hittest רק בין שני מוביקליפים, ואם הופכים קו אלכסוני למוביקליפ, הוא כבר לא קו יותר...

אז לקחתי את הקוד הזה של אנדריי מישל, שכתוב בAS2, המרתי אותו לAS3 והכנסתי עוד מעט שינויים כדי שיתאימו לקו ישר בלבד.

אז הנה הקוד להורדה כולל דוגמאות.

אנחנו בעד שיתוף ונשמח לקבל בחזרה רעיונות נוספים, שיפורים של הקוד או תוספות אליו, פונקציות נוספות וכו'. 

כרטיס ביקור אוגמנטד - תיק עבודות בתוך כרטיס הביקור

מעכשיו כרטיס הביקור שלך יכול להכיל גם את תיק העבודות שלך ופרטים נוספים עליך.

הכרטיס יכול להציג מידע בוידאו, תמונה וסאונד.

פרטים נוספים אפשר למצוא בפוסט הזה.

כדי לצפות בכרטיסים שלי:

1. הדפס אחד או יותר מהכרטיסים. לכל כרטיס דוגמא אחרת לאינטראקציה עם התוכן.

2. אשר לתוכנה להפעיל את המצלמה שלך. חבר מצלמה אם אין לך.

3. החזק כרטיס אחד מול המצלמה.