פרסומים, המלצות, קוד פתוח, סרטונים, how-to.
מאגר של טיוטות אישיות שכותבי הבלוג החליטו לפרסם לציבור הרחב בתחום ה UI , משחקים, חווית המשתמש (User Experience) ואוגמנטד ריאליטי (Augmented Reality).
כותבי הבלוג הם אנשי תוכנה ועיצוב שחיים את הטכנולוגיה.
I know how difficult that is. You are not sure how can this be, that someone would give you all this for free. Well, Its not my work, but I just want to show you how to exploit all that is given for us.
You do not need to be a programmer. These steps are made for non-technical people.
Just follow the steps, and in less than an hour you should have a website up and running.
p.s. there's nothing illegal here. All software and sites used in this guide are open sourced and knowingly provide their services for free.
200 מילי-שניות (חמישית השנייה) הוא הזמן שלוקח למוח להבין שהגוף מבצע פעולה מסויימת. כן, ישנם זמנים שבהם קורים יותר מידי דברים בגוף בו-זמנית שהמוח מתקשה לעקוב... חמישית השנייה הוא הזמן שלוקח לנו להפנים מה קורה לנו ומה אנחנו עושים.
דניאל קוק, מעצב ומפתח המשחק Triple Town (משחק מצוין שאני באמת צריך לכתוב עליו סקירה נפרדת), מדבר על עקרון זה בהרצאה מרתקת על ששה עקרונות מעשיים לאבחן משחק ולהפוך את העבודה של המעצב מעבודה לפי אינטואיציה לעבודה מבוססת/ מחקרית/ מסודרת.
למעשה כל בעל מקצוע מנוסה לומד לפתח אינטואיציה. אנחנו לא תמיד יודעים לומר למה אנחנו אוהבים את זה או לא, אבל אנחנו פשוט מרגישים שזה כך. בעיצוב משחקים הדבר הופך למשמעותי יותר מכיוון שאנו מדברים על חוויות טהורות מאד של איזון רגשי, תנועתי וחושי. קשה מאד להגדיר מה גורם למה.
עצתו בנוגע ל-200 מילי-שניות היא לעכב תחילת פידבק על אירוע במשחק בקצת פחות מהזמן הזה כדי שהמוח יצליח לקשר בצורה נכונה בין האירוע לפידבק. כלומר, אם השחקן ביצע פעולה מסוימת, הפידבק על הפעולה הזו צריך להתחיל כחמישית שניה אחרי זה כדי שהשחקן יבין שזה אכן קשור אחד לשני.
משמעות נוספת שאני מוסיף כאן- כל פידבק במערכת חייב להמשך לפחות חמישית שנייה, אחרת המוח לא יבחין בו באמת.
אנקדוטה: שני העקרונות הראשונים מדברים על הבניית הלמידה של השחקן ויצירת למידה עקבית ונכונה יותר. עקרון נוסף מדבר על הFlow. כך שבעצם חצי מתורתו של אחד המעצבים הטובים תלויה בעקרונות למידה טהורים. מי היה מאמין שיגיע היום שמעצב משחקים נוסף ישתמש במונחי למידה בתהליך העיצוב שלו. כל הכבוד.
בין 0:00 ל11:30 - מערכת anchoring הדומה למה WPF הציע, שינוי מיקום, גודל ורוטציה ביחס לאוביקט אב אחר.
11:30 - מערכת להכנסת תמונות המאפשרת שליטה בדומה למה שיש היום בHTML5: מתיחה בהתייחסות לaspect, מילוי גודל נתון או שמירה על רוחב מקסימלי, מתיחה של קצוות התמונה על חשבון מתיחה כל התמונה באופן שווה (בדומה ל9-grid שהיה בFlash) וכו'
13:15 - טקסט: שמירה על רזולוציה שלו בשינוי גודל, התאמת הטקסט לגודל האוביקט או לא, שינוי פונטים ועוד.
ניתן גם לסדר הופעה לפי הסדר בהיררכיה של האוביקטים (15:22)
15:27 - masking: מערכת כמו בFlash או פוטושופ שמאפשרת הצגה של חלק מסוים של UI
בין 16:00 ל17:17 - תאורה משפיעה בזמן אמת על הUI
17:20 - מערכת ניהול כפתורים המאפשרת שליטה מהירה בכל המצבים (רגיל, hover, נלחץ, אחרי לחיצה). אפשר לקבוע האם רוצים לייצג כל מצב בעזרת אנימציות, שינוי טקסטורה ועוד כמה אופציות. אם בחרת אנימציות, יש אפשרות לייצר אוטומטית את כל הפלטפורמה המאפשרת את המעברים בין האנימציות השונות.
20:00 - כמו כן, יש דרך קלה להפעיל את השינוי שהכפתור עושה. לכל אלמנט UI יש אירועים מסוימים, מוגדרים מראש, להם אפשר בעזרת תפריט פשוט לחבר אוביקט שמושפע ואיזה מאפיין או פונקציה אצלו מושפעת מאותו אירוע.
25:50 - דוגמא מסכמת של כל המערכת על תפריט צדדי במשחק
Diamond Dash by Wooga is one of those
casual games that didn’t seem addictive to me because its simple basic
mechanics. "Just find three or more similar items stuck together and click
it. How much fun can that be?", I asked myself. But after I started the
game I realized that what's really great in it, is the way the game teaches the
player about the other possibilities of it.
JUMP RIGHT INTO THE GAME
The game starts with a simple welcome screen and one instruction of "Remove 3 or more similar gems in 60 seconds". It jumps right into the game. No story, no huge level selection, no introduction videos. Jumping right into the game is well-accepted as a good way to please first time players, but at the same time hard to do well. I believe Wooga nailed it there.
SCORE -> LEVEL -> SECRET
By the second game you get a level up and understand the importance of scoring and its connection with your levels. You do not yet understand how leveling is important to you though.
Each game or two, you pass another level. Each level you get a new Secret. This is the way Wooga teaches the player about the interface and the possibilities of the game: both social and gameplay. After the first level, e.g, you get to know the concept of Magic Fire.
HEARTS ARE KEY TO PLAY
By the third game, you understand that each time you play, you lose one heart. This is the first social lesson you get, because later on you would understand how you can get new hearts from the help of your friends.
SOCIAL GAMEPLAY IS KEY TO USER RETENTION
By the fourth game you get to know about the weekly tournaments. These occur between you and your friends (only people you know). Best three top scorers of each week get a reward. You get free hearts if you invite your friends to connect with you on the tournament. That's something you easily see through the interface, without the need to introduce or talk about. The weekly tournaments answer two big design challenges: how to make the player come back to the game over and over again, and how to give them hope they can get the first place.
MONETIZATION
After the fifth game, you run out of hearts. This is when the panda introduces the element of gold bars. These can buy you lives, you see. The panda gives you 9 gold bars, which are just enough to get 5 more hearts. Obviously, this leaves you inside the game for 5 more plays…
On the sixth game, you get to level 4, you are rewarded with gold bars. This is done to remind you of that concept, to make sure you don’t forget it. And you are presented with another secret of the gameplay: Magic Diamonds.
CONSTANT CONFLICT: HELP VS COMPETE
By the ninth game, two games before the
end of lives, you are reminded to get more hearts. It is summarized really
simply: no lives means no more play, and there are two ways to get it: buy them
with gold bars or ask your friends. Then you realize that you need to be nice
with your friends, in order for them to be nice with you. This is actually a great
conflict the game poses to the player: be nice to your friends and give them
lives versus compete with them on higher scores in the tournament.
At some point the panda doesn’t come back.
I almost didn't notice that, and I see this as a design wonder, because the
entire interface changes from a cute panda giving me lives and gold bars into a
more "professional" look of tournament scores and countdown clock.
CLOSURE
To conclude, Wooga's Diamond Dash is an
addicting social based game. Its not the gameplay that keeps you inside, it’s
the social elements of it. The instructional design of teaching the mechanics
to the player is one of the best I've seen because it is being revealed to the
player one step at a time. It is constantly being simplified and adjusts itself
to the level of the player.
+Ron Segal הפנה אותי לאחרונה ל phpStorm, שהיא תוכנת IDE לכל הנוגע לפיתוח לWeb. היא מאפשרת עבודה נוחה מאד עם קבצים מכל הסוגים הרלוונטים לרשת: html, css, javascript, xml, php וכו'.
הפלוס הענק שלה מבחינתי הוא שהיא מציגה את כל הפקודות האפשריות לכתיבה בכל רגע לפי הקונטקסט. זוהי אופציה מוכרת מאד מתוכנות IDE בשפות אחרות, כמו visual studio או flashDevelop. עד היום לא ראיתי את זה בHTML.
יתרון נוסף הוא הדגש על התאמה לbrowser השונים של הקוד.
יתרון שלישי עצום הוא שיחד עם Zend Server ניתן להריץ קוד שרת (PHP או ASP) במחשב, ללא התקנות מיוחדות.
עד היום עבדתי עם Wamp Server שסיפק את הסחורה בזמן העבודה שלי עם wordpress. אבל הקשר המיוחד שבין zend ל phpStorm הפיל את הפור.
חברים אמרו לי שהמאגר קיים כבר כשנה והוא עובד בצורה טובה מאד.
יש בו עכשיו כבר מעל ל600 פונטים. ההוספה וההורדה ממנו חופשית.
שני יתרונות גדולים למאגר. אפשר להוריד ממנו ולעבוד איתו בצורה רגילה.
אבל לאלה מכם שמתכננים לבנות אתר באינטרנט עם אחד או יותר מהפונטים האלה, ניתן ליצור אריזה (package) של הפונטים שאתם רוצים ולטעון אותם ישירות מהשרתים של גוגל ללא העלתם לאתר שלכם.
+Eran Ayalon התנסה ואמר שהטעינה דרך השרתים שלהם יותר מהירה מהורדה של הפונטים לשרת שלכם.
סדרת סרטוני הוידאו המצחיקה והמגניבה של ExtraCredit עשתה סרטון על הבחירות ששחקן עושה במהלך המשחק ועל כמה הן משמעותיות (וכמה השחן מרגיש שהן משמעותיות).
בקצרה, הטיפ שהסרטון נותן הוא שצריך לאזן את המשחק בצורה כזו שתאפשר לשחקן באמת לבחור בין שתי אפשרויות שוות פחות או יותר (שכן אם אפשרות אחת היא באופן משמעותי טובה יותר מהשנייה, כולם יבחרו אותה בסוף).
ההמשך של הטיפ הזה הוא שלא להתאכזר לשחקנים שבחרו באפשרות הפחות טובה ויעילה, ושהדבר בסוף יעלה להם בחזרה אחורה בזמן כדי להתחיל מחדש את התהליך.
"הבעיה האמיתית עם הממשקים היא שהם בכלל קיימים. ממשק משתמש (UI) תקוע בדרך. אני לא רוצה לבזבז את האנרגיות שלי על הממשק עצמו. אני רוצה להתמקד בעבודה שאני רוצה לבצע... אני לא רוצה לחשוב על עצמי כמשתמש במחשב, אלא כעל אחד שעושה את העבודה שלו".
בתקופה האחרונה התעסקתי לא מעט עם הנושא הזה וחשבתי לפרסם כמה מהטיפים הטובים שאספתי בדרך. הכתבה מיועדת לאנשי פיתוח וסביר להניח שהיא תשעמם אחרים, עמכם הסליחה :).
Rapid Prototyping (להלן RP) הוא התהליך שמקיים צוות פיתוח של אפליקציה או משחק, שמטרתו להבין האם המוצר כפי שהוא מתוכנן כרגע, יצליח בגרסתו המלאה. כלומר, כדי להתחיל RP צריך שיהיה עיצוב די ברור של המוצר (מה מטרתו, איך הוא יראה, ומה תהיה החוויה בו).
תיאור התהליך המלא של הRP:
אסוף כמה שיותר רעיונות (כל רעיון הוא עיצוב ברור של המוצר). צוות מולטי-דיסיפלינרי יבחר את הרעיון לprototype.
שבועיים-שלושה ינתנו לפיתוח לצוות של שלושה מפתחים. המטרה המרכזית של הפיתוח היא להבין האם יש במשחק מרכיב כיף ייחודי ברעיון הנבחר, והאם שווה להשקיע יותר זמן בפיתוח שלו.
המוצר הסופי בתום הפיתוח צריך לכלול:
מכניקת משחק מלאה עם כל הפיצ'רים.
גרפיקה באיכות שתספק את המשתמשים ולא תסיח את דעתם.
סאונד רק על מנת לתמוך במכניקת המשחק.
הוראות לשחקן כדי שהוא יצליח להבין כיצד לשחק ללא הסבר חיצוני.
ללא באגים משמעותיים.
המוצר הסופי יעבור הערכה לפי הנקודות הבאות:
ה UI יציג את כל הסטטיסטיקה האפשרית על השחקן (ניקוד, זמן וכו').
מטרות המשחק מוצגות בבירור ומד התקדמות לעבר הסיום.
הגרפיקה באיכות מספיק גבוהה כדי לא להסיח את דעת המשתמשים.
מסך סיום משחק: הודעת הפסד או נצחון, הערכת ביצועים ואפשרות לשחק שוב.
פידבק ויזואלי ואודיטורי מתאים בכל פעם שהמשתמש עושה מהלך מוצלח לכיוון הגשמת היעדים.
כל משתמש יכול להתחיל לשחק ללא הסבר חיצוני ולהבין את המכניקה מספיק כדי להגיע לניקוד גבוה.
רצוי שהפיתוח יכלול מערכת האוספת נתונים סטטיסטיים על השחקן על מנת לאפשר עיבוד והערכה מאוחרת והפקת מסקנות.
כשהמוצר מוכן, מציעים אותו לקהל הרחב דרך הפלטפורמות השונות הרלוונטיות. עדיף להציע אותו לקהל היעד הרלוונטי. מניתוח הסטטיסטיקה (אם יש) ומניתוח התגובות, אם המשתמשים אומרים שהמשחק לא כיף, אין להמשיך עבודה על המוצר, וצריך לבחור רעיון חדש.
אם המוצר שלכם אינו משחק אלא אפליקציה, יתכן שהשיטה הבאה תהיה יעילה יותר עבורכם. אתם תחליטו.
לאור מטרות המוצר, עצבו שני פתרונות שונים שעונים על אותן המטרות. למשל: אתם מזהים כבעיה את התורים הארוכים בסופרמרקט ורוצים לפתח אפליקציה שתאפשר קנייה ותשלום מלא על מוצרים מול הדוכנים בעזרת הסמארטפון (עדיין צריך קופות לאנשים שאין להם טלפון חכם). כך מקלים את הלחץ על הקופות ומאפשרים חווית קנייה מהירה יותר.
עכשיו, עצבו גרפית שתי אפליקציות שנראות שונה אבל עושות את אותו הדבר. מומלץ כמובן שאת כל עבודת העימוד והעיצוב הראשונית תעשו בכלי prototyping כדוגמת JustInMind , Balsamiq .
כעת הגישו את שני המוצרים לבדיקות משתמשים בבת-אחת. כלומר תנו למשתמש לחוות את שני המוצרים, ורק אז לומר לכם מה הוא חושב על התוצר. באופן כזה המשתמש יוכל לתת פידבק משמעותי יותר תוך השוואה בין מוצר א' לב'. בשיטה הזו אתם אנכם נקשרים רגשית לאף אחד מהעיצובים, כי אם לקונספט ולמטרה עצמה.
ניק אדמס מיוצרי המשחק "חתול במגפיים" למצלמת Kinect, כותב על האתגרים שמציבה הטכנולוגיה וכיצד הם התמודדו איתם בפיתוח. מומלץ לקריאה לכל מי שמחפש את דרכו בעולם הmotion gaming, שכן הוא ניסח יפה מאד את הבעיות המרכזיות והפתרונות הנכונים.
כאשר רוצים להגדיר לאובייקט איזור בלתי נראה ש"ירגיש" נכנסים אליו, אפשר לעשות זאת על-ידי שימוש במשתנה hitArea של המחלקה Sprite.
שימוש אפשרי הוא כאשר רוצים שתפריט יפתח, כמו בדוגמה הזו.
בשבת שעברה פיתחתי משחק ראשון לAndroid בעזרת Flash שהתבסס על המשחק NinJump שהלהיב אותי בתקופה האחרונה. הפיתוח הזה הביא אותי (שוב) למסקנה שמאד קשה יהיה לפתח משחקים לאנדרואיד בעזרת פלאש.
גיליתי שישנה הגבלה של 24 פריימים לשנייה בכל אפליקצית פלאש באנדרואיד, לא משנה מה מגדירים בקוד. יש על זה די הרבה מאמרים וכתבות ברשת שמנסות להגיע, בעזרת אופטימיזציות נוקשות, למקסימום "נפלא" של 24 פריימים לשנייה.
באיזה שהוא מקום זהו הקש ששבר אותי... במיוחד אחרי הניסיון המעולה שיש לי עם תוכנת Unity3D במסגרת העבודה שלי. פשוט מאד לא נעים לי להודות שאולי באמת עבר זמנה של תוכנת Flash מבחינתי...
כמובן שלא אוכל לזרוק את הידע הזה לפח ובטוח אמשיך לעבוד עם פלאש. אבל זה די מצער שהביצועים של התוכנה השימושית הזו ירודים כל כך.
כתבה שפורסמה באתר Gamasutra מתארת ממשקי משתמש בארבעה משחקים שונים וסוקרת את היתרונות והחסרונות בכל אחד מהם. מה עובד לטובת המשחק ומה לא.
מוצגים שם מספר אופנים להצגת מידע משחקי לשחקן, כמו למשל: בריאות הדמות שלו, כמה תחמושת יש לו, לאן הוא צריך להגיע, מי היריבים שלו וכו'.
המסקנה שלי מהכתבה היא כמובן שהכל תלוי במשתמש ובצרכיו. ממשק המשתמש צריך לכלול את המינימום הנדרש על מנת לבצע את משימתו המשחקית. ורק את המינימום הזה. אבל הכרחי לוודא שהשחקן מבין בקלות את הכלים העומדים לרשותו בממשק ושהוא יכול לתפעל אותם בקלות.
התוכנה הזו פשוט מקפיצה את נוחות התכנות בActionScript3 בכמה רמות. זה ממש כמו ויזואל סטודיו (למי שמכיר) בactionscript...
התוכנה כותבת קוד בצורה אוטומטית, משלימה מילים מוכרות, פותחת תפריט של כל הפונקציות והמשתנים שאפשר לשנות בכל רגע נתון בהתאם לסוג המחלקה בה נמצאים. ויש עוד המון תוספות חשובות ומעניינות.
