Tapia, Eons in the making


I’m happy to share my release of Tapia, I released it in the Apple App Store in December. I couldn’t have done it without three.js. It’s s reff for a previous game I did called Cube 11, also available in the apple store.

Tapia is a challenging sliding puzzle game where you slide and merge tiles on the planet Tapia to build up terrain. You are the Finnish spirit of the forest, Tapio. Watch over your world. Grow forests. Shift mountains. Move oceans. How long can you keep Tapia evolving?

Id love to know what you guys think.

Tapia official website
Tapia in the Apple App Store


Looks wonderful, great job!

1 Like

Looks fantastic! Downloading now.

1 Like

Thanks! Much appreciated.

Wow, thanks. Enjoy!

This looks great!

1 Like

How did you calculate the amount of rotation to give the sides based on touch movement? I can tell you used raycasting to find out the original selection, but how do you know how much rotation to apply once te selection starts moving?

So at the start of the touch event I raycast against an invisible cube to determine what side of the puzzle I’m on. If I hit a tile I know I’ll be sliding tiles. If I don’t touch a tile I know I’m rotating a hemisphere. After determining what side of the cube I have touched I place an invisible plane that extends off the screen centered at 0,0,0 and facing the side of the cube I touched. On touch move I now raycast against the plane. after a given distance of touch move across the plane I then know what axis to slide tiles or rotate the hemisphere. From there I group movable tiles or tiles and ocean cubes into an Object3d and apply transform to the Object3d. Slide and Rotation deltas are simply a fraction of the delta of the raycast on the plane. On touch end I animate the Object3d to the nearest resting point. After the animation I put the tiles and cubes back to the world, and apply the transform from the Object 3d to the returned tiles.


This looks really cool. How do you prepare a three.js app for the Apple store?


Could you share a high level overview of what your process is to go from threejs to native app in the app store? Thank you!

I use Cordova. cordova.apache.org

Apple has depreciated UIWebVIew. It’s been replaced with WKWebView.
Apple will now reject apps that even reference UIWebVIew.

Cordova just recently updated their support for WKWebView so that it complies with Apple.

Steps needed to make an Apple Complient Cordova app:

In the terminal, install Cordova.
Sudo npm install -g cordova

Make a Cordova project
cordova create

In your newly created Cordova project edit the config.xml file. Add the following…

Back in the terminal, navigate to the of your project and add iOS platform
cordova platform add https://github.com/apache/cordova-ios

From there your app in in the www folder in the Edit your app there, test/debug in browser.


Hey there, check out the reply to makman.

Thanks!!! :slight_smile: And again beautiful work!

Great work man :slightly_smiling_face: What did you use for the ui? Css or another?

CSS. I apply a blur filter to the game canvas when I bring up the menus. The animations are actually gifs.