gohud — ชุด HUD และ UI สำหรับ Godot 4

ใหม่: อาร์เคด การ์ตูน Material 3 และลุคสำหรับเด็ก

สี่ตระกูลใหม่มาสมทบกับค่าเริ่มต้น ไซไฟ และยุคกลาง — ตอนนี้มีลุคในตัวสิบสี่แบบ แต่ละแบบมีทั้งโหมดมืดและโหมดสว่าง วิดเจ็ต ป๊อปอัป และชิ้นส่วน HUD ทุกตัวรับลุคเหล่านี้ได้โดยไม่ต้องแก้โค้ดของคุณ: สลับพรีเซ็ตแล้วทั้งหน้าจอเปลี่ยนตาม

แกลเลอรีของ gohud ใน material_light — ปุ่มแคปซูล การ์ดแบบเติมสี และสีของ Material 3 — `material_light`

แกลเลอรีของ gohud ใน material_dark — รูปทรง Material 3 แบบเดียวกันบนโทนมืดพื้นฐาน — `material_dark`

แกลเลอรีของ gohud ใน kids_light — ปุ่มเยลลี่อวบ ๆ สีเทียนบนหน้าสีแดดสดใส — `kids_light`

แกลเลอรีของ gohud ใน kids_dark — กล่องของเล่นเดียวกันบนหน้าสีน้ำเงินยามค่ำคืน — `kids_dark`

แกลเลอรีของ gohud ใน comic_light — เส้นขอบหมึกหนาและเงาคมบนหน้าสีครีมแบบกระดาษ — `comic_light`

แกลเลอรีของ gohud ใน comic_dark — เส้นขอบสีครีมและสีหลักสีเหลืองบนหน้ายามค่ำคืน — `comic_dark`

แกลเลอรีของ gohud ใน arcade_light — ปุ่มลงสีไล่เฉดพร้อมเงาสะท้อน และบอร์ด HUD หนาที่มีกรอบสีน้ำเงินบนหน้าสีฟ้าท้องฟ้า — `arcade_light`

แกลเลอรีของ gohud ใน arcade_dark — ปุ่มสีสดชุดเดียวกันบนหน้ายามค่ำคืน — `arcade_dark`

Material 3 — สำหรับหน้าจอแอป

Material 3 Expressive ที่วัดเทียบกับโทเคน M3 อย่างเป็นทางการ: ปุ่มแคปซูลที่มีแผ่นปุ่ม 40dp อยู่ภายในพื้นที่กดสัมผัส 48dp ไดอะล็อกและชีต 28dp การ์ดแบบเติมสี ช่องกรอกแบบมีขอบ และสไลเดอร์ Expressive คอมโพเนนต์แอป — แถบนำทาง แถบแอป FAB แถบค้นหา ชิป ความคืบหน้า และตัวเลือกวันที่ — เป็นไปตามโทเคนคอมโพเนนต์ของ M3 และหัวเรื่องใช้ฟอนต์ Roboto ที่แถมมา เหมาะกับร้านค้า หน้าตั้งค่า กล่องจดหมาย และทุกหน้าจอที่ควรให้ความรู้สึกแบบแอป

สำหรับเด็ก — กล่องของเล่น

ทำมาเพื่อเด็ก: ทุกปุ่ม ทุกแถว และทุกพาเนลคือลูกอมเยลลี่ที่มีขอบหนาอวบและฐานทึบซึ่งยุบลงเมื่อกด คอนโทรลแต่ละชนิดมีสีเทียนของตัวเอง ควิกสล็อตเป็นก้อนลูกอม ป้ายเป็นสติกเกอร์ จอยสติ๊กเป็นสีรุ้ง หน้าต่างได้ริบบิ้น ชื่อเรื่องสีแดดสดใสและปุ่มปิดลูกอมทรงกลม และการกดจะยุบนุ่ม ขนาดและฟอนต์ของโปรเจกต์คุณยังคงเหมือนเดิมทุกประการ

การ์ตูน — หมึกหนาเข้ม

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

อาร์เคด — ปุ่มลงสี

ทุกปุ่มถูกลงสี — ไล่เฉดสี มีเงาสะท้อนสีขาว และฐานที่ยุบลงเมื่อกด ภายในเส้นขอบหมึกสีกรมท่า — และ ป้ายข้อความเป็นสีขาวตัดเส้นหมึก: สีเขียวสำหรับเล่น สีน้ำเงินสำหรับที่เหลือ สีแดงสำหรับลบ บอร์ดมีความหนา เป็น กรอบสีล้อมรอบแอ่งสีอ่อน และหน้าต่างได้แถบชื่อเรื่องสีทองกับปุ่มปิดทรงกลมสีแดง

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # หรือ MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # หรือ &"kids_dark"
GoUi.use_preset(&"comic_light")                  # หรือ &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # หรือ &"arcade_dark"

Material 3 โดยละเอียด → · ลุคสำหรับเด็กโดยละเอียด → · อาร์เคด ทีละวิดเจ็ต ↓ · การ์ตูน ทีละวิดเจ็ต ↓ · ป๊อปอัปเดียวกันในทั้งสิบสี่ลุค →

อาร์เคด: ปุ่มลงสีและบอร์ดหนา

ลุคใหม่ล่าสุดแต่งทุกหน้าจอให้เหมือนตู้เกมอาร์เคด ทุกปุ่มถูกลงสี — ไล่เฉดจากด้านบนที่สว่างไปยัง ด้านล่างที่เข้มกว่า มีเส้นเงาสะท้อนสีขาว และฐานที่ยุบลงเมื่อกด ทั้งหมดอยู่ภายในเส้นขอบหมึกสีกรมท่า — และป้ายข้อความ เป็นสีขาวตัดเส้นหมึก ทุกบอร์ดมีความหนา: กรอบสีที่มีเงาสะท้อนของตัวเองล้อมรอบแอ่งสีอ่อน arcade_light วางบอร์ดสีขาวบนหน้าสีฟ้าท้องฟ้า ส่วน arcade_dark วางบอร์ดสีกรมท่าบนหน้ายามค่ำคืน ทุกภาพด้านล่างคือหน้าจอ gohud จริง — โค้ดเดียวกัน ต่างกันแค่บรรทัดพรีเซ็ตบรรทัดเดียว

GoUi.use_preset(&"arcade_light")   # หรือ &"arcade_dark"

แกลเลอรีของ gohud ใน arcade_light — ปุ่มลงสีเขียว น้ำเงิน แดง และลาเวนเดอร์ กับบอร์ด HUD กรอบสีน้ำเงินบนหน้าสีฟ้าท้องฟ้า — `arcade_light` · แกลเลอรี

บอตทอมชีตใน arcade_light — บอร์ดกรอบหนาที่เลื่อนขึ้นจากขอบล่างพร้อมแถวที่เป็นหัวปุ่ม — `GoSheet`

โค้ชมาร์กใน arcade_light — กล่องคำอธิบายมีกรอบที่ชี้ไปยังปุ่ม — `GoCoachMark`

ลิ้นชักด้านข้างใน arcade_dark — บอร์ดสีกรมท่าที่มีแถวนำทางวางเหนือหน้าจอที่หรี่ลง — `GoDrawer`

ป๊อปโอเวอร์ใน arcade_dark — กล่องคำพูดมีกรอบที่ยึดอยู่กับปุ่มที่เปิดมันขึ้นมา — `GoPopover`

ไดอะล็อกแจ้งเตือนใน arcade_dark — แถบ Level up! สีทอง ปุ่มปิดสีแดง และปุ่ม Great สีเขียวบนบอร์ดสีกรมท่ากรอบสีน้ำเงิน — `GoDialogs.alert()`

