diff --git a/README.md b/README.md index 3f6fb3b6..9a18030c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # POGO, Web-based Cloud Gaming Service -**SEA**: [http://cloud.webgame2d.com](http://cloud.webgame2d.com) | **US West**: (not hosted)| **US East**: (not hosted)| **Europe**: (not hosted) +**SEA**: [http://cloud.webgame2d.com](http://cloud.webgame2d.com) | **US West**: [http://usw.cloud.webgame2d.com](http://usw.cloud.webgame2d.com) | **US East**: [http://use.cloud.webgame2d.com](http://use.cloud.webgame2d.com) | **Europe**: [http://eu.cloud.webgame2d.com](http://eu.cloud.webgame2d.com) | **Instruction**: [Instruction](document/instruction/) For the best gaming experience, please select the closest region to you. **Video demo**: https://www.youtube.com/watch?v=koqWB1VKflo @@ -49,7 +49,7 @@ And run * The scripts includes build the binary using Go module ## Documentation -[Design Doc](document/) +[Design Doc](document/designdoc/) [Implentation Doc](document/implementation/) ## Follow up diff --git a/document/designdoc/README.md b/document/designdoc/README.md index 5436b58e..fd80fedf 100644 --- a/document/designdoc/README.md +++ b/document/designdoc/README.md @@ -7,14 +7,14 @@ Web-based Cloud Gaming Service contains multiple workers for gaming streaming an Worker is responsible for streaming game to frontend ![worker](../img/worker.png) -- After Coordinator found the most appropriate server for the user, webRTC peer-to-peer handshake will be conducted. Coordinator will exchange the signature (WebRTC Session Remote Description) between two peers over Web Socket connection. +- After Coordinator matches most appropriate server to the user, webRTC peer-to-peer handshake will be conducted. Coordinator will exchange the signature (WebRTC Session Remote Description) between two peers over Web Socket connection. - On worker, each user session will spawn a new room running a gaming emulator. Image stream and audio stream from emulator is captured and encoded to WebRTC streaming format. We applied Vp8 for Video compression and Opus for audio compression to ensure the smoothest experience. After finish encoded, these stream is then piped out to user and observers joining that room. - On the other hand, input from users is sent to workers over WebRTC DataChannel. Game logic on the emulator will be updated based on the input stream. - Game state is stored in cloud storage, so all workers can collaborate and keep the same understanding with each other. It allows user can continue from the saved state in the next time. ## Overlord -Overlord is in charge of picking the most suitable workers for a user. Every time a user connects to Overlord, it will collect all the metric from all workers, i.e free CPU resources and latency from worker to user. Overlord will decide the best candidate based on the metric and setup peer-to-peer connection between worker and user based on WebRTC protocol +Overlord is loadbalancer and coordinator, which is in charge of picking the most suitable workers for a user. Every time a user connects to Overlord, it will collect all the metric from all workers, i.e free CPU resources and latency from worker to user. Overlord will decide the best candidate based on the metric and setup peer-to-peer connection between worker and user based on WebRTC protocol ![Architecture](../img/overlord.png) diff --git a/document/instruction/README.md b/document/instruction/README.md new file mode 100644 index 00000000..f3245c2e --- /dev/null +++ b/document/instruction/README.md @@ -0,0 +1,28 @@ +# Web-based Cloud Gaming Service Game Instruction + +The game can be played on Desktop, Mobile (Android only). You can plug joystick to play with the game. + +Click question mark on the top left to see game instruction. + +## Key map on Desktop +Game keymap follows +Arrow keys to move +H -> Show help +C -> Start +V -> Select +Z -> A +X -> B +S -> Save (Save state) +A -> Load (Load previous saved state) +W -> Share your running game to other or you can keep it to continue playing the next time. Multiple people can access the same game for multiplayer or observation. +F -> Full screen +Q -> Quit the current game and go to menu screen.**NOTE**: we are facing some issue with quit, so it's better to refresh the page. + +## Mobile play +You can play the game on Android device. Make sure your Android has the version that support WebRTC. IOS doesn't support WebRTC streaming now. + +The keys map are equivalent to Desktop. Press the button to fire input. + +## Joystick +The game also accepts joystick, so you can try plug in one and experience. It will be very fun! + diff --git a/pogo b/pogo index 47e7af02..d88df9eb 100755 Binary files a/pogo and b/pogo differ diff --git a/static/css/main.css b/static/css/main.css index 912abf4d..60f61433 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,9 +1,10 @@ body { - background-image: url('/static/img/500_F_241143639_RW6VdHbqYRM0yfNpDxDlWpj0uXWglAC2.jpg'); + background-image: url('/static/img/background.jpg'); background-repeat: repeat; } #gamebody { + overflow: hidden; display: block; width: 556px; height: 278px; @@ -21,6 +22,33 @@ body { box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1); } +#help-overlay { + width: 100%; + height: 100%; + display: none; + position: absolute; +} + +#help-overlay-background { + width: 100%; + height: 100%; + position: absolute; + + background-color: gray; + opacity: 0.4; +} + +#help-overlay-detail { + width: 100%; + height: 100%; + display: block; + position: absolute; + + background-image: url('/static/img/help_overlay.png'); + background-repeat: no-repeat; + background-size: 100% 100%; +} + #circle-pad-holder { display: block; @@ -168,6 +196,18 @@ body { box-shadow: 0px 0px 2px 2px rgba(219, 222, 222, 1); } +#btn-help { + padding-top: 5px; + width: 20px; + height: 15px; + font-size: 10px; + + top: 10px; + left: 15px; + + background-color: lightskyblue; +} + #btn-load { top: 30px; left: 435px; @@ -352,7 +392,7 @@ body { height: 240px; /* background-color: gray; */ - background-image: url('/static/img/pixel_waterfall_bg__by_isohei-d4xntof.gif'); + background-image: url('/static/img/screen_background1.gif'); background-size: cover; } diff --git a/static/game.html b/static/game.html index 5c037e2b..6a0fc1c0 100644 --- a/static/game.html +++ b/static/game.html @@ -20,7 +20,6 @@
-
@@ -30,8 +29,7 @@
- +