SimCity exécuté dans le navigateur avec WebAssembly et OpenGL

 (micropolisweb.com)
3 points par GN⁺ 2024-06-17 | 1 commentaires | Partager sur WhatsApp
  • Micropolis Web, basé sur le SimCity Classic original de Maxis, a été mis en ligne dans une version qui fonctionne dans le navigateur, permettant de découvrir ce simulateur de ville classique sans installation séparée
  • Le projet est une version portée par Don Hopkins du jeu conçu par Will Wright, et il continue d’évoluer car il est encore dans un état expérimental, non finalisé
  • Un dépôt GitHub, des vidéos de démonstration, ainsi que le livre et les diagrammes de Chaim Gingold sont fournis pour explorer plus en profondeur l’implémentation et l’histoire de SimCity
  • Les commandes utilisent le glisser de souris, la molette, les flèches directionnelles, les touches alphabétiques et numériques, ce qui permet de se déplacer, zoomer, charger des villes, régler la vitesse, modifier le taux d’imposition et changer de tileset
  • Le nom « Micropolis » est utilisé conformément aux conditions de la Micropolis Public Name License, et des fonctionnalités supplémentaires ainsi que des easter eggs sont encore en préparation

Micropolis Web dans le navigateur

Commandes et points d’attention restants

  • Commandes à la souris

    • Faites glisser avec le bouton gauche pour déplacer l’écran
    • Utilisez la molette pour zoomer ou dézoomer

  • Commandes au clavier

    • Utilisez les flèches directionnelles pour déplacer l’écran
    • Les touches virgule et point servent à zoomer ou dézoomer
    • Les touches alphabétiques permettent de charger différentes villes
    • La touche \ sert à générer
    • Les touches numériques servent à régler la vitesse
    • La touche 0 active ou désactive la pause
    • Les touches crochets permettent de diminuer ou d’augmenter le taux d’imposition
    • Les touches - et = permettent de changer de tileset
    • Le bouton « X » en haut permet de masquer la fenêtre d’aide
    • Des fonctionnalités supplémentaires et des easter eggs sont en préparation
    • Le message d’avertissement commence par indiquer de ne pas appuyer sur la barre d’espace, mais dans le texte fourni, l’explication qui suit n’est pas complète

À lire aussi

