背景

字节小游戏：字节小游戏是基于字节跳动全产品矩阵开发，不需用户进行下载，点开即玩的全新游戏类型。相较 APP，小游戏有着开发周期短、开发成本低等特性，能够让开发者更简单的参与到开发过程中。实现快速上线，快速变现。

摄像头游戏：一种全新的游戏形式。玩家通过摄像头采集到的图像信息，控制游戏中的行为。抖音中的《眼睛眨眨》、《潜水艇大挑战》就是摄像头游戏的一个成功例子。

如果你已经有了小游戏开发的相关基础，那么如何进行摄像头游戏的开发呢？本文将使用字节跳动创意游戏前端团队开发的摄像头sdk，简单介绍一下如何快速从零开发一款字节平台的摄像头游戏。

介绍

摄像头 SDK是允许开发者接入摄像头互动类场景游戏的 API 集合。SDK 本身是基于字节小游戏运行环境的，主要提供了人脸识别、手势识别、摄像头UI显示等调试能力，降低开发者接入成本。

快速上手

举个例子：下面我们将使用cocos creator来开发一款仿抖音《潜水艇大作战》的摄像头小游戏。玩家通过鼻子控制潜水艇躲过障碍，躲过的障碍越多，分数越高，最终赢得游戏。默认大家已经完成了cocos creator的基础教程学习，本文章中将不会过多介绍Cocos Creator的开发方法，如果还没有Cocos Creator的开发经验建议先学习官方教程。

• 摄像头游戏的完整工程地址：https://github.com/congyd/camera-video

项目创建

第一步是安装Cocos Creator的编辑器，我们从官网上下载CocosDashboard用来创建Cocos Creator工程

下载完成安装后，我们登陆CocosDashboard，进入编辑器的侧边栏，这里我们使用下载的v2.4.2版本，此版本开始支持打包成字节小游戏，打包后可以直接在字节跳动开发者工具上运行。

安装完成后我们在项目侧边栏中选择新建一个Creator项目。

这里我们注意选择的版本和创建的项目类型，此次项目我们采用TypeScript开发，所以初始默认选择TypeScript项目，然后创建打开项目。

这样我们就得到了一个新建的Cocos Creator工程。

摄像头SDK安装

我们现已将摄像头SDK发布到npm上，使用过NodeJS的同学一定对npm并不陌生，如果没有使用过NodeJS也可查看官网并安装。

进入项目文件夹根目录使用npm安装摄像头sdk、安装cocos引擎适配包，依次执行下方命令

npm install @byted-creative/camera @byted-creative/camera-face
npm install @byted-creative/camera-cocos-layer

我们在Script文件夹中创建一个脚本main

双击打开Main脚本，引入摄像头SDK包

import camera, { CameraCapacity } from '@byted-creative/camera';
import face, { FaceEvent, FaceInfo } from '@byted-creative/camera-face';
import { CameraCocosLayer } from "@byted-creative/camera-cocos-layer";

创建函数initCamera在start生命周期调用，初始化摄像头能力，并开启人脸检测能力。

async start () {
  await this.initCamera();
  // this.startGame();
}

// 初始化
private async initCamera() {
  this._layer = new CameraCocosLayer({ root: this.cameraNode });
  // 初始化摄像头
  camera.init({
    layerAdapter: this._layer,
    capacity: [CameraCapacity.Face],
  });
  try {
    await camera.start();
    // 设置美颜
    camera.setBeauty({ 
      whiten: 1, 
      smoothen: 1,
      enlargeEye: 1, 
      slimFace: 1,
    });
    face.init({interval: 30});
    face.startDetect();
    // face.debugEnable(FaceDebug.Box);
    // face.debugEnable(FaceDebug.Face);
  } catch (err) {
    console.log('camera start fail', err);
  }
}

将此脚本挂载在主场景的Canvas节点上

此时预览游戏，屏幕中会展现出摄像头拍摄下来的画面（默认为前置摄像头）。

添加场景元素

接下来，将潜水艇和柱子拖到场景中

针对潜水艇，注册人脸检测事件，当事件触发时，将潜水艇的纵坐标改为人脸鼻子的纵坐标。

 face.on(FaceEvent.onFaceInfos, this.onFaceInfos, this);

private onFaceInfos(faceInfos: FaceInfo[]){
  if(faceInfos.length === 0){
    return;
  }

  const faceInfo = faceInfos[0];
  this.ship.setPosition(this.ship.position.x, faceInfo.nose[13].y);
}

针对柱子，开始游戏时需要初始化柱子位置，柱子的x坐标间距是相同的，但是柱子的y坐标可以是随机的，上下起伏。

 this.colunms[0].setPosition(115,0);
 this.colunms[1].setPosition(653,0);
 this.colunms.forEach(element => {
   this.resetColunmPosition(element);
 });

private resetColunmPosition(node: cc.Node){
  const r = Math.random() * 360 - 180;
  node.setPosition(node.position.x, r);    
}

在界面中，我们可以感受到潜水艇是从左到右游动，我们通过控制柱子从右向左移动也可以达到相同的效果。在update生命周期函数中，我们可以定时改变柱子的位置，视觉上看起来缓慢向左移动。代码量比较大，简化成文字，具体代码内容可以查看代码仓库

update(dt){ 
    ...
  // 控制柱子从右向左移动
  // 1.当柱子位置小于潜水艇，得分加一
  // 2.当柱子脱离界面，重置柱子位置
}

在检测到潜水艇与柱子发生碰撞之后，游戏结束

this.ship.on('onCollision', this.onCollision, this);

onCollision(){
  console.log('onCollision');
  this.stopGame();
}

最后将用户开始时需要初始化的内容封装成startGame

private startGame(){
  // 关闭弹窗
  this.dialog.active = false;  
  // 重置得分
  this.score = 0;
  
  face.on(FaceEvent.onFaceInfos, this.onFaceInfos, this);
    
  this.colunms[0].setPosition(115,0);
  this.colunms[1].setPosition(653,0);
  this.colunms.forEach(element => {
    this.resetColunmPosition(element);
  });
  // 触发碰撞结束游戏
  this.ship.on('onCollision', this.onCollision, this);
  // 开始标记，柱子开始移动
  this._startFlag = true;
}

结束游戏时，需要清空开始游戏时的监听事件

private stopGame(){
  // 取消face监听事件
  face.off(FaceEvent.onFaceInfos, this.onFaceInfos, this);
  // 取消潜水艇碰撞监听事件
  this.ship.off('onCollision', this.onCollision, this);
  // 关闭标记，柱子不随时间移动
  this._startFlag = false;
  // 打开弹窗
  this.dialog.active = true;   
}

完成游戏核心逻辑之后，我们将游戏构建成字节跳动小游戏

下载字节跳动开发者工具，将构建完成的工程导入到字节跳动开发者工具中，使用真机预览。打开头条或者抖音客户端，扫描二维码，就可以看到我们开发好的摄像头游戏啦！