High-performance animation with react that compiles to both native mobile
(iOS for now) and web. Originally I tried
doing it with react-native
but it was way too slow and janky. Instead, this project uses
Ejecta which natively implements
a subset of WebGL that works with
Ultimately, it would be great if we could integrate this into react-native somehow.
For iOS compatibility, the minimum we need is a combination of Ejecta, threejs, and react-three, and of course react 0.14+. For creating fast functional animations in the demonstration game I used react-imation, react-stateful-stream, and updeep. You could use immutable-js instead of updeep (I have no idea which one is faster), but updeep is more fun to use.
Clone this repo then:
build and run for iOS
npm run build # build open Ejecta.xcodeproj/ # open xcode
run the commands above then click run in XCode
Note: When you build for iOS, the output is
build and run for web
Without Hot Module Reload (HMR)
npm start # start webpack and dev server
Run the command above then goto http://localhost:3420/dev.html. This configuration has inline source maps enabled. Although this configuration doesn't support hot-reload, the page will auto-refresh with any change.
npm run hot-web # start webpack and dev server with HMR
Run the command above then goto http://localhost:3420/dev.html. Note: needs improvement, generates a lot of WebGL warnings on hot loads. This configuration has inline source maps disabled so that hot reloads are faster.
The default setup of this project is that there are two
Whenever you add an image to one dir, you should also add the same image to the other dir. If all of your web images will be the same resolution as your mobile images, it would probably be best to modify the build config such that it avoids unnecessary copying.
npm run scripts
Here are all of the build scripts and how you can use them:
npm run build- Build once (for development)
npm run watch- Watch files for changes and build continuously (for development)
npm run build-prod- Build once (for production)
npm run build-prod-watch- Watch files for changes and build continuously (for production)
npm start- Continuous build and server (for development).
npm run hot-web- Continuous build and HMR server (for development).
npm run build-web- Build once (for development)
npm run build-web-prod- Build once (for production)
Q: what about android?
A: Ejecta only supports iOS. However, this project might very well work on Android using cocoonjs. But I didn't test it because I spent a few minutes on cocoonjs website before getting discouraged. It has too many weird quirks for my taste. For example, to build you must upload a ZIP file (wtf year is this, 1990?).
Q: is it really fast enough to create a game?
A: Not sure yet. Ejecta and threejs seem fast enough, but is react fast enough?
Q: i have a question!1!?