0

Firefly – three.js mobile game

Project Description

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

As time is limited, most of our basic models are from archive3d.net. These files are in .3ds format. We install a plug-in called Maya Bonus Tools, so that 3ds Max files can be edited 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.)

screen-shot-2016-12-01-at-9-18-59-pm

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.

 

Follow Up

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.

 

Special Thanks

Rubin Huang
Craig Pickard

 

Project Source Code URL  

Github

 

Some pictures from the App now.

 

Leave a Reply

Your email address will not be published. Required fields are marked *