القائمة الرئيسية

الصفحات

كيفية برمجة لعبة Pinball للويب باستخدام Unity

How to Code Pinball Web Game in Unity، Build Settings, WebGL, Player Settings, Publishing, Optimization، AudioSource, AudioClip, Particle System, Visual Effects, Animations، Score System, Triggers, Collisions, Tags, UI Text, OnTriggerEnter, OnCollisionEnter، Scripting, C#, Input, Hinge Joint, Keyboard Input, Rotation, MonoBehaviour، Physics, Rigidbody, Collider, Box Collider, Sphere Collider, Mesh Collider, Physics Material, Friction, Bounciness، إعداد مشروع Unity، تصميم طاولة Pinball ثلاثية الأبعاد، بيئة تطوير الألعاب، بناء المشهد، GameObjects، ProBuilder، تصميم الأصول، المواد في Unity، تصميم اللوحة ثلاثية الأبعاد، Unity, Game Development, 3D Modeling, ProBuilder, GameObjects, Scene, Hierarchy, Inspector, Materials، تطوير الألعاب الرقمية، برمجة الألعاب للويب، محرك Unity، فيزياء Unity، برمجة C#، النشر عبر WebGL، ألعاب الآركيد، بناء Pinball، ألعاب ثلاثية الأبعاد، دليل برمجة الألعاب، تطوير ألعاب الويب، Pinball Unity، WebGL Game Development، فيزياء الألعاب ثلاثية الأبعاد، نشر ألعاب المتصفح، تصميم الألعاب التفاعلية، برمجة الألعاب للمبتدئين، تحسين تجربة المستخدم (UX)، مؤثرات بصرية وصوتية للألعاب، برمجة لعبة على يونيتي ، Web Games، برمجة لعبة pinball web على يونيتي، كيفية برمجة لعبة Pinball للويب باستخدام Unity، Pinball ثلاثية الأبعاد، تطوير الألعاب الرقمية، برمجة الألعاب للويب، محرك Unity، WebGL Game Development،
 




كيفية برمجة لعبة Pinball للويب باستخدام Unity


بناء لعبة Pinball هي طريقة ممتازة للتعرف على محرك Unity وقدراته 
في الفيزياء ثلاثية الأبعاد، خاصة عند استهداف منصة الويب.
في عالم تطوير الألعاب الرقمية، تظل ألعاب الآركيد الكلاسيكية مصدر إلهام لا ينضب، وتبرز 
لعبة Pinball (كرة ودبابيس) بفيزيائها المميزة وتفاعلاتها الممتعة. إذا كنت تطمح 
لدخول مجال برمجة الألعاب للويب وتتساءل عن نقطة انطلاق قوية تجمع بين التحدي
 والإبداع، فإن بناء لعبة Pinball باستخدام محرك Unity يمثل فرصة ذهبية. سيأخذك 
هذا الدليل الشامل في رحلة خطوة بخطوة، من تصميم عالمك الافتراضي ثلاثي الأبعاد
 وصولاً إلى إطلاق لعبتك مباشرة في متصفحات الويب، مستعرضين كل جزء رئيسي
 من العملية بأكواد برمجية ، استعد لإتقان فيزياء Unity، 
برمجة #C، والنشر عبر WebGL لتقدم تجربتك الخاصة للاعبين حول العالم.

خطوات بناء لعبة Pinball للويب على Unity


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

1. إعداد المشروع وتصميم طاولة البينبول (The Board)

* الخطوات:
* إنشاء مشروع Unity جديد:
افتح Unity Hub، انقر على "New Project"،
اختر قالب "3D Core"، امنح المشروع اسمًا (مثلاً: "PinballGame")
 وموقعًا، ثم انقر على "Create Project".

* تصميم طاولة البينبول الأساسية:
يمكنك استخدام أدوات Unity المدمجة أو استيراد نماذج ثلاثية الأبعاد.
* باستخدام ProBuilder (موصى به للمبتدئين):
- اذهب إلى Window > Package Manager.
- تأكد من أن Packages: Unity Registry محددة.
- ابحث عن ProBuilder وقم بتثبيته.
- بعد التثبيت، اذهب إلى Tools > ProBuilder > ProBuilder Window لفتح النافذة.
- استخدم أدوات ProBuilder (New Shape) لإنشاء الأشكال
 الأساسية للطاولة (سطح مستوٍ، جوانب، حواجز).

* إنشاء GameObjects بسيطة:
انقر بزر الماوس الأيمن في نافذة Hierarchy > 3D Object > Cube أو Plane.
غير مقياسها (Scale) وموضعها (Position) لتشكيل طاولة البينبول والجدران الجانبية.

