Lua Academy · บทเรียน

วาดรูปร่างและภาพ

นำกราฟิกไปแสดงบนหน้าจอ

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

โมดูล love.graphics

การแสดงผลทั้งหมดใน LÖVE เกิดขึ้นผ่าน love.graphics คุณเรียกใช้ฟังก์ชันของโมดูลนี้ภายใน love.draw และเอนจินจะแสดงเฟรมเมื่อฟังก์ชันเรียกกลับทำงานเสร็จ

โมดูลนี้สามารถวาดรูปร่างพื้นฐาน รูปภาพ ข้อความ และเส้น รวมถึงจัดการสีและการแปลง ทุกอย่างจะถูกวาดใหม่ตั้งแต่ต้นในทุกเฟรม

การวาดสี่เหลี่ยม

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 ฟังก์ชันนี้จะส่งกลับอ็อบเจ็กต์รูปภาพที่คุณเก็บไว้ในตัวแปรเพื่อนำกลับมาใช้ซ้ำ

อย่าโหลดรูปภาพภายใน love.draw เพราะจะทำให้โปรแกรมอ่านไฟล์ใหม่ในทุกเฟรมและทำให้ประสิทธิภาพลดลงอย่างมาก

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

การวาดรูปภาพ

love.graphics.draw(image, x, y) แสดงรูปภาพที่ตำแหน่งที่กำหนด โดยค่าเริ่มต้น มุมซ้ายบนของรูปภาพจะอยู่ที่ x, y

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

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 สำหรับแผ่นสไปรต์

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

บทเรียน “วาดรูปร่างและภาพ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “วาดรูปร่างและภาพ”

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

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

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

บทเรียน “วาดรูปร่างและภาพ” ใช้เวลานานแค่ไหน

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

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

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

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

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