Bitmoji 2D

You can add a 2D Bitmoji texture representing the user as well as their friends that you can display as an image anywhere in your Lens.

Displaying the 2D Bitmoji

The 2D Bitmoji comes in as a texture which you can display anywhere. For example, if you wanted to display the Bitmoji2D image on the screen: in the Scene Hierarchy panel, press the + button and add a Screen Image.

Next, you can add a script that loads the Bitmoji image and replaces the texture of that image.

// @input Component.Image displayImage
// @input Asset.Texture fallbackTexture

const remoteMediaModule = require('LensStudio:RemoteMediaModule');
const bitmojiModule = require('LensStudio:BitmojiModule');

/**
 * Get Bitmoji 2D resource
 * @param {Bitmoji2DOptions} options
 * @returns {Promise<Bitmoji3DResource>}
 */
function getBitmoji2DResource(options) {
  return new Promise(function (resolve, reject) {
    bitmojiModule.requestBitmoji2DResource(options, resolve);
  });
}

/**
 * Download Bitmoji 2D assets
 * @param {Bitmoji2DResource} bitmoji2DResource
 * @returns {Promise<Asset.Texture>}
 */
function download2DAsset(bitmoji2DResource) {
  return new Promise(function (resolve, reject) {
    try {
      remoteMediaModule.loadResourceAsImageTexture(
        bitmoji2DResource,
        resolve,
        reject
      );
    } catch (e) {
      print(e);
    }
  });
}

/**
 * Get the Current User
 * @returns {SnapchatUser}
 */
async function getMyUser() {
  return new Promise(function (resolve, reject) {
    global.userContextSystem.getCurrentUser(function (user) {
      resolve(user);
    });
  });
}

// Create the options for our current user.
const user = await getMyUser();
var options = Bitmoji2DOptions.create();
options.user = user;

// Get the Bitmoji resource, based on the options.
const bitmoji2DResource = await getBitmoji2DResource(options);

// Get the actual asset via RemoteMediaModule
let tex;
if (global.deviceInfoSystem.isEditor()) {
  // You can not get 2D Bitmoji texture in Lens Studio
  tex = script.fallbackTexture;
} else {
  tex = await download2DAsset(bitmoji2DResource);
}

// Display the texture
const imageMaterial = script.displayImage.getMaterial(0);
imageMaterial.mainPass.baseTex = tex;

You will only see the 2D Bitmoji on device, that's why a placeholder texture field is provided.

Getting Bitmoji of your friends

In the example above, notice that we use the userContextSystem in order to get the current user's Bitmoji. You can get your friends Bitmoji information through the Friends API, or Friends Custom Component as well!