The puzzle games represented by “draw me guess” have gradually become a new favorite in social life. During the game, users use their imagination according to the title clues. Users understand the deviation between the game process, close the distance between users.

Therefore, a high-quality online picture-me platform should not only optimize the game Settings and game rules, but also constantly improve the quality of the paid-in interaction of the drawing board, so that online users can get the same smooth experience as offline players.

How to quickly make a draw me guess game

You draw I guess puzzle games, in addition to the drawing board, but also with IM and received audio and video, the three cooperate with each other. In addition to interaction, guess what I draw the title is also the key to fun games.

  • Drawing board function: Using anyRTC ARBoard SDK, it can easily realize multi-person real-time drawing board coordination
  • IM chat function: prompt topic and reveal the answer and interactive message chat, we also use anyRTC RTM to complete, the library belongs to lightweight IM library, library is relatively small, send messages and receive messages are relatively simple
  • Real-time audio and video communication: Using anyRTC RTC SDK, with voice change, bel canto, mixing and other functions, make chat more interesting
  • You guess I draw question bank: need to use business services as a question bank, players can choose the questions, fun questions can also pay for players to buy; Pictionary rules also need to work with IM precise synchronization

The sum of the above key function points, it can quickly make a piece of pictionary game, because pictionary question bank needs the cooperation of the server, the following demo for you to demonstrate, only do the drawing function, the topic of the omission, I believe developers can achieve their own.

Results show

Functional description

  • Permission painting: Enter the room and mark which player is painting in the room and the corresponding permission by RTM’s channel attribute
  • Drawing functions: Brush thickness, palette color modification, brush undo, clearing the palette and taking screenshots of the palette are all basic functions of draw me guess
  • Message chat: basic IM message chat function, how to send and receive messages color
  • Real-time voice interaction: there are audiences and players in the real scene. This demo, as a demonstration demo, also uses the live mode, but the default is on the MAC. Switching roles in real development only requires a line of code, which can be found in the demo

Run through the demo

The implementation steps are as follows:

  • inapp/build.gradleAdd a dependency to:
dependencies {
  ...
  / / the whiteboard
  implementation 'the IO. Anyrtc: ARBoard: 1.0.0.2'
}
Copy the code

  • Whiteboard initialization API Whiteboard initialization uses four classes: ARBoardAuthParam, ARBoardBaseParam, ARBoardKit, and ARBoardHandler ARBoardHandler is an event notification class that requires users to inherit and implement ARBoardKit as a control class. Control the whiteboard through ARBoardKit. ARBoardAuthParam is responsible for transferring the APP_ID, token, and UID. ARBoardBaseParam is responsible for transferring the initial configuration of the whiteboard.

    • ARBoardBaseParam.ARBoardInitConfig
      • String ratio // Ratio, such as 1:1 and 16:9
      • Int scale // the value ranges from 100 to 300,100 =1 times
      • ARBoardToolType toolType // The brush type, which defaults to PEN
    • ARBoardBaseParam.ARBoardInitStyleConfig
      • ARBoardTextStyle textStyle // The value can be bold,italic,bold_italic,normal, default normal
      • Int textSize // textSize (effective when ARBoardToolType is set to text)
      • String textColor // textColor
      • String brushColor // brushColor
      • Int brushThin // Brush thickness
      • String globalBackgroundColor // The artboard can be paginated. This property sets the default color for each page
      • String selectBoxColor
    • ARBoardBaseParam.ARBoardInitAuthConfig
      • Boolean drawEnable // Whether the artboard can be drawn, true by default
      • String progressBarUrl // Loading map of the artboard. GIF, JPG, PNG, base64, HTTP, and HTTPS are supported
      • Boolean progressEnable // Does not display loading effects when this property is false. When true, progressBarUrl does not display the Url content empty, otherwise the default is displayed

  • Initializing the Whiteboard

// Initialize the whiteboard
// Initialize the ARBoardAuthParam object, passing in the APP ID, token, uid
val authConfig = ARBoardAuthParam(appId, "", uid)
// Define initial values in baseParams, such as whiteboard ratio (RADIO), brush thickness, color, etc
val baseParams = ARBoardBaseParam()
baseParams.authConfig.progressEnable = false
baseParams.config.ratio = "1"
baseParams.styleConfig.run {
    brushThin = 2
    brushColor = "#FF0000"
}

// Create the Kit and add the whiteboard View to the layout
kit = ARBoardKit(this, authConfig, roomId, baseParams, MyBoardHandler())
val boardView = kit.arBoardView
binding.boardParent.addView(boardView)

...
Copy the code

In addition to the realization of the artboard, can also be accompanied by instant messaging, audio and video chat functions, specific audio and video implementation can refer to our previous articles ~ if you also want to have such a convenient artboard, please refer to the following information:

Project address :github.com/anyRTC-UseC… The whiteboard Demogithub.com/anyRTC/ARBo… Whiteboard API docs. Anyrtc. IO/cn/WhiteBoa…