Gaming WiiU Browser - Blob Sallad demo

[Cyan]

Today, after updating to firmware to 2.0, first thing I did was launching the WiiU browser and I started working on a port of Blob Sallad for WiiU gamePAD!
BlobSallad is a demo for object collision done using Canvas and javascript.


As the WiiU browser supports Canvas and also expose all its buttons, gyroscope and accelerometer parameters, I wanted to update that script to add gamePad interaction.

You can find the WiiU demo here : http://cyan.ff6.free.fr/WiiU/
Go there with your WiiU browser. If you use your your computer's browser, it will emulate the "angle" with Left/right only. Other mode are not available.
On the Original demo, left/right were used to move the blob around, on this one it's simulating a tilt of the gamePad.


Please read this to understand how to use:

Spoiler: readme.txt

Usage:

Go to http://cyan.ff6.free.fr/WiiU/ with your WiiU browser and use the gamePad to play with it.

R : Toggle Debug menu display
ZR: Split Blobs
ZL: Join Blobs
Stylys: Catch and move Blobs freely
D-pad change mode.


DPAD mode:

Down: Gravity (Angle) (Default mode)
Hold the gamePad vertically.
Tilt the gamePad to left or right to move the blobs. quickly shake the gamePad up to make a jump. Jump height depends on shaking strength.
Press D-Pad Down to reset the angle/gravity origin.

Up: Air Bubble (Accelerometer)
Hold the gamePad horizontally.
tilting it in all direction make the blob move to the upper part, like air bubble in water.

Left: Friction (Gyroscope)
Hold the gamePad vertically.
moving slowly the gamePad in a direction (horizontally or vertically) and suddenly stop will make the Blob continue moving in that direction.

Right: Look Around (Gyroscope)
Hold the gamePad vertically.
Moving the gamePad in a direction (horizontally or vertically) looks like a window on another world, you look around and the blobs stay at their places (unless they hit a border).



Todo:
- prevent key from fast repeating.
- Prevent keys from triggering default browser's action.
- Test gamePad Orientation feature.

Feel free to fix, change, add features in my stead


Special thanks to Björn Lindberg for his original BlobSallad Canvas script, and to Wiiubrew.org for the WiiU browser documentation.
http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/
http://wiiubrew.org/wiki/Internet_Browser

 

[lovewiibrew]

Hey cyan, this is pretty neat. I especially liked jerking the gamepad up to throw the blob(s) into the air and flinging them with my finger. Nice proof of concept.

I should also mention ZL will cause the blobs to join but will bring up browser tabs and if you have two tabs up it will switch to the other tab.

 

[Devin]

Neat even on my computer.

The H, and J keys on a PC's keyboard splits/joins them. Clicking the blob allows you to move/throw him, and the arrow keys allow you to move. Must be even better on the Wii U.

 

[Cyan]

I didn't know ZL switched the tabs (I always worked on a single tab).
I don't know how to prevent the buttons to affect the navigator's default behavior.
I remember CyanPrime posted a code to block propagation but said it didn't work like he hoped.

It was great on PC, and even more on the Pad where you can use rotation/movement to control the Blobs.

It's only a Proof of concept as I didn't see anyone else doing it since the console launch.
The value and effect may seem unnatural as it's coded quickly (I set them randomly). Retail games are very precise on accelerometer/gyroscope/angle/direction combination (like ZombiU), and I'm sure other developers can use it a lot better than me.

I hope other users will find better use and integration to their own games

Edit:
Elisherer added a link to nintendo website on Wiiubrew.
Nintendo explains all (some of) the javascript objects, and has a sample page to test all the buttons and physical forces applied to the gamePad.

http://www.nintendo.co.jp/wiiu/hardware/features/internetbrowser/sample.html
It's great to see the 3D space representation when moving the gamePad around.

unfortunately, they don't have a way to prevent default browser's action when testing the buttons.

 

[picano]

This is pretty awesome... I'm gonna play around with it a bit myself --- probably make a small Bomberman demo.