Lua Academy · บทเรียน

ลูปเกมของ LOVE

load, update และ draw

ลูปเกมของ LOVE เป็นบทเรียน Lua Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Lua Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Lua Academy มีบทเรียนทั้งหมด 4 บทเรียน

LÖVE คืออะไร

LÖVE หรือ love2d คือเฟรมเวิร์กฟรีที่ช่วยให้คุณสร้างเกม 2 มิติด้วย Lua ล้วน คุณเขียนฟังก์ชันเรียกกลับ แล้วเอนจินจะเป็นผู้เรียกใช้ฟังก์ชันเหล่านั้นให้

เกม LÖVE จะอยู่ในโฟลเดอร์ที่มีไฟล์ main.lua คุณเรียกใช้เกมด้วย love . จากโฟลเดอร์นั้น แล้วเอนจินจะเปิดหน้าต่างและเริ่มลูป

ฟังก์ชันเรียกกลับหลักสามรายการ

LÖVE ควบคุมเกมของคุณผ่านฟังก์ชันเรียกกลับสามรายการที่คุณกำหนดใน main.lua ได้แก่ love.load love.update และ love.draw

คุณไม่ต้องเรียกใช้ฟังก์ชันเหล่านี้เอง เอนจินจะเรียก love.load หนึ่งครั้ง จากนั้นเรียก love.update และ love.draw ซ้ำทุกเฟรมตราบเท่าที่เกมยังทำงาน

function love.load() end
function love.update(dt) end
function love.draw() end

love.load: การตั้งค่าครั้งเดียว

love.load ทำงานเพียงครั้งเดียวเมื่อเกมเริ่มต้น ใช้ฟังก์ชันนี้เตรียมสถานะ เช่น โหลดรูปภาพและแบบอักษร สร้างตาราง และกำหนดค่าเริ่มต้นให้ตัวแปรก่อนเริ่มลูป

งานที่ใช้ทรัพยากรมากควรทำที่นี่ ไม่ใช่ใน love.update หรือ love.draw เพื่อไม่ให้งานนั้นทำซ้ำทุกเฟรม

function love.load()
  player = { x = 100, y = 100, speed = 200 }
  score = 0
end

love.update: ตรรกะของเกม

love.update(dt) ทำงานหนึ่งครั้งต่อเฟรมและเก็บตรรกะของเกมไว้ที่นี่ เช่น การเคลื่อนที่ของอ็อบเจ็กต์ การตรวจสอบการชน การอัปเดตตัวจับเวลา และการอ่านสถานะอินพุต

อาร์กิวเมนต์ dt คือเวลาที่เปลี่ยนไป หรือจำนวนวินาทีที่ผ่านไปนับจากเฟรมก่อนหน้า คุณไม่ควรวาดภาพภายใน update ให้แยกการวาดภาพไปไว้ใน love.draw

function love.update(dt)
  player.x = player.x + player.speed * dt
end

เหตุผลที่ dt สำคัญ

อัตราเฟรมแตกต่างกันไปในแต่ละเครื่อง หากคุณเคลื่อนที่ด้วยจำนวนคงที่ในทุกเฟรม คอมพิวเตอร์ที่เร็วจะทำให้อ็อบเจ็กต์เคลื่อนที่เร็วกว่าคอมพิวเตอร์ที่ช้า

การคูณด้วย dt ทำให้การเคลื่อนที่ไม่ขึ้นกับอัตราเฟรม speed * dt หมายถึง "หน่วยความเร็วต่อวินาที" ดังนั้นอ็อบเจ็กต์จะเดินทางเป็นระยะทางเท่าเดิมไม่ว่าจะมีการแสดงผลกี่เฟรม

-- 200 pixels per second, on any machine
player.x = player.x + 200 * dt

love.draw: การแสดงผล

love.draw ทำงานหนึ่งครั้งต่อเฟรมหลังจาก love.update ทุกสิ่งที่คุณเห็นบนหน้าจอจะถูกวาดที่นี่โดยใช้โมดูล love.graphics

หน้าจอจะถูกล้างโดยอัตโนมัติก่อนการเรียก draw แต่ละครั้ง ดังนั้นคุณจึงต้องวาดฉากทั้งหมดใหม่ในทุกเฟรมจากสถานะเกมปัจจุบัน

function love.draw()
  love.graphics.rectangle('fill', player.x, player.y, 32, 32)
end

รวมลูปทั้งหมดเข้าด้วยกัน

