Lua Academy · درس

رسم الأشكال والصور

ضع الرسومات على الشاشة

رسم الأشكال والصور درس مجاني في Lua Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Lua Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Lua Academy 4 دروس في المجموع.

وحدة love.graphics

تتم جميع عمليات الرسم في LÖVE من خلال love.graphics. تستدعي دوالها داخل love.draw، ويعرض المحرك الإطار عند عودة دالة callback.

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

رسم المستطيلات

تأخذ love.graphics.rectangle نمطًا، ثم الموضع والحجم. ويكون النمط إما 'fill' لشكل ممتلئ أو 'line' لمخطط الشكل فقط.

تبدأ الإحداثيات من الزاوية العلوية اليسرى للنافذة، مع زيادة x نحو اليمين وy نحو الأسفل.

function love.draw()
  love.graphics.rectangle('fill', 50, 50, 120, 80)
  love.graphics.rectangle('line', 200, 50, 120, 80)
end

الدوائر والأشكال البيضوية

ترسم love.graphics.circle(mode, x, y, radius) دائرة مركزها عند x وy. وكما في المستطيلات، تقبل إما 'fill' أو 'line'.

لرسم الأشكال البيضوية، استخدم love.graphics.ellipse مع نصفي قطر أفقي ورأسي منفصلين. ويمكنك تمرير وسيط segments إضافي للتحكم في النعومة.

function love.draw()
  love.graphics.circle('fill', 150, 150, 40)
  love.graphics.ellipse('line', 300, 150, 60, 30)
end

ضبط الألوان

تضبط love.graphics.setColor اللون المستخدم لكل ما يُرسم بعدها. وفي إصدارات LÖVE الحديثة، تتراوح مكونات اللون من 0 إلى 1، لذا يكون الأبيض هو 1, 1, 1.

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

function love.draw()
  love.graphics.setColor(1, 0, 0)   -- red
  love.graphics.rectangle('fill', 20, 20, 60, 60)
  love.graphics.setColor(1, 1, 1)   -- back to white
end

الخطوط والنقاط

تصل love.graphics.line سلسلة من نقاط x وy. وتتحكم love.graphics.setLineWidth في سماكة الخطوط والأشكال ذات المخططات.

يمكنك تمرير نقاط كثيرة دفعة واحدة لرسم مسار متصل، وهو أمر مفيد للآثار والمسارات أو الرسومات المتجهية البسيطة.

function love.draw()
  love.graphics.setLineWidth(3)
  love.graphics.line(10, 10, 80, 60, 150, 20)
end

تحميل صورة

حمّل الصور مرة واحدة داخل love.load باستخدام love.graphics.newImage. ويعيد ذلك كائن Image تخزنه في متغير لإعادة استخدامه.

لا تحمّل الصور داخل love.draw مطلقًا، لأن ذلك سيعيد قراءة الملف في كل إطار ويدمر الأداء.

function love.load()
  sprite = love.graphics.newImage('player.png')
end

رسم صورة

ترسم love.graphics.draw(image, x, y) صورةً في الموضع المحدد. وبشكل افتراضي، تقع الزاوية العلوية اليسرى للصورة عند x وy.

تضيف الوسائط الإضافية الدوران والتحجيم وإزاحة نقطة الأصل، مما يمنحك تحكمًا كاملًا في مظهر كل sprite.

function love.draw()
  love.graphics.draw(sprite, player.x, player.y)
end

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

التوقيع الكامل هو draw(image, x, y, r, sx, sy, ox, oy). تمثل r الدوران بوحدة الراديان، بينما يمثل sx وsy عاملي التحجيم.

تحدد إزاحة الأصل ox, oy محور الدوران. وللدوران حول مركز الصورة، اضبط الأصل على نصف عرض الصورة وارتفاعها.

local w, h = sprite:getWidth(), sprite:getHeight()
love.graphics.draw(sprite, x, y, angle, 1, 1, w/2, h/2)

رسم النص

ترسم love.graphics.print(text, x, y) سلسلة نصية باستخدام الخط الحالي. وتغيّر love.graphics.setFont الخط النشط.

أنشئ خطوطًا مخصصة باستخدام love.graphics.newFont('font.ttf', 24) داخل love.load. وتذكّر أن اللون يضفي صبغته على النص أيضًا، تمامًا كما يحدث مع الأشكال.

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.print('Score: ' .. score, 10, 10)
end

مسح الشاشة والخلفية

يمسح LÖVE الشاشة تلقائيًا في كل إطار، ولكن يمكنك ضبط لون المسح باستخدام love.graphics.setBackgroundColor داخل love.load.

للتحكم اليدوي أثناء الرسم المخصص، تملأ love.graphics.clear ذاكرة التخزين المؤقت بلون محدد. تكتفي معظم الألعاب بضبط الخلفية مرة واحدة وتترك للمحرك مهمة المسح.

function love.load()
  love.graphics.setBackgroundColor(0.1, 0.1, 0.2)
end

كائنات Quad لصفائح الصور

يحدد كائن Quad منطقة مستطيلة من صورة، مما يتيح لصفحة صور واحدة احتواء إطارات متعددة. أنشئه باستخدام love.graphics.newQuad.

مرر كائن Quad إلى love.graphics.draw(image, quad, x, y) لرسم تلك المنطقة وحدها. وهذا هو الأساس لتحريك الكائنات باستخدام صفائح الصور.

local sheet = love.graphics.newImage('sheet.png')
local frame = love.graphics.newQuad(0, 0, 32, 32, sheet:getDimensions())
-- love.graphics.draw(sheet, frame, x, y)

اختبار سريع

اختبر معلوماتك عن الرسم في LÖVE.

مراجعة

ترسم باستخدام love.graphics داخل love.draw؛ مثل المستطيلات والدوائر والخطوط والصور والنصوص. وتؤثر setColor في الرسومات اللاحقة، كما أنها تحتفظ بحالتها.

حمّل الصور مرة واحدة داخل love.load باستخدام newImage، ثم ارسمها باستخدام draw، مع إضافة الدوران والتحجيم وكائنات Quad إلى صفائح الصور.

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

هل درس «رسم الأشكال والصور» مجاني؟

نعم — نص درس «رسم الأشكال والصور» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Lua Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Lua Academy 4 دروس في المجموع.

ماذا ستتعلم في «رسم الأشكال والصور»؟

ضع الرسومات على الشاشة تتمرن على Lua Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Lua Academy؟

لا تُشترط خبرة سابقة. Lua Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «رسم الأشكال والصور»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Lua Academy هذا؟

نعم. كل درس في Lua Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Lua Academy