SimCity ที่รันในเว็บเบราว์เซอร์ด้วย WebAssembly และ OpenGL

 (micropolisweb.com)
3 คะแนน โดย GN⁺ 2024-06-17 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Micropolis Web ซึ่งอ้างอิงจาก SimCity Classic ต้นฉบับของ Maxis ถูกเผยแพร่ในรูปแบบที่รันได้ในเบราว์เซอร์ ทำให้สามารถลองเล่นเกมจำลองการสร้างเมืองระดับคลาสสิกได้โดยไม่ต้องติดตั้งแยก
  • โปรเจ็กต์นี้เป็นเวอร์ชันที่ Don Hopkins พอร์ตมาจากเกมที่ Will Wright ออกแบบ และยังคง อยู่ในสถานะทดลองที่ยังไม่เสร็จสมบูรณ์ พร้อมมีการเปลี่ยนแปลงอย่างต่อเนื่อง
  • มีทั้ง GitHub repository, วิดีโอเดโม, หนังสือและไดอะแกรมของ Chaim Gingold ให้มาพร้อมกัน เพื่อให้สำรวจ การพัฒนาและประวัติของ SimCity ได้ลึกยิ่งขึ้น
  • การควบคุมใช้การลากเมาส์·ล้อเมาส์, ปุ่มลูกศร, ปุ่มตัวอักษร และปุ่มตัวเลข สำหรับการเลื่อน, ซูม, โหลดเมือง, ปรับความเร็ว, เปลี่ยนอัตราภาษี และสลับ tileset
  • ชื่อ “Micropolis” ใช้งานภายใต้เงื่อนไขของ Micropolis Public Name License และฟีเจอร์เพิ่มเติมกับ easter egg ยังอยู่ระหว่างการเตรียม

Micropolis Web ที่รันในเบราว์เซอร์

  • Micropolis Web คือ Micropolis เวอร์ชันที่ทำงานด้วย WebAssembly
  • พื้นฐานคือ SimCity Classic ต้นฉบับของ Maxis โดยเป็นเกมที่ Will Wright ออกแบบและ Don Hopkins เป็นผู้พอร์ต
  • สถานะปัจจุบันไม่ใช่ผลิตภัณฑ์ที่เสร็จสมบูรณ์ แต่ใกล้เคียงกับงานทดลองที่ยังไม่เสร็จและเปลี่ยนแปลงอยู่ตลอด
  • มีลิงก์ไปยัง Patreon เพื่อสนับสนุนการพัฒนาเพิ่มเติม
  • ดู source repository ได้ที่ MicropolisCore
  • วิดีโอที่เกี่ยวข้อง:
  • เอกสารอ้างอิง:
  • ชื่อ “Micropolis” ใช้งานภายใต้เงื่อนไขของ Micropolis Public Name License