เมื่อนำฟังก์ชันเรียกกลับมารวมกัน คุณจะได้เกมที่สมบูรณ์: load เตรียมผู้เล่น update เคลื่อนที่ผู้เล่นโดยใช้ dt และ draw แสดงผลผู้เล่น

วงจร load-update-draw นี้คือหัวใจสำคัญของเกม LÖVE ทุกเกม ไม่ว่าเกมจะซับซ้อนเพียงใด

function love.load() x = 0 end
function love.update(dt) x = x + 100 * dt end
function love.draw()
  love.graphics.circle('fill', x, 150, 20)
end

การอ่านนาฬิกา

สะสมค่า dt เพื่อสร้างตัวจับเวลา รูปแบบที่ใช้บ่อยคือรวมเวลาที่ผ่านไป แล้วทำงานเมื่อค่าดังกล่าวข้ามขีดจำกัด จากนั้นจึงลบค่าขีดจำกัดออก

วิธีนี้เชื่อถือได้มากกว่าการนับเฟรม เพราะจำนวนเฟรมขึ้นอยู่กับฮาร์ดแวร์ ขณะที่ dt ติดตามจำนวนวินาทีจริง

timer = 0
function love.update(dt)
  timer = timer + dt
  if timer >= 1 then
    score = score + 1
    timer = timer - 1
  end
end

love.run และการทำงานภายในลูป

เบื้องหลังนั้น love.run คือลูปหลักที่ทำงานจริง โดยจะเรียก love.load หนึ่งครั้ง แล้ววนซ้ำไปเรื่อย ๆ: ประมวลผลเหตุการณ์ คำนวณ dt เรียกใช้ update และ draw ของคุณ แล้วแสดงเฟรม

คุณแทบไม่จำเป็นต้องเขียนทับ love.run แต่การรู้ว่าฟังก์ชันนี้มีอยู่จะช่วยอธิบายได้ว่า dt และฟังก์ชันเรียกกลับมาจากที่ใด

-- simplified idea of love.run
-- love.load()
-- while true do
--   dt = timer.step()
--   love.update(dt)
--   love.draw()
-- end

love.quit และวงจรการทำงาน

LÖVE ยังมีฟังก์ชันเรียกกลับสำหรับวงจรการทำงานนอกเหนือจากสามฟังก์ชันหลัก love.quit จะทำงานเมื่อผู้เล่นปิดหน้าต่าง ทำให้คุณสามารถบันทึกความคืบหน้าได้

การส่งกลับค่า true จาก love.quit จะยกเลิกการปิดหน้าต่าง ส่วนฟังก์ชันเรียกกลับอื่น ๆ เช่น love.focus และ love.resize จะตอบสนองต่อเหตุการณ์ของหน้าต่าง

function love.quit()
  print('Saving before exit...')
  return false  -- false lets the game close
end

การหยุดเกมชั่วคราว

เนื่องจาก love.update เป็นผู้ขับเคลื่อนตรรกะทั้งหมด การหยุดเกมชั่วคราวจึงทำได้ง่าย เพียงควบคุมตรรกะด้วยแฟล็กและข้ามการทำงานเมื่อเกมหยุดชั่วคราว

การวาดภาพยังคงทำงานอยู่ คุณจึงแสดงภาพซ้อนทับแจ้งสถานะหยุดชั่วคราวได้ การแยก update ออกจาก draw เช่นนี้คือเหตุผลที่การออกแบบลูปมีความยืดหยุ่น

paused = false
function love.update(dt)
  if paused then return end
  player.x = player.x + player.speed * dt
end

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับลูปเกมของ LÖVE

ทบทวน

LÖVE ทำงานกับเกมของคุณผ่านฟังก์ชันเรียกกลับ: love.load เตรียมค่าต่าง ๆ หนึ่งครั้ง love.update(dt) จัดการตรรกะในทุกเฟรม และ love.draw แสดงผลในทุกเฟรม

ค่า dt ทำให้การเคลื่อนที่ไม่ขึ้นกับอัตราเฟรม และฟังก์ชันเรียกกลับในวงจรการทำงาน เช่น love.quit ช่วยเติมเต็มลูป วงจรนี้ขับเคลื่อนเกม love2d ทุกเกม

คำถามที่พบบ่อย

บทเรียน “ลูปเกมของ LOVE” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ลูปเกมของ LOVE” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Lua Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Lua Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ลูปเกมของ LOVE”

load, update และ draw คุณปฏิบัติ Lua Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Lua Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Lua Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ลูปเกมของ LOVE” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Lua Academy นี้ได้ไหม

ได้ บทเรียน Lua Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Lua Academy