بناء استوديو رسوم متحركة 2.5D بتأثير المنظور المتزامن في جلسة واحدة باستخدام Claude Code: 3 أجزاء رئيسية من الشيفرة لتصدير MP4 بشكل حتمي إطارًا بإطار

ملاحظة المؤلف: من الموجّه (Prompt) ومعادلة تعويض عمق المجال، وصولًا إلى التصدير إطارًا بإطار باستخدام Playwright وffmpeg. شرح كامل لكيفية بناء استوديو حركة بارالاكس ثنائي ونصف البُعد (2.5D) باستخدام Claude Code، بحيث يُصدَّر الفيديو دون فقدان أي إطار.

يجرّب كثيرون مساعد البرمجة بالذكاء الاصطناعي لأول مرة في صناعة الرسوم المتحركة، فتبدو المعاينة في المتصفح سلسة تمامًا. وما إن يصدّروها فيديو حتى يظهر التقطيع وتخطي الإطارات وعدم تطابق المدة. السبب غالبًا في البنية نفسها: لم يُعامَل «التصدير» منذ البداية جزءًا من التصميم. يدور هذا المقال حول فكرة واحدة: دالة نقية renderAt(t) + التقاط لقطات شاشة مع seek لكل إطار. سنوضح كيف تبني بها استوديو بارالاكس 2.5D في جلسة واحدة مع Claude Code، ثم تصدّره بثبات إلى MP4.

هذا ليس عرضًا آخر من نوع «دع الذكاء الاصطناعي يكتب لك رسمًا متحركًا». سنفصّل اشتقاق معادلة تعويض عمق المجال، وخطأ شائعًا في الإزاحة، والفرق الجوهري بين التشغيل الفوري والتصدير إطارًا بإطار.

القيمة الأساسية: بعد قراءة المقال ستحصل على بنية موجّهات قابلة لإعادة الاستخدام، وخط تصدير يمكن إعادة إنتاجه، وقائمة تحقق تنتقل معك إلى مشاريع الفيديو البرمجي الأخرى.

أبرز نقاط استوديو الرسوم المتحركة بالبارالاكس 2.5D مع Claude Code

المرجع الذي بُنيت عليه هذه الممارسة مقال نُشر بتاريخ 2026-11-09. استخدم كاتبه Claude Code مع Opus 5.5، وأنجز في جلسة واحدة فقط استوديو في ملف HTML واحد، مع سكربت تصدير بـ Playwright لا يتجاوز نحو 25 سطرًا. على حاسوب الكاتب المحمول استغرق تصدير فيديو مدته 6 ثوانٍ بدقة 720p (180 إطارًا) نحو 20 ثانية. لم يذكر الكاتب مواصفات جهازه، لذا يصلح هذا الزمن مؤشرًا على الحجم التقريبي فقط.

مبدأ الرسوم المتحركة بالبارالاكس 2.5D

تقوم فكرة 2.5D على وضع مواد ثنائية الأبعاد مسطحة على أعماق مختلفة في فضاء ثلاثي الأبعاد، ثم تمرير كاميرا افتراضية عبرها. الطبقات القريبة من الكاميرا تتحرك بسرعة والبعيدة تتحرك ببطء، والعين تفسر هذا الفرق في السرعة على أنه عمق، وهذا هو البارالاكس (parallax). لا يتطلب الأمر نمذجة ولا إضاءة ولا محرك 3D، فخاصيتا perspective وpreserve-3d في CSS داخل المتصفح تكفيان.

الفرق بين “الاستوديو” و”الرسوم المتحركة لمرة واحدة” هو اكتمال ثلاثة مكونات: مخطط المشهد، والخط الزمني، والمُصيِّر الحتمي. تتجاهل كثير من الشروحات المكوّن الثالث، مع أنه يحدد ما إذا كان ملف MP4 المُصدَّر سيتقطع. لذلك ينبغي أن تجعله شرطًا إلزاميًا منذ كتابة أول سطر في الموجه.

