Webブラウザ上でWebAssemblyとOpenGLにより動作するSimCity

 (micropolisweb.com)
3 ポイント 投稿者 GN⁺ 2024-06-17 | 1件のコメント | WhatsAppで共有
  • Maxisのオリジナル版SimCity ClassicをベースにしたMicropolis Webがブラウザで動作する形で公開され、古典的な都市シミュレーションを別途インストールせずに体験できる
  • このプロジェクトは、Will Wrightが設計したゲームをDon Hopkinsが移植したバージョンで、まだ完成版ではない実験的な状態として継続的に変化している
  • GitHubリポジトリ、デモ動画、Chaim Gingoldの書籍と図表があわせて提供され、SimCityの実装と歴史をより深く知ることができる
  • 操作はマウスドラッグ・ホイール、矢印キー、文字キー、数字キーなどを使い、移動、拡大・縮小、都市のロード、速度調整、税率変更、タイルセット切り替えが可能
  • 「Micropolis」という名称はMicropolis Public Name Licenseの条件に従って使用されており、追加機能とイースターエッグはまだ準備中

ブラウザで動作するMicropolis Web

操作方法と残っている注意事項

  • マウス操作

    • 左ボタンのドラッグで画面を移動する
    • マウスホイールで拡大・縮小できる

  • キーボード操作

    • 矢印キーで画面を移動する
    • カンマキーとピリオドキーで拡大・縮小する
    • 文字キーで複数の都市をロードする
    • \キーで生成する
    • 数字キーで速度を設定する
    • 0キーで一時停止を切り替える
    • 角括弧キーで税率を下げたり上げたりする
    • -と=キーでタイルセットを切り替える
    • 上部の**「X」ボタン**を押すと案内ウィンドウを非表示にできる
    • 追加機能とイースターエッグが準備中
    • 警告文はスペースバーを押さないようにという内容で始まるが、提供された本文では続く説明が完結していない

関連記事