* إضافة مادة (Material) للطاولة:
- في نافذة Project، انقر بزر الماوس الأيمن > Create > Material.
- اختر لونًا أو قم بإضافة نسيج (Texture) إلى المادة.
- اسحب المادة وأفلتها على الأجسام في Scene View أو في Inspector.

2. إضافة مكونات الفيزياء (Rigidbody و Collider) للكرة والأجزاء التفاعلية

الخطوات:
* إنشاء الكرة (Pinball):
- انقر بزر الماوس الأيمن في Hierarchy > 3D Object > Sphere.
- أعد تسميتها إلى "Pinball".

* إضافة Rigidbody:
مع تحديد "Pinball"، في Inspector، انقر على Add Component، 
وابحث عن Rigidbody وأضفه. هذا سيجعل الكرة تخضع لقوانين الفيزياء (الجاذبية، الاصطدامات).
يمكنك تعديل Mass (الكتلة) وDrag (مقاومة الهواء) وغيرها.

* إضافة Collider:
سيقوم Unity تلقائيًا بإضافة Sphere Collider للكرة، وهو مثالي لشكلها.
 تأكد من أن Is Trigger غير مفعل (ليكون تصادماً فيزيائياً).

* إضافة Colliders لطاولة البينبول وأجزائها:
لكل جزء من طاولة البينبول (السطح، الجدران، الحواجز، المصدات الثابتة)، 
تأكد من وجود مكون Collider عليها.
بالنسبة للأجسام المكعبة أو المسطحة، Box Collider هو الأنسب.
للمصدات المستديرة، Sphere Collider أو Capsule Collider أو
 Mesh Collider (إذا كان الشكل معقدًا) يمكن استخدامها.
* ملاحظة هامة: إذا كنت تستخدم ProBuilder، فستقوم الأشكال التي تنشئها تلقائيًا بإنشاء colliders.

* إنشاء Physics Material (لتحكم في الارتداد والاحتكاك):
في نافذة Project، انقر بزر الماوس الأيمن > Create > Physics Material.
امنحها اسمًا (مثلاً: "BouncyMaterial").
* في Inspector للمادة الفيزيائية:
- Bounciness: اضبطها على قيمة عالية (مثلاً 0.8 - 1) لجعل الكرة ترتد بقوة.
- Friction: اضبطها على قيمة منخفضة جداً (0 - 0.1) لجعل الكرة تتدحرج بسلاسة.
- اسحب هذه المادة الفيزيائية وأفلتها في حقل Material داخل مكون Collider
 للكرة وللأسطح التي تريد أن ترتد عليها بقوة.

3. برمجة حركة الزعانف (Flippers) والتحكم فيها
الخطوات:
* إنشاء الزعانف (Flippers):
- استخدم ProBuilder أو GameObjects بسيطة لإنشاء شكل الزعانف 
(عادةً ما تكون أسطوانية أو مكعبة).
- أضف Rigidbody لكل زعنفة.
- أضف Box Collider أو Mesh Collider مناسب لشكلها.

* إضافة Hinge Joint:
لكل زعنفة، في Inspector، انقر على Add Component، وابحث عن Hinge Joint وأضفه.
- Connected Body: اتركه فارغًا.
- Anchor: اضبط هذا على نقطة المحور الذي ستدور حوله الزعنفة (عادةً طرفها الخلفي).
- Axis: اضبط المحور الذي ستدور حوله (مثلاً، Z إذا كانت تدور في مستوى XY).
- تفعيل Use Limits وتعيين Min وMax لزوايا الدوران المسموحة.
- تفعيل Use Motor.

* كود التحكم في الزعانف (Flipper.cs):
في نافذة Project، انقر بزر الماوس الأيمن > Create > C# Script.
سمِّ السكريبت "Flipper".
اسحب السكريبت وأفلتها على كل من الزعنفتين في نافذة Hierarchy.
افتح السكريبت وقم بتعديله :
C#




using UnityEngine;

public class Flipper : MonoBehaviour
{
    public float restPosition = 0f; // الزاوية عندما تكون الزعنفة في وضع الراحة
    public float pressedPosition = 45f; // الزاوية عندما تكون الزعنفة مضغوطة
    public float hitStrength = 10000f; // قوة "الدفعة" التي تعطيها للكرة
    public float flipperDamper = 150f; // مقاومة حركة الزعنفة

    HingeJoint hinge; // مكون HingeJoint للزعنفة
    public string inputButtonName; // اسم زر الإدخال للتحكم بهذه الزعنفة (مثلاً "LeftFlipper" أو "RightFlipper")

