בלוגאקטיב

אני ממשיך ביצירת אבות טיפוס של משחקים והפעם סרטון, שבו אני מסביר איך לבנות ב-Phaser ו-Typescript אב טיפוס של משחק String Avoider. ניתן לראות את זה בפעולה (מחשב או טלפון) כאן:  http://codactive.com/blog/prototypes/... קוד המקור הסופי:  http://codactive.com/blog/prototypes/... ההדרכה שלי במתנה:  http://www.codactive.com לפוסט המקורי של עמנואל פרונטו.

בהמשך לפוסטים קודמים שלי, שוב אני לוקח את אחד מאבות הטיפוס שכתב עמנואל פרונטו וכותב אותו מחדש בקלאסים של TypeScript. והפעם מדובר בעבודה עם accelerometer לשליטה בתנועה של דמות על המסך. בסרטון למעלה אפשר לראות את התוצאה כפי שצילמתי אותה בפעולה בטלפון. הזזת הדמות נעשית ע"י תנועת המכשיר עצמו וזה עובד רק במכשיר נייד. במחשב לא תראו שום דבר זז. אז בואו נקפוץ ישר לקוד: שוב, אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם. ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-CSS רק מאפס כמה דברים (מוריד שוליים ומגדיר שה-div שבו נמצא המשחק מתפרס על 100% משטח המסך) וב-Typescript נמצאים כל הקלאסים שבהם אני משתמש (מוצגים כאן ברצף, אבל במציאות הם מופרדים לקבצים בודדים, כמו שרואים ב-HTML. אגב, כדאי שכפתור ה-Result ב-codepen יהיה כבוי כדי לראות את הקוד בכל המסך. אם תרצו לראות את הפרוטוטייפ בפעולה תלח

בהמשך לפוסט הקודם שלי, שוב אני לוקח את אחד מאבות הטיפוס שכתב עמנואל פרונטו וכותב אותו מחדש בקלאסים של TypeScript. והפעם המשחק הוא סוקובאן (Sokoban). בסרטון למעלה אפשר לראות את התוצאה כפי שצילמתי אותה בפעולה בטלפון. הזזת הדמות נעשית ע"י תנועת swipe, כאשר במחשב אפשר להשתמש בחיצי המקלדת. אז בואו נקפוץ ישר לקוד: שוב, אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם. ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-CSS רק מאפס כמה דברים (מוריד שוליים ומגדיר שה-div שבו נמצא המשחק מתפרס על 100% משטח המסך) וב-Typescript נמצאים כל הקלאסים שבהם אני משתמש (מוצגים כאן ברצף, אבל במציאות הם מופרדים לקבצים בודדים, כמו שרואים ב-HTML. אגב, כדאי שכפתור ה-Result ב-codepen יהיה כבוי כדי לראות את הקוד בכל המסך. אם תרצו לראות את הפרוטוטייפ בפעולה תלחצו  כאן . להלן הסבר קצר על הקוד: ה-nameSpace שבחרתי

אני אוהב את הבלוג של עמנואל פרונטו:  http://www.emanueleferonato.com/ במיוחד אני אוהב את הפורמט של בניית פרוטוטייפ של משחק ופרסום הקוד שלו. מאחר ובזמן האחרון אני עובד הרבה עם פייזר, באופן טבעי אני מתעניין בפוסטים שלו שעוסקים בפייזר ויש לו כבר די הרבה prototypes של משחקים שהוא כתב ב-Phaser. רק מה, הוא כותב ב-javascript וכל הקוד שלו כתוב בעמוד אחד ארוך. אז החלטתי לקחת את אחד מאבות הטיפוס שהוא כתב ולכתוב את הקוד מחדש בקלאסים של Typescript. זה יותר מאורגן ככה ויותר קל לעיכול לדעתי (גם אם יותר ארוך קצת). בסרטון למעלה אפשר לראות את התוצאה כפי שצילמתי אותה בפעולה - גם בטלפון וגם במחשב. מפתיע לראות כמה קל לכתוב את הקוד הזה, שמהווה בסיס לכל כך הרבה משחקים מוכרים וטובים. אז בואו נקפוץ ישר לקוד: אני מציג את הקוד באמצעות codepen רק מטעמי נוחות. אל תצפו לראות את זה עובד כאן, זה רק כדי להציג את הקוד ולאפשר להעתיק ממנו בקלות. יש טאבים של HTML, CSS, TypeScript. אפשר ללחוץ כדי לראות כל אחד מהם. ה-HTML מכיל את כל הקישורים לקבצי ה-javascript השונים (שנוצרים מהקימפול של ה-TypeScript), ה-CSS ר

