איך להשיק משחק תלת מימד ב-Vercel בסוף השבוע הזה (עם כישורי AI)

Vibe Skills

דפדפו במאות מיומנויות מוכנות לשימוש עבור Claude, Cursor ועוד.

חקור מיומנויות

התחל עכשיו בחינם

שיגור משחק תלת-ממדי ב-Vercel עד יום ראשון בערב: מדריך הפריסה של 48 שעות

תוכל לעבור מערב שישי ריק לקישור your-game.vercel.app עד ארוחת ערב יום ראשון. המחסנית היא Three.js, Cursor, יכולת AI מ- Vibe Skills, ושכבת החינם של Vercel. עלות כוללת לסוף השבוע: 0$. תשתית כוללת שתצטרך לטפל בה: גם אפס.

זה לא "בנה אב-טיפוס על המחשב הנייד שלך וקרא לו מוכן". זהו URL ציבורי שכל אחד בעולם יכול לפתוח בדפדפן, עם HTTPS, מטמון קצה, ודומיין מותאם אישית אם תרצה. יכולת ה-AI מספקת את שלד ה-Three.js וקובץ vercel.json עובד. Cursor מטפל בלולאת האיטרציה. Vercel מטפל בפריסה. אתה מטפל בעיצוב.

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

Vibe Skills

דפדפו במאות מיומנויות מוכנות לשימוש עבור Claude, Cursor ועוד.

חקור מיומנויות

התחל עכשיו בחינם

מדוע Vercel + Three.js + יכולות AI היא מחסנית המפתח העצמאי

Vercel היא יעד הפריסה הכי עצלני שאפשר למשחק Three.js. דחיפה ל-GitHub, Vercel מזהה, בונה את הפרויקט, ומחזירה לך URL תוך 60 שניות. אין שרת לנהל, אין קובץ Docker, אין תצורת NGINX, אין הגדרת SSL. חבילת ה-Three.js היא פשוט קבצי HTML, JS ו-WebGL סטטיים, שזה בדיוק מה שרשת הקצה של Vercel נבנתה לשרת.

שכבת החינם מכסה השקת סוף שבוע בנוחות:

• 100GB רוחב פס בחודש. בניית Three.js של 5MB ב-10,000 הפעלות היא 50GB. תיגמר לך סוף השבוע לפני שתגמר לך הרוחב פס.
• פריסות סטטיות ללא הגבלה עם HTTPS ותת-דומיין *.vercel.app.
• תמיכה בדומיין מותאם אישית בשכבת החינם - הבא את name-game.com שלך אם יש לך אחד, אחרת ה-URL החינמי vercel.app ניתן לשיתוף בכל פלטפורמה חברתית.
• תצוגה מקדימה של פריסות עבור כל commit - כל דחיפה מקבלת URL משלה, כך שתוכל לשתף גרסה עם חבר ולהמשיך באיטרציה מבלי לשבור אותה.

הוסף יכולת AI מ- Vibe Skills והקוד הבסיסי נעלם גם הוא. הגדרת סצנת Three.js, בקר השחקן, תהליך הבנייה, ו-vercel.json מוכנים ל-Vercel נוצרים בפקודה אחת. לאחר מכן Cursor הופך את שאר סוף השבוע לשיחה שבה אתה מתאר את המשחק שאתה רוצה ומתאים את הפלט. זוהי המחסנית המלאה: יכולת שוק להבסיס, עורך AI לאיטרציה, ו-Vercel לפריסה. עצמאי, חינם, ומהיר.

Vibe Skills

דפדפו במאות מיומנויות מוכנות לשימוש עבור Claude, Cursor ועוד.

חקור מיומנויות

התחל עכשיו בחינם

אנטומיית 48 השעות: קונספט יום שישי לפריסת יום ראשון

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

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

איך נראה "תכנות וירטואוזי" של משחק תלת-ממדי ב-Vercel

תכנות וירטואוזי פירושו לתאר מה שאתה רוצה באנגלית פשוטה ולתת לעורך AI לכתוב את הקוד, ואז לבצע איטרציות על הפלט. עבור משחק Three.js ב-Vercel, הלולאה נקייה באופן יוצא דופן: כל שינוי ב-Cursor נמצא במרחק pnpm dev ממשוב מקומי, ואז במרחק git push מ-URL תצוגה מקדימה חי, ואז נפרס אוטומטית לפרודקשן ב-main.

