วิธีการจับคู่ขนาดตัวอักษรกับความละเอียดหน้าจอ?

ดังนั้นฉันทำงานเกมโดยใช้ LibGDX และฉันมีปัญหา

เพื่อให้เกมของฉันเหมาะสมกับความละเอียดที่สุดฉันได้สร้างเนื้อหาพื้นฐานสำหรับแต่ละอัตราส่วนตัวอย่างเช่นรูปภาพพื้นหลังเมนูหลักฉันสร้างเป็น 800X600 สำหรับ 4: 3, 1280X720 สำหรับ 16: 9 เป็นต้น

ตอนนี้ฉันกำลังพยายามรวมTextButtonเกมเข้าด้วยกันเพื่อเป็นทางเลือก ปัญหาของฉันคือฉันไม่สามารถหาขนาดตัวอักษรที่ตรงกับความละเอียดของหน้าจอได้ มีวิธีคิดออกหรือไม่ฉันต้องไปทีละความละเอียดแต่ละฉันมีและตรงกับข้อความที่ความละเอียดด้วยตนเอง?

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

ความหนาแน่นของพิกเซลวัดเป็นพิกเซลต่อนิ้ว ( PPI ) หรือพิกเซลต่อเซนติเมตร นอกจากนี้ยังมีหน่วยวัดที่เรียกว่าความหนาแน่นของพิกเซลที่เป็นอิสระ ( DP ) มันถูกกำหนดว่า1dpเป็นขนาดหนึ่งพิกเซลที่มีบน160 PPIหน้าจอ

ตอนนี้กลับมาที่แบบอักษรลองทำแบบทดสอบ: วางแล็ปท็อปของคุณให้ทำงานที่ 720p ดูขนาดตัวอักษร ตอนนี้เสียบเข้ากับจอภาพ 1080p 42 "ของเดสก์ท็อปของคุณถ้าจอภาพของคุณส่งออกข้อมูลที่ถูกต้องเกี่ยวกับขนาดของมันแล้วแบบอักษรควรมีขนาดเดียวกันกับที่มันมีบนหน้าจอ 720p ลองจินตนาการว่ามันแปลกแค่ไหน แล็ปท็อปมีขนาดแตกต่างจากข้อความบนหน้าจอเดสก์ท็อปของคุณโดยที่กล่าวว่าความละเอียดขนาดใหญ่ควรให้รายละเอียดเพิ่มเติมกับแบบอักษร

ความจริงเดียวกันสามารถสังเกตได้ในโปรแกรมแก้ไขข้อความ 72ptอักษรควรมองบนหน้าจอเดียวกันมันจะเมื่อพิมพ์ลงบนกระดาษ

ทั้งหมดนี้หมายความว่าคุณอาจต้องการขนาดที่เท่ากันในทุกขนาดจอแสดงผล (มีข้อยกเว้นบางประการ) ถ้าคุณต้องการสร้างฐานตัวเองที่ไหนสักแห่งเว็บไซต์มักจะใช้12ptแบบอักษร, MS Windows ใช้11ptและ12ptแบบอักษร

แผนภูมินี้ (รวมอยู่ที่ด้านล่างของคำตอบ) บอกเรา12ptใน CSS เท่ากับคร่าวๆ16pxใน CSS (ราวกับว่ามันไม่สับสนพอpxใน CSS ก็เหมือนกับdpทุกที่) ดังนั้นสมมติว่าคุณ จะสร้างแบบอักษรของคุณ16dpใน LibGDX

ในเกมของคุณใช้FreeTypeFontGeneratorเพื่อสร้างแบบอักษรแบบไดนามิกด้วยวิธีนี้คุณสามารถพิจารณาความหนาแน่นของหน้าจอเมื่อสร้างพวกเขา:

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

การทำงานนี้เพราะGdx.graphics.getDensity()เท่ากับYourScreenDensity/160ดังนั้นจึงเป็น "ตัวคูณสเกล" เพื่อนำสิ่งต่าง ๆ มาสู่ขนาดที่พวกเขาจะอยู่บนหน้าจอ 160ppi

เกี่ยวกับข้อยกเว้นที่ฉันกล่าวถึงก่อนหน้านี้: คุณอาจต้องการแบบอักษรที่ปรับขนาดตามขนาดหน้าจอในกรณีที่มีโลโก้โปรโมชั่น ฯลฯ แต่โปรดจำไว้ว่าคุณควรจะทำสิ่งเหล่านี้ในโปรแกรมแก้ไขกราฟิกเช่น Photoshop หรือ Gimp , อย่างไรก็ตาม.

ข้อยกเว้นอื่น ๆ คือข้อความบนหน้าจอเล็ก ๆ หน้าจอโทรศัพท์ขนาด 4.5 "หรือเล็กกว่าสวมใส่ได้โดยปกติแล้วคุณจะไม่มีเวลาทำเนื้อหาการเลื่อนมิฉะนั้นคุณจะไม่สามารถใส่เนื้อหามากมายบนหน้าจอนั้นได้คุณอาจลองลดขนาดตัวอักษร1dpลง ผู้อ่านอาจมีโทรศัพท์อยู่ใกล้กับใบหน้าของพวกเขาพวกเขาอาจไม่มีปัญหาในการอ่านโปรดทราบว่าคุณอาจรบกวนผู้เล่นที่อ่านข้อความเล็ก ๆ ที่อ่านไม่ได้

TL; DR:

• ขนาดทางกายภาพโดยประมาณจะไม่เปลี่ยนแปลงโดยตรงกับขนาดหน้าจอหรือความละเอียด แต่เป็นการรวมกันของทั้งสองอย่าง ( screenSize/resolutionPPI ที่มีชื่อเสียง)
• คิดว่าจุดและDP ลืมพิกเซลหน้าจอจนกว่าคุณจะต้องวาดผลลัพธ์ขั้นสุดท้าย
• สร้างแบบอักษรของคุณในขณะทำงานด้วยขนาดที่เหมาะสม
• การแปลงพิกเซลDPเป็นพิกเซลหน้าจอ:pixels = dp * Gdx.graphics.getDensity();
• หากคุณใช้เครื่องมือที่ไม่มีตัวแปลงให้เป็นdpเช่น LibGDX Gdx.graphics.getDensity()คุณสามารถลอง: densityFactor = Screen.getPixelsPerInch() / 160.0fแล้วpixels = dp * densityFactor

แก้ไข:

2014, 25 มิ.ย. บน Google IO, Matias ประกาศแนวทางรูปแบบใหม่สำหรับ Android มันมีตัวอักษร Roboto และแนวทางการพิมพ์ใหม่ ใช้ตารางนี้เป็นแนวทาง:

EDIT2:

แผนภูมิขนาดแบบอักษร CSS ที่รวมอยู่ในกรณีที่การเชื่อมโยงเน่า: