IOS技術分享| 你畫我猜小遊戲快速實現

你畫我猜遊戲現在已經隨處可見，語聊房中的遊戲裡一般都會有該模組，還有一些小程式裡也做了類似的場景。今天就來聊下如何快速做一款你畫我猜遊戲。

1：實現多端實時互動白板，這裡使用anyRTC 互動白板SDK

2：你畫我猜題目服務，本demo演示如何一個人畫，多人看猜，本demo省略該服務

3：答案提示/公佈，該功能需要IM支援，這裡使用anyRTC 實時訊息 SDK 來實現

4：多人語音交流，該功能需要音影片方案，這裡使用anyRTC 音影片SDK來實現

Demo 整體效果

跑通Demo

• 下載demo原始碼

• 配置開發者資訊：找到 AppID.swift 檔案並配置 AppID

• 找到專案根目錄執行：pod install,載入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
()

• 初始化 IM 聊天

        
// 初始化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
)


    
}

總結

使用現成的解決方案，可有效節省開發者的時間，我們只需要關注業務實現即可。更多場景實現，關注我☺