إعداد البيئة والنموذج في استوديو Claude Code ثنائي الأبعاد ونصف

توصي المراجع باستخدام Opus 5.5 للبناء الأول. يصنّفه العرض الرسمي للنماذج من Anthropic على أنه نموذج مخصص لـ«البرمجة بالوكلاء طويلة المدى وأعمال المعرفة»، بنافذة سياق تبلغ 1M token وحد أقصى للمخرجات يبلغ 128K. أما التسعير الرسمي فهو 4 دولارات لكل مليون token إدخال و20 دولارًا لكل مليون token إخراج. الأسعار الفعلية تخضع لما تنشره الصفحة الرسمية.

يُفضَّل تثبيت معرّف النموذج بدقة عند بدء التشغيل، حتى لا يتغير سلوك المشروع في منتصف العمل بسبب تبديل الاسم المستعار:

claude --model claude-opus-5-5 --effort high

يعمل Opus 5.5 افتراضيًا بمستوى effort متوسط (medium). في البناء الأول يجب على الوكيل (agent) أن يكتب بشكل صحيح من أول مرة رياضيات الإسقاط ومحرك الإطارات المفتاحية ومسار التصدير، لذلك يُنصح برفعه إلى high. بعد ذلك، عندما تقتصر التعديلات على أمور صغيرة مثل تغيير قيم الإطارات المفتاحية أو الألوان، يمكنك العودة إلى medium لتوفير الـ token.

أما أداء النماذج الأخرى في البناء نفسه، وكم يبلغ فرق التكلفة معها، فلا تقدّم المراجع أي بيانات مقارنة بشأنه. وإن أردت تغيير النموذج، فجرّب تشغيل الموجه نفسه مع كل نموذج، ثم قارن النتائج بندًا بندًا باستخدام طريقة التحقق بالصور الثابتة المشروحة لاحقًا.

بنية الموجه لبناء استوديو 2.5D باستخدام Claude Code

موجه واحد مكتوب بدقة أفضل من خمسة موجهات غامضة. مواصفات البناء في المرجع عبارة عن موجه واحد متصل، وهذه نسخة تحافظ على معناه الأصلي:

Build a 2.5D motion studio as one file, studio.html, with no dependencies.
- Scene: 6 layers (sky, moon, hills, city skyline, a title card "Ship it.",
  foreground foliage), each at its own z depth, using CSS perspective and preserve-3d.
- Camera: keyframes for x, y, z (dolly) and yaw (orbit around the card).
- Per-layer tracks: opacity, scale, y. Easings: linear, easeInOutCubic,
  easeInOutSine, easeOutBack.
- A timeline bar with keyframe markers, a playhead, click to scrub, space to play or pause.
- renderAt(t) must be pure in t. Expose window.__seek(t) that resolves after
  the frame paints, and a ?capture mode that hides the UI.
Then write export.mjs: Playwright opens ?capture, seeks every frame at 30 fps,
screenshots it and pipes PNGs to ffmpeg as H.264.

يمكن تقسيم هذا الموجه إلى أربع طبقات: المشهد، ثم الكاميرا، ثم المسارات ودوال التسارع (easing)، ثم واجهة التفاعل، وفي النهاية عقد التصدير. والسطران الأخيران هما الحاسمان فعلًا. فهما يشترطان أن تكون renderAt(t) دالة نقية بالنسبة إلى t، وأن تُتاح دالة __seek التي لا تعود إلا بعد انتهاء رسم الإطار، وأن يوجد وضع ?capture الذي يخفي الواجهة. بهذا يصبح التصدير قيدًا معماريًا، ويصمم الوكيل (agent) الشفرة وفقًا له.

إذا أردت نقل الفكرة إلى مشروعك، فاعتمد هذه البنية قالبًا: اكتب في البداية بوضوح “ماذا سيُرسم”، ثم ثبّت في آخر سطرين أو ثلاثة “كيف تُلتقط الإطارات بطريقة حتمية”.