สแน็กบาร์ใน arcade_light — บอร์ดสีขาวกรอบสีน้ำตาลตามแนวขอบล่าง พร้อมแอ็กชัน Undo — `GoSnackbar`

ทุกปุ่มถูกลงสี

ปุ่มใน arcade_light — Play สีเขียว Details สีน้ำเงิน ปุ่มขาวแบบมีเส้นขอบ Delete สีปะการัง Delete forever สีแดง ปุ่มกะทัดรัดสีลาเวนเดอร์ และปุ่มสีเทาที่ปิดใช้งาน แต่ละปุ่มลงสีไล่เฉด มีเงาสะท้อนและฐานภายในเส้นขอบสีกรมท่า — `GoStyle.button()`

แท็บใน arcade_light — แท็บที่เลือกเป็นปุ่มลงสีน้ำเงิน ส่วนแท็บอื่นเป็นปุ่มสีลาเวนเดอร์ — `GoStyle.tabs()`

ตัวควบคุมแบบแบ่งส่วนใน arcade_light — ปุ่มลงสีแยกกัน ปุ่มที่เลือกเป็นสีน้ำเงินและถูกกดลงไป — ปุ่มแบบแบ่งส่วน

สวิตช์และช่องทำเครื่องหมายใน arcade_light — รางสีเขียวเงาวาวเมื่อเปิด สีลาเวนเดอร์เมื่อปิด และช่องติ๊กสีเขียว — สวิตช์และช่องทำเครื่องหมาย

การ์ดใน arcade_light — แอ่งสีอ่อนภายในกรอบสีน้ำเงินหนาที่มีเงาสะท้อนและฐาน — `GoStyle.card()`

ฟอร์มใน arcade_light — ช่องกรอกสีขาวแบบเว้าลึก สวิตช์ และปุ่ม Save สีเขียว — `GoForm`

ตารางตัวเลือกใน arcade_light — หัวปุ่ม ตัวที่เลือกมีขอบสีทองบนพื้นสีเขียวอ่อน — `GoStyle.choice_grid()`

ตารางสล็อตใน arcade_light — ช่องเก็บของที่เป็นหัวปุ่มเงาวาวพร้อมจำนวนซ้อน — `GoSlotGrid`

แถวรายการใน arcade_light — แต่ละแถวเป็นหัวปุ่มสีอ่อนพร้อมไอคอน — แถวรายการ

ตัวเลือกวันที่ใน arcade_light — วันเป็นหัวปุ่ม วันที่เลือกเป็นปุ่มลงสี — `GoDatePicker`

สไลเดอร์ใน arcade_light — หลอดสีน้ำเงินเงาวาวในร่องหมึก และปุ่มจับทรงกลมแบบหัวปุ่ม — `GoStyle.slider()`

กลุ่มปุ่มเรดิโอใน arcade_light — หัวปุ่มทรงกลม ตัวที่เลือกมีจุดสีน้ำเงิน — `GoStyle.radio_group()`

ชิปตัวกรองใน arcade_light — ชิปแบบหัวปุ่ม ตัวที่เลือกเป็นสีน้ำเงินอ่อนพร้อมเครื่องหมายถูก และชิปที่ลบได้พร้อมกากบาท — `GoStyle.filter_chip()`

แถบค้นหาใน arcade_light — ช่องกรอกสีขาวแบบเว้าลึกในเส้นขอบหมึก พร้อมไอคอนค้นหาและไอคอนตัวกรอง — `GoSearchBar`

สเต็ปเปอร์ใน arcade_light — แต่ละขั้นเป็นหัวปุ่มสีอ่อน ขั้นที่เปิดอยู่แสดงปุ่ม Next สีเขียวของตัวเอง — `GoStepper`

ตารางลีดเดอร์บอร์ดใน arcade_light — แถวเว้นแถวเป็นหัวปุ่มที่นูนขึ้น — `GoTable`

แถบนำทางด้านล่างใน arcade_light — ไอคอนของแท็บที่เลือกอยู่บนแคปซูลหัวปุ่มสีน้ำเงิน และป้ายตัวเลขสีแดง — `GoNavBar`

ตัวเลือกเวลาใน arcade_light — ชั่วโมงและนาทีบนหัวปุ่มขนาดใหญ่ ปุ่ม AM และ PM เหนือหน้าปัดนาฬิกา — `GoTimePicker`

ช่องกรอกรหัสใน arcade_light — แปดช่องแบบหัวปุ่ม ช่องที่กำลังพิมพ์มีขอบสีทอง — `GoCodeInput`

ตัวเลือกแบบวงล้อใน arcade_light — จำนวนที่เลือกอยู่บนแถบหัวปุ่ม ตัวอื่นจางลงทั้งด้านบนและด้านล่าง — `GoWheelPicker`

ยามค่ำคืน: `arcade_dark`

บนหน้าสีมืด หมึกกลายเป็นสีของหน้าเอง ซึ่งเข้มกว่ามาก ส่วนสีที่ลงไว้ยังสดใสเท่าเดิม

ปุ่มใน arcade_dark — สีสดชุดเดียวกันบนหน้ายามค่ำคืน — `GoStyle.button()` ยามค่ำคืน

แถบ HUD ใน arcade_dark — หลอด HP สีแดง MP สีน้ำเงิน และ XP สีเขียวในร่องเว้าลึก — `GoBar`

การ์ด HUD ใน arcade_dark — แอ่งสีกรมท่าในกรอบสีน้ำเงินหนาวางเหนือเกม — `GoStyle.hud_panel()`

ควิกสล็อตใน arcade_dark — หัวปุ่มพร้อมจำนวนซ้อน สล็อตที่กำลังคูลดาวน์มีขอบสีทอง — `GoSlot`

จอยสติ๊กเสมือนใน arcade_dark — แผ่นรองเงาวาวในวงแหวนหมึกพร้อมลูกศรสี่ทิศและปุ่มจับแบบหัวปุ่ม — `GoJoystick`

กล่องแจ้งเตือนใน arcade_dark — บอร์ดเล็กที่มีกรอบสีเหลือง เขียว แดง และน้ำเงิน — กล่องแจ้งเตือน

ปุ่มแอ็กชันลอยใน arcade_dark — ปุ่มลงสีทองพร้อมเงาสะท้อน — `GoFab`

ปฏิทินรางวัลใน arcade_dark — วันเป็นหัวปุ่ม วันนี้มีขอบสีทอง — `GoRewardCalendar`

ตัวควบคุมแบบแบ่งส่วนใน arcade_dark — ปุ่ม Day ที่เลือกลงสีน้ำเงิน Week และ Month สีลาเวนเดอร์ ป้ายข้อความทุกอันเป็นสีขาว — ปุ่มแบบแบ่งส่วน

มุมมองแท็บใน arcade_dark — ปุ่มแท็บลงสีเหนือแถวรายการที่เป็นหัวปุ่มสีกรมท่า — `GoTabView`

รายการแบบเลื่อนใน arcade_dark — แถวรายการบนหัวปุ่มสีกรมท่า และแถวชิปตัวกรอง ตัวที่เลือกเป็นสีน้ำเงิน — `GoScroll`

สวิตช์และช่องทำเครื่องหมายใน arcade_dark — รางสีเขียวเงาวาวเมื่อเปิด สีลาเวนเดอร์เมื่อปิด — สวิตช์และช่องทำเครื่องหมาย

ชิประดับความหายากใน arcade_dark — แผ่นป้ายเล็กลงสีตั้งแต่ Common ถึง Cursed — `GoStyle.chip()`

