איך בונים משחק של העיר שלכם עם סוכן AI

• הרעיון האחד
• מה תבנו
• מה צריך
• שלב 1 · לולאה אחת
• שלב 2 · האמת בשטח
• שלב 3 · קוביות
• שלב 4 · נקודת ציון אחת
• שלב 5 · משלוח אחד
• שלב 6 · המבחן העיוור
• שלב 7 · לתקן דבר אחד
• שלב 8 · להגדיל
• דוגמה: דיזנגוף
• טעויות לדלג עליהן
• פרומפט הפתיחה
• גלריה
• מה זה עדיין לא עושה

הרעיון האחד

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

מה תבנו

משחק דפדפן עם לולאה אחת שהשחקן חוזר עליה:

והצינור שגורם לעיר להיראות כמו העיר שלכם:

מה צריך

• סוכן עם ידיים. גישה לקובצי הפרויקט, טרמינל, Blender ודפדפן. אם כלי לא זמין הוא חייב להגיד את זה. שלי ידע להריץ Blender בלי ממשק, להרים שרת מקומי ולהפעיל דפדפן.
• הכלים. Blender (אני עבדתי עם 4.5), Node.js 22 ומעלה, שרת HTTP מקומי, דפדפן עם WebGL.
• נתוני מפה ותמונות מתוארכות לאזור קטן אחד. כבישים ושבילי אופניים מ-OpenStreetMap, קווי מתאר של בניינים מהנתונים הפתוחים של העירייה, תמונות רחוב עם תאריך שאפשר לעמוד מאחוריו.
• היקף קטן. קטע אחד של 100 עד 200 מטר או כיכר אחת, ומשימה אחת שחוזרת. תתאפקו מכל העיר.

1להגדיר לולאה אחת

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

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

Build a browser-playable game about [local activity]. State the immediate objective, level objective, progression and lose condition. Keep the tone affectionate. Make the first playable loop coherent before adding content. Use an original, unbranded visual identity. List what the player does every 30 seconds and how they know they succeeded.

2לנעול את האמת בשטח

בחרו נקודת מוצא אחת במפה (קו אורך, קו רוחב), מצלמת ייחוס אחת עם מיקום, כיוון ושדה ראייה, וקו מתאר של בניין אחד. משכו כבישים ושבילי אופניים מ-OpenStreetMap וקווי מתאר מהנתונים הפתוחים של העירייה. אספו תמונות רחוב וכתבו מתי כל אחת צולמה.

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

בתל אביב נקודת המוצא הייתה קו אורך 34.774207, קו רוחב 32.077963. ב-Blender, X מזרח, Y צפון, Z למעלה. Three.js מקבל [x, z, -y]. כל נכס חי על הרשת האחת הזאת. זה קירוב מקומי שטוח, וזה בסדר גמור לרובע קומפקטי.

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

Reconstruct [specific 100 to 200 m section] from real evidence. Gather street and bike-lane geometry, building footprints, dated street-level photos and a matching aerial. Record source URLs, IDs, retrieval dates and photo capture dates. Lock one hero camera with coordinates, heading and field of view. Distinguish measured geometry from photo estimates and invented detail. Do not start with a generic city and label it afterward.

3לבנות את המקום מקוביות

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

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

4למדל נקודת ציון אחת ב-Blender

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

שני דברים נשארים נפרדים בכוונה: חלקים שזזים (מים, רמזורים, גפיים של דמויות) נשארים צמתים משלהם, וחומרים שיכולים להשתנות (צבע הקורקינט, גוון עור, זכוכית, מתכת, ריצוף) שומרים תפקיד חומר משלהם כדי שהמשחק יחליף אותם בלי לגעת בגאומטריה. שמרו את ה-Python, את ה-.blend, את ה-.glb, רינדור תצוגה מקדימה והערה קצרה על מה הנחתם.

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

