We used to see world with our body size. What is the view of mini creatures, like a firefly?
In this app, a firefly accidentally get into a kitchen. With a dim spot light created by itself, it explores gigant foods, cookwares, etc in the kitchen. Players control the firefly by tilting their phones.
Here is the process of how we create the game step by step.
Step 1 – Create Models in Maya
In addition, we find another plug-in called OBJexporter. This allows us to finally load the models in three.js. (Actually, we also tried Maya to Three.js exporter, but the .json file doesn’t work. Still trying to figuring out why.)
Step 2 – Load Models and Create Texture with Three.js
We find some texture image and use CrazyBump to generate normal map or bump map for the models, so that the models will look more realistic.
Here is the example of how we load .obj file and attach the texture to it.
Step 3 – Use Cordova to Create an App
We follow the documentation from Apache Cordova and create our first app. By changing the config.xml file, we are able the replace our logo and splash screen.
Step 4 – Create the firefly
After creating the app, we put our main.js code under the folder www/js of Cordova project. In order to simulate the light of a firefly, we create a point light first.
To make it look more lively, we add some bouncing effect.
Step 5 – Import P5.js and Use Rotation Data of Phone
The interaction is that by rotating the phone, users can control the movement of the firefly. Currently, the easiest way for us to do that is to use rotationX and rotationY in P5 library.
Here is the function to map the rotation data to moving speed.
In three.js animate() function, we wrote this.
The camera is following the firefly.
Step 6 – Create Background Music
At first we tried to load music with P5 library in Cordova, but it didn’t work. Therefore, we switch to cordova-plugin-media.
As we wrote in our proposal, this is an ongoing project. We got a lot of good feedback from our classmates. There will be more interaction adding between the firefly and objects in the kitchen. We are now doing research on Physi.js, which can add physics simulation to the scene. Hopefully, this will be developed into a game which has more stories and scenes for this little firefly who accidentally runs into giant human world.
Project Source Code URL
Some pictures from the App now.