شرح الشفرة الأساسية لاستوديو 2.5D الذي ولّده Claude Code

يبلغ حجم الاستوديو كله نحو 150 سطرًا، والمهم فيه ثلاثة أجزاء نستعرضها فيما يلي.

أخذ عينات الإطارات المفتاحية ودوال التسهيل

كل مسار عبارة عن مصفوفة من الإطارات المفتاحية مرتبة حسب الزمن. تبحث الدالة sample() أولًا عن الإطارين المفتاحيين اللذين يحيطان بالزمن t، ثم تحسب نسبة التقدم باستخدام دالة التسهيل (easing) الخاصة بالإطار السابق، وبعدها تُجري الاستيفاء (interpolation) على جميع الحقول الرقمية:

function sample(keys, t) {
  if (t <= keys[0].t) return keys[0];
  for (let i = 0; i < keys.length - 1; i++) {
    const a = keys[i], b = keys[i + 1];
    if (t <= b.t) {
      const p = (easings[a.ease] || easings.linear)((t - a.t) / (b.t - a.t));
      const out = {};
      for (const k in b)
        if (typeof b[k] === 'number' && k !== 't') out[k] = a[k] + (b[k] - a[k]) * p;
      return out;
    }
  }
  return keys[keys.length - 1];
}

هذه الدالة لا تقرأ الوقت الحالي، ولا تعتمد على حالة الإطار السابق، ولا تستخدم أرقامًا عشوائية. فالقيمة t نفسها تعطي دائمًا المجموعة نفسها من القيم، ومن هنا تأتي حتمية renderAt(t) (أي أنها تُنتج النتيجة نفسها عند كل استدعاء بالزمن نفسه).

تعويض العمق: المعادلة الأساسية للمنظور 2.5D

الفكرة هنا أن الكاميرا لا تتحرك، بل يتحرك العالم كله في الاتجاه المعاكس. وكل طبقة، إضافةً إلى إزاحتها على المحور z، تُضرب في معامل تكبير تعويضي:

const PERSPECTIVE = 1200; // يجب أن تتطابق مع قيمة perspective في العنصر #viewport
world.style.transform =
  `translate3d(${-cam.x}px, ${-cam.y}px, ${cam.z}px) rotateY(${-cam.yaw}deg)`;
const comp = 1 - L.z / PERSPECTIVE;
el.style.transform = `translate(-50%,-50%) ` +
  `translate3d(${x * comp}px, ${y * comp}px, ${L.z}px) scale(${comp * s})`;

وإليك الاشتقاق. عندما تكون مسافة المنظور في CSS تساوي p، تُسقَط النقطة التي عمقها z على الشاشة (وتعني قيمة z السالبة أنها تبتعد عن المشاهد) بتصغير مقداره p / (p - z). بأخذ p = 1200 وz = -900 نحصل على 1200 / 2100 ≈ 0.571، أي أن الطبقة لا يتبقى منها سوى نحو 57% من حجمها الأصلي.

ولإلغاء هذا التصغير نضرب في مقلوبه (p - z) / p = 1 - z/p = 1 + 900/1200 = 1.75. وهذه هي قيمة comp في الشيفرة. وبما أن 0.571 × 1.75 = 1، تظهر كل طبقة بالحجم والموضع اللذين حددتهما عندما تكون الكاميرا ساكنة.

فكيف ينشأ التأثير المنظوري (البارالاكس)؟ عندما تتحرك الكاميرا، يُزاح العالم كله بالمقدار dx نفسه، لكن إزاحة كل طبقة على الشاشة تبقى مضروبة في معامل p/(p - z) الخاص بها. الطبقات البعيدة معاملها صغير فتتحرك قليلًا، والقريبة معاملها كبير فتتحرك أكثر. التعويض يصحح التكوين في حالة السكون فقط، ولا يمسّ فرق السرعات أثناء الحركة، وعليه يقوم تأثير 2.5D.