Build only [named building] in Blender from the supplied photos and footprint. Return a reproducible Python module, .blend, preview and a short source/assumption report. Use metres and the provided geographic origin. Preserve the actual plan; match facade rhythm, balconies, ground floor and signs. Keep articulated parts as separate nodes and keep material roles separate. No downloaded 3D assets. Do not edit the parent project or deploy anything. Give the parent exact orientation, dimensions and triangle count.

5לטעון ב-Three.js ולרכוב משלוח אחד

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

המים הולכים לשיידרים על ה-GPU על זמן שחלף, אז הם זזים אותו דבר בכל קצב פריימים וה-CPU אף פעם לא בונה מחדש את הרשת. אנשים ורכבים שחוזרים על עצמם עוברים instancing: רשת אחת, הרבה עותקים, draw call אחד. ככה 487 הולכי רגל עולים בערך כמו כמה בודדים.

מה יש לכם: הקלטת מסך של לולאה אחת שלמה בדפדפן.

6לשאול "איפה זה?" לפני שמראים את התשובה

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

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

beforeafter

מה יש לכם: רשימת סימנים, מדורגת לפי כמה כל אחד פוגע בזיהוי.

Stage one. You are an independent critic. From this neutrally named render alone, identify the street or place and the viewing direction. State your confidence and what you based it on. Do not ask for hints.

Stage two, sent only after stage one is answered. Here is the dated reference photo from the same angle. List the differences in street geometry, scale, facade proportions, signs, cars, materials and lighting. Rank the three changes with the greatest recognition benefit. Do not reward labels for fixing incorrect geography.

7לתקן דבר אחד, ואז למדוד

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

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

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

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

Pick the highest-impact mismatch from the critique. Change only the responsible asset or system. Preserve coordinates and camera. Rebuild, capture the same view and have a different critic compare. Report the actual result even if the improvement is small. Measure performance using the same device and method as last time, and say what they were.

8להגדיל קטע בדוק אחד בכל פעם

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

• ניווט. גרף של קטעי מסלול מאומתים עם שאילתות גובה קרקע וחסימות על העולם המורכב. מחוץ למסלול, מחזירים את השחקן לשביל במקום להמציא קו דרך מכשולים. אוטובוסים צריכים מידות ומעטפות התנגשות משלהם; קופסה בגודל אוטובוס על מסלול של מכונית עוברת דרך הכול.
• אריזה. שמרו קובץ HTML אחד עצמאי עם העולם מוטמע, לביקורת ולשיתוף עם חברים. לשחקנים, פצלו את זמן הריצה ואת הנכסים לקבצים נפרדים עם hash בשם. שלי ירד מעמוד של 43 MB למעטפת של 56 KB פלוס בערך 29 MB נכסים. GLB הוא פורמט המודל, gzip מכווץ את ההעברה, Draco מכווץ את הגאומטריה. שלוש בעיות שונות.
• ביצועים. instancing לדמויות שחוזרות, קיבוץ סטטי עם גבולות מרחביים כדי שה-culling ימשיך לעבוד, culling לפי מרחק, יחס פיקסלים מוגבל, צללים מוגבלים. תאחדו עיר שלמה לאובייקט אחד וה-culling מת. איחוד צריך גבולות.

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

After each meaningful milestone, save the exact prompt, sources, before/after render, script/build, validation result and one reusable lesson. Mark retrospective summaries as summaries. Keep concept art separate from actual screenshots. Never record a test as passed unless it ran.

דוגמה מלאה: כיכר דיזנגוף

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

חבילת המקורות

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

המרת הקואורדינטות

כל מקור מומר לאותם מטרים מקומיים לפני שמשהו ממודל:

east  = (longitude - originLongitude) * 111320 * cos(originLatitude in radians)
north = (latitude  - originLatitude)  * 111320
Blender position  = (east, north, elevation)      # X east, Y north, Z up
Three.js position = [east, elevation, -north]    # X east, Y up, Z south

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

החלקים עם השמות