1件のコメント

 
GN⁺ 2024-06-17
Hacker Newsのコメント

  • 古いゲームをWebに移植するのは面白い。最近の一般的なWebページより小さいゲームも多いので、読み込みが速く、よく動く。
    さっきQuake 3を移植して、楽しくいじっているところ: https://thelongestyard.link/

    • ゲームを作るときにブラウザが嫌いな理由は、まさに入力遅延。それでも仕事としては素晴らしい。
    • こういうことをもっと上手くやるには、どこから始めるとよいのか気になる。特に古いゲームをWasmに移植する方面。

  • Micropolis Web デモ 1: https://www.youtube.com/watch?v=wlHGfNlE8Os
    Micropolis Webは、オープンソース版SimCityであるMicropolisのブラウザ版で、WebAssembly、WebGL、SvelteKitを使っている。Will Wrightが設計し、Don Hopkinsが移植したオリジナルのSimCity Classicコードベースを基にしており、最初のデモではWebAssemblyシミュレーターとWebGLタイルアニメーションは動くが、ユーザーインターフェイスの大半はまだ作業中。
    ライブサイト: https://MicropolisWeb.com
    ソースとドキュメント: 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が実装した: https://blamstrain.com/

    • Chaim GingoldのBuilding SimCityが2024年6月4日に出たばかりというのは驚き。以前、SimCityのアルゴリズム図が本当に好きで、SimCityの内部動作を詳しく扱った博士論文も読んだ気がする。
      Gingold, Chaim. “Play Design.” Ph.D. thesis, University of California Santa Cruz, 2016. https://www.proquest.com/docview/1806122688
      MicropolisのWasm移植は、開発の新しい段階になり得そう。MacintoshのSimCity Classicは、子どもの頃のコンピューターやソフトウェアについての考え方に大きな影響を与えたので、そこに新しい命が吹き込まれるのを見るのはうれしい。

  • ゲーマーではありませんが、子どものころにSimCityを遊んだ記憶があります。この25年ほどの間にゲームプレイが変わったのか、ブラウザが壊れているのか分かりませんが、何もできないように見えます
    都市を読み込んで動いている様子を見ることはできますが、昔のSimCityでは自分で都市を作れたように思います。プレイヤーが実際にプレイする方法があるべきではないでしょうか？

  • モバイルではあまり期待していなかったのですが、Android の Firefox ではこのページがブラウザを固まらせてしまいました。プロセスを終了する必要があり、こういうことは珍しいです。
    ちなみに、自分でブラウザ向けに移植した小さなゲームがあります。動くようにするのは Emscripten+SDL2 の組み合わせのおかげでとても簡単でしたが、正直なところ、スマートフォンでまともに遊べるようにするのにいちばん手間がかかりました: https://play.neverball.org/

    • モバイル対応は必ずやるつもりです。Ubuntu の Firefox で実行を妨げていたバグも、スタックトレース付きのよく書かれたバグレポートのおかげで、すでに1件修正しました。もう一度試してみて、だめならスタックトレースとプラットフォーム情報を含めてバグ報告してもらえると助かります。
      https://github.com/SimHacker/MicropolisCore/issues/1
      完成して完璧になるまで待つより、他の人が試せるようにできるだけ早く公開したいと思いました。そのため、ユーザーインターフェース、安定性、クロスプラットフォーム対応、モバイルなど、まだやることがたくさんあります。
      シミュレーターとタイルレンダラーが動き次第、最小限のズーム／移動、キーボード操作インターフェース、右上の「+」ボタンで閉じられるヒントウィンドウを付けました。
      本当に期待しているのは、Snap! のようなビジュアルプログラミング言語と統合して、ライブコーディング、プラグイン区域、ロボット、監視・制御システム、データ可視化とエクスポート、Grafana ダッシュボードのような代替インターフェースを作れるようにすることです。
      Android スマートフォンは USB ケーブルで Mac や PC に、iPhone は Mac に接続したうえで、Chrome または Mac の Safari デバッガーからリモートコンソールの確認、デバッグ、ライブコーディングまで可能です。条件が合えば Wi-Fi でもできるかもしれませんが、Google がその機能をなくしたか、Apple がそもそも塞いでいた可能性もあります。
    • 4年前の低価格 Android スマートフォンの Firefox で、フレームレートが高く、ほとんどカクつかないことに驚きました。テクスチャやポリゴンがものすごく多いわけではありませんが、このスマートフォンのブラウザでこの程度の性能には慣れていません。
    • Android の Firefox でも、私の環境では固まりませんでした。ただ、最近の Firefox の一部バージョンは PDF 処理がいまいちなケースを見たことがあり、バージョン差と関係しているのかもしれません。

  • 以前、RuneScape クライアントを Web に移植しました。
    https://play.rsps.app/
    Wasm、TypeScript、WebGL を使っています。

  • ソースリポジトリ: https://github.com/SimHacker/MicropolisCore

  • スペースバーを押すと起きることが本当に驚きです。フラクタルが見事です。

    • Space Inventory は Game Helpin' Squad の World Quester 2 レビューに影響を受けており、Micropolis のメニューとユーザーインターフェースも World Quester 2 くらい最高にしたいと思っています。
      https://www.youtube.com/watch?v=0Gy9hJauXns

  • 大規模言語モデルでこうしたゲームを即座に移植できるのか気になる

    • 良い質問で、興味深く議論する価値があります。最善のアプローチは、他のツールと同じように使うことで、難しい作業をすべて肩代わりしてくれると期待することではありません。退屈な作業をかなり減らし、より良いプログラマーになる手助けはしてくれますが、代替品ではありません
      開発にChatGPTを使っていて大いに助かっていますが、多くの反復と指示が必要で、即座にできるというには程遠いです。LLMがプログラマーを置き換えることはないでしょうが、LLMを使うプログラマーが使わないプログラマーを置き換えることになるでしょう
      EmscriptenやEmbindのようなツールのドキュメントやベストプラクティスを説明してもらい、makefileを動くようにし、コードを解析し、メソッドやインスタンス変数をprivate/publicに分類し、Embind宣言のボイラープレートやドキュメントを書くのに役立ちました。コード構文を理解し、英語の問い合わせを受け付ける高度なgrepのようにも使えました
      https://github.com/SimHacker/MicropolisCore/blob/main/Microp...
      このプロセスは自動でも即時でもなく、全体としては33年かかっており、今もまだ終わっていません。1991年にMac版SimCityをNeWSウィンドウシステムのHyperLookへ移植し、その後さまざまなプラットフォームへ移した経験をもとに、ChatGPTをかなり誘導する必要がありました
      SimCityのようなゲームは、Mac UIを捨て、シミュレーターをUIから分離したうえで、NeWSのHyperLook向けに高品質なUIを新たに書く価値がありました。その後、X11のTCL/Tk向けUIも作り、この構造のおかげでネットワーク・マルチプレイヤーの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をオープンソースとして公開し、OLPCとLinux向けのTCL/Tk/X11版を出した後、シミュレーターのコードを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ベースのWebクライアント/サーバーインターフェースも作りました
      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...
      こうした設計文書と実装経験があったため、Emscripten/Embind API設計についてChatGPTにうまくプロンプトでき、ボイラープレートの作成や設計の検証には有用でしたが、設計そのものを思いつくことにはあまり役立ちませんでした。TypeScript、SvelteKit、node、WebGL、canvas、CSS、HTMLの細部やベストプラクティスを学ぶうえでも非常に有用でした

  • なぜほぼすべての街区に消防署があるんだろう？

  • 操作できず、ブラウザが何かをロードした途端にCPUファンが回り始めた。これが単なる出来の悪い暗号資産マイナーではないと本当に言えるのか？ そうでないなら、動かないものを公開する理由が分からない

    • 目的は、私がアクセスできないさまざまなシステムでどう動くかについてフィードバックをもらうことです。ソフトウェア、とくにオープンソースは、完全に仕上げて完璧になるまで隠しておくより、開発中のできるだけ早い段階でフィードバックを受けるほうがよいと思っています。
      あらゆる種類のコンピューターやスマートフォンを買うお金もありませんし、仮にあったとしても全部を自分でテストする時間はありません。誰かにお金をもらってやっている仕事でもありませんが、望むならPatronで支援できます: https://www.patreon.com/DonHopkins
      それでもこのプロジェクトは収入源ではなく、愛着からやっているものです。現在は、希望するテーマについて月に5分間、私が黙っているという特別商品も提供中です。
      すべてのソースコードはGitHubで閲覧でき、バグを報告したり自分でビルドしたりできます。ブラウザにはWebAssemblyバイナリやコンパイル済みJavaScriptを調べられるデバッグ・リバースエンジニアリング用ツールも入っています。WebGLシェーダーは平文なので、リポジトリのソースと一致しているかも確認できます。
      https://github.com/SimHacker/MicropolisCore
      出来の悪いマイニングソフトの証拠を見つけたなら、FBI、Interpol、GitHubに通報しても構いません。私の名前、私のGitHubアカウント、私のドメインでソースとバイナリを公開しているので、出所を追跡するのも簡単です。
      役に立つバグレポートの例では、システム情報とスタックトレースを含めて問題を特定してくれたため、数分で修正できました: https://github.com/SimHacker/MicropolisCore/issues/1
      速度調整用の数字キーを押してみたかも気になります。キーボード上部の数字キーで、「1」は毎秒1フレーム、1フレームあたりシミュレーター1ティックまで遅くなり、「9」は毎秒120フレーム、1フレームあたり50ティックで動作します。私のM1 MacのChromeでは滑らかで、インターフェースもかなり反応がよいです。
      どの操作ができないのか、ハードウェア・OS・ブラウザ・GPUが何か、ブラウザの開発者コンソールにエラーがあったかを教えてもらえると助かります。バグレポートにはコンソールのスタックトレースを含めてもらえると助かります。