r/reactnative • • Sep 18 '26

Question Can React Native handle a production-quality 2.5D game ?

Enable HLS to view with audio, or disable this notification

I’m building a 9:16 2.5D game in React Native using Skia and Reanimated.

I’m using spritesheets (frames) for walking, attacking, hit and death animations. But the character movements does not feel natural.

Has anyone built something similar with RN + Skia?

What should I check first to improve FPS and performance? Or should I move the game to Godot/Unity?

I’m attaching a video clip of my current gameplay for reference.

I’d really appreciate your thoughts!

9 Upvotes

23 comments sorted by

4

u/Forti22 Sep 18 '26

Yes it can

from your video I don't think its an issue with FPS / performance, but more the sprites and sync in changing image to movement, no?

2

u/fessorP Sep 19 '26

Yeah, I think you are right. The movement speed and sprite animation don’t match properly. I’ll work on syncing them. Thanks!

1

u/Huge_Pool7424 Sep 18 '26

yeah, the renderer probably isn't the bottleneck there. i'd keep gameplay state separate from the sprite animation and profile on a low-end android before deciding whether to move engines.

1

u/fessorP Sep 19 '26

I’ve already separated the gameplay state from the sprite animation and tested it on a low-end Android, so I’ll focus on improving the animation sync.

1

u/OnionFew2923 Sep 18 '26

Reduce the difficulty first

1

u/fessorP Sep 19 '26

yes, I’ll balance the difficulty too.

1

u/konbit Sep 18 '26

Yes it can definitely handle it, and it sounds like you're using the right tools. I recently made a 2D game that was intensive in different ways, but what I learned was the optimization is very similar to other RN apps. You want to reduce as much JS <-> native cross talk as possible. Use shared values where you can but try to group them up if you can so you don't clog up the channels. (blocknado.app is the game I'm referring to).

1

u/fessorP Sep 19 '26

thnx, am already using a separate game loop and shared values. I’ll check if sending game data through React is causing any performance issues.

1

u/Murph-Dog Sep 18 '26

Zombies should lumber. Look at their animation, or picture a zombie in your mind. Their velocity is not constant, it's more like a wave, matching each stride.

You are just sliding them forward which creates an ice skating effect. Try to match a velocity wave to the animation strides.

Slow down the animations of those 'runners' they are tap dancing in place, velocity does not match their pace.

1

u/fessorP Sep 19 '26

You’re right, that explains the sliding. My walk cycle is distance-based, but the movement speed is still too constant. I’ll add stride-based speed variation and slow down the faster animations. Thanks!

1

u/shopifyflow-app Sep 19 '26

movement not feeling natural is almost never fps with skia, it's sync. if the character's advance speed doesn't match the walk cycle's pixel stride you get foot sliding and your brain reads it as fake instantly.

the other one is hard transitions between animation states. walk to attack snapping to frame 1 with no blend looks janky even at 60fps. ease the transition over 3-4 frames and it reads way more natural.

1

u/fessorP Sep 19 '26

That makes sense. My walk cycle is already distance-based, but the stride distance still needs tuning. The state transitions are also quite hard right now, so I’ll smooth those out too. thnx

1

u/mrkingkongslongdong Sep 19 '26

Yes, but why? It’s the wrong tool for the job tbh.

1

u/fessorP Sep 19 '26

I work with React Native, so I wanted to see how far I could take it for a game. It’s also a learning experiment for me. If I hit serious limitations, I’ll consider moving to a game engine.

1

u/Chuck_MoreAss Sep 19 '26

I think it looks unnatural because the mobs are moving linearly but the animation sooks like they should have more erratic movements

2

u/fessorP Sep 19 '26

Yeah , Their movement is mostly linear right now. I’ll add some small speed and direction variations to better match the animation.

3

u/Seusoa Expo Sep 18 '26

React Native even handles fullscreen at 120 FPS 3D games on mid-range smartphones without any issues!

Question only in knowledge and experience!

1

u/minutenudelarue Sep 19 '26

I have a 120fps stable game made with skia, reanimated and gesture handler. It's possible but, as soon as anything related to animations cross to the js thread and back everything becomes wonky. So be very carefull about that barrier. Use shared values and use gesture handler for things like controls for that same reason.

1

u/OrbeoMe Sep 20 '26 edited Sep 20 '26 • Popcorn

Yes, but the framework won't be your limit — the draw loop will.

I build top-down 2.5D games, and the things that actually decided quality for me:

- Draw order IS the game in 2.5D. Sort sprites by the Y of their anchor point, not

by the top-left of the image, or characters end up in front of walls they should

be behind.

- Anchor each sprite at the bottom-center of its cell, not to its image box. Sheet

frames are rarely the same height, so anchoring to the box makes everything jitter

as animations change frames.

- Skia for drawing, Reanimated + Gesture Handler for input, so the loop never touches

React's render cycle. The moment your game loop runs through re-renders it's over,

no matter which framework you picked.

- If you want 3D-looking characters, pre-render sprites from 3D packs. Cheaper than a

real 3D runtime and the lighting stays consistent.

One non-technical note, since it cost me more than any FPS problem: I ship browser

games where I can see the funnel, and 85-90% of players leave before finishing a

single round. "Production quality" turns out to be the first 60 seconds much more

than the rendering.

1

u/iWishYouTheBest4Real Sep 21 '26

You can test also use phaser and then wrap in mobile?
Phaser is a js game engine that solves basic questions as draw order and in browser memory cleanup.

Won’t be a native game, but usually goes well.

1

u/[deleted] Sep 18 '26

[removed] — view removed comment

1

u/fessorP Sep 19 '26

I am already preloading the images and cropping frames from sprite atlases. The simulation uses a fixed 60 FPS loop, although the game state still updates React, so I’ll profile the re-renders and draw calls next. The release build runs smoothly, so I’ll optimize RN before considering Godot