1 commentaires

 
GN⁺ 2024-06-17
Avis de Hacker News

  • Porter de vieux jeux vers le Web, c’est amusant. Beaucoup de petits jeux sont même plus légers que les pages web ordinaires d’aujourd’hui, donc ils se chargent rapidement et tournent bien
    Je viens de porter Quake 3 et je m’amuse avec : https://thelongestyard.link/

    • La raison pour laquelle je n’aime pas le navigateur pour créer des jeux, c’est précisément la latence des entrées. Cela dit, le travail est excellent
    • Je me demande par où commencer pour mieux faire ce genre de choses, surtout pour porter de vieux jeux vers Wasm

  • Démo 1 de Micropolis Web : https://www.youtube.com/watch?v=wlHGfNlE8Os
    Micropolis Web est la version navigateur de Micropolis, le SimCity open source, et utilise WebAssembly, WebGL et SvelteKit. Il repose sur le code d’origine de SimCity Classic, conçu par Will Wright et porté par Don Hopkins ; la première démo fait tourner le simulateur WebAssembly et l’animation des tuiles en WebGL, mais la majeure partie de l’interface utilisateur est encore en chantier
    Site en ligne : https://MicropolisWeb.com
    Source et documentation : https://github.com/SimHacker/MicropolisCore
    Le livre de Chaim Gingold, "Building SimCity" : https://mitpress.mit.edu/9780262547482/building-simcity/
    "SimCity Reverse Diagrams" de 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
    La musique est de Juho Hietala, Blamstrain, et Space Inventory Cellular Automata a été implémenté par Don Hopkins : https://blamstrain.com/

    • Je suis surpris que Building SimCity de Chaim Gingold vienne tout juste de paraître, le 4 juin 2024. J’adorais les diagrammes des algorithmes de SimCity à l’époque, et il me semble avoir aussi lu une thèse de doctorat qui détaillait le fonctionnement interne de SimCity
      Gingold, Chaim. “Play Design.” Ph.D. thesis, University of California Santa Cruz, 2016. https://www.proquest.com/docview/1806122688
      Le portage Wasm de Micropolis semble pouvoir ouvrir une nouvelle étape de développement. SimCity Classic sur Macintosh a eu une grande influence, dans mon enfance, sur ma façon de penser les ordinateurs et les logiciels, et je suis heureux de voir qu’on lui donne une nouvelle vie

  • Je ne suis pas gamer, mais je me souviens avoir joué à SimCity quand j’étais enfant. Je ne sais pas si le gameplay a changé au cours des 25 dernières années environ, ou si c’est le navigateur qui déconne, mais on dirait que rien ne fonctionne
    On peut charger une ville et la voir bouger, mais il me semble que dans l’ancien SimCity, on pouvait construire sa propre ville. Il devrait bien y avoir une façon de jouer réellement pour le joueur, non ?

  • Je n’en attendais pas grand-chose sur mobile, mais sur Firefox Android, cette page a complètement bloqué le navigateur. J’ai dû tuer le processus, et ce genre de chose est rare.
    À titre de référence, j’ai un petit jeu que j’ai moi-même porté vers le navigateur. Le faire tourner a été très facile grâce au combo Emscripten+SDL2, mais, honnêtement, c’est le rendre vraiment jouable sur téléphone qui m’a demandé le plus d’efforts : https://play.neverball.org/

    • La prise en charge du mobile fait clairement partie de mes plans. J’ai déjà corrigé un bug qui empêchait l’exécution sur Firefox sous Ubuntu, grâce à un rapport de bug bien rédigé avec une trace de pile. Réessayez, et si ça ne marche pas, ce serait bien de signaler le bug en incluant la trace de pile et les informations de plateforme.
      https://github.com/SimHacker/MicropolisCore/issues/1
      Plutôt que d’attendre que ce soit terminé et parfait, je voulais le publier le plus vite possible pour que d’autres puissent l’essayer. Il reste donc encore beaucoup à faire : interface utilisateur, stabilité, prise en charge multiplateforme, mobile, etc.
      Dès que le simulateur et le moteur de rendu des tuiles ont fonctionné, j’ai ajouté un minimum de zoom/déplacement, une interface de contrôle au clavier et une fenêtre d’aide fermable avec le bouton « + » en haut à droite.
      Ce que j’attends vraiment avec impatience, c’est l’intégration avec un langage de programmation visuel comme Snap!, pour permettre le live coding, des zones de plugins, des robots, des systèmes de supervision et de contrôle, la visualisation et l’export de données, ainsi que des interfaces alternatives comme des tableaux de bord Grafana.
      On peut connecter un téléphone Android à un Mac ou un PC avec un câble USB, ou un iPhone à un Mac, puis utiliser Chrome ou le débogueur Safari sur Mac pour consulter la console à distance, déboguer, et même faire du live coding. Si les conditions sont réunies, ça peut aussi fonctionner en Wi‑Fi, mais Google a peut-être supprimé la fonctionnalité, ou Apple l’a peut-être bloquée dès le départ.
    • Sur Firefox, avec un téléphone Android d’entrée de gamme vieux de 4 ans, j’ai été surpris par le framerate élevé et les très rares saccades. Il n’y a pas une quantité énorme de textures ou de polygones, mais je ne suis pas habitué à voir ce niveau de performances dans le navigateur de ce téléphone.
    • Sur Firefox Android, de mon côté, ça ne s’est pas bloqué. En revanche, j’ai vu que certaines versions récentes de Firefox géraient assez mal les PDF, donc c’est peut-être lié à une différence de version.

  • J’avais autrefois porté le client RuneScape sur le Web.
    https://play.rsps.app/
    Il utilise Wasm, TypeScript et WebGL.

  • Dépôt source : https://github.com/SimHacker/MicropolisCore

  • Ce qui se passe quand on appuie sur la barre d’espace est vraiment étonnant. Le fractal est superbe.

    • Space Inventory s’inspire de la critique de World Quester 2 par Game Helpin' Squad, et j’aimerais rendre les menus et l’interface utilisateur de Micropolis aussi géniaux que ceux de World Quester 2.
      https://www.youtube.com/watch?v=0Gy9hJauXns

  • Je me demande si les grands modèles de langage pourraient porter instantanément ce genre de jeu

    • Bonne question, et sujet de discussion intéressant. La meilleure approche est de les utiliser comme n’importe quel autre outil, pas de s’attendre à ce qu’ils fassent tout le travail difficile à votre place. Ils peuvent éviter beaucoup de tâches fastidieuses et vous aider à devenir un meilleur programmeur, mais ce ne sont pas des substituts.
      J’utilise ChatGPT pour le développement et cela m’a beaucoup aidé, mais il faut beaucoup d’itérations et d’instructions, donc on est loin de quelque chose d’instantané. Les LLM ne remplaceront pas les programmeurs, mais les programmeurs qui utilisent des LLM remplaceront ceux qui ne les utilisent pas.
      Il m’a été utile pour me faire expliquer la documentation et les bonnes pratiques d’outils comme Emscripten et Embind, faire fonctionner le makefile, analyser le code, classer les méthodes et variables d’instance en private/public, et rédiger le boilerplate des déclarations Embind ainsi que la documentation. J’ai aussi pu m’en servir comme d’un grep avancé capable de comprendre la syntaxe du code et de recevoir des requêtes en anglais.
      https://github.com/SimHacker/MicropolisCore/blob/main/Microp...
      Ce processus n’a été ni automatique ni instantané ; dans l’ensemble, il a pris 33 ans et n’est toujours pas terminé. J’ai dû beaucoup guider ChatGPT en m’appuyant sur mon expérience du portage de SimCity pour Mac vers HyperLook, sur le système de fenêtres NeWS, en 1991, puis vers plusieurs autres plateformes.
      Pour un jeu comme SimCity, cela valait la peine d’abandonner l’UI Mac, de séparer le simulateur de l’interface utilisateur, puis de réécrire une UI de haute qualité pour HyperLook de NeWS. Plus tard, j’ai aussi créé une UI pour TCL/Tk sur X11, et cette architecture a permis de rendre possible un SimCity multijoueur en réseau.
      Démo SimCity X11 : https://www.youtube.com/watch?v=Jvi98wVUmQA
      SimCityNet multijoueur pour X11 sous Linux : https://www.youtube.com/watch?v=_fVl4dGwUrA
      Doc TCL : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Callbacks : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Des décennies plus tard, après avoir publié SimCity en open source et sorti des versions TCL/Tk/X11 pour OLPC et Linux, j’ai remis en ordre le code du simulateur en C++ et défini l’API et les callbacks avec SWIG pour le connecter à Python. Le refactoring en C++ a beaucoup aidé pour la modularisation, la documentation et le portage vers plusieurs plateformes.
      Micropolis Core : https://github.com/SimHacker/micropolis/tree/master/Micropol...
      Documentation Doxygen (actuelle) : https://micropolisweb.com/doc/
      Plan de développement (ancien) : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Plan OLPC (ancien) : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      À faire (ancien) : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Plan d’interface utilisateur (ancien) : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      Notes OLPC (anciennes) : https://github.com/SimHacker/MicropolisCore/blob/main/notes/...
      J’ai aussi créé une interface desktop PyGTK/Cairo/X11 et une interface client/serveur web basée sur TurboGears/AMF/OpenLaszlo/Flash.
      Démo web Micropolis Online (SimCity) (ancienne) : https://www.youtube.com/watch?v=8snnqQSI0GE
      Bil Simser a intégré le moteur du simulateur en C# avec SWIG : https://github.com/SimHacker/micropolis/tree/master/Micropol...
      Grâce à ces documents de conception et à cette expérience d’implémentation, j’ai pu bien prompter ChatGPT pour la conception de l’API Emscripten/Embind ; il a été utile pour écrire le boilerplate et valider la conception, mais pas vraiment pour imaginer la conception elle-même. Il a aussi été très utile pour apprendre les détails et les bonnes pratiques de TypeScript, SvelteKit, node, WebGL, canvas, CSS et HTML.

  • Pourquoi y a-t-il une caserne de pompiers dans presque chaque pâté de maisons ?

  • Les commandes ne fonctionnent pas et, dès que le navigateur commence à charger quelque chose, le ventilateur du CPU se met à tourner. Vous êtes sûr que ce n’est pas juste un mineur de cryptomonnaie bricolé à la va-vite ? Sinon, je ne vois pas l’intérêt de publier quelque chose qui ne fonctionne pas.

    • Le but est de recevoir des retours sur son comportement sur toutes sortes de systèmes auxquels je n’ai pas accès. Pour les logiciels, surtout open source, je pense qu’il vaut mieux obtenir des retours le plus tôt possible pendant le développement plutôt que de tout cacher jusqu’à ce que ce soit complètement fini et parfait.
      Je n’ai pas les moyens d’acheter toutes sortes d’ordinateurs et de téléphones, et même si je les avais, je n’aurais pas le temps de tout tester moi-même. Personne ne me paie pour ça, mais si vous le souhaitez, vous pouvez me soutenir sur Patreon : https://www.patreon.com/DonHopkins
      Cela dit, ce projet n’est pas une source de revenus : c’est un travail de passion. En ce moment, je propose même une offre spéciale où je me tais pendant 5 minutes par mois sur le sujet de votre choix.
      Tout le code source est disponible sur GitHub, et vous pouvez signaler des bugs ou le compiler vous-même. Les navigateurs disposent aussi d’outils de débogage et de rétro-ingénierie permettant d’examiner le binaire WebAssembly et le JavaScript compilé. Les shaders WebGL sont en clair, ce qui permet également de vérifier qu’ils correspondent bien aux sources du dépôt.
      https://github.com/SimHacker/MicropolisCore
      Si vous trouvez des preuves d’un logiciel de minage bâclé, vous pouvez les signaler au FBI, à Interpol et à GitHub. Comme je publie les sources et les binaires sous mon nom, mon compte GitHub et mon domaine, il est facile d’en retracer l’origine.
      Un exemple de rapport de bug utile a identifié le problème en incluant les informations système et la trace de pile, ce qui m’a permis de le corriger en quelques minutes : https://github.com/SimHacker/MicropolisCore/issues/1
      Je serais aussi curieux de savoir si vous avez essayé les touches numériques de réglage de la vitesse. Avec les chiffres de la rangée supérieure du clavier, « 1 » ralentit à 1 image par seconde avec 1 tick du simulateur par image, tandis que « 9 » tourne à 120 images par seconde avec 50 ticks par image. Dans Chrome sur mon Mac M1, c’est fluide et l’interface est assez réactive.
      Ce serait utile de préciser quelles commandes ne fonctionnent pas, ainsi que votre matériel, système d’exploitation, navigateur et GPU, et s’il y avait des erreurs dans la console développeur du navigateur. Pour un rapport de bug, inclure la trace de pile de la console aide beaucoup.