Home

What are you doing that nobody else has done before?

1. Providing an always-ready solution for party gaming.
2. Creating a touchscreen-based gamepad with a delightful user experience.

Always-ready solution for party gaming

Flow for creating a game session:

let server = discoverServerInLAN()
if (server == null) {
  /**
   * Create a server, either Socket.io-based or full WebRTC,
   * depending on platform that is trying to host the server.
   * (can't open ports from the browser)
   *
   * In case ports can be opened, controllers can discover the
   * server by broadcasting on the well-known LudumPad server port.
   *
   * Otherwise, they have to use the sessionID (gotten via QR or
   * shorturl) to establish a connection via signaling through
   * ludumpad.com's server.
   **/
  server = hostServer() 
}
shorturl = server.getSignalingURL()
// in case any device tries to connect via WebRTC
// will only work when internet is available

Has-Internet Doesn't-Have-Internet

1. All devices are connected to the same router (don't care about internet availability)

2. Using the LudumPad App (or bookmarked LudumPad website) 1. Open the LudumPad App. 2. LudumPad App requests list of Sessions to the LudumPad Server(s) in the LAN (via broadcast). 4. User selects Session to join. 5. Done.

3. Without the LudumPad App. 1. Open Session's shorturl by typing it into the browser's address bar or by reading the QR code. It will be either https://ludumpad.com/app/session/:id: (if internet available) or http://192.168.0.103:4242/app/session/:id:. 2. Controllers discover the server address via a broadcast discovery message. (Can be done in browsers by sending a request to each unique address in the LAN!..)

Typical case: game is hosted on a console/pc at someone's home.

3. Some or all devices are not connected to the same router (

4. Some or all devices are connected to a mobile network

WebRTC. Signaling via well-known LudumPad server using a shorturl (that can be read through a QR).

Typical case: game is hosted on a tablet and a phone is used as an additional controller.

2. No internet is available

Challenges for #1

• The solution should work when there's no internet connection. WebRTC requires an internet connection for the initial negotiation. It could only work if the game itself acts as a server for serving the gamepad's html/assets and handling the sockets. (Research how WebRTC behaves when both users are under the same LAN)
• Simple layout design system, which can be modified on the fly

Challenges for #2

• Jump & Shoot problem. How can I shoot while jumping? (using only the right hand). Ideas: detect area of touch (not yet possible in HTML5). Zig-zagging between buttons.
• Avoiding misstaps
• Visually attractive. Just by looking at each input component you should be able to tell how to use it. It should remind you of an actual gamepad, and pack some nostalgia.

Goals as a Product (user-wise)

Goals as a Library (dev-wise)

• easy to get started with the defaults
• easy to specify the required inputs
• easy to create new Input Components

Personas (game examples)

• Pottersmash. Controller UI requires:
  • tutorial/instructions page swiper
  • option selector with images (for selecting Hogwarts school)
  • analog + swipe area
  • triple button smasher (button with text + image + color)

Ideal implementation (?):

<scene id="tutorial">
  <swiper>
    <items>
      <item>
        <img src="images/tutorial-01.png">
        <p>Lorem ipsum dolor sit amet...</p>
      </item>

      <item>
        <img src="images/tutorial-02.png">
        <p>Lorem ipsum dolor sit amet...</p>
      </item>

      <item>
        <img src="images/tutorial-03.png">
        <p>Lorem ipsum dolor sit amet...</p>
      </item>
    </items>

    <button goto="pick-house">Play!</button>
  </swiper>
</scene>

<scene id="pick-house">
  <full-screen-picker>
    <h1>Choose your House!</h1>

    <option><img src="images/griffindor-shield.png"></option>
    <option><img src="images/hufflepuff-shield.png"></option>
    <option><img src="images/ravenclaw-shield.png"></option>
    <option><img src="images/slytherin-shield.png"></option>

    <button goto="waiting">Done</button>
  </full-screen-picker>
</scene>

Thoughts. This HTML stuff is overcomplicating the solution, and not even the main goal of the project. You can show the tutorial on the big screen, not a big deal. The dream is to be able to play looking at the same screen, interacting with the other people. Not isolating ourselves in our own individual screen.

Inspiration: http://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/