رسمة الثلاجة صارت بطل لعبة… بس لازم يثبت إنه إنسان 🤖🎮 (كله كود!)

2026-11-020:32شورت

لوب ثلاثي الأبعاد 32 ثانية: رسمة طفل على الثلاجة تتحول لمجسّم، ياخذ هيكل عظمي وخمس حركات، يحاول يتحقق إنه إنسان… ويكسر الشاشة ويدخل لعبة في مجلس. كله كود Three.js كتبه Claude، حتى الصوت. هنا البرومتات خطوة بخطوة، والطريقة الحقيقية لو تبي لعبة تلعبها، وملف المشهد.

• الشخصية من 3 صور سوّاها ChatGPT: turnaround، رسمة طفل بالكرايون، وورقة تعابير الوجه.
• السر: Claude يقيس كل جزء من الرسمة ويطابقها بالـ3D، عشان الشكل ما يتغير بعد التحويل.
• الشاشة تعرض المجلس الحقيقي وهو شغّال، والكاميرا تدخل فيها بدون قطع.
• تبي لعبة حقيقية تلعبها؟ Meshy أو Tripo للمجسّم، Auto-rig للهيكل، وClaude Code يبني اللعبة (آخر برومت).

الطريقة

1. سوّ صور شخصيتك في ChatGPT بأول 3 برومتات (ارفق صورة ريفرنس لو عندك).
2. افتح شات Claude العادي (تأكد إن إنشاء الملفات وتشغيل الكود شغّال) وارفق الصور الثلاث مع برومت الشخصية.
3. اطلب صورة المقارنة. إذا الشكل تغيّر بعد التحويل، قل له وش اللي مو مطابق بالضبط.
4. بعدها برومت المشهد، ثم مشهد التحقق والشاشة، ثم المجلس، وكل مرة اطلب صور تجربة قبل ما تكمل.
5. آخر شي الصوت والرندر. الرندر الكامل في الشات ياخذ وقت (تقريباً ساعة لـ 32 ثانية).
6. تبي تختصر؟ نزّل ملف المشهد الجاهز، ارفعه في الشات مع رسمة شخصيتك، وقل له يبدّل الروبوت فيها.

وش تقدر تغيّر؟

كل شي بين الأقواس [ ] في البرومتات تقدر تغيّره. هذي أهم الأشياء:

ملفات للتحميل

البرومتات (9)

Use the attached images ONLY as inspiration for the character's personality and proportions: [a small, cute, chubby robot with a big rounded helmet-head, a black face screen with glowing happy eyes, round ear discs, a round belly, stubby arms with mitten hands, and big rounded boots].

Redesign it as a NEW original character in a simple hand-drawn toon style, NOT glossy and NOT photorealistic:
- Built entirely from simple 3D primitive shapes (rounded boxes, spheres, capsules, discs). No small mechanical details.
- Thick black outline around every shape.
- Flat matte colors with a subtle crayon/colored-pencil texture.
- Color palette: [warm cream body, burnt-orange accents, black face screen with soft orange glowing eyes].
- Chest emblem: [a simple orange circle with a white 8-ray sunburst]. NO logos, NO text.

Layout: a clean character turnaround sheet on a plain off-white background: FRONT (A-pose, arms slightly away from the body), 3/4 VIEW, SIDE VIEW, BACK VIEW. Full body in every view, same scale, nothing cut off. Wide 16:9.

Draw the exact same character from the attached reference as if a [7]-year-old child drew it with crayons on white paper: wobbly black outlines, uneven crayon coloring that goes outside the lines, same colors and chest emblem. Front view, A-pose, full body. Add a few childish details: [a yellow crayon sun in the corner, a small red flower, green grass scribbles]. Slightly wrinkled paper with tape on the top corners. Flat scan, plain lighting, no hands, no text. Portrait 4:5.

Using the same character from the attached reference, create an expression sheet of ONLY the face screen, front view, 6 expressions in a 3x2 grid on a plain off-white background: [happy (closed curved eyes + smile), neutral, excited, blink, surprised, wink]. Glowing simple shapes on black, thick outline around the screen, same flat toon style. No text, no labels.

ارفقت لك 3 صور لشخصية: turnaround من كل الجهات، رسمة طفل بالكرايون، وورقة تعابير الوجه.
ابنِ الشخصية في Three.js بأشكال بسيطة (صناديق بزوايا دائرية، كرات، كبسولات) بدون أي ملف مجسّم:
- قِس كل جزء من الصورة الأمامية بالبكسل (الراس، الشاشة، الأذنين، الجسم، الأيدي، الجزمة) وحوّله لمقاسات، عشان الشكل ما يتغير بعد التحويل.
- حدود سوداء سميكة حول كل شكل (inverted hull)، وألوان مطفية بملمس [كرايون].
- الوجه والشعار: قصّهم من الصور نفسها وحطهم على الشخصية، والتعابير من ورقة التعابير.
- لا تطلع أي قطعة بارزة مو موجودة بالرسمة.
- هيكل بسيط بمفاصل: الحوض، الظهر، الرقبة، الراس، الكتفين، الأيدي، الأرجل، الركب، الأقدام.
طلّع لي صورة مقارنة: الرسمة يسار والـ3D يمين بنفس الحجم من قدّام، وعدّل لين يتطابقون.