(القيم في الجدول محسوبة عند p = 1200، وصفّا -300 و-1800 مشتقان كمثالين.)

خطأ برمجي يستحق التذكّر: تعويض الحجم دون تعويض الإزاحة

اكتفت النسخة الأولى من الشيفرة بضرب الطبقات في scale(comp)، ولم تضرب إزاحة x/y في comp. فانضغطت إزاحة التلال البعيدة بفعل المنظور، واختلّ التكوين كله، وارتفعت التلال تدريجيًا حتى غطّت نحو ثلثي السماء. الإصلاح بسيط: نضرب x و y في comp أيضًا، لأن المنظور يطبّق المعامل نفسه على الموضع والحجم.

والأهم من ذلك طريقة اكتشاف هذا الخطأ. لاحظ المؤلف المشكلة من إطار واحد مُصيَّر، ولم يلحظها وهو يقرأ الشيفرة. لذلك، قبل أن تثق بأي حركة كاميرا، اطلب من الوكيل (agent) أن يُصيِّر ثلاث لقطات ثابتة: البداية والمنتصف والنهاية.

تصدير حركة المنظر المتعدد الطبقات (2.5D Parallax) إلى MP4 بشكل حتمي إطارًا بإطار

الفرق الجوهري بين التشغيل الفوري والتصدير إطارًا بإطار

تعتمد المعاينة الفورية على requestAnimationFrame، وعندما يكون الجهاز مشغولًا تُفقد بعض الإطارات. هذا مقبول في مرحلة المعاينة، لكنه غير مقبول عند التصدير. أما إذا لجأت إلى تسجيل الشاشة، فما تحصل عليه هو “ما كان معروضًا على الشاشة في تلك اللحظة الزمنية الفعلية”، وأي تأخر بمقدار إطار واحد يتحول إلى إطار مكرر أو إطار مفقود.

سكربت التصدير المبسّط

يعتمد توقيت المُصدِّر على رقم الإطار. في كل إطار ينفّذ المُصدِّر عملية seek أولًا، ثم ينتظر حتى يكتمل رسم المشهد، ثم يلتقط لقطة الشاشة، وبعدها يكتب ملف PNG في الإدخال القياسي (stdin) الخاص بـ ffmpeg:

import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { pathToFileURL } from 'node:url';

const out = process.argv[2] || 'out.mp4';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');

const { duration, fps } = await page.evaluate(() => window.__scene);
const ffmpeg = spawn('ffmpeg', ['-y', '-f', 'image2pipe', '-framerate', String(fps),
  '-i', '-', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '18', out],
  { stdio: ['pipe', 'ignore', 'inherit'] });

const frames = Math.round(duration * fps);
for (let i = 0; i < frames; i++) {
  await page.evaluate(t => window.__seek(t), i / fps);
  ffmpeg.stdin.write(await page.screenshot({ type: 'png' }));
}
ffmpeg.stdin.end();
await new Promise(r => ffmpeg.on('close', r));
await browser.close();

هناك بعض التفاصيل التي تستحق الانتباه. الدالة window.__seek(t) لا تُنهي وعدها (resolve) إلا بعد مرور إطارَي رسوم متحركة، وبذلك تضمن أن لقطة الشاشة تلتقط قيمة transform الجديدة دائمًا. أما image2pipe فيجعل ffmpeg يقرأ تسلسل صور PNG من stdin. ويضمن yuv420p أن الملف الناتج يعمل بشكل سليم داخل المتصفحات. وإذا لم تكن متصفحات Playwright مثبّتة بعد، فنفّذ الأمر npx playwright install chromium مرة واحدة أولًا.

// داخل studio.html: seek حتمي، يعود بعد رسم إطارين
window.__seek = (t) => new Promise(resolve => {
  renderAt(t);                       // دالة نقية: تعتمد على t فقط
  requestAnimationFrame(() =>
    requestAnimationFrame(resolve)); // التأكد من تطبيق الأنماط ورسمها
});

