Updates to AR Pool:

You can see new updates demo at 1:37

Here's what's new:

We have added two new gaming modes for use when you go on Facebook live.

You can have your audience play the game on facebook live by posting comments like #left, #right, #PowerUp, etc to control the rotation and power level of the shot. We like to call this mode #FBPlaysARPool. This way you can host a game on your facebook live streaming and your viewers play by adding comment hastags.

Another way you can have your audience be part of the game is by challenging you in the #ARPoolChallenge mode. This time audience will post comments like #BottomRight, #CenterLeft, etc. to vote for the pocket to challenge you to put the ball in. If the player puts the ball into the wrong pocket, it's a foul. Player only scores for putting the ball in the pocket chosen by the audience.

Inspiration

There are times when you want to play pool with your friends, obviously you can't have the table along with you every time. During breaks, the table is already occupied. None of those mobile games can bring you the joy of playing with your friends standing around while you take the shot. So, we thought we could build something that will come a bit closer to that.

For the updates, we were inspired by #TwitchPlaysPokemon which is a pretty popular streaming on Twitch where viewers control the gameplay by posting comments. It took off so well and we wanted to do something similar for facebook :D. So we created the #FBPlaysARPool mode.

What it does

It brings a pool table wherever you are. Yes, you can have a pool table right in your living room, office cubicle, wherever. It gives you the ability to play the game from the facebook or instagram camera so you don't need to download another app. You can replay your previous shot while recording it when you hold down the record button on the camera. Share your feats with your friends on messenger or post them on your stories.

With the new updates, you can now host a game on your facebook live stream and let your viewers play the game by posting hastags in the comments like #Left, #Right, #PowerUp, etc. You can also let your viewes challenge you to play a shot to put the ball into a specific pocket. They do this by voting on the pocket of their choice by posting comments like #BottomRight, #TopLeft, etc.

How We built it

We used Spark AR Studio to create the AR experience. We did all the game state management and setting rules in the script. The user interactions and the Scene objects were handled by the patch editor. Script to patch editor bridging helped us to divide the workflow and create a good experience with relative ease.

We have used LiveStreaming module to aggregate comments and count hashtags to control the shot or to add a rule for valid pocket (as chosen by the audience votes).

Challenges We ran into

We didn't know much about working with AR projects when we started. We learned about what the user expects and what the facebook platform offers us. We were able to figure out our dependencies and the constraints relating to what would be a good user experience as we went along after the initial grind. As pure programmers, we struggled with placing and positioning 3D objects and overall setting the scene.

To test the LiveStreaming module, you have to go live which means leaving the development environment and then testing if your code worked which breaks your flow and reduces your efficiency. So, we created a mock for the LiveStreaming module and read autogenerated comments to test our implementation efficiently. We have provided further details in the updates section.

Accomplishments that I'm proud of

We were able to work through and learn about Augmented reality experiences, 3D objects and user interactions on the facebook platform. We added a new skill of Spark AR Studio to our arsenal.

We created a mock for the LiveStreaming module and generated mock comments which increased our efficiency while building this effect.

What We learned

Spark AR Studio, digital 3D objects and their composition. The game creation made us do a recall of 3D geometry :D

What's next

We're looking to add Player vs AI mode with an an AI Character to go along with. We'll add option for players to choose different tables to suit their aesthetics and make the experience more seemless and more engaging gameplay.

Built With

javascript
spark-ar

Updates

Shashwat Gulyani posted an update — Oct 29, 2019 09:02 AM EDT

It's hard to test LiveStreaming in Spark AR

So, we figured out a way to test our code with LiveStreaming methods without actually going live.

Here's what we did

We created a flag for production mode. We set it to false. In this case, LiveStreaming module.

var comments = [];

function generateMockComments3 () {
  return Time.setInterval(() => {
    const commentsTypes = [
      "#BottomLeft",
      "#TopLeft",
      "#CenterLeft",
      "#CenterRight",
      "#BottomRight",
      "#TopRight",
    ];
    const rand = getRandomInt(6);
    comments.push(commentsTypes[rand]);
    Diagnostic.log(commentsTypes[rand]);
  }, 350);
} 

function generateMockComments2 () {
  return Time.setInterval(() => {
    const commentsTypes = [
      "#MoveLeft",
      "#MoveRight",
      "#PowerUp",
      "#PowerDown"
    ];
    const rand = getRandomInt(4);
    comments.push(commentsTypes[rand]);
    Diagnostic.log(commentsTypes[rand]);
  }, 350);
}

function countHash(hash) {
  let count = 0;
  comments.forEach(comment => {
    if (comment == hash) {
      count++;
    }
  });
  return count;
}

var LiveStreaming;
var production = true;
if (!production) {
  LiveStreaming = {};
  LiveStreaming.comments = {};
  LiveStreaming.comments.startHashtagCounter = () => {
    subscribe: delegate => {
      const timeInMilliseconds = 1500;
      const mockNewCommentFromLive = () => {
        delegate({
          "#PowerUp": countHash("#PowerUp"),
          "#PowerDown": countHash("#PowerDown"),
          "#MoveLeft": countHash("#MoveLeft"),
          "#MoveRight": countHash("#MoveRight"),
          "#TopLeft": countHash("#TopLeft"),
          "#TopRight": countHash("#TopRight"),
          "#CenterLeft": countHash("#CenterLeft"),
          ...

        });
      };
      return Time.setInterval(mockNewCommentFromLive, timeInMilliseconds);
    }
  };
} else {
  LiveStreaming = require("LiveStreaming");
}

Log in or sign up for Devpost to join the conversation.

Shashwat Gulyani posted an update — Oct 29, 2019 08:50 AM EDT

Updates to AR Pool:

You can see new updates demo at 1:37.

Here's what's new:

We have added two new gaming modes for use in Facebook live mode.

Another way you can have your audience be part of the game is by challenging you in the #ARPoolChallenge mode. This time audience will post comments like #BottomRight, #CenterLeft, etc. to vote for the pocket to challenge you to put the ball in. If the player puts the ball into the wrong pocket, it's a foul. Player only scores for putting the ball in the pocket chosen by the audience.

Log in or sign up for Devpost to join the conversation.