مولّد PixelFX: مؤثرات فن البكسل للألعاب

مولّد PixelFX: أنشئ ورقة صور متحركة قابلة للاستخدام

اختر أحد المؤثرات الثلاثة ولوحة الألوان والسرعة. أنشئ ورقة شفافة وبيانات الحركة في المتصفح دون حساب أو رصيد. الأداة تعرض شيفرة موجودة؛ للمؤثرات الجديدة عدّل المصدر، وللعبة كاملة انتقل إلى Studio.

اختيار PixelFX حسب دوره في اللعبة

ابدأ بالحدث الذي تريد إيصاله للاعب. قد يخفي مؤثر مبهر عدوًا أو مكافأة. قارن الاستخدامات الثلاثة بخلفيتك وحجم شخصياتك الفعلي.

أربع خطوات لإدخال PixelFX في لعبة

1. 01

   خطط لدورة صغيرة: التحرك في غرفة وجمع خمس بلورات ثم البدء مجددًا بعد الفوز. حدد التحكم بلوحة المفاتيح أو اللمس.

2. 02

   اربط كل مؤثر بحدث: النار للجو العام والوميض للالتقاط والصقيع للقدرة. افصل إشارات الأجواء والنجاح والخطر.

3. 03

   خطط في Studio أو استخدم المثال في مشروعك. قدّم المصادر أو الملفات المصدّرة؛ الرابط وحده لا يثبت أن المساعد استورد المكتبة.

4. 04

   اختبر جولة كاملة والتقاطًا متكررًا وإعادة البدء. افحص الحواف على خلفيات فاتحة وداكنة ونقطة الارتكاز ووضوح الهاتف. احفظ النسخة العاملة قبل التعديل.

استخدام PixelFX في لعبة متصفح

ثبّتها في مشروع JavaScript مع أداة تجميع ESM مثل Vite. ينشئ المثال لوحة Canvas؛ انقر أو المس لتشغيل المؤثر. في اللعبة الحالية، ارسمه على طبقة شفافة وشغّله عند وقوع حدث مؤكد. أبقِ الضرر والتصادم والنقاط ضمن منطق اللعبة.

npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24e

import { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
  fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
  const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
  previous = now;
  clearFrame(frame);
  if (fx) {
    fx.update(dt);
    fx.draw(frame);
    if (fx.done()) fx = undefined;
  }
  composite(frame, pixels.data);
  ctx.putImageData(pixels, 0, 0);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

تصدير أوراق الصور المتحركة من PixelFX

انسخ المستودع وثبّت الأدوات ثم اعرض المؤثر للتصدير. تحصل على أطلس PNG شفاف وملف JSON بأسلوب Aseprite يحوي أزمنة الإطارات ونقطة الارتكاز. استخدم مستوردًا متوافقًا؛ استيراد PNG وحده لا يطبّق هذه البيانات. راجع متطلبات أدوات العرض في الدليل الرسمي.

git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheet

تخصيص PixelFX بالذكاء الاصطناعي

يتضمن المستودع إضافة لـ Claude Code. شغّل هذين الأمرين داخل Claude Code. مع أي مساعد آخر، قدّم ملفات المصدر المختارة والطلب أدناه. لا تثبّت هذه الصفحة الإضافة في Studio ولا تضمن الاستيراد التلقائي من GitHub.

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

أسئلة عن مولّد PixelFX

ترخيص PixelFX ونسب العمل

الشيفرة والمؤثرات بترخيص MIT. احتفظ بإشعارات حقوق النشر والإذن عند إعادة التوزيع، بما فيها الإشعارات المنطبقة لـ Hugo Duprez وHollow Crown. خط Patch Pixel في gallery/fonts مستثنى ولم يُستخدم هنا. تتولى Patch صيانة PixelFX؛ وهذا دليل دمج مستقل.

المصادر الرسمية

• Patch / PixelFX — GitHub ↗
• CATALOG.md ↗
• AUTHORING.md ↗
• MIT LICENSE ↗
• NOTICE.md ↗
• PixelFX / MIT + NOTICE

OpenGame / تم التحقق من المصدر: 5 نوفمبر 2026 · المراجعة a841596