โซลูชันทางเทคโนโลยีที่ดีในการสร้างแผนที่ ascii และตัวละครเคลื่อนไหวในเบราว์เซอร์ (เช่นป้อมปราการคนแคระ) หรือไม่ [ปิด]

ฉันต้องการสร้าง webapp สำหรับเว็บไซต์เกมของฉันที่เกี่ยวข้องกับการใช้ตัวอักษรเพื่อเป็นตัวแทนของสัตว์และผู้คนและให้พวกเขาย้ายไปรอบ ๆ บนแผนที่สี่เหลี่ยมด้วย AI อิสระ (เซิร์ฟเวอร์ขับเคลื่อน)

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

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

ฉันรู้<canvas>ว่าฉันไม่รู้ว่าความสามารถของมันเหมาะสมกับกรณีการใช้งานนี้หรือไม่ แน่นอนว่าจาวาสคริปต์จำนวนหนึ่งนั้นจำเป็นต้องมี

มีไลบรารี javascript หรือไลบรารี่ canvas ที่เหมาะสมกับกรณีการใช้งานนี้หรือไม่? เทคโนโลยีอื่นที่ฉันไม่ทราบ? ใครรู้ตัวอย่างของเว็บไซต์ที่ทำอะไรทำนองนี้เพื่อที่จะได้เปลไอเดียจากพวกเขา

ฉันได้สร้างไลบรารีแสดงอักขระสำหรับเว็บUnicodetiles.jsซึ่งฉันไม่เพียงใช้เวลาในการปรับให้เหมาะสมเท่านั้น แต่ยังสำรวจวิธีการนำเสนอข้อความที่แตกต่างกันอีกด้วย มันมีสามเรนเดอร์:

1. DOM ซึ่งใช้เมทริกซ์ของ<div>องค์ประกอบในการแสดงสัญลักษณ์แต่ละอันด้วยสีพื้นหน้าและสีพื้นหลังที่ปรับแต่งได้
2. Canvas ซึ่งวาดอักขระโดยใช้<canvas>องค์ประกอบ สิ่งนี้เร็วกว่ามากและมีการทดสอบประสิทธิภาพในการสำรองข้อมูล: http://tapiov.net/unicodetiles.js/tests/
3. WebGL ซึ่งใช้องค์ประกอบ Canvas เพื่อสร้างพื้นผิวแบบอักษรและแสดงผลโดยใช้ WebGL ซึ่งเร็วกว่าและปรับขนาดได้มากสำหรับขนาดวิวพอร์ตขนาดใหญ่ แต่ไม่รองรับเบราว์เซอร์

โปรดทราบว่าการทดสอบประสิทธิภาพที่เชื่อมโยงนั้นค่อนข้างรุนแรงการเปลี่ยนทุกตัวละครทุกเฟรม ในทางปฏิบัติแม้แต่ DOM renderer ก็เร็วพอสำหรับจุดประสงค์ส่วนใหญ่

หากคุณตัดสินใจที่จะสร้างห้องสมุดของคุณเองฉันยังคงแนะนำให้ใช้ผืนผ้าใบเพราะดูเหมือนว่าจะทำงานได้ดีขึ้น การใช้ WebGL เพียงอย่างเดียวจะ จำกัด ฐานผู้ใช้และมีความซับซ้อนในการนำไปใช้ (Unicodetiles มีกลไกทางเลือกอัตโนมัติ)

ห้องสมุดอื่นที่ผมเคยได้ยินปัญหามากเมื่อเร็ว ๆ นี้rot.js มันได้รับการออกแบบมาโดยเฉพาะสำหรับโร๊คไลค์เช่นเดียวกับระบบ FOV และเครื่องกำเนิดไฟฟ้าดันเจี้ยน หากคุณต้องการแพ็กเกจที่สมบูรณ์นี่อาจเป็นหนทางไป

ฉันคิดว่าวิธีที่มีประสิทธิภาพที่สุดคือการลอกเลียนแบบ แสดงถึงองค์ประกอบเป้าหมายโดยใช้ฟอนต์แบบสไปรท์ของคุณเองราวกับว่าคุณกำลังแสดงผลหน้าจอ 2D ปกติ วิธีการนี้ทำให้แน่ใจได้ว่าไม่มีสิ่งแปลกเกิดขึ้นเมื่อคนขาดแบบอักษรหรือใช้ภาษาที่แตกต่างกันมาก (จีนรัสเซีย)

แบบอักษรและข้อความเป็นหนึ่งในสิ่งที่ยากที่สุดในการทำให้พิกเซลสมบูรณ์แบบในทุกสถานที่บนเบราว์เซอร์ทั้งหมด แม้ในขณะที่ฝังแบบอักษรและการใช้เบราว์เซอร์เวทมนตร์ CSS และการตั้งค่าการใช้งานก็ยังสามารถแทนที่และเปลี่ยนแปลงได้ สำหรับเว็บไซต์ปกติข้อความที่สมบูรณ์แบบพิกเซลไม่เป็นปัญหา แต่ในเกมเช่นป้อมปราการ Dwarf มีพิกเซลเพียงไม่กี่พิกเซลที่จะนำไปสู่มุมมองที่ไม่ต่อเนื่องกันอย่างมาก แม้ว่าจะไม่ได้ใช้เบราว์เซอร์ แต่เป็นแอปพลิเคชันทั่วไปก็มีปัญหาเกี่ยวกับการแสดงข้อความ ดังนั้นแม้แต่ป้อมปราการคนแคระเองก็ใช้วิธีที่ฉันอธิบาย