ตารางสล็อตใน arcade_dark — ช่องเก็บของที่เป็นหัวปุ่มสีกรมท่าพร้อมไอคอนสีขาวและจำนวนซ้อน — `GoSlotGrid`

สไลเดอร์ช่วงค่าใน arcade_dark — ช่วงสีน้ำเงินระหว่างปุ่มจับเงาวาวสองอันในร่องสีเข้ม — `GoRangeSlider`

การแบ่งหน้าใน arcade_dark — หน้าปัจจุบันเป็นปุ่มลงสีเขียว — `GoPagination`

ป้ายใน arcade_dark — แผ่นป้ายสีปะการังตัดเส้นหมึกวางทับไอคอน — `GoBadge`

ลุคอาร์เคดทำงานอย่างไร

หน้าปุ่ม

ทุกปุ่มและบอร์ดคือ GoStyleBoxArcade: เส้นขอบหมึก ตัวไล่เฉดสี ฐาน และเงาสะท้อน ที่วาด อยู่ภายในสี่เหลี่ยมของคอนโทรลเอง — ปุ่มคงขนาดเดิมในทุกสถานะ และการกดเพียงทำให้มันยุบลง

ป้ายข้อความที่อ่านออก

ป้ายข้อความสีขาวตัดเส้นหมึกอ่านออกบนสีใดก็ตามที่เส้นขอบแยกมันออกมา — WCAG นับเส้นขอบเป็นส่วนหนึ่ง ของตัวอักษร ทุกสีจะถูกปรับจนป้ายข้อความผ่าน 4.6:1 ที่ทุกระดับความสูงของการไล่เฉด

หน้าต่าง

ชื่อหน้าต่างอยู่บนแถบสีทองเป็นตัวอักษรสีขาวตัดเส้นหมึก ข้าง ๆ ปุ่มปิดทรงกลมสีแดง ไดอะล็อก ชีต ลิ้นชัก และป๊อปโอเวอร์ เป็นบอร์ดกรอบหนา

ปุ่มเดียวก็ใช้สีของตัวเองได้ — เช่นปุ่มร้านค้าสีส้มในเมนูหยุดเกม:

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

ลุคอาร์เคดโดยละเอียด → · ป๊อปอัปเดียวกันในทั้งสิบสี่ลุค →

การ์ตูน: หมึกหนาเข้มและเงาคม

ลุคการ์ตูนวาดทุกหน้าให้เหมือนช่องในหนังสือการ์ตูน — สีพื้นผิวอยู่ภายในเส้นขอบหมึกหนา พร้อมเงาคมทึบที่ทอดลงด้านล่างขวา comic_light ตัดเส้นหมึกสีดำบนหน้าสีครีมแบบกระดาษ พร้อมสีหลักสีน้ำเงินโคบอลต์ ส่วน comic_dark ตัดเส้นสีครีมบนหน้ายามค่ำคืนพร้อมสีหลักสีเหลือง ทุกภาพด้านล่าง คือหน้าจอ gohud จริง — โค้ดเดียวกัน ต่างกันแค่บรรทัดพรีเซ็ตบรรทัดเดียว

GoUi.use_preset(&"comic_light")   # หรือ &"comic_dark"

แกลเลอรีของ gohud ใน comic_light — ปุ่ม แถว และแถบที่ตัดเส้นหมึกพร้อมเงาคมบนหน้าสีครีมแบบกระดาษ — `comic_light` · แกลเลอรี

แกลเลอรีของ gohud ใน comic_dark — หมึกสีครีมและสีหลักสีเหลืองบนหน้ายามค่ำคืน — `comic_dark` · แกลเลอรี

บอตทอมชีตใน comic_light — พาเนลตัดเส้นหมึกที่เลื่อนขึ้นจากขอบล่างพร้อมแถวที่ตัดเส้นหมึก — `GoSheet`

โค้ชมาร์กใน comic_light — กล่องคำอธิบายตัดเส้นหมึกที่ชี้ไปยังปุ่ม — `GoCoachMark`

ลิ้นชักด้านข้างใน comic_dark — พาเนลตัดเส้นหมึกที่มีแถวนำทางวางเหนือหน้าจอที่หรี่ลง — `GoDrawer`

ป๊อปโอเวอร์ใน comic_dark — กล่องคำพูดตัดเส้นหมึกที่ยึดอยู่กับปุ่มที่เปิดมันขึ้นมา — `GoPopover`

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

ปุ่มใน comic_light — ปุ่มหลัก ปุ่มรอง ปุ่มแบบมีขอบ ปุ่มอันตราย ปุ่มกะทัดรัด ปุ่มเปล่า และปุ่มที่ปิดใช้งาน แต่ละปุ่มมีเส้นขอบสีดำหนาและเงาคม — `GoStyle.button()` — ครบทุกชนิด

สวิตช์และช่องทำเครื่องหมายใน comic_light — รางและปุ่มจับที่ตัดเส้นหมึก และกล่องตัดเส้นหมึกพร้อมเครื่องหมายถูก — สวิตช์และช่องทำเครื่องหมาย

ปุ่มตัวเลือกใน comic_light — วงแหวนตัดเส้นหมึก ตัวที่เลือกมีจุดทึบ — ปุ่มตัวเลือก (radio)

แท็บใน comic_light — แท็บที่เลือกเป็นพาเนลตัดเส้นหมึก แท็บอื่นวางอยู่บนเส้นใต้สีหมึก — `GoStyle.tabs()`

ปุ่มแบ่งส่วนใน comic_light — ช่องตัดเส้นหมึก ช่องที่เลือกเติมสี — ปุ่มแคปซูลแบ่งส่วน

สไลเดอร์ใน comic_light — รางตัดเส้นหมึก แถบเติมสีเน้นบาง ๆ และปุ่มจับตัดเส้นหมึก — `GoStyle.slider()`

ดรอปดาวน์ใน comic_light — ปุ่มตัดเส้นหมึกพร้อมลูกศรเชฟรอน — ดรอปดาวน์

การ์ดใน comic_light — พาเนลสีขาวที่มีเส้นขอบหนาและเงาคม — `GoStyle.card()`

ฟอร์มใน comic_light — ช่องกรอกตัดเส้นหมึกพร้อมคำใบ้ สวิตช์ และปุ่มบันทึกตัดเส้นหมึก — `GoForm`

แถวรายการใน comic_light — แต่ละแถวเป็นแถบตัดเส้นหมึกพร้อมไอคอน คำบรรยายรอง หรือป้ายอันตราย — แถวรายการ

ตารางใน comic_light — หัวตารางอยู่เหนือเส้นหมึก และทุกแถวคะแนนเป็นแถบตัดเส้นหมึก — `GoTable`

ตัวเลือกวันที่ใน comic_light — ช่องวันตัดเส้นหมึก วันที่เลือกเติมสี — `GoDatePicker`

ตัวเลือกเวลาใน comic_light — กล่องชั่วโมงและนาทีตัดเส้นหมึก ปุ่ม AM และ PM และหน้าปัดนาฬิกา — `GoTimePicker`

สเต็ปเปอร์ใน comic_light — แถวขั้นตอนตัดเส้นหมึก ขั้นที่เสร็จแล้วมีเครื่องหมายถูกและขั้นถัดไปจางลง — `GoStepper`

ชิปตัวกรองและชิปอินพุตใน comic_light — แคปซูลตัดเส้นหมึก ตัวกรองที่เลือกแต้มสีพร้อมเครื่องหมายถูก — ชิปตัวกรอง

แถบนำทางใน comic_light — เส้นหมึกด้านบน แท็บปัจจุบันอยู่ในแคปซูลตัดเส้นหมึก และมีป้ายบน Alerts — `GoNavBar`

กลุ่มอินพุตใน comic_light — ช่องกรอกและปุ่ม Send เชื่อมเป็นรูปทรงตัดเส้นหมึกชิ้นเดียว — `GoInputGroup`

ปุ่มแยกใน comic_light — คำสั่งและลูกศรเมนูเป็นสองซีกตัดเส้นหมึก — `GoSplitButton`

การแบ่งหน้าใน comic_light — หน้าปัจจุบันเป็นปุ่มตัดเส้นหมึกพร้อมเงาคม — `GoPagination`

ยามค่ำคืน: `comic_dark`

บนหน้าสีมืด เส้นขอบสีดำจะหายไป comic_dark จึงวาดเส้นขอบเป็นสีครีมและทอดเงาจาง ๆ ที่แต้มสีหมึกเดียวกัน ชิ้นส่วน HUD — ควิกสล็อต แถบ จอยสติ๊ก และปฏิทินรางวัล — ก็ทำตามกฎเดียวกัน

ปุ่มใน comic_dark — เส้นขอบสีครีม สีหลักสีเหลือง และเงาคมจาง ๆ บนหน้ายามค่ำคืน — `GoStyle.button()` ยามค่ำคืน

ควิกสล็อตใน comic_dark — บล็อกตัดเส้นหมึกพร้อมจำนวนซ้อนและคูลดาวน์ สล็อตที่สว่างมีขอบสีเหลือง — `GoSlot`

แถบ HUD ใน comic_dark — HP MP และ XP ในรางที่ตัดเส้นหมึกสีครีม — `GoBar`

จอยสติ๊กเสมือนใน comic_dark — วงแหวนสีครีมและปุ่มจับที่ทอดเงา — `GoJoystick`

การแจ้งเตือนใน comic_dark — พาเนลข้อมูล สำเร็จ คำเตือน และอันตราย ที่ตัดเส้นหมึกสีครีม — การแจ้งเตือน

ตารางสล็อตใน comic_dark — อินเวนทอรีของบล็อกตัดเส้นหมึก — `GoSlotGrid`

ปฏิทินรางวัลใน comic_dark — ช่องวันตัดเส้นหมึก วันที่รับแล้วมีเครื่องหมายถูกและวันนี้มีขอบสีเหลือง — `GoRewardCalendar`

ชิประดับความหายากใน comic_dark — แคปซูลตัดเส้นหมึก แต่ละอันแต้มสีของตัวเอง — ชิป

สไลเดอร์ช่วงใน comic_dark — ปุ่มจับตัดเส้นหมึกสองอันบนรางตัดเส้นหมึก — `GoRangeSlider`

แถบค้นหาใน comic_dark — แถบตัดเส้นหมึกพร้อมไอคอนค้นหาและตัวกรอง — `GoSearchBar`

ปุ่มลอยใน comic_dark — ปุ่มสีเหลืองตัดเส้นหมึกสีครีมพร้อมเงาคม — `GoFab`

ลุคการ์ตูนทำงานอย่างไร

StyleBox เดียวสำหรับทุกหน้า

ทุกหน้าคือ GoStyleBoxComic: สีเติม เส้นขอบ และเงา ที่วาดอยู่ภายในสี่เหลี่ยมของคอนโทรลเอง มันอ่านขนาดเส้นขอบและเงาจาก GoConfig ทุกครั้งที่วาด การตั้งค่าเดียวจึงเปลี่ยนทั้งหน้าจอได้ในคราวเดียว

กดแล้วแบนราบ

ปุ่มที่ถูกกดจะไม่มีเงาและเลื่อนลงไปอยู่ที่ตำแหน่งของมัน ตอนโฮเวอร์เงายังอยู่ ตอนโฟกัสจะมีวงแหวนหมึกด้านในที่ไม่บังเส้นขอบเลย และหน้าที่ปิดใช้งานจะไม่มีเงาและจางลง

สกินตัดเส้นหมึกส่วนที่เหลือ

GoSkinComic ตัดเส้นหมึกให้สิ่งที่โค้ดวาด: ควิกสล็อต ชิป ป้าย อวาตาร์ ข้อความแจ้งเตือน แถบนำทาง FAB ช่องวันที่ และจอยสติ๊กที่ปุ่มจับทอดเงา

หน้าต่างได้ป้ายชื่อเรื่อง

ชื่อหน้าต่างอยู่บนป้ายสีเหลือง เหมือนกล่องบรรยายในหนังสือการ์ตูน ข้าง ๆ ปุ่มปิดทรงกลมตัดเส้นหมึก ไดอะล็อก ชีต ลิ้นชัก และป๊อปโอเวอร์ เป็นพาเนลทึบตัดเส้นหมึก

อ่านง่ายทั้งกลางวันและกลางคืน

จานสีทั้งสองผ่านการตรวจคอนทราสต์ตาม WCAG ชุดเดียวกับพรีเซ็ตอื่นทุกตัว รวมถึงปุ่มที่ถูกกดและปุ่มที่ปิดใช้งาน เมื่อสีของป้ายชื่อเรื่องใกล้เคียงกับสีหน้ามากเกินไป เส้นขอบของมันจะกลับไปใช้สีหน้าแทน

เลย์เอาต์ไม่เปลี่ยน

เส้นขอบและเงาอยู่ภายในคอนโทรลแต่ละตัว และระยะขอบด้านในยังคงตามที่ธีมกำหนด หน้าจอที่จัดวางไว้ในลุคอื่นจึงคงเลย์เอาต์เดิม — และฟอนต์ของโปรเจกต์คุณ

สามค่าตั้งค่าและการเรียกหนึ่งครั้ง

ค่าตั้งค่า GoConfig สามตัวเปลี่ยนทุกหน้าการ์ตูนได้ในคราวเดียว ไม่มีอะไรต้องสร้างใหม่ — หน้าจอวาดใหม่ทันทีที่คุณตั้งค่า

GoUi.config.comic_border_width = 2.0   # เส้นขอบ (dp) — ค่าเริ่มต้น 3
GoUi.config.comic_shadow_size = 6.0    # เงา (dp) — ค่าเริ่มต้น 4
GoUi.config.comic_shadow = false       # ไม่มีเงาที่ไหนเลย

วิดเจ็ตตัวเดียวทำต่างออกไปได้ ไม่ว่าค่าตั้งค่าจะเป็นอย่างไร ส่ง true เป็นอาร์กิวเมนต์ตัวสุดท้ายเพื่อให้รวมทุกอย่างที่อยู่ข้างในด้วย

GoStyle.comic_shadow(skip_button, false)     # ปุ่มนี้แบนราบ
GoStyle.comic_shadow(card, true, true)       # การ์ดนี้และทุกอย่างข้างในยังมีเงา
GoStyle.comic_border(title, 5.0)             # เส้นขอบหนาขึ้นสำหรับตัวนี้

สร้างการ์ตูนของคุณเอง tools/new_theme.py inked --from comic_light คัดลอกจานสีมาให้ เปลี่ยนสี กระดาษ หมึก และสีหลัก แล้วรัน tools/make_theme.py inked หมึก เงา และสกินจะตามมาด้วย

ลุคการ์ตูนโดยละเอียด → · ป๊อปอัปเดียวกันในทั้งสิบสี่ลุค →

หน้าตาเมื่ออยู่ในเกมจริง