היי, הפעם אני הולך לכתוב על משחק שאני מפתח עבור לקוחה, שמתכננת להשתמש בו באירועים רבי משתתפים. המשחק הוא מירוץ מכוניות והוא נועד לעד-3 שחקנים שמשחקים בו זמנית. השליטה על המשחק תהיה באמצעות שלטים מיוחדים שייבנו לצורך העניין, אבל כרגע נשאיר את זה בצד ונתמקד בפיתוח המשחק. אז זהו השלב הראשון – לאחר שנפגשנו עם הלקוחה בפעם הראשונה והבנו למה היא חותרת, סיכמנו לעבוד על אפיון. האפיון הוא מסמך חשוב מאד, שעוזר להגדיר את כל הדברים החשובים שהולכים להתבצע בתהליך הפיתוח ומהווה למעשה הסכם כתוב, בינינו לבין הלקוחה. מה שכתוב באפיון מחייב את שני הצדדים. מה שלא כתוב – נתון לפרשנות ולדיונים. כאן אני מציג גירסה מקוצרת של האפיון שהכנתי, כדי שיהיה אפשר להבין את רוח הדברים. בנוסף למלל, שכתוב במסמך וורד, אני אוהב לעשות גם שרטוט מסך כלשהו, שימחיש עד כמה שניתן ללא עיצוב את המבנה הכללי של המסכים. במקרה הזה מסך המשחק. עוד 2 נקודות שסוכמו לגבי הפרויקט הזה הן:      1.       את העיצוב במקרה הזה לא אנחנו עושים. אנחנו נעבוד מול מעצבת מטעם הלקוחה.      2.       הטכנולוגיה שבה נפתח היא פלאש (לע

Flick Cick זהו משחק של בעיטות עונשין לשער, של חברת PikPok. יצרתי prototype של המכניקה המרכזית שלו: בעיטת הכדור לשער. אפשר לראות את זה בפעולה כאן . יש כאן 2 חלקים חשובים: 1. תנועת ה-swipe שעושים עם האצבע (או עם העכבר, למי שבודק את זה עם המחשב) על מנת לשחרר בעיטה לכיוון המתאים ובעוצמה המתאימה (הפונקציה  listenSwipe) 2. מה שקורה לכדור בזמן המעוף שלו אל השער (רוב הפונקציה update) /** * Created by codactive on 13/03/2016. */ // reference to typescript files /// <reference path="../lib/phaser.d.ts" /> module football{ export class Game extends Phaser.State{ // define variables ball: Phaser.Sprite; bar: Phaser.Sprite; // this is the bottom of the goal, used to simulate the floor line // these are the sides of the goal: leftSideBar: Phaser.Sprite; rightSideBar: Phaser.Sprite; ballMoving: boolean ; ballIsOut: boolean ; isTimerWorking: boolean ; timerDelay:number;

זהו החלק החמישי בסדרה - איך בונים משחק HTML5 ב-Phaser עם Typescript. בחלק הקודם השלמנו את בניית Boot.ts, טענו והצגנו לוגו על המסך. הפעם נעשה קצת שיפורים, נכין את ה-states האחרים לפעולה ונסכם. תהנו! לחץ כאן על מנת להוריד את קוד המקור הסופי הלינק להדרכה החינמית:  http://www.codactive.com

זהו החלק הרביעי בסדרה - איך בונים משחק HTML5 ב-Phaser עם Typescript. בחלק הקודם לימדתי על states והתחלתי לבנות את Boot.ts. הפעם נשלים את Boot.ts, נטען ונציג את הלוגו על המסך. תהנו! לחץ כאן על מנת להוריד את קוד המקור הסופי הלינק להדרכה החינמית:  http://www.codactive.com

זהו החלק השלישי בסדרה - איך בונים משחק HTML5 ב-Phaser עם Typescript. בחלק הקודם בניתי את ה-class הראשי של המשחק ואיתחלתי אותו. הפעם נלמד על states ונתחיל לבנות את Boot.ts. תהנו! לחץ כאן על מנת להוריד את קוד המקור הסופי הלינק להדרכה החינמית:  http://www.codactive.com

קבלו את החלק השני בסדרה - איך בונים משחק HTML5 ב-Phaser עם Typescript. בחלק הראשון בניתי את ה-HTML וה-CSS והורדתי את קבצי פייזר. הפעם אני בונה את ה-class הראשי של המשחק ומאתחל אותו. תהנו! לחץ כאן על מנת להוריד את קוד המקור הסופי הלינק להדרכה החינמית:  http://www.codactive.com

היום אני הולך לדבר על איך תכל'ס בונים משחק HTML5 ב-Phaser. זה סרטון ראשון מתוך סדרה, שבו אני יוצר את התשתית לפרויקט פייזר באמצעות Typescript. לחץ כאן על מנת להוריד את קוד המקור הסופי הלינק להדרכה החינמית:  http://www.codactive.com

בסרטון הזה אני מסביר מה זה Phaser ונותן 3 סיבות טובות להשתמש בו הלינק להדרכה החינמית: http://www.codactive.com

בסרטון הזה (למתחילים) אני מלמד על משתנים ב-javascript.  זהו הלינק לקבלת ההדרכה החינמית:  http://www.codactive.com

ברגעים אלה אני מבצע עדכון במחשב שלי - מה שהיה בעשור האחרון ידוע כ-Flash הפך ל-Animate! לאחר מספר שנים של יחסי ציבור שליליים, השם "פלאש" הפך כמעט לקללה בקרב לקוחות. לא פלא שאדובי החליטה לעשות את השינוי בשם. בתוכנה אין שום שינוי אגב. השם הזה מייצג טוב את מהות התוכנה, שכן בבסיסה היא משמשת ליצירת אנימציה ולא חשוב אם התוצר הוא עבור נגן פלאש, AIR, HTML5, דפדפן, או אפליקציית מובייל, אבל למרות זאת ההרגשה מוזרה... אבל כמו שקורה עם כל טכנולוגיה, בסופו של דבר היא מתחלפת באחרת וכנראה שכדאי ללמוד מהתהליך הזה שאין טעם להינעל על כלי כזה או אחר, אלא להתייחס אליו ככלי - אחד מרבים - שאפשר לבחור בו אם הוא מתאים למשימה. ובהקשר הזה, מאחר ו-HTML5 היא אחת הטכנולוגיות המבוקשות ביותר היום, כדאי לדעתי ללמוד אותה ולהתנסות בה מזוויות שונות.  בדיוק השבוע פרסמתי הדרכה חינמית בנושא. מוזמנים להירשם כאן ולקבל אותה במיידי: http://codactive.com אשמח לראות תגובות מכל סוג ובעיקר לגבי מה עוד הייתם רוצים לראות בהדרכות שלי.

בסרטון זה אני מראה איך מתחילים לפתח ב-HTML5. זהו סרטון ראשון בסדרה HTML5 ב-5 דקות, שבה אשים דגש על פיתוח משחקים ב-HTML5.  הלינק לקבלת ההדרכות החינמיות שלי:  http://www.codactive.com