סוף שבוע של משחק וירטואוזי ב-Vercel נראה כך:

1. פתח את תיקיית המתחיל של היכולת ב-Cursor.
2. תאר תכונה בצ'אט: "קפיצת כפול אם לוחצים על רווח פעמיים בתוך 200ms".
3. Cursor עורך את קובץ הבקר. שמור. pnpm dev טוען מחדש. אתה מרגיש את הקפיצה בדפדפן.
4. אם זה מרגיש נכון, git push. Vercel בונה URL תצוגה מקדימה. שלח אותו לחבר.
5. התמזג ל-main כאשר התחושה נעולה. URL הפרודקשן מתעדכן תוך 60 שניות.

ה-AI עושה את ההקלדה. Vercel עושה את הפריסה. אתה עושה את התחושה ואת העיצוב.

5 יכולות משחקי תלת-ממד AI שהופכות זאת לאפשרי ב-Vibe Skills

יכולות אלו בנויות עבור זרימת העבודה של סוף שבוע Vercel + Three.js + Cursor. כל אחת מהן מספקת פרויקט Three.js מבוסס Vite, vercel.json עובד, pnpm build שמפיק חבילה סטטית ש-Vercel יכולה לשרת מהקצה, ונתיב פריסה שנבדק. כולן נמצאות בקטגוריית 3D Games ב-Vibe Skills.

1. מתחיל משחק Three.js + Vercel

הבחירה ברירת המחדל. יוצר סצנת Three.js עם בקר שחקן, מצלמה מגוף שלישי, מערך תאורה, כיפת שמיים, ומישור קרקע עם התנגשויות. מספק vercel.json שמגדיר את כותרות המטמון הנכונות עבור חבילות נכסים של Three.js. pnpm dev רץ מקומית; לחיצה אחת בלוח המחוונים של Vercel מחברת את מאגר ה-GitHub ויש לך URL חי.

הכי מתאים: לכל ז'אנר מלבד דו-ממדי טהור. השתמש בזה אם אתה עדיין לא יודע מה אתה בונה.

2. הולך מגוף ראשון ב-Vercel

בקר גוף ראשון מלוטש (WASD + נעילת מצביע עכבר + כוח משיכה + ריצה + קפיצה) עם ווים לרגליים, תנועת ראש, ו-vercel.json שמטפל בכותרות CSP של נעילת המצביע כראוי. זה גורם להרבה מפתחים עצמאיים להיתקל בבעיות בפרודקשן. היכולת פותרת זאת עבורך.

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

3. ערכת יריות בזירה לדפדפן

זירה מלמעלה (בקר תאום-מוט, מחולל גלים, AI בסיסי של אויב, מערכת קליעים, HUD ניקוד) עם בנייה מכווננת ל-Vercel שמכווצת נכסים, מפצלת את ה-AI, וטוענת מוזיקה באופן עצל. ווים מרובי משתתפים כלולים; סוף השבוע מספק משחק לשחקן יחיד.

הכי מתאים: יריות ארקייד, גיהינום כדורים, ערכים של ג'אם שצריכים להיטען במהירות במובייל.

4. פלטפורמר פאזל ב-Vercel

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

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

5. ארגז חול נהיגה ב-Vercel

תחושת נהיגת ארקייד (עקומת האצה, פיזיקת דריפט, השהיית מצלמה, שטח בסיסי) עם מכונית דלת-פולי, תבנית מסלול, ופריסה מכווננת למודלי שטח גדולים. כותרות HTTP מוגדרות מראש גורמות להפעלת הקונטקסט של WebGL מהר יותר ב-Safari, שהיה ההיסטוריה הדפדפן האיטי ביותר עבור Three.js.

הכי מתאים: מרוצי ארקייד, נהיגת שטח, הדגמות תחושת רכב לתיק עבודות.

עיין בכל יכולות משחקי התלת-ממד ב-Vibe Skills →

צעד אחר צעד מיום שישי עד יום ראשון

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