พรีเซ็ตยุคกลางและไซไฟ — แผ่นข้อมูลตัวละคร กระเป๋าของ และเควสต์ ฟอร์ม กริด และพรอมต์การ์ด พาเนลมุมเหลี่ยมและปุ่มควบคุมแบบสัมผัส การสลับพรีเซ็ตใช้โค้ดบรรทัดเดียว

ธีมยุคกลางของ gohud — แผ่นข้อมูลตัวละครพร้อมแถบพลังชีวิต มานา และสตามินา ย่ามใส่ควิกสล็อต และสมุดบันทึกเควสต์ในกรอบทองตีขึ้นรูป — **ยุคกลาง** — ตัวละคร กระเป๋าของ และเควสต์

ธีมยุคกลางของ gohud — พาเนลกรอกข้อมูลที่มีช่องชื่อ สวิตช์เปิดปิด เช็กบ็อกซ์ และสไลเดอร์ปรับเสียง กริดของไทล์ และพรอมต์การ์ดชวนเข้าปาร์ตี้ที่มีปุ่มรับและปฏิเสธ — **ยุคกลาง** — ฟอร์ม กริด และพรอมต์การ์ด

ธีมไซไฟของ gohud — พาเนลปุ่มควบคุมแบบสัมผัสมุมตัดเฉียง พร้อมจอยสติ๊กหกเหลี่ยม สวิตช์เลือกโหมด Fixed / Follow / Relative และปุ่มแอ็กชันทรงกลม — **ไซไฟ** — พาเนลมุมเหลี่ยมและปุ่มควบคุมแบบสัมผัส

พรีเซ็ตทั้ง 14 แบบและวิธีสลับ →

สิ่งที่ gohud รับไปทำแทนคุณ

สิ่งที่กินเวลามากที่สุดใน UI ของเกมไม่ใช่รูปทรงของปุ่ม แต่เป็นทุกอย่างที่เพี้ยนไปคนละทาง เมื่อเปลี่ยนเครื่อง gohud จัดการความเพี้ยนนั้นไว้ในที่เดียว

ทุกค่าขนาดคือโทเคน

ระยะห่าง มุม และขนาดตัวอักษรถูกเรียกด้วยชื่อ ไม่ใช่เขียนเป็นตัวเลข สลับธีมแล้วทั้งหน้าจอขยับตามไปพร้อมกัน

ขนาดที่เห็น ≠ ขนาดที่กดได้

ปุ่มปิดดูเหมือนกว้าง 36dp แต่พื้นที่กดสัมผัสคือ 48dp เมื่อสล็อตที่อยู่ชิดกันมีพื้นที่ซ้อนทับ อันที่จุดกึ่งกลางใกล้กว่าจะได้รับการกดไป

รอยบากหน้าจอและคีย์บอร์ด

ชิ้นส่วน HUD อยู่ในเซฟแอเรียเสมอ และช่องกรอกข้อมูลจะยกตัวขึ้นเหนือคีย์บอร์ดเสมือนทันทีที่มันโผล่มา

ปุ่มย้อนกลับปิดทีละชั้น

Escape และปุ่มย้อนกลับของ Android ปิดเฉพาะเลเยอร์บนสุด หน้าต่างที่ซ้อนกันอยู่จะไม่หายวับไปพร้อมกันหมด

ข้อความแจ้งเตือนไม่แย่งอินพุต

กดทะลุสแน็กบาร์ลงไปแล้วปุ่มข้างใต้ยังรับการกดอยู่ และมันก็ไม่แย่งโฟกัสไปด้วย

ไอคอนถูกเรียกด้วยชื่อ

วิดเจ็ตรู้จักแค่ GoIconSet.CLOSE สลับชุดไอคอนแล้วภาพวาดทุกชิ้นเปลี่ยนตาม โดยไม่ต้องแตะโค้ดสักบรรทัด ไอคอน →

สิบสี่ลุค หนึ่งบรรทัด

GoUi.use_preset() สลับธีม สกิน และไอคอนพร้อมกัน — จะเป็นมุมมน มุมตัดเฉียงแบบไซไฟ กรอบตีเหล็กแบบยุคกลาง คอมโพเนนต์แอปของ Material 3 ลูกอมเยลลี่สำหรับเด็ก หมึกแบบการ์ตูน หรือสีแบบอาร์เคดก็ได้

อ่านออกโดยวัดผลจริง

ทุกธีมถูกตรวจกับ WCAG รวมถึงสถานะต่าง ๆ ของปุ่ม และพาเนล HUD กึ่งโปร่งใสที่วางทับพื้นขาวล้วนและดำล้วน

ทุกอย่างทำงานได้โดยไม่ต้องเปิดใช้ปลั๊กอิน การเปิดใช้จะเพิ่ม autoload ชื่อ GoRuntime ที่คอยติดตาม ขนาดหน้าต่าง อัตราส่วน dp และความสูงของคีย์บอร์ด พร้อมกับตั้งค่าโปรเจกต์สำหรับรีซอร์สคอนฟิกและ พรีเซ็ต — เป็นความสะดวก ไม่ใช่ข้อบังคับ

ติดตั้ง gohud

มีสองทาง ให้เอเจนต์ AI ทำให้ หรือวางโฟลเดอร์ลงในโปรเจกต์ของคุณ — ไม่มีอะไรต้องตั้งค่าเพิ่ม

ติดตั้ง

เริ่มใช้งาน

ห้าบรรทัดก็ได้หน้าจอที่ใส่ธีมแล้ว ขั้นตอนทั้งหมดอยู่ในหน้าติดตั้ง

เริ่มใช้งาน

เปลี่ยนลุค — ทั้งสีและรูปทรง

Theme ปรับสไตล์ได้แค่สิ่งที่เอนจินวาดเท่านั้น มุมมนคือมุมชนิดเดียวที่ StyleBoxFlat มีให้ ส่วนจอยสติ๊ก ควิกสล็อต และโค้ชมาร์กนั้นถูกวาดด้วยโค้ด — ธีมเพียงอย่างเดียวจึงไม่มีทาง เปลี่ยนรูปทรงของมันได้ gohud จึงมาพร้อม พรีเซ็ต: ธีม สกิน และชุดไอคอนที่เลือกมาเป็นชุดเดียวกัน

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # ธีม สกิน และไอคอน พร้อมกันทีเดียว

พรีเซ็ต	ลุค
`default_dark`	gohud ดั้งเดิม — มุมมน สีเน้นฟ้านวล
`default_light`	รูปทรงเดิมบนจานสีโทนสว่าง
`scifi_dark`	มุมตัดเฉียง ขอบนีออนสีฟ้าไซแอนพร้อมแสงเรือง จอยสติ๊กหกเหลี่ยม วงเล็บเล็งเป้า
`scifi_light`	รูปทรงเหลี่ยมแบบเดียวกันบนจานสีพิมพ์เขียวสว่าง
`medieval_dark`	เหล็กดำและหนัง กรอบทองโบราณ หมุดย้ำ ไอคอนสลัก หัวข้อฟอนต์ Cinzel
`medieval_light`	กระดาษหนัง หมึก และทองสัมฤทธิ์ บนกรอบตีขึ้นรูปแบบเดียวกัน
`material_light` ใหม่	Material 3 สำหรับหน้าจอแอป — ปุ่มทรงแคปซูล ไดอะล็อก 28dp การ์ดแบบเติมสี แถบนำทาง FAB และแถบค้นหาของแอป Roboto
`material_dark` ใหม่	รูปทรง Material 3 แบบเดียวกันบนโทนมืดพื้นฐาน
`kids_light` ใหม่	กล่องของเล่นสำหรับเด็ก — ปุ่มลูกอมเยลลี่ที่มีขอบหนาอวบและฐานที่ยุบลงเมื่อกด สีเทียน หน้าสีแดดสดใส
`kids_dark` ใหม่	กล่องของเล่นเดียวกันบนหน้าสีน้ำเงินยามค่ำคืน
`comic_light` ใหม่	ช่องหนังสือการ์ตูน — เส้นขอบหมึกหนาและเงาคมบนทุกหน้า พาเนลสีขาวบนหน้าสีครีมแบบกระดาษ เงา ขนาดเงา และความหนาของเส้นขอบเป็นค่าตั้งค่าทั้งหมด
`comic_dark` ใหม่	หมึกเดียวกันบนหน้ายามค่ำคืน — เส้นขอบสีครีมและสีหลักสีเหลือง
`arcade_light` ใหม่	ตู้เกมอาร์เคด — ทุกปุ่มลงสีไล่เฉด มีเงาสะท้อนและฐาน ป้ายข้อความสีขาวตัดเส้นหมึก บอร์ดกรอบหนาบนหน้าสีฟ้าท้องฟ้า และแถบชื่อเรื่องสีทองบนหน้าต่าง
`arcade_dark` ใหม่	ปุ่มสีสดชุดเดียวกันบนบอร์ดสีกรมท่าและหน้ายามค่ำคืน