วิธีควบคุมและข้อสังเกตที่ยังเหลืออยู่

  • การควบคุมด้วยเมาส์

    • ลากด้วยปุ่มซ้ายเพื่อเลื่อนหน้าจอ
    • ใช้ล้อเมาส์เพื่อซูมเข้า·ออก

  • การควบคุมด้วยคีย์บอร์ด

    • ใช้ปุ่มลูกศรเพื่อเลื่อนหน้าจอ
    • ใช้ปุ่มลูกน้ำและจุดเพื่อซูมเข้า·ออก
    • ใช้ปุ่มตัวอักษรเพื่อโหลดเมืองหลายแห่ง
    • ใช้ปุ่ม \ เพื่อสร้าง
    • ใช้ปุ่มตัวเลขเพื่อตั้งค่าความเร็ว
    • ใช้ปุ่ม 0 เพื่อสลับหยุดชั่วคราว
    • ใช้ปุ่มวงเล็บเหลี่ยมเพื่อลดหรือเพิ่มอัตราภาษี
    • ใช้ปุ่ม - และ = เพื่อสลับ tileset
    • กดปุ่ม “X” ด้านบนเพื่อซ่อนหน้าต่างคำแนะนำได้
    • ฟีเจอร์เพิ่มเติมและ easter egg กำลังอยู่ระหว่างการเตรียม
    • ข้อความเตือนเริ่มต้นด้วยการบอกว่าอย่ากดสเปซบาร์ แต่ในเนื้อหาที่ให้มาคำอธิบายต่อจากนั้นยังไม่สมบูรณ์

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-17
ความคิดเห็นบน Hacker News

  • การพอร์ตเกมเก่า ๆ มาเล่นบนเว็บเป็นเรื่องสนุก เกมเล็ก ๆ หลายเกมสมัยนี้ยังมีขนาดเล็กกว่าเว็บเพจทั่วไป จึง โหลดได้เร็ว และรันได้ดี
    เพิ่งพอร์ต Quake 3 เสร็จ และกำลังลองเล่นอย่างสนุก: https://thelongestyard.link/

    • เหตุผลที่ไม่ชอบเบราว์เซอร์เวลาทำเกมก็คือ input lag นี่แหละ แต่ผลงานนี้ก็ยอดเยี่ยม
    • อยากรู้ว่าถ้าจะทำเรื่องแบบนี้ให้ดีขึ้น ควรเริ่มจากตรงไหน โดยเฉพาะด้านการ พอร์ตเกมเก่าไปเป็น Wasm

  • เดโม Micropolis Web 1: https://www.youtube.com/watch?v=wlHGfNlE8Os
    Micropolis Web เป็น เวอร์ชันบนเบราว์เซอร์ของ Micropolis ซึ่งเป็น SimCity แบบโอเพนซอร์ส และใช้ WebAssembly, WebGL, SvelteKit โดยอิงจากโค้ด SimCity Classic ดั้งเดิมที่ออกแบบโดย Will Wright และพอร์ตโดย Don Hopkins เดโมแรกนี้รันตัวจำลอง WebAssembly และแอนิเมชันไทล์ WebGL ได้แล้ว แต่ส่วนติดต่อผู้ใช้ส่วนใหญ่ยังอยู่ระหว่างพัฒนา
    เว็บไซต์สด: https://MicropolisWeb.com
    ซอร์สและเอกสาร: https://github.com/SimHacker/MicropolisCore
    หนังสือ "Building SimCity" ของ Chaim Gingold: https://mitpress.mit.edu/9780262547482/building-simcity/
    "SimCity Reverse Diagrams" ของ Chaim Gingold: https://smalltalkzoo.thechm.org/users/Dan/uploads/SimCityRev...
    Micropolis Web Space Inventory Cellular Automata Music 1: https://www.youtube.com/watch?v=BBVyCpmVQew
    เพลงสร้างโดย Juho Hietala, Blamstrain และ Space Inventory Cellular Automata นำไปใช้งานโดย Don Hopkins: https://blamstrain.com/

    • น่าทึ่งที่ Building SimCity ของ Chaim Gingold เพิ่งออกวางจำหน่ายเมื่อวันที่ 4 มิถุนายน 2024 เมื่อก่อนชอบไดอะแกรมอัลกอริทึมของ SimCity มาก และเหมือนเคยอ่านวิทยานิพนธ์ปริญญาเอกที่ลงรายละเอียดการทำงานภายในของ SimCity ด้วย
      Gingold, Chaim. “Play Design.” วิทยานิพนธ์ปริญญาเอก, University of California Santa Cruz, 2016. https://www.proquest.com/docview/1806122688
      การพอร์ต Micropolis ไปเป็น Wasm ดูเหมือนจะเป็นก้าวใหม่ของการพัฒนา SimCity Classic บน Macintosh ส่งผลอย่างมากต่อวิธีที่ผมคิดเกี่ยวกับคอมพิวเตอร์และซอฟต์แวร์ในวัยเด็ก และดีใจที่ได้เห็นมันถูกเติมชีวิตใหม่อีกครั้ง

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

  • บนมือถือไม่ได้คาดหวังอะไรมาก แต่หน้านี้ใน Firefox บน Android ทำให้เบราว์เซอร์ค้างไปเลย ต้องฆ่าโปรเซสทิ้ง และเรื่องแบบนี้เกิดขึ้นไม่บ่อย
    อนึ่ง ผมมีเกมเล็ก ๆ ที่พอร์ตไปให้รันในเบราว์เซอร์เอง การทำให้มันรันได้ง่ายมากด้วยชุด Emscripten+SDL2 แต่พูดตามตรง งานที่ใช้แรงมากที่สุดคือการทำให้เล่นบนโทรศัพท์ได้จริง ๆ: https://play.neverball.org/

    • ตั้งใจจะรองรับมือถือแน่นอน บั๊กที่ทำให้รันบน Firefox ของ Ubuntu ไม่ได้ก็แก้ไปแล้วหนึ่งรายการ ต้องขอบคุณรายงานบั๊กที่เขียนมาอย่างดีพร้อม stack trace ลองใหม่อีกครั้ง และถ้ายังไม่ได้ก็อยากให้ช่วยรายงานบั๊กพร้อม stack trace และข้อมูลแพลตฟอร์ม
      https://github.com/SimHacker/MicropolisCore/issues/1
      แทนที่จะรอจนเสร็จและสมบูรณ์แบบ ผมอยากเปิดให้คนอื่นลองรันได้เร็วที่สุดเท่าที่ทำได้ ดังนั้นยังมีงานต้องทำอีกมาก ทั้งส่วนติดต่อผู้ใช้ ความเสถียร การรองรับข้ามแพลตฟอร์ม มือถือ ฯลฯ
      ทันทีที่ซิมูเลเตอร์และตัวเรนเดอร์ไทล์ทำงานได้ ผมก็ใส่การซูม/เลื่อนแบบขั้นต่ำ อินเทอร์เฟซควบคุมด้วยคีย์บอร์ด และหน้าต่างคำใบ้ที่ปิดได้ด้วยปุ่ม "+" มุมขวาบน
      สิ่งที่ตั้งตารอจริง ๆ คือการผสานกับภาษาโปรแกรมมิงเชิงภาพอย่าง Snap! เพื่อให้สร้างอินเทอร์เฟซทางเลือกได้ เช่น live coding, พื้นที่ปลั๊กอิน, หุ่นยนต์, ระบบมอนิเตอร์และควบคุม, การทำ data visualization และ export, แดชบอร์ด Grafana
      โทรศัพท์ Android สามารถต่อเข้ากับ Mac หรือ PC ด้วยสาย USB ส่วน iPhone ต่อเข้ากับ Mac แล้วใช้ Chrome หรือ Safari debugger บน Mac เพื่อตรวจดู remote console, ดีบัก และทำ live coding ได้ด้วย หากเงื่อนไขเหมาะสมก็อาจทำผ่าน Wi-Fi ได้ แต่ Google อาจถอดฟีเจอร์นี้ออกไปแล้ว หรือ Apple อาจบล็อกไว้ตั้งแต่แรก
    • แปลกใจที่บน Firefox ของโทรศัพท์ Android ราคาถูกอายุ 4 ปี เฟรมเรตสูงและแทบไม่กระตุกเลย ถึงจะไม่ได้มีเท็กซ์เจอร์หรือโพลิกอนเยอะมาก แต่ไม่คุ้นกับประสิทธิภาพระดับนี้บนเบราว์เซอร์ของโทรศัพท์เครื่องนี้
    • บน Firefox ของ Android ฝั่งผมก็ไม่ค้างเหมือนกัน เพียงแต่เคยเห็นว่า Firefox รุ่นใหม่ ๆ บางเวอร์ชันจัดการ PDF ได้ไม่ค่อยดี อาจเกี่ยวกับความต่างของเวอร์ชันก็ได้

  • เคยพอร์ต ไคลเอนต์ RuneScape ขึ้นเว็บมาก่อน
    https://play.rsps.app/
    ใช้ Wasm, TypeScript, WebGL

  • ซอร์สรีโพซิทอรี: https://github.com/SimHacker/MicropolisCore

  • สิ่งที่เกิดขึ้นเมื่อกด Spacebar น่าทึ่งจริง ๆ แฟร็กทัล สวยมาก

    • Space Inventory ได้แรงบันดาลใจจากรีวิว World Quester 2 ของ Game Helpin' Squad และผมก็อยากทำเมนูกับส่วนติดต่อผู้ใช้ของ Micropolis ให้สุดยอดเท่า World Quester 2 ด้วย
      https://www.youtube.com/watch?v=0Gy9hJauXns

  • สงสัยว่าโมเดลภาษาขนาดใหญ่จะสามารถ พอร์ตเกมแบบนี้ได้ทันที หรือไม่

    • เป็นคำถามที่ดี และน่าสนใจที่จะถกกัน แนวทางที่ดีที่สุดคือใช้มันเหมือนเครื่องมืออื่น ๆ ไม่ใช่คาดหวังให้มันทำงานยากทั้งหมดแทนเรา มันช่วยลดงานน่าเบื่อได้มากและช่วยให้เราเป็นโปรแกรมเมอร์ที่ดีขึ้นได้ แต่ไม่ใช่สิ่งทดแทน
      ผมใช้ ChatGPT ในการพัฒนาอยู่และมันช่วยได้มาก แต่ต้องทำซ้ำและสั่งงานหลายรอบ จึงยังห่างไกลจากคำว่าได้ทันทีมาก LLM คงไม่มาแทนโปรแกรมเมอร์ แต่โปรแกรมเมอร์ที่ใช้ LLM จะมาแทนโปรแกรมเมอร์ที่ไม่ใช้ LLM
      มันมีประโยชน์ในการให้อธิบายเอกสารและ best practices ของเครื่องมืออย่าง Emscripten และ Embind, ทำให้ makefile ทำงานได้, วิเคราะห์โค้ด, แยกเมธอดและตัวแปรอินสแตนซ์เป็น private/public, และเขียน boilerplate สำหรับประกาศ Embind กับเอกสาร นอกจากนี้ยังใช้เหมือน grep ขั้นสูงที่เข้าใจไวยากรณ์โค้ดและรับคำถามภาษาอังกฤษได้
      https://github.com/SimHacker/MicropolisCore/blob/main/Microp...
      กระบวนการนี้ไม่ใช่ทั้งอัตโนมัติและทันที โดยรวมแล้วใช้เวลา 33 ปีและยังไม่เสร็จ ผมต้องชี้นำ ChatGPT อย่างมาก โดยอาศัยประสบการณ์ที่เคยพอร์ต SimCity เวอร์ชัน Mac ไปยัง HyperLook ของระบบหน้าต่าง NeWS ในปี 1991 และต่อมาก็ย้ายไปยังหลายแพลตฟอร์ม
      เกมอย่าง SimCity คุ้มค่าที่จะทิ้ง Mac UI แล้วแยกซิมูเลเตอร์ออกจาก UI จากนั้นเขียน UI คุณภาพสูงใหม่สำหรับ HyperLook ของ NeWS ต่อมายังทำ UI สำหรับ TCL/Tk บน X11 ด้วย และโครงสร้างนี้ทำให้ SimCity แบบมัลติเพลเยอร์ผ่านเครือข่ายเป็นไปได้
      X11 SimCity Demo: https://www.youtube.com/watch?v=Jvi98wVUmQA
      Multi Player SimCityNet for X11 on Linux: https://www.youtube.com/watch?v=_fVl4dGwUrA
      TCL Doc: https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Callbacks: https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      หลายสิบปีต่อมา หลังจากเปิดซอร์ส SimCity และออกเวอร์ชัน TCL/Tk/X11 สำหรับ OLPC และ Linux แล้ว ผมได้จัดระเบียบโค้ดซิมูเลเตอร์ใหม่เป็น C++ และใช้ SWIG กำหนด API กับคอลแบ็กเพื่อเชื่อมเข้ากับ Python การรีแฟกเตอร์เป็น C++ ช่วยได้มากกับการทำให้เป็นโมดูล การทำเอกสาร และการพอร์ตไปหลายแพลตฟอร์ม
      Micropolis Core: https://github.com/SimHacker/micropolis/tree/master/Micropol...
      Doxygen documentation (current): https://micropolisweb.com/doc/
      Development Plan (old): https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      OLPC Plan (old): https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      To Do (old): https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      User Interface Plan (old): https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      OLPC Notes (old): https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      ผมยังทำอินเทอร์เฟซเดสก์ท็อป PyGTK/Cairo/X11 และอินเทอร์เฟซเว็บไคลเอนต์/เซิร์ฟเวอร์ที่ใช้ TurboGears/AMF/OpenLaszlo/Flash ด้วย
      Micropolis Online (SimCity) Web Demo (old): https://www.youtube.com/watch?v=8snnqQSI0GE
      Bil Simser ได้ใช้ SWIG รวมเอนจินซิมูเลเตอร์เข้ากับ C#: https://github.com/SimHacker/micropolis/tree/master/Micropol...
      เพราะมีเอกสารออกแบบและประสบการณ์การทำจริงเหล่านี้ ผมจึงสามารถพรอมป์ต ChatGPT เรื่องการออกแบบ API ของ Emscripten/Embind ได้ดี และมันมีประโยชน์ในการเขียน boilerplate กับตรวจสอบการออกแบบ แต่ไม่ได้ช่วยมากนักในการคิดตัวการออกแบบขึ้นมาเอง นอกจากนี้ยังมีประโยชน์มากในการเรียนรายละเอียดและ best practices ของ TypeScript, SvelteKit, node, WebGL, canvas, CSS, HTML

  • ทำไมแทบทุกบล็อกเมืองถึงมี สถานีดับเพลิง อยู่ล่ะ?

  • ควบคุมไม่ได้ และทันทีที่เบราว์เซอร์เริ่มโหลดอะไรบางอย่าง พัดลม CPU ก็เริ่มหมุน นี่แน่ใจหรือว่าไม่ใช่แค่ ตัวขุดคริปโต แบบลวก ๆ? ถ้าไม่ใช่ ก็ไม่เข้าใจว่าจะเปิดเผยของที่ใช้งานไม่ได้ไปทำไม

    • จุดประสงค์คือเพื่อ รับฟีดแบ็ก ว่ามันทำงานอย่างไรบนระบบหลากหลายแบบที่ผมเข้าถึงไม่ได้ สำหรับซอฟต์แวร์ โดยเฉพาะโอเพนซอร์ส ผมคิดว่าการรับฟีดแบ็กให้เร็วที่สุดเท่าที่ทำได้ระหว่างการพัฒนา ดีกว่าซ่อนเอาไว้จนกว่าจะเสร็จสมบูรณ์แบบ
      ผมไม่มีเงินซื้อคอมพิวเตอร์และโทรศัพท์ทุกชนิด และต่อให้มี ก็ไม่มีเวลาทดสอบทั้งหมดด้วยตัวเองอยู่ดี งานนี้ก็ไม่ได้มีใครจ่ายเงินให้ทำ แต่ถ้าต้องการก็สนับสนุนผ่าน Patron ได้: https://www.patreon.com/DonHopkins
      ถึงอย่างนั้นโปรเจกต์นี้ไม่ใช่แหล่งรายได้ แต่เป็นงานที่ทำด้วยใจรัก ตอนนี้ยังมีข้อเสนอพิเศษคือยอมเงียบปาก 5 นาทีต่อเดือนในหัวข้อที่คุณต้องการด้วย
      ซอร์สโค้ดทั้งหมดดูได้บน GitHub และคุณสามารถรายงานบั๊กหรือบิลด์เองได้ เบราว์เซอร์เองก็มีเครื่องมือดีบักและรีเวิร์สเอนจิเนียริงสำหรับตรวจดูไบนารี WebAssembly และ JavaScript ที่คอมไพล์แล้วด้วย WebGL shader เป็นข้อความธรรมดา จึงตรวจสอบได้ด้วยว่าตรงกับซอร์สในรีโพซิทอรีหรือไม่
      https://github.com/SimHacker/MicropolisCore
      ถ้าพบหลักฐานว่าเป็นซอฟต์แวร์ขุดคริปโตแบบลวก ๆ ก็รายงานไปยัง FBI, Interpol, GitHub ได้เลย ผมเผยแพร่ซอร์สและไบนารีด้วยชื่อของผม บัญชี GitHub ของผม และโดเมนของผมเอง ดังนั้นการตามแหล่งที่มาก็ง่าย
      ตัวอย่างรายงานบั๊กที่มีประโยชน์คืออันที่ระบุปัญหาพร้อมข้อมูลระบบและ stack trace ซึ่งทำให้แก้ได้ภายในไม่กี่นาที: https://github.com/SimHacker/MicropolisCore/issues/1
      ผมก็สงสัยด้วยว่าคุณได้ลองกดปุ่มตัวเลขสำหรับปรับความเร็วหรือยัง โดยอิงจากปุ่มตัวเลขแถวบนของคีย์บอร์ด "1" จะช้าลงเป็น 1 เฟรมต่อวินาที และ 1 tick ของตัวจำลองต่อเฟรม ส่วน "9" จะรันที่ 120 เฟรมต่อวินาที และ 50 tick ต่อเฟรม บน Chrome ใน M1 Mac ของผมมันลื่น และอินเทอร์เฟซก็ตอบสนองค่อนข้างดี
      ถ้าบอกได้ว่าการควบคุมอะไรที่ใช้ไม่ได้ ฮาร์ดแวร์·ระบบปฏิบัติการ·เบราว์เซอร์·GPU คืออะไร และมีข้อผิดพลาดในคอนโซลนักพัฒนาของเบราว์เซอร์หรือไม่ก็จะดีมาก ในรายงานบั๊ก หากใส่ console stack trace มาด้วยจะช่วยได้มาก