יום שישי 18:00 - 20:00: בחר יכולת, דחוף ל-GitHub, חבר את Vercel

שלב 1: בחר יכולת משחק תלת-ממדי ב-Vibe Skills. עיין בקטגוריית 3D Games, בחר את זו התואמת את הז'אנר שלך, והתקן את המתחיל לתיקייה חדשה. פתח אותה ב-Cursor. אתה אמור לראות סצנת Three.js עם שחקן נע עד השעה 19:00.

שלב 2: צור מאגר GitHub ודחוף. git init, git remote add, git push. השתמש בשם הנרדף של המשחק שלך כשם המאגר (crystal-runner, lunar-fishing, מה שזה לא יהיה). שם המאגר הופך לעיתים קרובות ל-URL שלך.

שלב 3: חבר את המאגר ל-Vercel. היכנס ל-Vercel עם GitHub (חינם), לחץ על "Add New Project", בחר את המאגר. Vercel מזהה אוטומטית את Vite ומגדיר את הבנייה. לחץ על Deploy. תוך 60 שניות יש לך URL של crystal-runner.vercel.app. פתח אותו בטלפון שלך. שתף עם חבר אחד. פס הפריסה הוא עכשיו אפס למשך שאר סוף השבוע.

יום שישי 20:00 - 22:00: כתוב את מסמך העיצוב

שלב 4: ענה על חמש שאלות באנגלית פשוטה. פתח דף Notion או קובץ markdown בתוך המאגר וענה:

• מה השחקן עושה כל 5 שניות? (לולאת הליבה)
• מהי תנאי הניצחון ותנאי ההפסד?
• כמה זמן אורך ריצה אחת או רמה אחת?
• מהי ה"הוק" הוויזואלי? (פלטה, תאורה, הפניה לסגנון)
• מהי התכונה האחת שהופכת את זה לבלתי נשכח ב-30 שניות?

שלב 5: מחזר את מסמך העיצוב. דחוף אותו למאגר. Vercel יפרוס מחדש. המשמעת של דחיפה של כל שינוי משמעותי שומרת על ה-URL החי ישר.

יום שבת 09:00 - 13:00: בנה את המכניקה הליבה

שלב 6: החלף את מכניקת המחזיק בתכונה היחידה שלך. זוהי התכונה היחידה שחשובה. השתמש בצ'אט Cursor כדי לתאר אותה ("כאשר השחקן אוסף קריסטל, הקפא אויבים קרובים למשך 2 שניות והשמע צלצול"). בצע איטרציה מקומית עם pnpm dev. כאשר זה מרגיש נכון, דחוף.

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

יום שבת 13:00 - 20:00: הוסף רמה אחת

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

שלב 9: הוסף שכבת הדרכה. פופ-אפ של שתי משפטים "WASD לתזוזה, לחץ כדי לירות" בהפעלה הראשונה חוסך את ההשקה שלך משחקנים מבולבלים שמוותרים תוך 8 שניות. Cursor יכול ליצור את שכבת ה-React (או DOM רגיל) תוך 30 שניות.

שלב 10: דחוף כל שעה. כל דחיפה מקבלת URL תצוגה מקדימה של Vercel. שלח כל אחת מהן לחבר. לולאת המשוב היא הנשק הסודי של מחסנית זו.

יום ראשון 10:00 - 16:00: ליטוש

שלב 11: הוסף שלושה צלילים. לולאת צעדים, פד אמביינטי, נעימת ניצחון. אפילו שלושה צלילים משפרים דרמטית אב-טיפוס של סוף שבוע. מקורות חינם: freesound.org, opengameart.org.

שלב 12: הוסף "תבלינים". חלקיקים בפגיעה, טלטול מסך בפגיעה, פופ-אפים של מספרים בניקוד. "תבלינים" הם מה שגורם לבניית 48 שעות להיראות כמו בניית 6 חודשים ב-GIF. בקש מ-Cursor להוסיף "טלטול מסך בעוצמה 0.3 למשך 150ms כאשר השחקן נפגע" - הוא יכתוב את הוק טלטול המצלמה בחמש שניות.