// stills.mjs: عرض ثلاث لقطات ثابتة (البداية / المنتصف / النهاية)، شاهد الصور أولًا ثم ثق باللقطة
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto(pathToFileURL('studio.html').href + '?capture');
const { duration } = await page.evaluate(() => window.__scene);

for (const [name, t] of [['start', 0], ['mid', duration / 2], ['end', duration - 1e-3]]) {
  await page.evaluate(t => window.__seek(t), t);
  await page.screenshot({ path: `still-${name}.png` });
}
await browser.close();

نتائج الاختبار الفعلي لدى المؤلف: 180 إطارًا، بدقة 1280×720، و30 إطارًا في الثانية، ومدة 6.0 ثوانٍ، وحجم ملف MP4 الناتج نحو 420 KB، وإجمالي الزمن نحو 20 ثانية. تتحرك أبراج المدينة في المشهد مسافة أقل من تلال المقدمة الداكنة، وتخرج تلال المقدمة في النهاية من الإطار تمامًا، وهذا هو تأثير البارالاكس (اختلاف المنظر).

إضافة ميزة “وصف اللقطة” إلى استوديو 2.5D

الخطوة التالية أن نتيح للكاتب إدخال جملة تصف اللقطة، ليعيد النموذج ملف JSON للإطارات المفتاحية. تعتمد المادة المرجعية على استدعاء Anthropic Messages API مباشرة:

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2026-10-21" \
  -H "content-type: application/json" \
  -d '{
    "model": "claude-opus-5-5",
    "max_tokens": 4096,
    "output_config": { "effort": "low" },
    "system": "Return only JSON: {\"camera\": [{\"t\",\"x\",\"y\",\"z\",\"yaw\",\"ease\"}], \"tracks\": {}}. Times in seconds, 0 to 6.",
    "messages": [{ "role": "user", "content": "Slow push-in, slight orbit right, title fades up in the first second." }]
  }'

هناك فخّان شائعان هنا. الأول أن قيمة effort يجب أن تُكتب داخل output_config.effort. والثاني أن Opus 5.5 يعتمد التفكير التكيّفي دائمًا، فإرسال thinking: {"type": "disabled"} يعيد الخطأ 400، كما أن رموز التفكير (tokens) تُحتسب ضمن max_tokens. وإذا ضبطتَ max_tokens على قيمة منخفضة جدًا، فسيُقطع ملف JSON في منتصف المصفوفة، وتكون قيمة stop_reason هي "max_tokens".

والردود المقطوعة أو التي يتخلل فيها نص زائد ستجعل الدالة sample() تفشل أثناء التصيير. لذلك يُستحسن أن يكون لهذا الاستدعاء اختبار عقد (contract test). تستخدم المادة المرجعية أداة Apidog CLI لتجعل جلسة Claude Code نفسها تنشئ الاختبار وتشغّله، مع التحقق من أن رمز الحالة 200، وأن stop_reason ليس "max_tokens"، وأن النص المُعاد يمكن تحليله بوصفه JSON، وأن قيم t في مصفوفة camera تتزايد من 0 إلى 6. ويمكنك تحقيق الهدف نفسه بأداة اختبار API أخرى أو بسكربت تحقق من كتابتك. وأعد تشغيل الاختبار بعد أي تعديل على موجه النظام (system prompt) أو على effort، لأن كليهما يغيّر محتوى الرد.

الأسئلة الشائعة FAQ

النقاط الرئيسية في رسوم Claude Code المتحركة بتأثير المنظور 2.5D