แกลเลอรีของ gohud ในพรีเซ็ต default_dark — มุมมน สีเน้นฟ้า — `default_dark` — มุมมน สีเน้นฟ้านวล

พรีเซ็ต default_light — รูปทรงเดิมบนจานสีโทนสว่าง — `default_light` — รูปทรงเดิม จานสีสว่าง

พรีเซ็ต scifi_dark — มุมตัดเฉียงและนีออนสีฟ้าไซแอน — `scifi_dark` — มุมตัดเฉียง นีออนไซแอน

พรีเซ็ต scifi_light — รูปทรงเหลี่ยมแบบเดียวกันบนจานสีพิมพ์เขียว — `scifi_light` — รูปทรงเหลี่ยมเดิม จานสีพิมพ์เขียว

ทั้งสี่ภาพนั้นคือหน้าจอแกลเลอรีเดียวกัน ไม่มีโค้ดต่างกันสักบรรทัด — ต่างกันแค่ชื่อพรีเซ็ต มุมของปุ่ม รูปทรงของสวิตช์ แถวรายการ และเส้นขอบช่องกรอก ขยับตามไปพร้อมกันทั้งหมด

คอลเลกชันยุคกลาง

medieval_dark จับคู่เหล็กและหนังเข้ากับทองโบราณ ส่วน medieval_light ใช้กระดาษหนัง และหมึก กรอบเมนูมีหมุดย้ำและลวดลายมุมเล็ก ๆ ขณะที่ HUD ซึ่งมองเห็นตลอดเวลายังคงเรียบสงบ ไอคอนสลัก 16 ชิ้นวาดชื่อไอเทมใหม่ และมีแต่หัวข้อกับหัวข้อรองเท่านั้นที่ใช้ฟอนต์ Cinzel ที่แถมมา

medieval_dark — แผ่นข้อมูลตัวละคร ย่ามใส่ควิกสล็อต และสมุดบันทึกเควสต์ — `medieval_dark` — เหล็กและหนัง

medieval_light — หน้าตัวละคร ย่าม และเควสต์ชุดเดียวกันบนกระดาษหนัง — `medieval_light` — กระดาษหนังและหมึก

ทั้งสองภาพคือ examples/medieval/medieval.tscn ที่ประกอบขึ้นจากวิดเจ็ตมาตรฐาน คู่มือยุคกลางและวิธีสร้างอาณาจักรของคุณเอง →

หน้าจอเดียวกัน บนมือถือและบนเดสก์ท็อป

ภาพแกลเลอรีข้างบนคือมือถือแนวตั้ง ส่วนด้านล่างคือโค้ดชุดเดียวกันที่ 1280×800 — เนื้อหาหยุดที่ ความกว้างที่อ่านสบาย (480dp) แล้วจัดกึ่งกลาง ขณะที่ HUD ยังอยู่ตามมุม ฟอร์มจะเดินอ้อมชิ้นส่วน HUD ที่ลอยอยู่ แต่จะไม่ขยับถ้ามันพ้นกันอยู่แล้ว: ถ้าดันทุรังเลื่อนต่อไป เนื้อหาจะหลุดจากกึ่งกลางบนจอกว้าง

default_dark ที่ 1280x800 — เนื้อหาจัดกึ่งกลาง HUD อยู่ตามมุม — `default_dark` · 1280×800

scifi_dark ที่ 1280x800 — เลย์เอาต์เดียวกันกับพาเนลมุมตัดเฉียงและนีออน — `scifi_dark` · 1280×800

ชีตเดียวกัน คนละลุค

บอททอมชีตในพรีเซ็ต default_dark — ค่าเริ่มต้น — การ์ดมุมมน แถวค้นหาและแถบท้ายติดหนึบ

บอททอมชีตในพรีเซ็ต scifi_dark — ขอบบนเน้นสีนีออน — ไซไฟ — ขอบบนเน้นสี มุมตัด แสงเรือง

เลือกได้จาก Project Settings → gohud → Theme → Preset หรือกำหนดที่ GoConfig.preset ถ้าระบุ theme, skin หรือ icons ไว้ตรง ๆ ค่านั้นจะชนะพรีเซ็ต คุณจึงหยิบพรีเซ็ตมาแล้วเขียนทับเฉพาะบางชิ้นได้

ธีมใหม่หนึ่งธีมคือไฟล์ JSON หนึ่งไฟล์ new_theme.py kingdom --from medieval_dark จะเขียน จานสีที่ระบุค่าที่สืบทอดมาทุกค่าไว้ครบถ้วน แล้ว make_theme.py kingdom จะสร้างตัวธีม ภาพของคอนโทรล และค่าปรับของสกิน จากนั้นพรีเซ็ตจะโผล่ในตัวเลือกเอง ทุกการตั้งค่าและทุกค่าปรับ →

สกิน — ที่ที่ Theme เอื้อมไม่ถึง

สกินเป็นเจ้าของจอยสติ๊ก หน้าควิกสล็อต วงแหวนโค้ชมาร์ก ชิป สเกเลตัน กล่องแจ้งเตือน เส้นคั่น และหัวข้อส่วน สืบทอดคลาสแล้วเขียนทับเฉพาะสิ่งที่อยากเปลี่ยนก็พอ

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box

คลาส	รูปทรงที่สร้างได้
`GoStyleBoxCut`	มุมตัดเฉียง (chamfer) ขอบเน้นสีที่หนาขึ้นหนึ่งด้าน และแสงเรืองรอบนอก
`GoStyleBoxBracket`	เครื่องหมายมุมอย่างเดียว โดยไม่ล้อมกรอบเนื้อหา
`GoStyleBoxMedieval`	กรอบตีขึ้นรูปพร้อมหมุดย้ำ ลายสลักที่มุม แสงไฮไลต์ตามขอบลาด และลายเนื้อวัสดุ
`GoStyleBoxJelly`	ลูกอมเยลลี่ — ขอบหนาอวบ ฐานทึบที่ยุบลงเมื่อกด ตัวที่ด้านบนสว่างกว่าด้านล่าง และประกายสีขาว
`GoStyleBoxComic`	ช่องหนังสือการ์ตูน — เส้นขอบหมึกหนาและเงาตกกระทบที่คม ทั้งสองอย่างกำหนดขนาดโดย `GoConfig` ขณะเกมทำงาน
`GoStyleBoxArcade`	ปุ่มหรือบอร์ดแบบอาร์เคด — ตัวไล่เฉดสี เงาสะท้อนสีขาว ฐานที่ยุบลงเมื่อกด และเส้นขอบหมึก ส่วนบอร์ดจะเพิ่มกรอบสีหนาล้อมรอบแอ่งสีอ่อน

