वेब ब्राउज़र में WebAssembly और OpenGL पर चलने वाला SimCity

 (micropolisweb.com)
3 पॉइंट द्वारा GN⁺ 2024-06-17 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Maxis के मूल SimCity Classic पर आधारित Micropolis Web को ब्राउज़र में चलने वाले रूप में जारी किया गया है, जिससे इस क्लासिक city simulation को बिना अलग इंस्टॉल किए अनुभव किया जा सकता है
  • यह प्रोजेक्ट Will Wright द्वारा डिज़ाइन किए गए गेम के Don Hopkins द्वारा पोर्ट किए गए संस्करण पर आधारित है, और अभी पूर्ण रिलीज़ नहीं बल्कि एक प्रयोगात्मक अवस्था में है जो लगातार बदल रही है
  • इसके साथ GitHub repository, demo वीडियो, और Chaim Gingold की किताब व diagrams भी दिए गए हैं, जिनसे SimCity के implementation और इतिहास को और गहराई से देखा जा सकता है
  • नियंत्रण के लिए mouse drag·wheel, arrow keys, letter keys, और number keys का उपयोग होता है, जिनसे move, zoom, city load, speed adjust, tax rate change, और tileset switch किया जा सकता है
  • “Micropolis” नाम का उपयोग Micropolis Public Name License की शर्तों के तहत किया जाता है, और अतिरिक्त features व easter eggs अभी तैयार किए जा रहे हैं

ब्राउज़र में चलने वाला Micropolis Web

  • Micropolis Web WebAssembly पर चलने वाला Micropolis का एक संस्करण है
  • इसका आधार Maxis का मूल SimCity Classic है, और Will Wright द्वारा डिज़ाइन किए गए गेम को Don Hopkins ने पोर्ट किया है
  • इसकी मौजूदा स्थिति एक पूर्ण उत्पाद की नहीं, बल्कि लगातार बदलते रहने वाले अधूरे प्रयोग जैसी है
  • अतिरिक्त development support channel के रूप में Patreon लिंक दिया गया है
  • source repository को MicropolisCore में देखा जा सकता है
  • संबंधित वीडियो:
  • संदर्भ सामग्री:
  • “Micropolis” नाम का उपयोग Micropolis Public Name License की शर्तों के तहत किया जाता है

नियंत्रण विधि और बाकी सावधानियां

  • mouse नियंत्रण

    • बाएँ बटन को drag करके स्क्रीन को move किया जा सकता है
    • mouse wheel से zoom in·out किया जा सकता है

  • keyboard नियंत्रण

    • arrow keys से स्क्रीन को move किया जा सकता है
    • comma और period keys से zoom in·out किया जाता है
    • letter keys से कई शहर load किए जा सकते हैं
    • \ key से generate किया जाता है
    • number keys से speed सेट की जाती है
    • 0 key से pause toggle किया जाता है
    • square bracket keys से tax rate घटाई या बढ़ाई जाती है
    • - और = keys से tileset बदला जा सकता है
    • ऊपर के “X” बटन को दबाने पर guide window छिपाई जा सकती है
    • अतिरिक्त features और easter eggs तैयार किए जा रहे हैं
    • warning message की शुरुआत इस बात से होती है कि spacebar न दबाएँ, लेकिन दिए गए मूल पाठ में आगे की व्याख्या पूरी नहीं है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-06-17
