你画我猜游戏现在已经随处可见，语聊房中的游戏里一般都会有该模块，还有一些小程序里也做了类似的场景。今天就来聊下如何快速做一款你画我猜游戏。
1：实现多端实时互动白板，这里使用 anyRTC 互动白板 SDK
2：你画我猜题目服务，本 demo 演示如何一个人画，多人看猜，本 demo 省略该服务
3：答案提示/公布，该功能需要 IM 支持，这里使用 anyRTC 实时消息 SDK 来实现
4：多人语音交流，该功能需要音视频方案，这里使用 anyRTC 音视频 SDK 来实现
Demo 整体效果
跑通 Demo
项目源码分析
|-- GuessDraw|-- Podfile //Pod 配置项
|-- ARDrawDemo| |-- ARBoard.framework //白板 SDK| |-- Base| | |-- ARKeyboardInputViewController.swift // 聊天输入框| | |-- AppDelegate.swift // 程序入口| | |-- SceneDelegate.swift
| | |-- ViewController.swift // 主页面| |-- Board| | |-- ARBoardViewController.swift // 你猜我画控制器| | |-- ARChatViewController.swift // 聊天消息控制器| | |-- View| | |-- ARSelectedView.swift // 选择器页面| |-- Common| |-- ARExtension.swift // 拓展| |-- AppID.swift // 开发者信息配置|-- Pods
实现细节
let authParam = ARBoardAuthParam() // 开发者信息配置 authParam.appId = AppID // 标识用户ID authParam.uid = getUid() let baseParam = ARBoardBaseParam() // 默认不可编辑 baseParam.authConfig.drawEnable = false // 白板的宽高比例为1:1 baseParam.config.ratio = "1:1" // 白板画笔颜色为红色 baseParam.styleConfig.brushColor = UIColor.red // 白板画笔粗细为2 baseParam.styleConfig.brushThin = 2 // 初始化白板 boradKit = ARBoardKit(authParam: authParam, roomId: self.roomId, boardParam: baseParam, delegate: self) // 画板View boardView = boradKit.getBoardRenderView()
复制代码
// 初始化RTM rtmKit = ARtmKit(appId: AppID, delegate: self)! // 登录RTM rtmKit.login(byToken: nil, user: getUid()) { [weak self] errorCode in guard let weakself = self else { return } // 创建消息频道 weakself.rtmChannel = weakself.rtmKit.createChannel(withId: weakself.roomId, delegate: self) // 加入频道 weakself.rtmChannel?.join(completion: { code in // 加入频道成功 if code == .channelErrorOk { weakself.joinChannel = true // 获取频道属性 weakself.getChannelAttributes() } }) }
复制代码
// 初始化 rtcKit = ARtcEngineKit.sharedEngine(withAppId: AppID, delegate: self) // 设置频道属性为直播模式 rtcKit.setChannelProfile(.liveBroadcasting) // 设置角色为主播，加入频道后自动上麦 rtcKit.setClientRole(.broadcaster) // 设置音频属性，使用媒体模式 rtcKit.setAudioProfile(.musicStandard, scenario: .gameStreaming) // 加入频道 rtcKit.joinChannel(byToken: nil, channelId: self.roomId, uid: getUid()) { channel, uid, elapsed in // 加入成功 }
复制代码
使用 RTM 频道属性来确定绘画
获取权限
let options = ARtmChannelAttributeOptions() // 频道属性更改是否要通知频道内的用户 options.enableNotificationToChannelMembers = true // 频道属性 let attribute: ARtmChannelAttribute = ARtmChannelAttribute() attribute.key = ARKeyChannel attribute.value = randomString(length: 9) // 添加或者更新频道 rtmKit.addOrUpdateChannel(self.roomId, attributes: [attribute], options: options) { errorCode in if errorCode == .attributeOperationErrorOk { } }
复制代码
释放权限
let option :ARtmChannelAttributeOptions = ARtmChannelAttributeOptions() option.enableNotificationToChannelMembers = true rtmKit.deleteChannel(self.roomId, attributesByKeys: [ARKeyChannel], options: option) { erroCode in }
复制代码
监听频道属性变化
监听频道属性变化，进行页面布局更改
// 频道属性更新回调 func channel(_ channel: ARtmChannel, attributeUpdate attributes: [ARtmChannelAttribute]) { // 状态更改 changeStateWithAtt(attributes: attributes) }
复制代码
总结
使用现成的解决方案，可有效节省开发者的时间，我们只需要关注业务实现即可。更多场景实现，关注我☺
评论