ทั้งหกคลาสสามารถซีเรียลไลซ์ลงในรีซอร์ส Theme ได้ — นี่เองคือสิ่งที่ทำให้ธีมเปลี่ยนรูปทรงได้ ไม่ใช่แค่สี GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic และ GoSkinArcade คือซับคลาสที่แถมมาให้

ควิกสล็อต จอยสติ๊ก และชิป ที่วาดโดยสกินแต่ละตัวที่แถมมา — ค่าเริ่มต้น สำหรับเด็ก Material ยุคกลาง และไซไฟ — สิ่งที่สกินวาด — ค่าเริ่มต้น สำหรับเด็ก Material ยุคกลาง ไซไฟ

ควิกสล็อต จอยสติ๊ก และชิป ที่วาดโดยสกินการ์ตูน — เส้นขอบหมึกและเงาคม — …และสกินการ์ตูน

ควิกสล็อต จอยสติ๊ก และชิป ที่วาดโดยสกินอาร์เคด — หัวปุ่มเงาวาวและแผ่นรองที่มีลูกศรสี่ทิศ — …และสกินอาร์เคด

GoStyle.box() คืนค่าเป็น StyleBoxFlat เสมอ เพราะโค้ดที่เรียกใช้จะรับมันไป แล้วปรับ bg_color หรือ corner_radius ต่อ ถ้าต้องการให้รูปทรงที่กำหนดเองอยู่รอด ให้ใช้ GoStyle.surface() แทน

วิดเจ็ต

ชิ้นส่วนทั้งหมดในตารางเดียว ดูรายละเอียดทีละชิ้น → · วิดเจ็ตทุกตัวพร้อมภาพ → · ป๊อปอัปและกล่องโต้ตอบ คู่มือฉบับเต็ม →

คลาส	สืบทอดจาก	ทำอะไร
`GoSurface`	Control	เปลือกการ์ดลอย — วางกึ่งกลาง ชิดล่าง หรือยึดกับคอนโทรล พร้อมหัวและท้ายติดหนึบ เนื้อหาเลื่อนได้ และลากปรับขนาดได้
`GoSheet`	CanvasLayer	หน้าที่ยกขึ้นมาจากด้านล่าง อยู่บนเลเยอร์ของตัวเองจึงลอยเหนือ HUD เสมอ
`GoDialogs`	Node	กล่องยืนยันและกล่องแจ้งเตือนที่ `await` ได้ พร้อม `destructive` สำหรับการกระทำที่ย้อนกลับไม่ได้
`GoForm`	MarginContainer	ฟอร์มที่จำกัดความกว้าง หลบคีย์บอร์ดเสมือน และหลบ HUD ได้ด้วย `avoid_hud`
`GoScroll`	ScrollContainer	การเลื่อนด้วยนิ้ว แถบเลื่อนซ่อนตัวเข้าไปในระยะขอบของการ์ด
`GoNotice`	PanelContainer	สแน็กบาร์ที่ไม่แย่งทั้งอินพุตและโฟกัส
`GoPromptCard`	PanelContainer	คำถามที่ไม่หยุดเกม
`GoCoachMark`	Control	ทัวร์แนะนำที่ชี้ไปยังคอนโทรลจริง กดที่เป้าหมายแล้วเดินหน้าต่อ
`GoHudAnchor`	Control	ตรึงชิ้นส่วน HUD ไว้ที่ตำแหน่งใดตำแหน่งหนึ่งใน 9 จุดของเซฟแอเรีย
`GoBar`	Control	แถบพลังชีวิต มานา และค่าประสบการณ์ ที่เปลี่ยนค่าอย่างนุ่มนวล
`GoSlot`	Button	ควิกสล็อตหนึ่งช่อง — ไอคอน จำนวน คูลดาวน์ และปุ่มลัด อยู่บนหน้าเดียวกัน
`GoJoystick`	Control	จอยสติ๊กเสมือน โหมดอยู่กับที่ ตามนิ้ว หรือสัมพัทธ์
`GoIconButton`	Button	ดูเล็ก แต่กดง่าย
`GoStyle`	static	ปุ่ม แถวรายการ ช่องกรอก ชิป ตาราง แท็บ และอื่น ๆ ที่สร้างขึ้นด้วยวิธีเดียวกันทั้งหมด

การรอ การบอก การนับ

คลาส	สืบทอดจาก	ทำอะไร
`GoSnackbar`	Node	ข้อความที่จัดที่ให้ตัวเอง
`GoSpinner`	Control	การรอที่ยังมองไม่เห็นปลายทาง
`GoBadge`	PanelContainer	จุดที่ยังไม่ได้อ่าน ป้าย "ใหม่" และเลข 99+

ฟอร์มและรายการ

คลาส	สืบทอดจาก	ทำอะไร
`GoField`	VBoxContainer	แถวที่ผิดพลาดได้
`GoInputGroup`	HBoxContainer	ช่องกรอกที่เชื่อมติดกับปุ่มของมัน
`GoCombobox`	Button	ตัวเลือกที่ค้นหาได้
`GoCodeInput`	VBoxContainer	โค้ดคูปองและโค้ดของขวัญ
`GoTable`	VBoxContainer	หัวตารางที่เรียงลำดับได้ แถวที่เลือกได้
`GoPagination`	HBoxContainer	แบ่งเป็นหน้า หรือแถว "ดูเพิ่ม"

รูปทรงที่เกมใช้จริง

คลาส	สืบทอดจาก	ทำอะไร
`GoRewardCalendar`	VBoxContainer	การเช็กชื่อรายวัน
`GoRadar` · `GoDonut`	Control	ค่าสถานะที่เห็นได้ในพริบตา
`GoCarousel`	VBoxContainer	แบนเนอร์และหน้าเลือกตัวละคร
`GoKbd`	HBoxContainer	คำใบ้ปุ่มที่ไม่โกหก

ทับอยู่บนหน้าจอ

คลาส	สืบทอดจาก	ทำอะไร
`GoDrawer`	CanvasLayer	พาเนลด้านข้าง
`GoPopover`	RefCounted	การ์ดที่ตรึงไว้กับที่
`GoContextMenu`	RefCounted	กดค้างและคลิกขวา
`GoConsole`	CanvasLayer	คอนโซลสำหรับนักพัฒนา

Go HUD Skill

gohud มี AI skill มาให้ — API ทั้งหมด เทมเพลตที่รันได้ทันที และตัวเปิดพรีวิว วางบล็อกเดียวด้านล่างให้เอเจนต์เขียนโค้ดของคุณ แล้วมันจะติดตั้ง gohud และรู้วิธีใช้

Go HUD Skill

ความอ่านง่ายเป็นเรื่องที่วัด ไม่ใช่กะเอาด้วยตา

"สวย" เป็นเรื่องรสนิยม แต่ "อ่านออก" วัดได้ ตัวอักษรสีเทาจาง ๆ ดูดีบนจอมอนิเตอร์ดี ๆ แล้วหายไปเลยบนมือถือกลางแดด — เลือกด้วยตาเปล่าเมื่อไร ก็รับประกันว่าเจอปัญหานี้เข้าสักวัน

python3 addons/gohud/tools/check_contrast.py