    void Awake()
    {
        hinge = GetComponent<HingeJoint>(); // الحصول على مكون HingeJoint
        hinge.useSpring = true; // تفعيل الزنبرك
    }

    void Update()
    {
        // تهيئة خصائص الزنبرك (Spring)
        JointSpring spring = new JointSpring();
        spring.spring = hitStrength; // قوة الزنبرك
        spring.damper = flipperDamper; // مثبط الحركة (لجعلها تتوقف بسلاسة)

        // التحقق من ضغط زر الإدخال
        if (Input.GetKey(inputButtonName))
        {
            spring.targetPosition = pressedPosition; // تحريك الزعنفة للوضع المضغوط
        }
        else
        {
            spring.targetPosition = restPosition; // إعادة الزعنفة لوضع الراحة
        }

        hinge.spring = spring; // تطبيق خصائص الزنبرك على HingeJoint
        hinge.motor.force = hitStrength; // لضمان حركة قوية للزعنفة
    }
}


--

* تخصيص السكريبت في Inspector:
لكل زعنفة في Hierarchy، حددها.
في Inspector، سترى السكريبت "Flipper".
- بالنسبة للزعنفة اليسرى: اضبط Input Button Name على "LeftFlipper".




 اضبط Rest Position و Pressed Position (قد تحتاج إلى التجريب
 للعثور على القيم الصحيحة بناءً على اتجاه الدوران).
- بالنسبة للزعنفة اليمنى: اضبط Input Button Name على "RightFlipper".
 اضبط Rest Position و Pressed Position
 (لاحظ أن الزاوية قد تكون سالبة إذا كانت تدور في الاتجاه المعاكس).

* إعداد أزرار الإدخال:
اذهب إلى Edit > Project Settings > Input Manager.
وسع Axes.
ستجد "Fire1"، "Fire2"، إلخ. يمكنك استخدامها أو إنشاء محاور جديدة.

* لإنشاء زر جديد (مثلاً "LeftFlipper"):
غيّر Size (في Axes) إلى رقم أكبر لإنشاء محور جديد.
سمِّ الزر الجديد Name (مثلاً "LeftFlipper").
- Positive Button: اضبطه على المفتاح الذي تريد استخدامه (مثلاً Left Shift أو Left Control).
كرر العملية للزر الأيمن (مثلاً "RightFlipper" على Right Shift أو Right Control).

4. برمجة نظام تسجيل النقاط والتفاعلات مع المصدات والأهداف
الخطوات:
* إنشاء المصدات والأهداف (Score Targets):
- استخدم GameObjects (مثل كرات صغيرة، مكعبات، أو نماذج مخصصة) كأهداف تسجل نقاطاً.
- أضف Collider لكل هدف.
* مهم جداً: اجعل Is Trigger مفعلاً في Collider إذا أردت اكتشاف مرور الكرة 
دون تصادم فيزيائي. إذا أردت تصادماً فيزيائياً يسجل نقاطاً، فاتركه غير مفعل.
- أضف Rigidbody للأهداف المتحركة أو لتلك التي سترتد بشكل فيزيائي.

* إنشاء عداد النقاط (UI Text):

انقر بزر الماوس الأيمن في Hierarchy > UI > Text - TextMeshPro.
إذا طلب Unity استيراد TMP Essentials، فوافق.
أعد تسميته إلى "ScoreText".
يمكنك تغيير موقعه، حجمه، ولونه في Inspector ليكون مرئياً في واجهة اللعبة.

* سكريبت إدارة النقاط (GameManager.cs):
- انقر بزر الماوس الأيمن في Project > Create > C# Script.
- سمِّ السكريبت "GameManager".
- أنشئ Empty GameObject في Hierarchy (انقر بزر الماوس الأيمن > Create Empty) وسمِّه "GameManager".
- اسحب السكريبت "GameManager" وأفلتها على الـ GameObject الذي أنشأته. 
هذا السكريبت سيكون مسؤولاً عن إدارة النقاط العامة.

* افتح السكريبت وقم بتعديله:
C#




using UnityEngine;
using TMPro; // يجب إضافة هذه المكتبة لـ TextMeshPro

public class GameManager : MonoBehaviour
{
    public static GameManager Instance; // نمط Singleton للوصول السهل من أي مكان

    public int score = 0; // متغير لتخزين النقاط
    public TextMeshProUGUI scoreText; // ربط عنصر واجهة المستخدم لعرض النقاط

    void Awake()
    {
        if (Instance == null)
        {
            Instance = this; // تعيين هذا الكائن كـ Instance الوحيد
        }
        else
        {
            Destroy(gameObject); // تدمير أي كائن GameManager إضافي
        }
    }