שלב 13: הפעל מעבר Lighthouse. פתח את ה-URL של Vercel בטלפון והפעל את Chrome DevTools Lighthouse. חבילות Three.js הן בדרך כלל בסביבות 400KB עד 1.5MB. אם אתה מעל 3MB, בקש מ-Cursor להפעיל פיצול קוד עבור המודולים הכבדים. ה-gzip וה-brotli של Vercel יטפלו בשאר.

שלב 14: מעבר באגים. שחק את ה-URL החי שלך חמש פעמים ברציפות. תקן כל דבר שנשבר פעמיים. התעלם מכל דבר שנשבר פעם אחת.

יום ראשון 16:00 - 20:00: השקה

שלב 15: (אופציונלי) הגדר דומיין מותאם אישית. אם קנית name-game.com מראש, הוסף אותו בהגדרות הפרויקט של Vercel. SSL הוא אוטומטי. אחרת, ה-URL *.vercel.app בסדר - יש לו HTTPS, הוא ניתן לשיתוף, והוא נטען בכל מקום.

שלב 16: הקלט GIF של 15 שניות של הרגע הטוב ביותר. השתמש ב-URL החי, לא ב-localhost. ה-GIF הוא מה שנלחץ על Twitter, Bluesky, ו-Reddit.

שלב 17: צור עמוד itch.io (אופציונלי אך בעל השפעה גבוהה). כותרת, תיאור קצר, שלושה צילומי מסך, ה-GIF, פקדים, קרדיטים, והטמעת iframe של *.vercel.app שלך (itch.io תומך בהטמעות iframe למשחקי HTML5). עכשיו יש לך שני URLs - אחד לשיתוף מזדמן ואחד לקהל הגיימרים.

שלב 18: פרסם את הקישור. Twitter, Bluesky, קהילת המפתחים שלך בדיסקורד, r/IndieDev, r/threejs, r/WebGames. תמיד התחל עם ה-GIF. תמיד כלול את ה-URL. אם השתמשת ביכולת Vibe Skills, ציין זאת בפוסט ה-devlog - מפתחים אחרים שקוראים יעוניינו באותו מתחיל.

כיצד להימנע משלוש הכשלונות הנפוצות ביותר בפריסת Vercel

שלושה דברים שוברים כמעט כל סוף שבוע של Three.js + Vercel עצמאי. כל השלושה הם תיקונים של 5 דקות אם תתפוס אותם ביום שישי בערב, ומדרונות חלקלקים של 5 שעות אם תגלה אותם ביום ראשון ב-19:00.

• ספריית פלט בנייה שגויה. ברירת המחדל של Vite היא dist/. Vercel מזהה אוטומטית את Vite ומשתמש ב-dist/. אם התאמת אישית את הפלט, הגדר outputDirectory ב-vercel.json או בהגדרות הפרויקט, אחרת הפריסה שלך תהיה 404.
• נתיבי נכסים שעובדים מקומית אך מחזירים 404 בפרודקשן. השתמש בנתיבים יחסיים או בעוזר import.meta.env.BASE_URL של Vite עבור כל קובץ GLB, טקסטורה או אודיו שנטען בזמן ריצה. נתיבי /assets/... מקודדים בדרך כלל עובדים, אך נתיבי Windows מוחלטים שהועתקו בהחלט לא יעבדו.
• כותרות CSP שחוסמות נעילת מצביע או הקשר שמע. משחקי גוף ראשון דורשים נעילת מצביע. שמע דורש הפעלה בתנועת משתמש. כל יכולת מקטגוריית 3D Games מסופקת עם בלוק headers נכון ב-vercel.json כדי לטפל בכך. אם כתבת משלך מאפס, העתק את התצורה ממאגר היכולת.

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

שאלות נפוצות

האם שכבת החינם של Vercel באמת תחזיק מעמד אם המשחק שלי יקבל תנועה?

כן, עבור השקת סוף שבוע והשבועות הראשונים. שכבת החינם מעניקה לך 100GB רוחב פס בחודש, שהם בערך 20,000 הפעלות של בניית Three.js של 5MB. אם תגיע לתקרה זו, תוכנית ה-Pro עולה 20$ לחודש ומעלה אותך ל-1TB. עבור שיגור סוף שבוע, חינם זה יותר ממספיק. יכולות ב-Vibe Skills מספקות קונפיגורציות בנייה שממזערות את גודל החבילה, מה שמותח את שכבת החינם עוד יותר.