• التصدير جزء من التصميم: اكتب في آخر أسطر الموجه الدالة النقية renderAt(t) وعقد seek صراحةً
• معادلة تعويض العمق: comp = 1 − z/perspective، ويُضرب بها الحجم وإزاحة x/y معًا
• من أين يأتي المنظور: التعويض يصحّح التكوين الساكن فقط، أما أثناء الحركة فتظهر الطبقات بسرعات مختلفة بحسب عمقها
• شاهد اللقطات الثابتة قبل أن تثق باللقطة: صور البداية والمنتصف والنهاية تكشف أخطاء لا تظهر بقراءة الشفرة
• قُد الزمن برقم الإطار: استخدم seek في Playwright مع لقطات الشاشة، ثم رمّزها بـ ffmpeg image2pipe إلى H.264
• اضبط effort على مراحل: استخدم high للبناء الأول، وmedium للتعديلات الدقيقة، وابدأ بـ low مع واجهات JSON المهيكلة
• أضف اختبارات عقد لمخرجات النموذج: لمنع فشل تحليل مفاتيح الإطار بسبب اقتطاع max_tokens

الخلاصة

لبناء استوديو رسوم متحركة بتقنية 2.5D مع تأثير المنظور (البارالاكس) باستخدام Claude Code، هناك ثلاث نقاط أساسية:

1. البنية: ثلاثة مكونات هي مخطط المشهد (scene graph)، والخط الزمني، ومُصيِّر حتمي (deterministic renderer). والمكوّن الثالث هو الذي يحدد جودة الفيديو النهائي.
2. الرياضيات: معامل تعويض المنظور 1 - z/p يؤثر على الحجم والإزاحة معًا، فيأتي التكوين دقيقًا عند السكون، ويظهر تأثير البارالاكس تلقائيًا عند الحركة.
3. خط المعالجة: الانتقال إلى كل إطار بحسب i/fps (seek)، ثم التقاط لقطة الشاشة وتمريرها إلى ffmpeg للترميز، فلا يتأثر الناتج بأداء الجهاز.

أنصحك أن تجرّب أولًا بنية الموجّهات الواردة في هذا المقال حتى تُخرج عينة مدتها 6 ثوانٍ، وأن تعتاد قاعدة «قبل تعديل اللقطة، شاهد ثلاثة إطارات ثابتة». بعد ذلك يمكنك إضافة طبقات جديدة، أو ربط واجهة «وصف اللقطة»، أو نقل الفكرة الحتمية نفسها إلى حلول الفيديو البرمجية الأخرى مثل Remotion.

📚 المراجع

1. How to Build a 2.5D Motion Studio With Opus 5.5: المصدر الذي استندت إليه هذه التجربة
2. الرابط: apidog.com/blog/build-2-5d-motion-studio-opus-5-5

3. الوصف: يتضمن الموجّهات الكاملة، وشفرة الاستوديو، وسكربت التصدير، ومثالًا على واجهة «وصف اللقطة»

4. وثائق نماذج Anthropic ومعامل effort: تحديد موقع النموذج، ونافذة السياق، والتسعير، وشرح معامل effort

5. الرابط: docs.anthropic.com

6. الوصف: للتحقق من معرّف النموذج claude-opus-5-5، ورأس إصدار API، وطريقة استخدام output_config

7. وثائق صيغ ffmpeg: شرح صيغ الإدخال مثل image2pipe

8. الرابط: ffmpeg.org/ffmpeg-formats.html

9. الوصف: لفهم قراءة تسلسل PNG من stdin ومعاملات ترميز H.264

10. وثائق Playwright: أتمتة المتصفح وواجهة التقاط الشاشة

11. الرابط: playwright.dev
12. الوصف: page.evaluate وpage.screenshot وأمر تثبيت المتصفح

مقالات ذات صلة

• Claude ينشئ فيديو من دون نموذج فيديو: دالة زمنية واحدة + تصيير الإطارات تباعًا في 4 خطوات، شرح المبدأ كاملًا دفعة واحدة: تفكيك المبدأ الكامل لإنشاء الفيديو باستخدام Claude: كل إطار دالة خالصة للزمن seek(t)، وتصيير إطارًا بإطار في أربع خطوات عبر متصفح بلا واجهة وffmpeg، مع نوابض ذات صيغة مغلقة ومزامنة الإيقاع لجعل الحركة سلسة، ثم تقديم خطوات عملية من خمس مراحل للبدء.