    void Start()
    {
        UpdateScoreText(); // تحديث النص عند بدء اللعبة
    }

    public void AddScore(int points)
    {
        score += points; // إضافة النقاط
        UpdateScoreText(); // تحديث النص
    }

    void UpdateScoreText()
    {
        if (scoreText != null)
        {
            scoreText.text = "Score: " + score.ToString(); // عرض النقاط
        }
    }
}


--

* ربط ScoreText بالـ GameManager:
- حدد الـ GameObject المسمى "GameManager" في Hierarchy.
- في Inspector، اسحب ScoreText من Hierarchy وأفلته في حقل
 Score Text في سكريبت GameManager.

* سكريبت الأهداف (ScoreTarget.cs):

انقر بزر الماوس الأيمن في Project > Create > C# Script.
سمِّ السكريبت "ScoreTarget".
اسحب السكريبت وأفلتها على كل هدف من الأهداف التي تريد أن تسجل نقاطاً.

* افتح السكريبت وقم بتعديله:
C#




using UnityEngine;

public class ScoreTarget : MonoBehaviour
{
    public int scoreValue = 100; // عدد النقاط التي يضيفها هذا الهدف
    public AudioClip hitSound; // الصوت الذي يتم تشغيله عند الاصطدام

    void OnCollisionEnter(Collision collision) // للاصطدامات الفيزيائية (إذا كان Is Trigger غير مفعل)
    {
        if (collision.gameObject.CompareTag("Pinball")) // تأكد أن الكرة هي من اصطدمت
        {
            GameManager.Instance.AddScore(scoreValue); // إضافة النقاط عبر GameManager
            PlaySound(); // تشغيل الصوت
            // يمكنك هنا إضافة تأثيرات بصرية مثل وميض الهدف أو تدميره مؤقتاً
        }
    }

    void OnTriggerEnter(Collider other) // للاصطدامات كـ Trigger (إذا كان Is Trigger مفعل)
    {
        if (other.CompareTag("Pinball")) // تأكد أن الكرة هي من دخلت الـ Trigger
        {
            GameManager.Instance.AddScore(scoreValue); // إضافة النقاط عبر GameManager
            PlaySound(); // تشغيل الصوت
            // يمكنك هنا إضافة تأثيرات بصرية
        }
    }

    void PlaySound()
    {
        if (hitSound != null)
        {
            AudioSource.PlayClipAtPoint(hitSound, transform.position); // تشغيل الصوت مرة واحدة في موقع الهدف
        }
    }
}


--

* تعيين Tag للكرة:
- حدد الكرة "Pinball" في Hierarchy.
- في Inspector، في الجزء العلوي، انقر على Tag > Add Tag....
- انقر على + وأضف Tag جديد باسم "Pinball".
- ارجع إلى الكرة "Pinball" وحدد Tag "Pinball" لها.

* ربط المؤثرات الصوتية للأهداف:
لكل هدف، في Inspector، اسحب ملف الصوت (AudioClip) الذي تريده إلى
 حقل Hit Sound في سكريبت ScoreTarget.




5. إضافة المؤثرات الصوتية والبصرية
الخطوات:
* المؤثرات الصوتية (Sound Effects) :
- أصوات الاصطدام: يمكنك إضافة AudioSource مباشرة على الأجسام التي
 تصدر صوتاً (مثل المصدات)، أو استخدام
 AudioSource.PlayClipAtPoint() كما في مثال ScoreTarget.cs.
- لإضافة AudioSource على جسم:
 حدد الجسم > Add Component > Audio Source. 
اسحب AudioClip إلى حقل AudioClip. تأكد من إلغاء تفعيل Play On Awake
 إذا كنت تريد تشغيله بواسطة كود.
- موسيقى الخلفية: أنشئ Empty GameObject جديد، أضف له AudioSource،
 اسحب إليه ملف موسيقى الخلفية، وفعل Loop وPlay On Awake.

* المؤثرات البصرية (Visual Effects):

نظام الجسيمات (Particle System): لإنشاء تأثيرات انفجار صغيرة عند الاصطدام أو وميض.
انقر بزر الماوس الأيمن في Hierarchy > Effects > Particle System.
قم بتخصيص خصائصه في Inspector (الشكل، اللون، الحجم، المدة).
يمكنك تفعيل Play On Awake أو تشغيله برمجياً عند الاصطدام:
C#

// في سكريبت ScoreTarget.cs أو أي سكريبت آخر
public ParticleSystem hitEffect; // اسحب نظام الجسيمات هنا في Inspector