سوّ لي بـ Three.js ملف HTML واحد، مقاس [1080×1920 عمودي]، وكل فريم يعتمد على الوقت بس (window.renderAt(t)).
المكان: [طاولة بيج وجدار بلاط، ثلاجة بيضاء، سلة، زرع، وقلم كرايون كبير على الأرض]، نفس ستايل الشخصية (حدود سوداء، ملمس كرايون، ظلال ناعمة).
القصة:
0–2.6: رسمة الطفل ملصقة على الثلاجة والكاميرا قريبة منها.
2.6–5.6: الورقة تنقلب وتطير وتصير ستيكر واقف على الأرض (وضعية A).
5.6–8.6: حلقة مسح برتقالية تطلع من تحت لفوق: تحت الحلقة المجسّم 3D بشبكة واضحة، وفوقها الستيكر.
8.6–11.4: العظام تنرسم نقطة نقطة مع كرت «هيكل عظمي · [17] عظمة»، والشخصية تجرب تثني يدينها.
11.4–15: خمس حركات وتبويباتها تضيء: ثبات، مشي، جري، قفز، تلويح، والكاميرا تمشي معها من الجنب.
فوق: كرت لكل مرحلة بالعربي، وتحت: شريط «صورة ← وضعية A ← مجسّم ← هيكل ← حركات ← لعبة» يضيء مع كل مرحلة.
طلّع لي 6 صور تجربة من لحظات مختلفة.

كمّل المشهد بعد الحركات:
15–20: الشخصية تمشي للابتوب كبير وتنط على الكيبورد. الشاشة فيها «[اللعبة جاهزة… بس أول]» ومربع «[تحقّق أنك إنسان]» (تصميمنا بدون شعارات). تنط وتضغط المربع ← لفة تحميل ← ❌ «[تم رصد روبوت!]». تلتفت للكاميرا وتطالع يدينها مصدومة، بعدين ترجع تضرب الشاشة بيدينها: تتشقق وتتكسر وتطير شظايا.
20–22: الشاشة تعرض عالم اللعبة الحقيقي وهو شغّال (WebGLRenderTarget من نفس كاميرا اللعبة). الشخصية تقفز داخل الشاشة وتصغر، والكاميرا تدخل ورا لين الشاشة تغطي الإطار بالضبط، وبعدها نكمل في عالم اللعبة مباشرة بدون أي قطع (نفس زاوية الرؤية بالضبط).
صوت الشاشة وكلامها بالعربي. طلّع لي صور تجربة للحظات: الضغط، الخطأ، اليدين، الكسر، ونص الدخول للشاشة.

ابنِ عالم اللعبة: [مجلس سعودي: جدران كريمية بأقواس وفوانيس في محاريب، شريط زخرفة فوق، شبابيك فيها نخل، جلسات أرضية حمراء بنقوش السدو، مساند أسطوانية، وزولية كبيرة بالنص]. ارسم النقوش بالكود (canvas) بنفس ستايل الكرايون.
الشخصية تنزل من فوق، وبعدها:
- لفة كاميرا 360° حولها تبيّن المكان كله.
- تمشي وتجري، والكاميرا تتبعها من الجنب والجلسات تعدي ورا.
- قفزة بزاوية كاميرا منخفضة، وبعدها تلتفت للكاميرا وتلوّح والكاميرا تتمايل حواليها.
واجهة لعبة: مربع «three.js · hero.glb / anim: walk»، وأزرار W A S D وSHIFT وSPACE تضيء مع كل حركة.
عدسة الكاميرا في اللعبة أعرض ([50]°) عشان الشخصية تكون بحجم مناسب والعالم يبان حولها.

1) سوّ الصوت بالكود (Python) بدون ملفات جاهزة: موسيقى خفيفة طولها بالضبط عدد مازورات كامل عشان تلف، ومؤثرات على توقيت كل حدث: ورق، مسح، طقطقة عظام، خطوات، قفز، ضغطة، لفة تحميل، صوت خطأ، تكسّر زجاج، سحبة للشاشة، نزول، كبسات كيبورد. المستوى ‎-14 LUFS.
2) رندر المشهد فريم فريم بمتصفح headless، [30] فريم بالثانية بمقاس [1080×1920].
3) النهاية: بعد آخر حركة الصورة تتجمد، يطلع «◀◀ Ctrl+Z»، والفيديو كله يرجع لورا بسرعة بستايل شريط فيديو (تشويش، خطوط، ألوان مزاحة) لين أول فريم بالضبط، والتأثير يخف بآخر فريمات. الصوت: نفس الموسيقى مقلوبة ومسرّعة.
4) طلّع MP4 بـ FFmpeg: H.264، yuv420p، CRF 16، مع الصوت، وأرسل لي الملف.

(قبلها: حوّل صورة شخصيتك لمجسّم في Meshy أو Tripo، اعمل له Auto-rig، أضف 5 حركات: idle وwalk وrun وjump وحركة خاصة، وصدّره GLB.)
حمّل [hero.glb] بـ GLTFLoader واطبع أسماء كل الحركات اللي فيه. ظبّط مقاس المجسّم وخلّه واقف على الأرض. أضف كاميرا تتبع الشخصية من ورا. W A S D للمشي، Shift للجري، Space للقفز. استخدم AnimationMixer وانتقل بين idle وwalk وrun وjump بنعومة خلال 0.2 ثانية. أضف إضاءة ناعمة وظلال، ولوحة صغيرة تعرض اسم الحركة الحالية. العالم: [مجلس بجلسات وزولية].

⚠️ الباقات المجانية في Meshy وTripo غالباً للاستخدام الشخصي مو التجاري، تأكد قبل ما تنشر لعبة. والشخصية في مقطعنا بدون شعارات حقيقية.