gjtiquia / react-native-web-game-demo

A demo project to test a game engine capable of running in both mobile and web using an Expo managed workflow while using React Native Skia as the graphics library.

React Native Web Game Demo

A demo project to test a game engine capable of running in both mobile and web using an Expo managed workflow while using React Native Skia as the graphics library.

A web demo is hosted here: https://react-native-web-game-demo.netlify.app/

An Android APK demo is available in the releases page and in this link.

Instructions

Setting up a Development Environment

Install all the required dependencies with the following command.

npm install

Start a development server with the following command.

npm start

Following the on-screen instructions, press "w" to open the app on the web.

To open the app on mobile, ensure your mobile has the Expo Go app installed and is connected to the same local network as the computer, then scan the QR code shown with the Expo Go app (Android) or the Camera App (iOS).

Creating a Web App Build

Create a web app build with the following command.

npx expo export:web

This creates a production-ready static bundle in the web-build directory at the root of the project.

Serve the static bundle locally with the following command.

npx serve web-build

Follow the on-screen instructions to test locally how the app works in production.

Read here for more documentation on creating web apps with Expo.

Creating an Android APK Build with EAS Build

First follow the setup steps according to the Expo documentation.

Then run the following command

eas build -p android --profile development

Developer Tools

Analyze, detect and debug circular dependencies with the following command. This also generates an interactive graph.

npx skott --showCircularDependencies ./App.tsx

In the command above, App.tsx is used as the entrypoint. Read the documentation for more information.

Another useful command to check for circular dependencies.

npx dpdm ./App.tsx

react-native-web-game-demo's Issues

no need to pass game engine via Context

useContext is kinda like... upgraded props / useState, meant for re-renders
but since we dont update the components when the game engine state changes, instead we read it every frame by the clock and update manually, we dont need to get it via context
this way can also make the game engine UI agnostic (prep for future use with HTML canvas)

no need to useRef as well since everyone should be referencing the same instance anyways

can also refactor the useRender hook, move it out of the core directory and put it in its own hooks directory, ie. src/hooks

Add physics engine

References:

https://gamedevbeginner.com/how-to-use-fixed-update-in-unity/
https://docs.unity3d.com/Manual/ExecutionOrder.html
https://developer.ibm.com/tutorials/wa-build2dphysicsengine/

debug group not working after trying to read from game engine instance in mobile

input to jump prototype

Refactor box and platform into game objects