madebywild / konterball

Konterball is a single or 2-player virtual reality game, built for the web as a Google VR Chrome Experiment.

Try it here

Introduction

Konterball is a VR Chrome Experiment made by WILD. It's a ping pong game which can be played in one player mode or with a friend in realtime over the web. It was developed in order to showcase the latest Chrome browser which natively supports WebVR. You can play Konterball with a regular laptop, smartphone, Google Cardboard or Daydream, HTC Vive or Oculus Rift.

This repo contains the static frontend for the game. In multiplayer mode, it connects to a deepstream.io websocket server which is used to relay the communication messages two clients.

We use three.js for the graphics part, cannon.js as a physics engine, gsap and bodymovin for animations and howler.js for audio. This project also relies on the webvr polyfill to support browsers that don't natively support WebVR and webvr-ui for VR mode management.

Development

If you want to build this project, you first have to buy the used fonts (or use different ones). The fonts are available here and here. Place them into src/fonts with the names AntiqueOlive, Futura and FuturaItalic with the extensions .eot, .ttf, .woff, .woff2 and .json (you can convert them to json here).

• Run npm install or yarn
• Run gulp

Depending on whether you want to host a local deepstream server too:

• Run node deepstream.js
• Update availableServers in src/javascripts/communication.js, add localhost

Production

• Run gulp production
• Run node deepstream.js
• Server should now be available at port 8081, or whatever port you set in the PORT environment var.

Support

As of 9/11/2018, the WebVR API is no longer supported so some features may not work as intended.

konterball's Issues

Cannot do Gulp production

Here is the log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\my_user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'gulp',
1 verbose cli 'production' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pregulp', 'gulp', 'postgulp' ]
5 info pregulp [email protected]
6 info gulp [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec gulp script
9 verbose stack Error: [email protected] gulp: gulp "production"
9 verbose stack Exit status 7
9 verbose stack at EventEmitter. (C:\Users\my_user\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:214:16)
9 verbose stack at EventEmitter.emit (events.js:189:13)
9 verbose stack at ChildProcess. (C:\Users\my_user\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at ChildProcess.emit (events.js:189:13)
9 verbose stack at maybeClose (internal/child_process.js:970:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
10 verbose pkgid [email protected]
11 verbose cwd C:\Users\my_user\Documents\webvr\konterball-master
12 error Windows_NT 10.0.17134
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\my_user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "gulp" "production"
14 error node v10.15.1
15 error npm v2.14.12
16 error code ELIFECYCLE
17 error [email protected] gulp: gulp "production"
17 error Exit status 7
18 error Failed at the [email protected] gulp script 'gulp "production"'.
18 error This is most likely a problem with the gulp-starter package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error gulp "production"
18 error You can get their info via:
18 error npm owner ls gulp-starter
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Multiplayer

Multiplayer does not work

Game is frozen at start

Hi,

can't wait for trying out this game. However both on Desktop and mobile and on single and multiplayer the game starts just with the table and the racket however no ball, no countdown, no points... I am not able to move the racket etc. At least the music is playing.

Looking at the source everything seems to be implemented ;). The console does not throw any errors as well.

Best,

Uncaught SyntaxError: Unexpected token l in JSON at position 0

Uncaught SyntaxError: Unexpected token l in JSON at position 0
at JSON.parse ()
at app-ecf9784ca706125896cd.js:54
at XMLHttpRequest. (app-ecf9784ca706125896cd.js:52)

Browser UI interrupts VR experience

Browser UI is blocking the view on VR scene.
Can you put meta tags that automatically hides browser UI on iOS and android?

Why WebVR support is removed?

It makes sense to remove WebVR once WebXR is there, but AFAICS the WebVR is removed w/o adding WebXR. The origin trial is expiring in November, AFAIK. What is the idea?

play with the mouse on the computer and VR with the phone

With the card board, it is hard to control the bat. while it is easier to control it with the mouse
It would be nice to be able to join the same game with the computer (controlling the bat with the mouse) and the phone (cardboard) for VR for the same player