My entries to LD25 (Under a bloody sky) and LD26 (Not Complex) now have touch support, and work properly on my Nexus 4 Android device. Those two project use WebGL so few thing where realy necessary to make them working. For an unknown reason,, “Not complex” only work with firefox, not with chrome. It’s the same with every THREE.JS samples i could test.
“Under a bloody sky” use the framework PlayCanvas, and was very very simple to port. In fact, nothing needed changes except adding touch control. It work on Firefox beta and Chrome on my Nexus 4. The layout is prety simple, with only one touch event supported, dragging horizontaly will rotate the camera, and if you are above half the screen, you will go forward, and below 1/4 you will go backward.
“Not complex” was, well, not so simple to port. First, chrome doesnt seem to handle THREE.JS webgl, and some graphics bugs were visible in Firefox (changing an alpha value from 0 to 1 magicaly fixed it) and the control are a lot more complex. I also needed to attach keyboard event receiver to document, and touch event to the welGL canvas to make it work properly.
The controls use two distinct hidden zone. When the mobile is vertical, it’s the top and bottom, while horizontal use left and right, so you can put your left thumb and your right index. Draging on the bottom/left zone will make the character start moving in the specified direction, and tapping will make the character jump. The top/right zone make camera rotate by dragging, and tapping will make the character punching. The control are a little bit slugish for now, mainly with the jump, and it realy need a GUI to be user friendly.
Here is a small abstract of the layout for “Under a bloody sky” and “Not complex” horizontal and vertical.
If you have any advice or tips about touch handle and layout, it’s realy wellcome.