I guess games are everywhere now. Games in chat rooms usually have this module in them, and there are some small programs that make similar scenes. Today, let’s talk about how to make a quick draw me guess game.

1: To achieve multi-terminal real-time interactive whiteboard, anyRTC interactive whiteboard SDK is used here

2: You draw I guess title service, this demo demonstrates how to draw a person, many people see guess, this demo omit the service

3: answer prompt/announcement, this function requires IM support, here using anyRTC real-time message SDK to achieve

4: Multi-person voice communication. This function requires audio and video solutions. AnyRTC AUDIO and video SDK is used to achieve this

Overall Effect of Demo

Run through the Demo

  • Download demo source code

  • Configure developer information: locate the appid. swift file and configure the AppID

  • Find the project root directory and run: pod Install to load the Demo dependency library

  • Connect the real machine to the demo

Project source code analysis

| – GuessDraw | | – Podfile / / Pod configuration – ARDrawDemo | | — ARBoard. Framework/SDK/whiteboard | | – Base | | | – ARKeyboardInputViewController. Swift/chat/input box | | | — AppDelegate. Swift / / program entrance | | | — SceneDelegate. Swift, | | | – ViewController. Swift / / main page | | – Board | | | — ARBoardViewController. Swift / / can you guess what I drew controller | | | – ARChatViewController. Swift / / chat messages controller | | | – View | | | — ARSelectedView. Swift / / selector page | | – Common | | – ARExtension. Swift / / expand | | — AppID. Swift / / developer information configuration | – the Pods

Implementation details

  • Initializing the Whiteboard
        let authParam = ARBoardAuthParam(a)// Developer information configuration
        authParam.appId = AppID
        // Identifies the user ID
        authParam.uid = getUid()
        let baseParam = ARBoardBaseParam(a)// Not editable by default
        baseParam.authConfig.drawEnable = false
        // The whiteboard has a 1:1 width to height ratio
        baseParam.config.ratio = "1"
        // Whiteboard brush color is red
        baseParam.styleConfig.brushColor = UIColor.red
        // Whiteboard brush thickness is 2
        baseParam.styleConfig.brushThin = 2
        // Initialize the whiteboard
        boradKit = ARBoardKit(authParam: authParam, roomId: self.roomId, boardParam: baseParam, delegate: self)
        / / panel View
        boardView = boradKit.getBoardRenderView()
Copy the code
  • Example Initialize IM chat
        // Initialize RTM
        rtmKit = ARtmKit(appId: AppID, delegate: self)!
        / / login RTM
        rtmKit.login(byToken: nil, user: getUid()) { [weak self]
            errorCode in
            guard let weakself = self else { return }
            // Create a message channel
            weakself.rtmChannel = weakself.rtmKit.createChannel(withId: weakself.roomId, delegate: self)
            // Join the channel
            weakself.rtmChannel?.join(completion: { code in
               // Succeeded in joining channel
                if code = = .channelErrorOk {
                    weakself.joinChannel = true
                    // Get channel properties
                    weakself.getChannelAttributes()
                }
            })
        }
Copy the code
  • Initialize voice chat
        / / initialization
        rtcKit = ARtcEngineKit.sharedEngine(withAppId: AppID, delegate: self)
        // Set the channel property to Live mode
        rtcKit.setChannelProfile(.liveBroadcasting)
        // Set the role to play as the main player
        rtcKit.setClientRole(.broadcaster)
        // Set audio properties, use media mode
        rtcKit.setAudioProfile(.musicStandard, scenario: .gameStreaming)
        // Join the channel
        rtcKit.joinChannel(byToken: nil, channelId: self.roomId, uid: getUid()) { channel, uid, elapsed in
            // Succeeded in joining
        }
Copy the code
  • Do you have permission to paint

Use the RTM channel attribute to determine the painting

Access permissions

        let options = ARtmChannelAttributeOptions(a)// Whether to notify users of channel properties changes
        options.enableNotificationToChannelMembers = true
        // Channel attributes
        let attribute: ARtmChannelAttribute = ARtmChannelAttribute()
        attribute.key = ARKeyChannel
        attribute.value = randomString(length: 9)
        // Add or update channels
        rtmKit.addOrUpdateChannel(self.roomId, attributes: [attribute], options: options) { errorCode in
            if errorCode = = .attributeOperationErrorOk {
                
            }
        }
Copy the code

Release the permissions

        let option :ARtmChannelAttributeOptions = ARtmChannelAttributeOptions()
        option.enableNotificationToChannelMembers = true
        
        rtmKit.deleteChannel(self.roomId, attributesByKeys: [ARKeyChannel], options: option) { erroCode in
        }
Copy the code

Listen for channel attribute changes

Listen for channel property changes to make page layout changes

    // Channel attribute update callback
    func channel(_ channel: ARtmChannel.attributeUpdate attributes: [ARtmChannelAttribute]) {
        // State changes
        changeStateWithAtt(attributes: attributes)
    }
Copy the code

conclusion

Using off-the-shelf solutions can save developers a lot of time, and we just need to focus on business implementation. More scenarios are implemented, focusing on ME ☺