Kill Da Corona - my first game ✌🏼

[emmelleppi]

Actually, it’s my first topic on this forum. So hello everyone

In the last month I have tested various threejs-based libraries (mainly use-cannon and react-three-fiber) and given the amount of free time due to the quarantine I decided to make my first game.

I wanted to share it with you and thank you for all the answers you unconsciously gave me through this forum.

Here the game (only desktop) -> https://killdacorona.online/
Here the code (lacks of comments for now, sorry) -> https://github.com/emmelleppi/corona-game

All the game was done with react-three-fiber.

Honestly, I’m not sure if this approach is the best one for a web-based game.
Using only React to manage entities such as the player and the Corona particles was difficult.
The frequent updates of React components literally kill the performance.
So I opted to centralize as much game logic with xstate (https://github.com/davidkpiano/xstate), trying to delegate only the rendering to React
Despite this I have already noticed that on some PCs the 60fps are never reached.

From the threejs point of view I have tried to lower both the 3D objects vertices and the lights to a minimum number, completely eliminating the shadows in favor of fake shadows (sprites).

I am open to advice and criticism

[waverider404]

fun

[DolphinIQ]

Yeah its pretty fun! I like the effect of “running fast”
I think the graphics are cute and really nice. The music is great too!

As far as the gameplay goes, I’ve found it a little bit hard to judge the right distance to attack. In other words, I’ve had problems with dealing damage, while avoiding damage myself, even on 1v1. It’s not exactly clear to me, how the virus attacks.

Edit: Oh and the fps was consistent 60, so that’s pretty nice

However it seems Ive encountered a bug. Basically my first run was great, I died, and after respawn, I jumped down as intended, but I fell through the body and died immediately. After my next respawn, I noticed Sars-CoV doesnt deal any damage and neither do I (although me and the virus could still move). I opened the console and found this:

Testing machine: Windows 7, Nvidia card
Browser: Opera ver 68.0.3618.125 (up to date)

Hope it helps

Overall, pretty great for your first game, good job!

[drcmda]

looks great! as for performance, you shouldn’t use react to update movement, animations, gestures, everything that’s firing rapidly. if you setState props like that 60 times per second it’s not going to go well, same as in plain react if you try to animate divs and spans like that. react is for building the graph, mounting, unmounting, holding logic, etc. for render-loop based stuff you have useFrame, which should not contain side-effects. Then you won’t run into performance issues.

here’s an example https://codesandbox.io/embed/r3f-game-i2160 react is not involved in a single frame, it’s all plain threejs, yet react builds the scene, manages the state, and holds everything together. it’s using zustand btw, it doesn’t respond to state updates by re-rendering the scene, it just affects the view directly. see: https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes

[emmelleppi]

Thank you so much DolphinIQ!

I’ve had problems with dealing damage, while avoiding damage myself, even on 1v1

So, from the point of view of gameplay, there is still a lot of room for improvement. I don’t have a great background about games, so some things have been made by guesswork

I fell through the body and died immediately

This is a bug that sometimes happens to me too, I have not yet managed to solve it. It is certainly linked to a fine tuning of the parameters of the physics engine that I am using (use-cannon)

After my next respawn, I noticed Sars-CoV doesnt deal any damage and neither do I

I have never experienced this bug, I will try to replicate it, thank you!

[emmelleppi]

Thank you drcmda!

The whole game is based on react-three-fiber, react-spring, zustand, use-cannon and xstate.
So 90% of the time I peeked over some of your codesandbox hahaha

Initially, for the management of the game logic, I had taken as reference exactly that codesandbox that you shared me. But then, when the player and especially the virus became more complex, a management only via zustand proved to be a bit too verbose.

Being in fact both the player and the virus two finite state machines, I decided to pass their logic to xstate, which by the way has a very useful integration with react and allows you to subscribe to its services (like zustand). Keeping zustand to manage user interaction and to store other game variables.

The last step to attempt to improve performance was the creation of an EntryPoint component for each entity that had to interact with the store.
i.e. the EntryPoint component subscribes or accesses the store, the received data is passed to the child, who is wrapped by React.memo ()

Something like this

function CoronaEntryPoint(props) {
        const { mycoronaistance } = props

        const [{ context }] = useMachine(mycoronaistance)
        const { someUsefullVar } = context

        const firingRapidlyConst = useRef()
        useEffect(() => storeApi.subscribe(({ corona }) => void (firingRapidlyConst.current = corona[0].position)))

        return <Corona someUsefullVar={someUsefullVar} firingRapidlyConst={firingRapidlyConst} ... />
    }

    React.memo(
        function Corona(props) {
            ...
        }
    )

however, it is already good news that it goes at 60fps to someone else besides me

[georgewaraw]

Looks really good! And performance is not that bad either. On an i7-4770HQ with integrated graphics I got 60fps with browser window ~50% size and 30-40 when fullscreen. Honestly that’s better than most of the demos I try on here!

[emmelleppi]

Thank you georgewaraw!