Android技术分享| 【你画我猜】Android 快速实现


以你画我猜为代表的益智类游戏,已经逐渐成为社交新宠。用户在游戏过程中,根据题目线索,发挥自身的想象力。用户之间理解偏差的游戏过程中,拉近用户间的距离。

因而,一个优质的线上你画我猜平台,除了优化游戏设置、游戏规则外,还需要不断提升画板的实收互动质量,让线上用户获得如线下玩家一般的流畅体验。

如何快速做一款你画我猜游戏

你画我猜的益智类游戏,除了画板,还要配合IM以及实收音视频,三者相互配合。除了互动外,你猜我画题目也是游戏好玩的关键。

  • 画板功能: 利用 anyRTC ARBoard SDK ,便能轻松实现多人实时画板协同
  • IM聊天功能: 题目的提示以及揭示答案还有互动间里消息聊天,我们也利用anyRTC RTM 去完成,该库属于轻量级IM 库,库比较小,发送消息和接收消息都比较简单
  • 实时音视频通信: 使用anyRTC RTC SDK,配合变声、美声、混音等功能,让聊天更有趣
  • 你猜我画题库: 需要用业务服务做题目库,玩家来选择题目,好玩的题目也可以付费让玩家购买;画猜的规则也需要配合 IM 精准同步

总和上述关键功能点,便能快速做出一块你画我猜游戏了,由于画猜题库需要服务端配合,下面给大家演示的demo中,只做了画画功能,题目这块略去,相信开发者可以自行实现。

效果展示

在这里插入图片描述

功能描述

  • 权限绘画: 进入房间,通过RTM的频道属性来标记当前房间哪位玩家在画画,以及对应的权限
  • 画画功能: 画笔粗细,画板颜色修改,画笔撤销,清空画板以及对画板截图,这些都是你画我猜的基础功能
  • 消息聊天: 基本的IM消息聊天功能,颜色如何收发消息
  • 语音实时互动: 真实的场景中有观众以及麦上玩家,本demo做为演示demo,也是使用的直播模式,只不过默认上麦,真实开发当中切换角色,只需要调用一句代码即可,可以在demo中找到

跑通demo

实现步骤如下:

  • app/build.gradle中添加依赖:
dependencies {
  ...
  // 白板
  implementation 'io.anyrtc:ARBoard:1.0.0.2'
}
  • 白板初始化相关API
    白板初始化会用到4个类:ARBoardAuthParamARBoardBaseParamARBoardKit以及ARBoardHandler
    ARBoardHandler为事件通知类,需用户继承及实现
    ARBoardKit为控制类,通过ARBoardKit控制白板
    ARBoardAuthParam负责传递APP_ID、token及uid
    ARBoardBaseParam负责传递白板初始化配置,其架构如下:

    • ARBoardBaseParam.ARBoardInitConfig
      • String ratio //比例,如1:1、16:9
      • int scale //取值100~300,100=1倍
      • ARBoardToolType toolType //画笔类型,默认为PEN
    • ARBoardBaseParam.ARBoardInitStyleConfig
      • ARBoardTextStyle textStyle //取值:bold,italic,bold_italic,normal,默认normal
      • int textSize //文本大小(设置ARBoardToolType为文本时生效)
      • String textColor //文本颜色
      • String brushColor //画笔颜色
      • int brushThin //画笔粗细
      • String globalBackgroundColor //画板可以分页,此属性可设置每一页的默认颜色
      • String selectBoxColor
    • ARBoardBaseParam.ARBoardInitAuthConfig
      • boolean drawEnable //画板是否可以绘制,默认true
      • String progressBarUrl //载入画板时的loading图,支持gif、jpg、png、base64、http、https
      • boolean progressEnable //此属性为false时不展示loading效果。为true时,progressBarUrl不为空展示Url内容,否则展示默认效果
  • 初始化白板

// 初始化白板
// 初始化ARBoardAuthParam对象,传入APP ID、token、uid
val authConfig = ARBoardAuthParam(appId, "", uid)
// 在baseParams中定义初始值,如白板比例(radio),画笔粗细、颜色等
val baseParams = ARBoardBaseParam()
baseParams.authConfig.progressEnable = false
baseParams.config.ratio = "1:1"
baseParams.styleConfig.run {
    brushThin = 2
    brushColor = "#FF0000"
}

// 创建Kit并将白板View添加到布局中
kit = ARBoardKit(this, authConfig, roomId, baseParams, MyBoardHandler())
val boardView = kit.arBoardView
binding.boardParent.addView(boardView)

...

除了实现画板,还能顺带实现即时通讯、音视频聊天功能,具体的音视频实现可以参考我们往期文章~
如果您也想拥有如此方便的画板,请参考以下资料:

项目地址:https://github.com/anyRTC-UseCase/GuessDraw

白板Demohttps://github.com/anyRTC/ARBoard-Android

白板API文档https://docs.anyrtc.io/cn/WhiteBoard/api-ref/whiteboard_android/overview

在这里插入图片描述