http://en.wikipedia.org/wiki/Dwarf_Fortress

การแสดงผลบนหน้าจอใช้รหัสหน้า 437 ที่ปรับเปลี่ยนเล็กน้อยใน 16 สีที่แตกต่างกันซึ่งนำไปใช้เป็นบิตแมปแสดงผลด้วย OpenGL

แก้ไข: เนื่องจากฉันได้รับความคิดเห็นฉันได้ขยายคำตอบเล็กน้อย

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

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

ในการจัดการกับอักขระแต่ละตัวคุณสามารถสร้าง a <table>ด้วยจำนวนแถวและคอลัมน์ที่ถูกต้องโดยที่แต่ละตัว<td>มี ID ที่ประกอบด้วย x- และ y- พิกัด ด้วยวิธีนี้คุณสามารถระบุที่อยู่แต่ละเซลล์ด้วย ID และเปลี่ยน innerHTML เพื่อเปลี่ยนตัวอักษรและเปลี่ยนคลาส css เพื่อเปลี่ยนสี

อย่างไรก็ตามการใช้ Canvasอาจทำได้เร็วกว่าเพราะคุณไม่ต้องจัดการต้นไม้ DOM ขนาดใหญ่สำหรับอักขระแต่ละตัวที่คุณต้องแทนที่ ป้อมปราการคนแคระกำลังทำสิ่งที่คล้ายกันโดยวิธี อักขระที่ใช้เพื่อแสดงวัตถุเป็นบิตแมปไม่ใช่เอาท์พุทข้อความจริงและวาดขึ้นโดยใช้กราฟิก API 2d ผ้าใบ HTML5 นั้นเพียบพร้อมสำหรับสิ่งนี้ มันมีวิธีcontext.fillTextซึ่งช่วยให้คุณสามารถวาดข้อความบนผืนผ้าใบ สามารถใช้วาดอักขระแต่ละตัวได้ คุณสามารถเปลี่ยนขนาดและใบหน้าของตัวอักษรโดยการจัดการกับตัวแปรcontext.fontและสีของตัวอักษรแต่ละตัวโดยการเรียกcontext.fillStyle

โปรดทราบว่าการเรียก fillText หลายร้อยครั้งต่อเฟรมอาจช้าเนื่องจากการใช้แบบอักษร rasterizing แพงและไม่มีเบราว์เซอร์ที่ฉันรู้จักใช้แคช ซึ่งหมายความว่าเมื่อคุณแสดงตัวอักษรเดียวกันด้วยการตั้งค่าเดียวกันร้อยครั้งมันจะได้รับการ rasterized ร้อยครั้ง เพื่อเพิ่มประสิทธิภาพการทำงานคุณสามารถแคชลักษณะ rasterized ของตัวอักษรแต่ละตัวมีสีแต่ละสีบนผืนผ้าใบที่ซ่อนอยู่และแล้ววาดภาพที่ซ่อนอยู่เหล่านี้โดยใช้context.drawImage การคัดลอกจากผืนผ้าใบหนึ่งไปยังอีกผืนหนึ่งมักเร็วกว่าการทำแรสเตอร์แบบอักษร

ขณะนี้ฉันกำลังพัฒนาเกม 2d โดยใช้ Canvas และสังเกตว่าผู้รับประทาน FPS ที่ใหญ่ที่สุดคือการวาดตัวอักษร เมื่อฉันเพิ่มแคชสำหรับข้อความแบบแรสเตอร์มันปรับปรุงประสิทธิภาพมากขึ้น

ตกลงนี่เป็นเพียงการแทงในความมืดและฉันไม่รู้ว่ามันทำให้เกิดอะไรขึ้น

โดยทั่วไปคุณใช้คอนโซลเคล็ดลับแบบเดียวกัน (เทอร์มินัลอาคา) ในสมัยก่อน ก่อนอื่นคุณต้องเริ่มจากตัวอักษรแบบ monospace คุณมี M บรรทัดที่มีอักขระ N ตัว ดังนั้นคุณเพียงแค่ทิ้งข้อความลงใน div ที่มีความกว้างเพียงพอ (width: N em?) แล้ววางตัวละครทุกบรรทัดในบรรทัด N; ในกรณีนี้<br/>ก\n.

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

หากคุณต้องการเจาะจงอย่างแท้จริงคุณสามารถใช้ @ font-face เพื่อให้แน่ใจว่าคุณมีแบบอักษร monospace แบบเดียวกันทุกที่

คิดในแง่ของร่ายมนตร์ แยกการแสดงข้อความออกจากความหมายที่อยู่เบื้องหลัง ตัวอย่างเช่น:

(รหัสหลอก)

if (display.hitGlyph)
    glyph = Glyph.Asterisk;

display(glyph);

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

Glyph.Asterisk = "*";

ที่จริงแล้วแผนที่ glyph สามารถค้นหาในตาราง ascii ที่มีการเข้ารหัสได้หลายแบบ จุดที่นี่เป็นเพียงการแยกเมื่อจะแสดงพร้อมกับสิ่งที่จะแสดง ฉันอยากจะแนะนำให้ทำกรอบตั้งแต่เริ่มต้น มันจะทำให้คุณมีอิสระมากขึ้น