האם אני יכול להשתמש בדומיין מותאם אישית בשכבת החינם של Vercel?

כן. שכבת החינם תומכת בדומיינים מותאמים אישית עם HTTPS אוטומטי. קנה דומיין (Namecheap, Cloudflare Registrar, Porkbun), כוון אותו ל-Vercel, ו-Vercel מטפלת בתעודת ה-SSL. ההגדרה לוקחת כ-10 דקות. אם אין לך דומיין, ה-URL name-game.vercel.app קצר מספיק כדי לשתף בכל פלטפורמה.

האם המחסנית הזו מתאימה להגשת משחק בג'אם?

כן, וזו אחת המחסניות הטובות ביותר להגשות ג'אם. רוב הג'אמים (Ludum Dare, GMTK, js13k, GitHub Game Off) מקבלים כל URL שניתן לשחק בו באינטרנט. קישור *.vercel.app עובד בדיוק כמו URL של itch.io עבור שופטים. מנצחים רבים בג'אמים משגרים לשניהם - itch.io עבור קהל הגיימרים, Vercel כ-URL הקנוני המהיר.

האם אני צריך לדעת Three.js לפני שאתחיל?

אתה צריך מספיק JavaScript כדי לקרוא את מה ש-Cursor כותב ולכוונן ערכים. אינך צריך לכתוב Three.js מאפס. היכולות ב- Vibe Skills יוצרות את הגדרת המנוע, המצלמה, הבקר, ותצורת הבנייה. Cursor מטפל בקוד המשחקיות מהתיאורים שלך.

מה קורה אם בניית Vercel שלי נכשלת ביום ראשון ב-19:00?

הסיבה הנפוצה ביותר היא שגיאת TypeScript או משתנה סביבה חסר. Vercel מציגה את יומן הבנייה עם השורה הכושלת מודגשת. לחיצה אחת בלוח המחוונים מבטלת לפריסה העובדת האחרונה ומקדמת אותה לפרודקשן. מכיוון שכל דחיפה היא פריסת תצוגה מקדימה, אתה תמיד במרחק commit אחד מגרסה עובדת. זו הסיבה שדחיפה כל 30 דקות ביום שבת וראשון חשובה.

האם אני יכול למכור או לשנות את הקוד מיכולת משחק תלת-ממדי של Vibe Skills?

כן. יכולות ב-Vibe Skills מספקות רישיון ידידותי למסחר המאפשר לך לשחרר את הקוד במשחק שלך ב-Vercel, itch.io, Steam, או בכל מקום אחר. יוצרים שומרים על הקניין הרוחני של היכולת, אתה שומר על הקניין הרוחני של המשחק שנבנה מעליה.

מה אם אני לא רוצה להשתמש ב-Cursor?

כל עורך AI שיכול לערוך קבצי פרויקט עובד. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - כל אחד מהם יכול לבצע איטרציות על שלד ה-Three.js מיכולת Vibe Skills. היכולת עצמה אינה תלויה בעורך.

שגר אותו בסוף השבוע הזה

הסיבה שרוב המפתחים העצמאיים לעולם לא משגרים משחק תלת-ממדי אינה המנוע, הז'אנר, או תקרת המיומנות. זהו יום שישי בערב שבו הם "רק חוקרים קצת יותר" ולעולם לא מתחילים. בסוף השבוע הפנוי הבא שלך, עקוב אחר תוכנית ארבעת השלבים: התקן יכולת משחק תלת-ממדי של Vibe Skills, דחוף ל-GitHub, חבר את Vercel, פרוס עד יום שישי 20:00, ואז בלה את יום שבת וראשון בביצוע איטרציות על URL חי.

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

עיין ביכולות משחקי תלת-ממד ב-Vibe Skills →

דלג על מרתון הקוד הבסיסי של Three.js. התקן יכולת משחק תלת-ממדי ב-Vibe Skills, דחוף ל-Vercel, ויהיה לך URL חי עד ליל ראשון.