הייצוא של הכיכר מכיל, בין השאר: facade_cinema, facade_perimeter, fountain_metal, water_water, water_jet, dizengoff_world (הקרקע), פלוס נכסי רמזורים, מכוניות ודמויות נפרדים.

הביקורת העיוורת הראשונה

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

טעויות לדלג עליהן

כל אחת מאלה עלתה לי לפחות בנייה מחדש.

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

וארבעה באגים שתפגשו, עם התיקון:

פרומפט הפתיחה

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

Use the attached guide as a workflow for building an original browser-playable 3D game. Adapt the method to my location and idea; do not copy Tel Aviv-specific coordinates, names or geometry.

My inputs:
- Place and small starting area: [city, street or square; about 100 to 200 m]
- Player activity and objective: [what the player does and how they succeed]
- Visual direction: [stylized, low-poly, realistic proportions, etc.]
- Target devices: [desktop, mobile, or both]
- Available reference photos and maps: [links or files]
- Time and compute constraints: [optional]

First read the guide and inspect the available project and tools. Identify the essential missing inputs. Check whether you can run Blender, Node.js and a browser. State any unavailable tools instead of pretending to use them.

Create a short implementation brief: first playable loop, controls, success, failure, restart, one small geographic boundary and explicit exclusions.

Before modeling the location, collect dated references, mapped roads and building footprints. Record source URLs and IDs and separate measured facts, photo estimates and invented detail. Pick one shared origin, units, axis conversion and a locked comparison camera. Do not substitute a generic street.

Build a graybox to check scale and clearance. Then create original geometry using reproducible Blender Python scripts. Save the source, .blend, .glb, preview and source/assumption notes. Preserve named articulated parts and material roles needed for animation and customization. If multiple workers are available and appropriate, give each one bounded asset ownership and the same coordinate and export contract.

Load the exports in Three.js. Implement one complete playable task before expanding the map. Derive navigation and blockers from the same assembled world, and test the actual exports. Keep the environment recognizable from the player's camera, not just from an aerial showcase.

Capture the locked view and compare it with the dated reference. For an independent recognition test, show a fresh reviewer only the neutral render first; reveal the reference afterward. Fix the highest-impact mismatch, rebuild and repeat. Do not claim recognition based only on your own review.

Use batching, instancing and culling where appropriate. Measure the real browser build and report the device, viewport, method and remaining limits. Verify controls, collisions, completion, failure, restart and loading. If mobile is a target, distinguish responsive layout from physical-phone tests.

Keep a progress log with prompts, sources, before/after views, validation and next steps. Work locally and make each milestone reviewable. Do not publish or connect external services without authorization. Never invent successful tests, precise geography, playtest scores, development costs or elapsed time.

Start now with the tool check, the brief and the reference packet for the first section. Continue through the first runnable, reviewable milestone; do not stop after giving me a plan.

גלריה

רינדורים מהבילדים של ספטמבר 2026. התוויות אומרות מה משחיק ומה מחקר נוף.

מה זה עדיין לא עושה

• זה לא שחזור 1:1. קווי מתאר וכבישים נמדדו; הרבה גבהים ופרטי חזיתות מוערכים מתמונות.
• השטח המשחיק הוא בערך 2 ק"מ עם שמונה תחנות סביב דיזנגוף, פרישמן, הטיילת וכיכר האופרה. שאר השכונות הן מחקרי נוף בינתיים.
• אין עדיין מדידה על טלפון ואין קישור ציבורי. המשחק בגרסת טרום־שחרור מקומית עד שיעבור בדיקות על מכשירים.

נתוני מפה © תורמי OpenStreetMap (ODbL) והנתונים הפתוחים של עיריית תל אביב-יפו. Blender 4.5, Three.js, Node.js 22, וסוכן קוד. תמונות הייחוס שייכות לצלמים שלהן ולא מופצות כאן. מוזיקה: "Costa Cruising", טראק שלי שנעשה עם Suno. בזמן הבנייה המשחק נקרא Tel Aviv Run.