Hacker News की राय

  • पुराने games को web पर पोर्ट करना मज़ेदार है। आजकल आम web pages से छोटे games भी बहुत हैं, इसलिए वे तेज़ी से लोड होते हैं और अच्छी तरह चलते हैं
    अभी-अभी Quake 3 को पोर्ट किया है और उसे मज़े से टटोल रहा हूँ: https://thelongestyard.link/

    • games बनाते समय browser पसंद न आने की वजह यही input lag है। फिर भी काम शानदार है
    • सोच रहा हूँ कि ऐसी चीज़ों को बेहतर तरीके से करने के लिए कहाँ से शुरू करना अच्छा रहेगा। खासकर पुराने games को Wasm में पोर्ट करने की दिशा में

  • Micropolis Web demo 1: https://www.youtube.com/watch?v=wlHGfNlE8Os
    Micropolis Web, open-source SimCity यानी Micropolis का browser version है और WebAssembly, WebGL, SvelteKit का इस्तेमाल करता है। यह Will Wright द्वारा design किए गए और Don Hopkins द्वारा पोर्ट किए गए मूल SimCity Classic codebase पर आधारित है; पहले demo में WebAssembly simulator और WebGL tile animation चलते हैं, लेकिन user interface का ज़्यादातर हिस्सा अभी काम में है
    live site: https://MicropolisWeb.com
    source और documentation: https://github.com/SimHacker/MicropolisCore
    Chaim Gingold की किताब "Building SimCity": https://mitpress.mit.edu/9780262547482/building-simcity/
    Chaim Gingold की "SimCity Reverse Diagrams": 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 ने implement किया है: https://blamstrain.com/

    • यह हैरानी की बात है कि Chaim Gingold की Building SimCity अभी 4 जून 2024 को ही प्रकाशित हुई है। पहले SimCity algorithm diagrams मुझे बहुत पसंद थे, और शायद मैंने SimCity के internals को विस्तार से कवर करने वाली Ph.D. thesis भी पढ़ी थी
      Gingold, Chaim. “Play Design.” Ph.D. thesis, University of California Santa Cruz, 2016. https://www.proquest.com/docview/1806122688
      Micropolis का Wasm port development का नया चरण बन सकता है, ऐसा लगता है। Macintosh का SimCity Classic बचपन में computers और software के बारे में मेरे सोचने के तरीके पर बड़ा असर डाल गया था, और इसमें नई जान आते देखना खुशी की बात है

  • मैं gamer नहीं हूँ, लेकिन बचपन में SimCity खेलने की याद है। पिछले करीब 25 सालों में gameplay बदल गया है या browser खराब है, पता नहीं, लेकिन ऐसा लगता है कि कुछ भी नहीं हो रहा
    शहर को load करके उसे चलता हुआ देख तो सकता हूँ, लेकिन पुराने SimCity में शायद खुद शहर बना सकते थे। क्या player के पास सच में खेलने का कोई तरीका नहीं होना चाहिए?

  • मोबाइल पर बहुत उम्मीद नहीं थी, लेकिन Android के Firefox में इस पेज ने ब्राउज़र को फ्रीज़ कर दिया। प्रोसेस को kill करना पड़ा और ऐसा कम ही होता है
    संदर्भ के लिए, मेरे पास एक छोटा गेम है जिसे मैंने खुद ब्राउज़र पर पोर्ट किया है। उसे चलने लायक बनाना Emscripten+SDL2 कॉम्बिनेशन की वजह से बहुत आसान था, लेकिन सच कहूँ तो फोन पर ठीक से playable बनाने में सबसे ज़्यादा मेहनत लगी: https://play.neverball.org/

    • मोबाइल सपोर्ट करने का पक्का इरादा है। Ubuntu के Firefox में चलने से रोकने वाला एक bug भी, stack trace के साथ अच्छी तरह लिखी गई bug report की बदौलत, पहले ही fix कर चुका हूँ। फिर से कोशिश करें, और अगर न चले तो stack trace और platform जानकारी के साथ bug report कर दें तो अच्छा होगा
      https://github.com/SimHacker/MicropolisCore/issues/1
      पूरा और perfect होने तक इंतज़ार करने के बजाय, मैं इसे जितनी जल्दी हो सके public करना चाहता था ताकि दूसरे लोग चला कर देख सकें। इसलिए user interface, stability, cross-platform support, mobile वगैरह पर अभी बहुत काम बाकी है
      जैसे ही simulator और tile renderer चलने लगे, मैंने minimal zoom/pan, keyboard control interface और ऊपर दाईं तरफ़ “+” बटन से बंद होने वाली hint window जोड़ दी
      असली उम्मीद यह है कि इसे Snap! जैसी visual programming language के साथ integrate किया जाए, ताकि live coding, plugin zones, robots, monitoring/control systems, data visualization और export, Grafana dashboard जैसे alternative interfaces बनाए जा सकें
      Android फोन को USB cable से Mac या PC से, और iPhone को Mac से जोड़ने के बाद Chrome या Mac के Safari debugger से remote console check, debugging, यहाँ तक कि live coding भी की जा सकती है। conditions सही हों तो Wi‑Fi से भी हो सकता है, लेकिन संभव है कि Google ने feature हटा दिया हो या Apple ने शुरू से ही block किया हो
    • 4 साल पुराने budget Android फोन के Firefox में frame rate high और stutter लगभग न के बराबर देखकर हैरानी हुई। textures या polygons बहुत ज़्यादा नहीं हैं, लेकिन इस फोन के browser में ऐसी performance देखने की आदत नहीं है
    • Android के Firefox में भी मेरी तरफ़ से यह फ्रीज़ नहीं हुआ। हालांकि मैंने देखा है कि latest Firefox के कुछ versions PDF handling में अच्छे नहीं हैं, और शायद इसका version difference से संबंध हो

  • पहले RuneScape client को web पर port किया था
    https://play.rsps.app/
    Wasm, TypeScript, WebGL का इस्तेमाल किया

  • source repository: https://github.com/SimHacker/MicropolisCore

  • spacebar दबाने पर जो होता है, वह सच में हैरान करने वाला है। fractal कमाल का है

    • Space Inventory, Game Helpin' Squad के World Quester 2 review से प्रेरित है, और मैं चाहता हूँ कि Micropolis के menu और user interface भी World Quester 2 जितने शानदार बनें
      https://www.youtube.com/watch?v=0Gy9hJauXns

  • जिज्ञासा है कि क्या बड़े language models ऐसे गेम को तुरंत port कर पाएंगे

    • अच्छा सवाल है, और इस पर दिलचस्प चर्चा हो सकती है। सबसे अच्छा तरीका है उन्हें किसी दूसरे tool की तरह इस्तेमाल करना, न कि उनसे उम्मीद करना कि वे सारे कठिन काम आपकी जगह कर देंगे। वे बहुत सारा उबाऊ काम कम कर सकते हैं और आपको बेहतर programmer बनने में मदद कर सकते हैं, लेकिन वे replacement नहीं हैं
      मैं development में ChatGPT का इस्तेमाल कर रहा हूं और यह बहुत मददगार रहा है, लेकिन इसमें बहुत सारे iterations और instructions की जरूरत पड़ती है, इसलिए यह तुरंत हो जाने वाली चीज से काफी दूर है। LLM programmers को replace नहीं करेगा, लेकिन LLM इस्तेमाल करने वाला programmer उन programmers को replace करेगा जो इसका इस्तेमाल नहीं करते
      Emscripten और Embind जैसे tools की documentation और best practices समझने, makefile को चलाने, code analyze करने, methods और instance variables को private/public में classify करने, और Embind declaration boilerplate व documentation लिखने में यह उपयोगी रहा। इसे code syntax समझने और English queries लेने वाले advanced grep की तरह भी इस्तेमाल किया जा सका
      https://github.com/SimHacker/MicropolisCore/blob/main/Microp...
      यह process न automatic था, न instant; कुल मिलाकर इसमें 33 साल लगे और यह अभी भी खत्म नहीं हुआ है। 1991 में Mac version SimCity को NeWS window system के HyperLook में port करने और बाद में कई platforms पर ले जाने के अनुभव के आधार पर ChatGPT को काफी guide करना पड़ा
      SimCity जैसे game के लिए Mac UI छोड़ना, simulator को UI से अलग करना, और फिर NeWS के HyperLook के लिए high-quality UI नए सिरे से लिखना worthwhile था। बाद में X11 के TCL/Tk के लिए UI भी बनाया, और इसी architecture की वजह से network multiplayer 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 को open source में जारी करने और OLPC व Linux के लिए TCL/Tk/X11 version निकालने के बाद, simulator code को C++ में व्यवस्थित किया और SWIG से API व callbacks define करके Python से जोड़ा। C++ refactoring ने modularization, documentation और कई platforms पर porting में काफी मदद की
      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 desktop interface और TurboGears/AMF/OpenLaszlo/Flash आधारित web client/server interface भी बनाया
      Micropolis Online (SimCity) Web Demo (old): https://www.youtube.com/watch?v=8snnqQSI0GE
      Bil Simser ने SWIG से simulator engine को C# में integrate किया: https://github.com/SimHacker/micropolis/tree/master/Micropol...
      ऐसे design documents और implementation experience होने की वजह से Emscripten/Embind API design के लिए ChatGPT को अच्छी तरह prompt कर सका, और यह boilerplate लिखने व design validate करने में उपयोगी रहा, लेकिन design खुद सोचने में बहुत मददगार नहीं था। TypeScript, SvelteKit, node, WebGL, canvas, CSS, HTML की details और best practices सीखने में भी यह बेहद उपयोगी रहा

  • लगभग हर city block में fire station क्यों है?

  • कंट्रोल काम नहीं कर रहे, और ब्राउज़र ने कुछ लोड करते ही CPU fan चलना शुरू कर दिया। क्या पक्का है कि यह बस कोई घटिया cryptocurrency miner नहीं है? अगर नहीं, तो समझ नहीं आता कि जो चीज़ काम नहीं करती उसे public करने की वजह क्या है

    • मकसद उन अलग-अलग systems पर यह कैसा चलता है, इस पर feedback पाना है जिन तक मेरी पहुंच नहीं है। मेरा मानना है कि software, खासकर open source, को पूरी तरह खत्म और perfect होने तक छिपाकर रखने के बजाय development के दौरान जितनी जल्दी हो सके feedback लेना बेहतर होता है
      मेरे पास हर तरह के computer और phone खरीदने के पैसे नहीं हैं, और अगर होते भी तो उन सबको खुद test करने का समय नहीं है। यह कोई paid काम भी नहीं है, लेकिन अगर चाहें तो Patron पर support कर सकते हैं: https://www.patreon.com/DonHopkins
      फिर भी यह project income source नहीं, बल्कि लगाव से किया गया काम है। अभी मैं आपकी पसंद के विषय पर महीने में 5 मिनट चुप रहने वाला special offer भी चला रहा हूं
      सारा source code GitHub पर देखा जा सकता है, और आप bug report कर सकते हैं या खुद build कर सकते हैं। Browser में WebAssembly binary और compiled JavaScript को देखने के लिए debugging और reverse-engineering tools भी होते हैं। WebGL shaders plain text में हैं, इसलिए यह भी verify किया जा सकता है कि वे repository के source से match करते हैं या नहीं
      https://github.com/SimHacker/MicropolisCore
      अगर आपको घटिया mining software का evidence मिले, तो FBI, Interpol और GitHub को report कर सकते हैं। मैं अपने नाम, अपने GitHub account और अपने domain से source और binaries public कर रहा हूं, इसलिए source trace करना भी आसान है
      एक उपयोगी bug report का उदाहरण वह था जिसमें system information और stack trace के साथ issue identify किया गया था, और उसकी वजह से मैं उसे कुछ ही मिनटों में fix कर पाया: https://github.com/SimHacker/MicropolisCore/issues/1
      यह भी जानना चाहूंगा कि आपने speed control वाली number keys दबाकर देखी थीं या नहीं। Keyboard की ऊपर वाली numbers row के हिसाब से, "1" इसे 1 frame per second और प्रति frame simulator के 1 tick तक धीमा कर देता है, जबकि "9" इसे 120 frames per second और प्रति frame 50 ticks पर चलाता है। मेरे M1 Mac के Chrome में यह smooth चलता है और interface भी काफी responsive है
      अच्छा होगा अगर आप बताएं कि कौन-से controls काम नहीं कर रहे, आपका hardware, operating system, browser और GPU क्या हैं, और browser developer console में कोई error था या नहीं। Bug report में console stack trace शामिल कर दें तो मदद मिलेगी