City builder game advice

Questions
1

Hello everyone,

I am currently researching technologies for a city builder game for web and mobile, e.g in React and React Native. The high level objective of the game is to allow players to build, manage and upgrade their own sports city, similar to something like Sports City Tycoon.

This game will actually be a companion game to our main product, a sports prediction game, that is built with React and without any 3D components. We have decided not to use something like Unity, because embedding Unity within React and React Native seems like a tall order and does not provide a seamless user experience, and more importantly we do not have any Unity developers in-house.

From a tech perspective, the solution must be able to seamlessly integrate with our existing technology which is Javascript/React/React Native frontend and Python based API backend. Switching between the sport prediction screens and this builder game should be seamless (for example we do not want to build and maintain 2 different mobile apps).

From a user experience perspective, the game might consist of these types of features:

  • The user can view the city from a birds eye view.
  • Zoom in/out, change the camera angle of the city.
  • Click and interact with buildings ( e.g. to apply upgrades )
  • See “upgraded” buildings render immediately

I wanted to get some feedback from this community to see if threejs is the right option for us or if there are any recommendations out there for how to go about developing this companion game.

Thank you!

2

For web - absolutely, three’s your best bet in that case (alt. Defold, Pixi.js, Babylon.js, or just pure WebGL - it’s all different API but same stuff)

For mobile - depends. There’s a significant amount of issues you’ll need to manually work around when creating a game with WebGL instead of native, ie. Unity / Unreal / Godot. One of the most important ones is the memory limitation of WebViews - this has been fixed on newer iOS versions, but a major portion of iOS devices will simply crash and hard-reload your game the moment you hit a (relatively tiny) memory limitation. That means you will have to invest quite a lot of time on memory management and QA (three does not do that for you.)

1 Like
3

Thank you @mjurczyk for the feedback, its very useful! Especially the note about WebView memory limits. I did a quick google to find out more information on the limits for different platforms… but there is not much information out there.

However, its my understanding that React Native doesn’t run in a WebView, though I’m not familiar with it and how it works with WebGL on mobile devices.

I came across this library that renders threejs in React (both for web and mobile) React Three Fiber Documentation.

Have you any experience with it? Do you think it would still suffer from the same concerns you mentioned before?

Thanks!

4

Yes, react-three-fiber is probably the most reasonable and popular way of using three with react (plus it’s very good for big / complex projects)

Anything that uses WebGL to render 3D will most likely be affected (the limits aren’t imposed by three / WebGL, but by the built-in WebView browser. Whether the project uses vanilla / react / vue / angular would be irrelevant.)

You can try using expo-gl - but personally I don’t have enough experience with it, so hard for me to tell if / what development challenges would appear there (it doesn’t seem to use WebView so the memory limitations wouldn’t affect it though.)

1 Like