void OnCollisionEnter(Collision collision)
{
    if (collision.gameObject.CompareTag("Pinball"))
    {
        if (hitEffect != null)
        {
            hitEffect.Play(); // تشغيل تأثير الجسيمات
        }
    }
}
--

* تغيير الألوان/الوميض: يمكنك تغيير لون المادة (Material) للجسم
 مؤقتاً عند الاصطدام لإنشاء تأثير وميض.
C#




// في سكريبت ScoreTarget.cs أو أي سكريبت آخر
private Renderer targetRenderer; // لجلب مكون Renderer للجسم
private Color originalColor;
public Color hitColor = Color.yellow; // اللون عند الاصطدام
public float flashDuration = 0.1f; // مدة الوميض

void Awake()
{
    targetRenderer = GetComponent<Renderer>();
    originalColor = targetRenderer.material.color;
}

void OnCollisionEnter(Collision collision)
{
    if (collision.gameObject.CompareTag("Pinball"))
    {
        // بدء روتين الوميض
        StartCoroutine(FlashEffect());
    }
}

System.Collections.IEnumerator FlashEffect()
{
    targetRenderer.material.color = hitColor; // تغيير اللون إلى لون الوميض
    yield return new WaitForSeconds(flashDuration); // الانتظار لمدة معينة
    targetRenderer.material.color = originalColor; // إعادة اللون الأصلي
}


--

6. نشر اللعبة إلى WebGL
الخطوات:
* إعدادات البناء (Build Settings) :

اذهب إلى File > Build Settings....
في قائمة المنصات، اختر WebGL.
انقر على Switch Platform (قد يستغرق بعض الوقت).

* إعدادات اللاعب (Player Settings):
مع تحديد WebGL في Build Settings، انقر على Player Settings....
* Resolution and Presentation:
- Canvas Template: اختر Default أو Minimal.
- Resolution: اضبط أبعاد الشاشة (مثلاً 960x600).
- يمكنك التحكم في Fullscreen Mode وغيرها.
* Publishing Settings:
Compression Format: اختر Brotli أو Gzip للضغط الأمثل
 (يجعل حجم اللعبة أصغر وأسرع في التحميل). Disabled جيد للاختبار السريع.
- Enable Exceptions: None هو الأفضل للإنتاج لتقليل الحجم والأداء.
* Optimization :
تأكد من تفعيل Strip Engine Code (لتقليل حجم البناء بإزالة الأكواد غير المستخدمة).
تعديل Stack Trace إلى None في Release لتقليل الحجم.

* بناء المشروع (Build the Project):
- ارجع إلى Build Settings، انقر على Build.
- اختر مجلدًا لحفظ البناء (مثلاً: مجلد جديد باسم "WebGL_Build").
- سيبدأ Unity في عملية البناء. قد يستغرق هذا بعض الوقت اعتماداً على حجم مشروعك.

* تشغيل اللعبة على الويب:
بعد اكتمال البناء، ستجد مجلدًا يحتوي على ملفات البناء (index.html، Build، TemplateData).
يمكنك فتح ملف index.html في متصفحك مباشرة للاختبار المحلي.
لجعلها متاحة للآخرين، ستحتاج إلى رفع محتويات هذا المجلد إلى خادم ويب 
(مثل GitHub Pages، Netlify، أو أي استضافة ويب).

الخاتمة
لقد استعرضنا معًا الخطوات الأساسية لبناء لعبة Pinball تفاعلية وممتعة
 باستخدام محرك Unity ونشرها على الويب. من تصميم طاولة اللعب
 ثلاثية الأبعاد ودمج الفيزياء الواقعية للكرة والزعانف، وصولًا إلى برمجة نظام تسجيل 
النقاط وإضافة المؤثرات الصوتية والبصرية الجذابة، وأخيرًا عملية النشر عبر WebGL.
تذكر أن هذه مجرد بداية، فمحرك Unity يوفر إمكانيات لا حدود لها. يمكنك الآن الغوص 
أعمق في تحسين تجربة المستخدم (UX)، إضافة مؤثرات بصرية متقدمة، تطوير 
قوائم لعب متكاملة، وحتى دمج نظام إطلاق كرة مبتكر. كل خطوة تضيفها تساهم
 في صقل مهاراتك كمطور ألعاب. مع استمرار الممارسة واستكشاف ميزات Unity
 المتعددة، ستتمكن من تحويل أفكارك إلى تجارب لعب مذهلة ومتاحة للجميع عبر المتصفح.
 ابدأ الآن رحلتك في تطوير ألعاب الويب واستكشف آفاق الإبداع!


جدول المحتويات