Skip to content
DevMeme
5153 of 7435
Cities Skylines 2 ships a full React SPA for its in-game HUD
Frameworks Post #5641, on Nov 8, 2023 in TG

Cities Skylines 2 ships a full React SPA for its in-game HUD

Description

Image is a dark-mode screenshot of a tweet from the verified account “vjeux” (@Vjeux). The tweet reads: “City Skylines 2 is using React for all their in-game UIs!” followed by the link “blog.paavo.me/cities-skyline…”. Beneath the tweet is a cropped excerpt of the linked blog post; the excerpt says: “not ready for production as C:S2 uses HTML, CSS and JavaScript based Coherent Gameface (what a name!) for its user interfaces. A brief glance at the JS bundle reveals that they are using React and bundling using Webpack. While this is something”. The phrase “that they are using React” is highlighted in blue with the iOS copy/selection handles. Visually, the background is Twitter’s black, text is white or blue for links, and the blog excerpt appears in a white rounded rectangle. Technically, the meme spotlights the growing trend of shipping large-scale game UIs as web front-ends, complete with React, Webpack, and all the build-tool overhead experienced web engineers know so well

Categories

Frameworks GameDev Frontend

Common Tags

React GameDevelopment Javascript Frontend BuildTools ModernTechStack

Comments

43
Anonymous ★ Top Pick Some devs ship with Unity; Cities Skylines 2 apparently ships with npm install && webpack  -  hope your FPS budget includes node_modules
  1. Anonymous ★ Top Pick

    Some devs ship with Unity; Cities Skylines 2 apparently ships with npm install && webpack  -  hope your FPS budget includes node_modules

  2. Anonymous

    Nothing says 'optimized game performance' quite like shipping an entire browser engine to render your city management UI - but hey, at least the modders already know React!

  3. Anonymous

    Using React for a city-building game's UI is the perfect metaphor: both involve managing complex state trees, dealing with performance bottlenecks when rendering thousands of entities, and inevitably discovering that your carefully planned architecture needs a complete refactor when the user decides to build a highway interchange in the middle of your component hierarchy

  4. Anonymous

    React for in-game UIs? Hope the traffic sim doesn't trigger a full re-render on every zoning change

  5. Anonymous

    AAA games using React means the hardest optimization isn’t pathfinding - it’s convincing webpack’s splitChunks that the bulldozer button doesn’t need all of node_modules at 60 FPS

  6. Anonymous

    When your frame budget is 16ms and reconciliation wants 20, the city’s tax panel suddenly needs useMemo more than the pathfinder needs Dijkstra

  7. @Unencrypted 2y

    That's blasphemy

  8. @YaroST12 2y

    Point and click game using point and click UI framework 🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯

    1. @RiedleroD 2y

      local dev doesn't get joke, proceeds to make fun of it

      1. @YaroST12 2y

        I'm making fun of the whole drama

        1. @RiedleroD 2y

          ok? make fun of the game instead

          1. @YaroST12 2y

            Someone did a perf analysis but I haven't finished reading it yet https://blog.paavo.me/cities-skylines-2-performance/

            1. @RiedleroD 2y

              I don't need a perf analysis to know bundling a browser to make a UI in unity isn't the best technical decision

            2. @ygerlach 2y

              its pretty nice. TLDR: just to much geometry (they have no to little LODs)

              1. @YaroST12 2y

                Thank you

              2. @chupasaurus 2y

                multiplied by little to no culling (so most of that geometry is being rendered)

    2. @Araalith 2y

      React turns a simple click into a multi-step quest.

  9. @Araalith 2y

    React like PHP - it's useful primarily for PERSONAL home pages.

    1. Felix 2y

      Lookup hhvm

  10. @monstertotonster 2y

    Did anybody actually read the rest of the article? UI is not the bottleneck https://blog.paavo.me/cities-skylines-2-performance/

    1. @RiedleroD 2y

      bundling a browser will suck primarily for storage space, not ingame performance

      1. @RiedleroD 2y

        also RAM usage, possibly, depending on how they do it

        1. @azizhakberdiev 2y

          From what I get, react compiles into older versions of JS, so it is hard to tell judging by react. Glance at CSS code however can easily show minimal version of their browser

    2. dev_meme 2y

      But anyway, it is a part of it

      1. @monstertotonster 2y

        It is not a part of 90% GPU load as was mentioned by OP. React is a CPU intensive framework. Actually drawing the DOM (the only part with GPU interaction) is very fast

  11. @Sp1cyP3pp3r 2y

    You may need to upgrade your PC 🤓

  12. @realVitShadyTV 2y

    I don’t know guys, but I build website for my company in pure js and it completely loaded and rendered in two seconds on 10-yo laptop…

    1. @RiedleroD 2y

      2s is way too much for a simple website

      1. @realVitShadyTV 2y

        Including loading big pictures.

      2. @callofvoid0 2y

        so you have never been in our region...

    2. @golergka 2y

      Is it a website or a web app

  13. @purplesyringa 2y

    Nah the problem wasn't React

    1. @purplesyringa 2y

      The problem is they're rendering a scene in full resolution with particle simulation and whatnot that's completely hidden by the menu

      1. @ColonelPhantom 2y

        yeah they just straight up don't have lods for models that are detailed as fuck (unnecessarily so)

  14. @q_rsqrt 2y

    The problem with React is that it is crap, you can't afford something like that

  15. @denis_klyuev 2y

    In old times, gamedevs used Adobe flash to make UI in AAA games. It's all about complexity of UI. You'll be fucking tired and have many bugs making it working in pure C++. If you adapt something which is really good in it's field, it's gonna free your time and reduce bugs

    1. @RiedleroD 2y

      unity uses C# and has existing native frameworks for UI

      1. @denis_klyuev 2y

        There are many other engines besides unity

        1. @RiedleroD 2y

          cs2 uses unity

          1. @lab0rat 2y

            Rly? I thought it was the source 2

            1. @RiedleroD 2y

              cs2 in this case being city skylines 2, not counter strike 2

              1. @RiedleroD 2y

                counter strike 2 uses source 2 ofc

              2. @lab0rat 2y

                Ah, understandable

Related Memes

Business Cat Hopes He Doesn't Have an OOP, Meets EntityManagerFactory

Business Cat Hopes He Doesn't Have an OOP, Meets EntityManagerFactory

DesignPatterns Architecture
Documentation Writes a Paragraph to Avoid Saying 'Callback'

Documentation Writes a Paragraph to Avoid Saying 'Callback'

Documentation
The Pulsing Emerald Dot: Tailwind's Three-Finger Tell

The Pulsing Emerald Dot: Tailwind's Three-Finger Tell

Frontend
Use J and K for navigation