com.pixice
8.5.2
يهدف هذا المشروع إلى توفير مكتبة ثنائية الأبعاد سريعة وخفيفة الوزن تعمل عبر جميع الأجهزة. يتيح عارض PixiJS للجميع الاستمتاع بقوة تسريع الأجهزة دون معرفة مسبقة بـ WebGL. كما أنه سريع. سريع حقا.
إذا كنت ترغب في مواكبة آخر أخبار PixiJS، فلا تتردد في متابعتنا على TwitterPixiJS وسنبقيك على اطلاع! يمكنك أيضًا التحقق مرة أخرى من موقعنا حيث سيتم نشر أي اختراقات هناك أيضًا!
نحن الآن جزء من Open Collective وبدعمكم يمكنك مساعدتنا في تحسين PixiJS. للتبرع، ما عليك سوى النقر على الزر أدناه وسنحبك إلى الأبد!
PixiJS هي مكتبة عرض تتيح لك إنشاء رسومات غنية وتفاعلية وتطبيقات وألعاب عبر الأنظمة الأساسية دون الحاجة إلى التعمق في WebGL API أو التعامل مع توافق المتصفح والجهاز.
يدعم PixiJS WebGPU مع دعم احتياطي لـ WebGL. باعتبارها مكتبة، تعد PixiJS أداة رائعة لتأليف المحتوى التفاعلي. استخدمه لمواقع الويب والتطبيقات وألعاب HTML5 الغنية بالرسومات والتفاعلية. خارج الصندوق، والتوافق عبر الأنظمة الأساسية والتدهور اللطيف يعني أن لديك عملًا أقل للقيام به وأكثر متعة في القيام بذلك! إذا كنت ترغب في إنشاء تجارب مصقولة ومنقحة بسرعة نسبية دون الخوض في تعليمات برمجية كثيفة ومنخفضة المستوى، كل ذلك مع تجنب متاعب عدم تناسق المتصفح، فقم برش مشروعك التالي ببعض سحر PixiJS!
عزز تطورك ولا تتردد في استخدام خيالك!
عارض WebGL (مع التجميع الذكي التلقائي، مما يسمح بأداء سريع حقًا)
عارض WebGPU (جديد لأحدث المتصفحات!)
عارض القماش (الأسرع في المدينة!)
الرسم البياني للمشهد الكامل
واجهة برمجة التطبيقات (API) سهلة الاستخدام للغاية (على غرار واجهة برمجة تطبيقات قائمة عرض الفلاش)
دعم أطالس الملمس
محمل الأصول/محمل ورقة العفريت
الكشف التلقائي عن العارض الذي يجب استخدامه
الماوس الكامل والتفاعل متعدد اللمس
نص
نص BitmapFont
نص متعدد الأسطر
تقديم الملمس
الرسم البدائي
اخفاء
المرشحات
المكونات الإضافية المدعومة من المجتمع
رد فعل
العمود الفقري
المرشحات
تحريك
أضواء
واجهة المستخدم
تَخطِيط
GIF
وأكثر!
من السهل البدء مع PixiJS! ما عليك سوى تنزيل نسخة تم إنشاؤها مسبقًا!
وبدلاً من ذلك، يمكن تثبيت PixiJS باستخدام npm أو ببساطة باستخدام عنوان URL لشبكة توصيل المحتوى (CDN) لتضمين PixiJS مباشرةً على صفحة HTML الخاصة بك.
npm تثبيت pixi.js
لا يوجد تصدير افتراضي. الطريقة الصحيحة لاستيراد PixiJS هي:
استيراد * كـ PIXI من 'pixi.js'؛
عبر jsDelivr:
أو عبر unpkg:
import { Application, Sprite, Assets } from 'pixi.js';// سيقوم التطبيق بإنشاء عارض باستخدام WebGL، إن أمكن،// مع الرجوع إلى عرض اللوحة القماشية. سيقوم أيضًا بإعداد المؤشر // والمرحلة الجذرية PIXI.Containerconst app = new Application();// انتظر حتى يصبح العارض متاحًا، انتظر app.init();// سيقوم التطبيق بإنشاء عنصر قماش لك // يمكن بعد ذلك إدراجه في DOMdocument.body.appendChild(app.canvas);// تحميل النسيج الذي نحتاجهconsttext = انتظار Assets.load('bunny.png');// يؤدي هذا إلى إنشاء نسيج من 'bunny'. png' imageconst Bunny = new Sprite(texture);// إعداد موضع الأرنب.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// التدوير حول centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// أضف الأرنب إلى المشهد الذي نبني فيهapp.stage.addChild(bunny);// استمع لتحديثات الإطارapp.ticker.add(() => { // في كل إطار نقوم بتدوير الأرنب حول الأرنب قليلاً.rotation += 0.01;});موقع الويب: اكتشف المزيد حول PixiJS على الموقع الرسمي.
ابدء:
تحقق من دليل البدء.
اطلع أيضًا على دروس PixiJS الخاصة بـ @miltoncandelero والتي تستهدف ألعاب الفيديو مع الوصفات وأفضل الممارسات هنا
أمثلة: انغمس في اللعب باستخدام كود PixiJS وميزاته هنا!
وثائق واجهة برمجة التطبيقات: تعرف على واجهة برمجة تطبيقات PixiJS عن طريق التحقق من المستندات.
الدليل: أدلة الاستخدام التكميلية لوثائق API هنا.
مرشحات التجريبي
الأرنب التجريبي
اخفاء التجريبي
التفاعل التجريبي
المزيد من الأمثلة
المنتديات: اطلع على المناقشات وStackoverflow - وكلاهما من الأماكن الملائمة لطرح أسئلتك على PixiJS.
الدردشة: يمكنك الانضمام إلينا على Discord للدردشة حول PixiJS.
لاحظ أنه بالنسبة لمعظم المستخدمين لا تحتاج إلى إنشاء هذا المشروع. إذا كان كل ما تريده هو استخدام PixiJS، فما عليك سوى تنزيل أحد إصداراتنا المعدة مسبقًا. المرة الوحيدة التي يجب أن تحتاج فيها إلى إنشاء PixiJS هي إذا كنت تقوم بتطويره.
إذا لم يكن لديك Node.js وNPM بالفعل، فانتقل إلى تثبيتهما. بعد ذلك، في المجلد الذي قمت باستنساخ المستودع فيه، قم بتثبيت تبعيات البناء باستخدام npm:
تثبيت npm
ثم، لبناء المصدر، قم بتشغيل:
بناء تشغيل npm
يمكن إنشاء المستندات باستخدام npm:
تشغيل مستندات npm
هل تريد أن تكون جزءًا من مشروع PixiJS؟ عظيم! الجميع موضع ترحيب! سنصل إلى هناك بشكل أسرع معًا :) سواء عثرت على خطأ ما، أو كان لديك طلب ميزة رائع، أو كنت ترغب في امتلاك مهمة من خريطة الطريق أعلاه، فلا تتردد في الاتصال بنا.
تأكد من قراءة دليل المساهمة قبل إرسال التغييرات.
تم إصدار هذا المحتوى بموجب ترخيص MIT.