ทุกคู่สี และป้ายข้อความของปุ่มในทุกสถานะเทียบกับพาเนลที่มันวางอยู่ ถูกวัดกับ WCAG ครบทั้ง 14 ธีม สีกึ่งโปร่งใสจะถูกนำไปซ้อนบนพื้นหลังจริงก่อนวัด — เพราะถ้าวัดตรง ๆ จะได้ค่าอัตราส่วนที่ดีเกินกว่าที่ปรากฏบนหน้าจอจริง

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

การตรวจสอบ การออกรีลีส และเว็บไซต์นี้

จุดเข้าเดียวรันการตรวจสอบทั้งหมด แต่ละส่วนเห็นสิ่งที่ส่วนอื่นมองไม่เห็น

bash addons/gohud/tools/check_all.sh

การตรวจสอบ	จับอะไรได้
`run_tests.sh` ที่ขนาดหน้าจอ 4 แบบ	พฤติกรรมและเลย์เอาต์ของวิดเจ็ต ตำแหน่งแบบ RTL โฟกัสจากคีย์บอร์ด คอนทราสต์ของสกินขณะรัน และพรีเซ็ตทุกอัน
`new_project_check.sh`	การพึ่งพาโปรเจกต์แม่แบบซ่อนเร้น ใส่ `--zip` เพื่อตรวจไฟล์รีลีสอย่างที่ส่งมอบจริง ใส่ `--export` เพื่อตรวจบิลด์ Web
`check_contrast.py`	คอนทราสต์ตาม WCAG ของไฟล์ธีมทุกไฟล์ รวมสถานะของปุ่มและพาเนลกึ่งโปร่งใส
`check_generated.py` · `check_scaffold.sh`	ธีมที่สร้างขึ้นตรงกับจานสีของมัน และธีมชั่วคราวหนึ่งธีมสร้างได้และผ่านการวัดคอนทราสต์
`check_package.py`	เวอร์ชันที่อ่านจาก package.json การย้ายบันทึกการเปลี่ยนแปลง และเนื้อในไฟล์ ZIP ทดสอบบนสำเนาชั่วคราว
`check_site.py`	ลิงก์ จุดยึด ภาษาของหน้า อภิธานศัพท์ และตารางค่าปรับของเว็บไซต์นี้

ผลการรันครั้งล่าสุดที่บันทึกไว้ — 2026-09-13, Godot 4.7.2, macOS, เรนเดอเรอร์ Compatibility ผ่าน 438 จาก 438 รายการ ที่ 390×844, 844×390, 768×1024 และ 1280×800 ในโปรเจกต์เปล่า ผ่าน 438 จาก 438 อีกครั้งเมื่อเปิด autoload GoRuntime มีการ export เป็น Web ด้วย และไม่มีรายการคอนทราสต์ตกสักรายการใน 6 ธีม การรันครั้งนี้ยังไม่รวมเครื่อง Android หรือ iOS จริง

การออกเวอร์ชัน

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # ตรวจทั้งหมด → ZIP → ทดสอบ ZIP นั้นในโปรเจกต์เปล่า
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

เวอร์ชันคือค่าที่เขียนไว้ใน package.json การแพ็กเกจจะไม่เพิ่มเลขให้เองเด็ดขาด ถ้าจะออกเวอร์ชันใหม่ให้แก้เลขนั้นก่อน การรันที่สำเร็จจะตั้ง plugin.cfg และ GoUi.VERSION ให้ตรงกับค่านั้น และเฉพาะครั้งแรกที่แพ็กเกจเวอร์ชันนั้นจะย้ายบันทึกในหัวข้อ Unreleased ของ CHANGELOG.md ไปเป็นรายการที่มีวันที่กำกับ ถ้าแพ็กเกจเวอร์ชันเดิมซ้ำจะสร้างไฟล์ ZIP ใหม่มาแทนที่ไฟล์เดิม ถ้ารันแล้วล้มเหลวจะไม่มีอะไรเปลี่ยน ไฟล์ ZIP ไม่รวมเว็บไซต์นี้ เทสต์ เครื่องมือต่าง ๆ และ package.json

เว็บไซต์นี้

python3 addons/gohud/tools/make_site.py            # อภิธานศัพท์และตารางค่าปรับของสกิน สร้างจากซอร์สโดยตรง
python3 addons/gohud/tools/check_site.py           # ลิงก์ จุดยึด ภาษา อภิธานศัพท์ ตารางที่สร้างขึ้น
bash addons/gohud/tools/site_shots.sh /tmp/shots   # ภาพหน้าจอเดสก์ท็อปและมือถือของทุกหน้า

หน้าเว็บทั้งหมดเป็น HTML ธรรมดาใน www/ — ภาษาอังกฤษอยู่ที่ราก ภาษาเกาหลีอยู่ใน ko/ เวิร์กโฟลว์ของ GitHub Actions จะเผยแพร่โฟลเดอร์นั้นเป็นรากของเว็บไซต์

UI ของเกม ขับเคลื่อนด้วยรีซอร์สเพียงชิ้นเดียว

ใหม่: อาร์เคด การ์ตูน Material 3 และลุคสำหรับเด็ก

Material 3 — สำหรับหน้าจอแอป

สำหรับเด็ก — กล่องของเล่น

การ์ตูน — หมึกหนาเข้ม

อาร์เคด — ปุ่มลงสี

อาร์เคด: ปุ่มลงสีและบอร์ดหนา

ทุกปุ่มถูกลงสี

ยามค่ำคืน: arcade_dark

ลุคอาร์เคดทำงานอย่างไร

หน้าปุ่ม

ป้ายข้อความที่อ่านออก

หน้าต่าง

การ์ตูน: หมึกหนาเข้มและเงาคม

ทุกวิดเจ็ตตัดเส้นหมึก

ยามค่ำคืน: comic_dark

ลุคการ์ตูนทำงานอย่างไร

StyleBox เดียวสำหรับทุกหน้า

กดแล้วแบนราบ

สกินตัดเส้นหมึกส่วนที่เหลือ

หน้าต่างได้ป้ายชื่อเรื่อง

อ่านง่ายทั้งกลางวันและกลางคืน

เลย์เอาต์ไม่เปลี่ยน

สามค่าตั้งค่าและการเรียกหนึ่งครั้ง

หน้าตาเมื่ออยู่ในเกมจริง

สิ่งที่ gohud รับไปทำแทนคุณ

ทุกค่าขนาดคือโทเคน

ขนาดที่เห็น ≠ ขนาดที่กดได้

รอยบากหน้าจอและคีย์บอร์ด

ปุ่มย้อนกลับปิดทีละชั้น

ข้อความแจ้งเตือนไม่แย่งอินพุต

ไอคอนถูกเรียกด้วยชื่อ

สิบสี่ลุค หนึ่งบรรทัด

อ่านออกโดยวัดผลจริง

ติดตั้ง gohud

เริ่มใช้งาน

เปลี่ยนลุค — ทั้งสีและรูปทรง

คอลเลกชันยุคกลาง

หน้าจอเดียวกัน บนมือถือและบนเดสก์ท็อป

ชีตเดียวกัน คนละลุค

สกิน — ที่ที่ Theme เอื้อมไม่ถึง

วิดเจ็ต

การรอ การบอก การนับ

ฟอร์มและรายการ

รูปทรงที่เกมใช้จริง

ทับอยู่บนหน้าจอ

Go HUD Skill

ความอ่านง่ายเป็นเรื่องที่วัด ไม่ใช่กะเอาด้วยตา

การตรวจสอบ การออกรีลีส และเว็บไซต์นี้

การออกเวอร์ชัน

เว็บไซต์นี้

ยามค่ำคืน: `arcade_dark`

ยามค่ำคืน: `comic_dark`