SimCity yang berjalan di browser web dengan WebAssembly dan OpenGL

 (micropolisweb.com)
3 poin oleh GN⁺ 2024-06-17 | 1 komentar | Bagikan ke WhatsApp
  • Micropolis Web, yang berbasis SimCity Classic asli dari Maxis, telah dirilis dalam bentuk yang berjalan di browser, sehingga simulasi kota klasik ini bisa dicoba tanpa instalasi terpisah
  • Proyek ini adalah versi port dari game yang dirancang oleh Will Wright oleh Don Hopkins, dan masih berstatus eksperimental, belum merupakan versi final, serta terus berubah
  • Repositori GitHub, video demo, serta buku dan diagram karya Chaim Gingold juga disediakan untuk menelusuri implementasi dan sejarah SimCity lebih dalam
  • Pengoperasian menggunakan drag dan wheel mouse, tombol arah, tombol huruf, dan tombol angka untuk berpindah, zoom, memuat kota, mengatur kecepatan, mengubah tarif pajak, dan mengganti tileset
  • Nama “Micropolis” digunakan sesuai ketentuan Micropolis Public Name License, dan fitur tambahan serta easter egg masih belum siap

Micropolis Web yang berjalan di browser

Cara pengoperasian dan catatan yang masih perlu diperhatikan

  • Kontrol mouse

    • Seret tombol kiri untuk menggeser layar
    • Gunakan wheel mouse untuk zoom in dan zoom out

  • Kontrol keyboard

    • Gunakan tombol arah untuk menggeser layar
    • Tombol koma dan titik untuk zoom in dan zoom out
    • Tombol huruf untuk memuat berbagai kota
    • Tombol \ untuk membuat
    • Tombol angka untuk mengatur kecepatan
    • Tombol 0 untuk mengaktifkan atau menonaktifkan jeda
    • Tombol kurung siku untuk menurunkan atau menaikkan tarif pajak
    • Tombol - dan = untuk mengganti tileset
    • Menekan tombol “X” di bagian atas dapat menyembunyikan jendela petunjuk
    • Fitur tambahan dan easter egg sedang dipersiapkan
    • Pesan peringatan dimulai dengan instruksi agar tidak menekan spasi, tetapi pada teks yang diberikan penjelasan lanjutannya tidak lengkap

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-17
Komentar Hacker News

  • Mem-porting game lama ke web itu menyenangkan. Sekarang bahkan banyak game yang ukurannya lebih kecil daripada halaman web biasa, jadi cepat dimuat dan berjalan dengan baik
    Baru saja mem-porting Quake 3 dan sedang asyik mengutak-atiknya: https://thelongestyard.link/

    • Alasan aku tidak suka browser saat membuat game adalah latensi input. Meski begitu, hasil kerjanya luar biasa
    • Penasaran sebaiknya mulai dari mana untuk melakukan hal seperti ini dengan lebih baik. Terutama ke arah mem-porting game lama ke Wasm

  • Demo Micropolis Web 1: https://www.youtube.com/watch?v=wlHGfNlE8Os
    Micropolis Web adalah versi browser dari Micropolis, SimCity open source, dan menggunakan WebAssembly, WebGL, serta SvelteKit. Ini didasarkan pada kode asli SimCity Classic yang dirancang oleh Will Wright dan di-porting oleh Don Hopkins, dan demo pertamanya sudah menjalankan simulator WebAssembly serta animasi tile WebGL, tetapi sebagian besar antarmuka pengguna masih dalam pengerjaan
    Situs live: https://MicropolisWeb.com
    Sumber dan dokumentasi: https://github.com/SimHacker/MicropolisCore
    Buku Chaim Gingold "Building SimCity": https://mitpress.mit.edu/9780262547482/building-simcity/
    "SimCity Reverse Diagrams" karya 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
    Musik dibuat oleh Juho Hietala, Blamstrain, dan Space Inventory Cellular Automata diimplementasikan oleh Don Hopkins: https://blamstrain.com/

    • Mengejutkan bahwa Building SimCity karya Chaim Gingold baru saja terbit pada 4 Juni 2024. Dulu aku sangat menyukai diagram algoritma SimCity, dan rasanya aku juga pernah membaca disertasi doktoral yang membahas detail cara kerja internal SimCity
      Gingold, Chaim. “Play Design.” Ph.D. thesis, University of California Santa Cruz, 2016. https://www.proquest.com/docview/1806122688
      Porting Wasm untuk Micropolis tampak bisa menjadi tahap baru dalam pengembangan. SimCity Classic di Macintosh sangat memengaruhi cara aku memikirkan komputer dan perangkat lunak saat kecil, jadi senang melihatnya diberi kehidupan baru di sini

  • Saya bukan gamer, tapi saya ingat pernah memainkan SimCity waktu kecil. Saya tidak tahu apakah gameplay-nya berubah dalam sekitar 25 tahun terakhir, atau browser-nya yang rusak, tetapi kelihatannya tidak ada yang bisa dilakukan.
    Saya bisa memuat kota dan melihatnya bergerak, tetapi sepertinya di SimCity dulu kita bisa membangun kota sendiri. Bukankah seharusnya ada cara untuk benar-benar bermain bagi pemain?

  • Awalnya saya tidak berharap banyak di perangkat seluler, tetapi di Firefox pada Android halaman ini membuat browser macet total. Saya sampai harus mematikan prosesnya, dan kejadian seperti ini jarang terjadi
    Sebagai catatan, saya punya game kecil yang saya port sendiri ke browser. Membuatnya bisa berjalan sangat mudah berkat kombinasi Emscripten+SDL2, tetapi sejujurnya usaha terbesar justru ada pada membuatnya benar-benar nyaman dimainkan di ponsel: https://play.neverball.org/

    • Saya pasti ingin mendukung perangkat seluler. Saya juga sudah memperbaiki satu bug yang sebelumnya mencegahnya berjalan di Firefox pada Ubuntu, berkat laporan bug yang ditulis dengan baik dan menyertakan stack trace. Coba lagi, dan jika masih tidak berhasil, saya akan sangat menghargai jika Anda melaporkan bugnya dengan menyertakan stack trace dan informasi platform
      https://github.com/SimHacker/MicropolisCore/issues/1
      Daripada menunggu sampai semuanya selesai dan sempurna, saya ingin merilisnya secepat mungkin agar orang lain bisa langsung mencobanya. Jadi masih banyak yang harus dikerjakan untuk antarmuka pengguna, stabilitas, dukungan lintas platform, seluler, dan lainnya
      Begitu simulator dan tile renderer mulai berfungsi, saya langsung menambahkan zoom/pan minimal, antarmuka kontrol keyboard, dan jendela petunjuk yang bisa ditutup dengan tombol "+" di kanan atas
      Yang benar-benar saya nantikan adalah mengintegrasikannya dengan bahasa pemrograman visual seperti Snap! agar bisa membuat live coding, area plugin, robot, sistem pemantauan dan kontrol, visualisasi serta ekspor data, dan antarmuka alternatif seperti dashboard Grafana
      Ponsel Android bisa dihubungkan ke Mac atau PC lewat kabel USB, sedangkan iPhone ke Mac, lalu Anda bisa memeriksa konsol jarak jauh, melakukan debugging, bahkan live coding melalui Chrome atau debugger Safari di Mac. Dalam kondisi tertentu mungkin juga bisa lewat Wi‑Fi, tetapi mungkin Google sudah menghapus fiturnya atau Apple memang dari awal memblokirnya
    • Saya terkejut karena frame rate-nya tinggi dan hampir tidak tersendat di Firefox pada ponsel Android murah berusia 4 tahun. Memang bukan tekstur atau poligon dalam jumlah besar, tetapi saya tidak terbiasa melihat performa seperti ini di browser ponsel tersebut
    • Di pihak saya, Firefox pada Android juga tidak macet. Namun saya pernah melihat beberapa versi Firefox terbaru kurang bagus dalam menangani PDF, jadi mungkin ada kaitannya dengan perbedaan versi

  • Saya pernah mem-port klien RuneScape ke web
    https://play.rsps.app/
    Menggunakan Wasm, TypeScript, dan WebGL

  • Repositori sumber: https://github.com/SimHacker/MicropolisCore

  • Hal yang terjadi saat menekan spasi benar-benar mengejutkan. Fraktalnya keren sekali

    • Space Inventory terinspirasi dari ulasan World Quester 2 oleh Game Helpin' Squad, dan saya juga ingin membuat menu serta antarmuka pengguna Micropolis sekeren World Quester 2
      https://www.youtube.com/watch?v=0Gy9hJauXns

  • Penasaran apakah model bahasa besar bisa langsung mem-porting game seperti ini

  • Kenapa ada kantor pemadam kebakaran di hampir setiap blok kota?

  • Tidak bisa dikendalikan, dan begitu browser mulai memuat sesuatu, kipas CPU langsung berputar. Yakin ini bukan sekadar penambang kripto murahan? Kalau bukan, saya tidak paham kenapa sesuatu yang tidak berfungsi dipublikasikan

    • Tujuannya adalah mendapatkan umpan balik tentang bagaimana ini berjalan di berbagai sistem yang tidak bisa saya akses. Menurut saya, untuk perangkat lunak, terutama open source, lebih baik mendapatkan umpan balik sedini mungkin selama pengembangan daripada menyembunyikannya sampai benar-benar selesai dan sempurna.
      Saya tidak punya uang untuk membeli semua jenis komputer dan ponsel, dan kalaupun punya, saya juga tidak punya waktu untuk menguji semuanya sendiri. Ini juga bukan pekerjaan yang dibayar, tetapi kalau mau Anda bisa mendukung lewat Patreon: https://www.patreon.com/DonHopkins
      Meski begitu, proyek ini bukan sumber penghasilan, melainkan kerja yang saya lakukan karena kecintaan. Saat ini saya juga menawarkan produk spesial berupa diam selama 5 menit per bulan tentang topik apa pun yang Anda inginkan
      Semua kode sumber bisa dilihat di GitHub, dan Anda dapat melaporkan bug atau membangunnya sendiri. Browser juga memiliki alat debugging dan reverse engineering untuk memeriksa binary WebAssembly dan JavaScript yang telah dikompilasi. Shader WebGL berbentuk plain text, jadi Anda juga bisa memeriksa apakah itu sesuai dengan sumber di repositori
      https://github.com/SimHacker/MicropolisCore
      Jika Anda menemukan bukti perangkat lunak penambang murahan, silakan laporkan ke FBI, Interpol, atau GitHub. Saya memublikasikan source dan binary dengan nama saya, akun GitHub saya, dan domain saya, jadi asal-usulnya juga mudah dilacak
      Contoh laporan bug yang membantu mencakup informasi sistem dan stack trace untuk mengidentifikasi masalah, sehingga saya bisa memperbaikinya dalam hitungan menit: https://github.com/SimHacker/MicropolisCore/issues/1
      Saya juga penasaran apakah Anda sudah mencoba menekan tombol angka untuk mengatur kecepatan. Berdasarkan angka di baris atas keyboard, "1" memperlambatnya menjadi 1 frame per detik dan 1 tick simulator per frame, sedangkan "9" menjalankannya pada 120 frame per detik dan 50 tick per frame. Di Chrome pada M1 Mac saya, ini berjalan mulus dan antarmukanya juga cukup responsif
      Akan sangat membantu jika Anda memberi tahu kontrol apa yang tidak berfungsi, serta perangkat keras, sistem operasi, browser, dan GPU yang digunakan, dan apakah ada error di konsol pengembang browser. Akan membantu jika laporan bug menyertakan stack trace dari konsol