このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

Unity

Chat for Unity on iOS or Android. This Chat Unity UIKit & UIKit Demo is a game scene UI component library based on Tencent Cloud IM Chat SDK. It currently includes Conversation and Chat components with sending and receiving text messages, sending and receiving emoji messages, Custom emoticons and other functions. Introducing this UIKit in your Unity project can help you quickly build your chat system.
Chat Demo

Environmental requirements

Platform
version
Unity
2019.4.15f1 and above
Android
Android Studio 3.5 and above, App requires Android 4.1 and above
iOS
Xcode 11.0 and above,Please ensure that your project has a valid developer signature certificate.

Perquisites

Signed up for a Tencent Cloud account and completed identity verification.
1. Log in to the Chat console.
Note:
The same Tencent Cloud account can create up to 300 instant messaging IM applications. If there are already 300 applications, you can deactivate and delete the unused applications before creating new ones . After the application is deleted, all data and services corresponding to the SDKAppID cannot be recovered, please operate with caution.
2. Created a chat application as instructed in Creating and Upgrading an Application and recorded the SDKAppID.

3. Record the SDKAppID. You can view the status, business version, SDKAppID, label, creation time, and expiration time of the newly created application on the console overview page.


4. Click the created application, click Auxiliary Tools>UserSig Generation & Verification in the left navigation bar, create a UserID and its corresponding UserSig, copy the signature information, and use it for subsequent logins.




How to import UIKit into the project

import AssetPackage

1. Create/start an existing Unity project.
2. Add dependencies in the Packages/manifest.json file:
{
"dependencies": {
"com.tencent.imsdk.unity": "https://github.com/TencentCloud/chat-sdk-unity.git#unity"
}
}
3. Download the chat-uikit-unity.unitypackage under the UIKit github directory, and import the resource package.

Initialize and log in

There are two ways to initialize and log in to IM:

Outside the component: the entire application just needs to initialized and logged in once. You need to add the corresponding event callbacks yourself. Inside the component(Recommanded): pass parameters into the component through configuration. UIKit has bound corresponding event callbacks for you, including events for receiving new messages and events for updating the session list.

Method 1: Outside the component
Initialize IM in the Unity project you created, note that the IM application only needs to be initialized once. This step can be skipped if integrating in an existing IM project.
public static void Init() {
int sdkappid = 0;
SdkConfig sdkConfig = new SdkConfig();

sdkConfig.sdk_config_config_file_path = Application.persistentDataPath + "/TIM-Config";

sdkConfig.sdk_config_log_file_path = Application.persistentDataPath + "/TIM-Log"; // Set local log address

TIMResult res = TencentIMSDK.Init(long.Parse(sdkappid), sdkConfig);
}

public static void Login() {
if (userid == "" || user_sig == "")
{
return;
}
TIMResult res = TencentIMSDK.Login(userid, user_sig, (int code, string desc, string json_param, string user_data)=>{
// callback after login
});
}

Method 2: inside the component
You can also pass SDKAppID, UserSig, and UserID into the component through configuration to initialize and log in IM. (same as demo)
It is only recommanded if you are trying to run demo. Using this method directly in your
using com.tencent.imsdk.unity.uikit;
// The demo login logic is as follows
public static void Init() {
Core.SetConfig(sdkappid, userId, sdkUserSig);
Core.Init();
Core.Login();
}
// If you run the unity demo directly, it is recommended to log in through the mobile phone number/verification code input box on the Main page. It can ensure the normal operation of callbacks and so on.
// Since Unity on the computer does not support mobile phone number login, please enter userid into the mobile phone number input box and userSig into the verification code input box.
// Assets/Example/Scripts/Main.cs
private void Login()
{
// Comment out the previous Login function content and add the following content
loginButton.interactable = false;
Core.SetConfig(Config.sdkappid, phoneNumber.text, captcha.text);
Core.Init();
Core.Login(HandleAfterLogin);
loginButton.interactable = true;
}


Use Conversation and Chat prefabs

You can put the following prefabs into your scene and modify the corresponding styles and layouts.




Structure

Assets/Example This directory corresponds to the content displayed when the actual project is running, including two pages of Scenes, the corresponding codes are Main.cs (login interface) and Chat.cs (chat interface).
Chat contains c2c chat and group chat content, you can get the conversation (friends) list and send text and emoticon messages. The content in Chat is composed of components in Prefabs, you can modify the display content and style by modifying Prefabs.

Assets/Prefabs The following components can be used in combination (refer to the Chat page of Scenes), or the components can be modified and used separately according to requirements.

ChatPanel message history list
Message display area ConvMessagePanel
ConversationNamePanel ConversationNamePanel
Historical message display area MessageContentPanel
message input area ActionPanel
Emoticons area OverlayPanel
Close chat window button CloseButton




ConversationPanel conversation list. Now it mainly displays the single-chat sessions of friends. The corresponding code is in Script/Components/Conversation.cs. Styles for each conversation are in ConversationItem.prefabs.
conversation list area FriendPanel
Search area SearchPanel
Conversation list ConversationListPanel




ChannelPanel The channel list consists of 4 channel buttons, namely World, Channel, Team, Friends. The first three channels are group chat channels, and the friend channel is a c2c channel and will display a list of c2c conversations. Click events and styles for channel buttons are in Script/Components/Chat.cs.
AvatarPanel The avatar style in a conversation (ConversationItem), a single chat record (messageItem, etc.). Contains avatars and segment avatars.
ConversationItem The session style of the conversation list, including the avatar (AvatarPanel), conversation name and rank.
MessageItem, MessageItemSelf Text message content. Text message from others and from self is seperated.
Avatar area MessageSenderPanel
Message area MessageContentPanel
Sender information area SenderNamePanel
sender name MessageSender
Sender rank Icon and name Icon and Text
message body Panel
StickerMessageItem,StickerMessageSelf The content of the emoji message. The content is the same as MessageItem
GroupTipItem Group reminder message content, for users to enter the group, withdraw from the group, admin messages, etc. Contains group name and message body.
TimeStamp Time nodes in historical messages.
StickerItem, MenuItem They are emoticons and emoticons in the shortcut menu respectively.


How to start the demo project

Initialize login

Pass the SDKAppID, UserSig, and UserID into the component through configuration to initialize and log in the IM. Note: the entire project only needs to be initialized once
using com.tencent.imsdk.unity.uikit;
// The demo login logic is as follows
public static void Init() {
Core.SetConfig(sdkappid, userId, sdkUserSig);
Core.Init();
Core.Login();
// you can pass function
// Core.Login(HandleAfterLogin);
}
// If you run the unity demo directly, it is recommended to log in through the mobile phone number/verification code input box on the Main page. It can ensure the normal operation of callbacks and so on.
// Since Unity on the computer does not support mobile phone number login, please enter userid into the mobile phone number input box and userSig into the verification code input box.
// Assets/Example/Scripts/Main.cs
private void Login()
{
// Comment out the previous Login function content and add the following content
loginButton.interactable = false;
Core.SetConfig(Config.sdkappid, phoneNumber.text, captcha.text);
Core.Init();
Core.Login(HandleAfterLogin);
loginButton.interactable = true;
}

Open the Chat page directly after initial login.


Channel

The demo is divided into four channels: World, Channel, Team, and Friends. Among them, the Friends channel displays a list of C2C sessions and added friends, click on a session to start chatting. The other three channels are group conversations. If you need to send messages in this channel, you need to create a group first and add its ID to the project.


Create groups

Added via RestAPI You can create a group through create_group in the background RestAPI. See Link for details. add in console You can also create groups through the console. Go to your IM application in the console -> Group Management -> Add Group.


Add group to channel

Enter Assets/Example/Scripts/Config/Config.cs, fill in the group ID of the created group into communityID (community), channelID (channel), groupID (team). And call joinGroup after login to enter the corresponding group after login and send messages in the group.


Send a message

If you have added a group to the channel, you can send group chat messages through the World, Channel, and team channel. You can also click on a c2c conversation in the friend channel to send a c2c chat message.


Modify emoticons and Rank information

Rank

In this demo, each user's rank is randomly generated, if you need to use rank information, you can set it in the user's custom field.
UserProfileCustemStringInfo teer = new UserProfileCustemStringInfo{
user_profile_custom_string_info_key:"rank",
user_profile_custom_string_info_value:"teer"
}
List<UserProfileCustemStringInfo> customArray = new List<UserProfileCustemStringInfo>();
customArray.Add(teer);
TencentIMSDK.ProfileModifySelfUserProfile(new UserProfileItem{
user_profile_item_custom_string_array:customArray;
});
And display the corresponding rank icon according to the rank name.
1. Load the icon or avatar frame corresponding to the rank into Resources. (If you use Url to get it, you can ignore this step)
2. Modify the display of the avatar frame and icon in the code. The parts that need to be modified are the conversation list and the message list
2.1 Session list
2.1.1 Supplement the acquired rank information in the session acquisition function completeConvList. The final friend session information displayed is in the friendProfiles list.
2.1.2 Modify the rendered icons and avatars in GenerateList (conversation list rendering) in Conversation.cs
2.2 Message list
2.2.1 Obtain the segment information in the message sender's information in RenderMessageForScroll of Chat.cs (if you need to modify other display content, you can also get it from here)
2.2.2 Modify the displayed style and other details in MsgItem.cs


Emojis

Emojis are displayed in OverlayPanel in Chat.cs using StickerPanel. You can import your own emoji to use. (You need to import your own emojis in advance)
1. Import the emojis used in the Assets/Resources folder



2. Change the Texture Type of the image to Sprite (2D and UI), and modify the Pixels Per Unit according to the size of the image.



3. Define the corresponding emoji package data
// Generate a list of emojis, StickerPackage is a set of emojis
List<StickerPackage> stickers = new List<StickerPackage> {
new StickerPackage {
name = "4350",
baseUrl = "custom_sticker_resource/4350",
menuItem = new StickerItem {
name = "menu@2x",
index = 0,
},
stickerList = new List<StickerItem> {
new StickerItem { // emoji package data
name = "menu@2x",
index = 0
},
}
}
};
4. Album emoticons for UIKit
using com.tencent.imsdk.unity.uikit;

Core.SetStickerPackageList(Config.stickers);


Language Package

IM Unity UIKit Demo provides a language switching system based on the system language, and supports Simplified Chinese and English. You can add languages or modify the configuration inside according to your needs.

1. Language files Language data is placed in Resources/LanguageTxt. Now contains Chinese.txt(Simplified Chinese) and English.txt(English) for simplified Chinese and English. If you need other languages, you can add the corresponding txt file. The structure of the file is as follows:
//English.txt
Key: Value

//Chinese.txt
Key: value
Key should be consistent with the Key of other languages, and consistent with subsequent enum Value is the value of the language corresponding to Key Use a colon to separate Key and Value
2. Set language
3. Set language and entry If you have added a language, add the corresponding language vocabulary txt file and add a new language in Language in LanguageDataManager.cs, and add the corresponding Key in LanguageTextName.
4. Load the language files
private Dictionary<string,string> EnglishDictionary = new Dictionary<string,string>();
LoadLanguageTxt(Language. English);
5. Component settings (static modification) Add the LanguageUIText(Script) component to the text component that needs to be set, and select the Key of the word to be displayed. The displayed Key corresponds to the enum in LanguageTextName and the Key in the vocabulary file.


6. Set language To set the language, call SetCurrentLanguageValue when the software starts. If you want to fix the language, you can directly assign a value to currentLanguage in LanguageDataManager.cs (it can be used as the default language). The Demo judges and assigns values according to the system language. If the components that need to be modified are not only static components, the simple method is to save the currently used language to config (saved to Core in Demo) and judge and display it in the code.


API documents



SetConfig

Pass Config information before Init, including sdkappid, userid and usersig.

using com.tencent.imsdk.unity.uikit;

Core.SetConfig(sdkappid, userid, usersig);


Init

Use the Init method provided by UIKit to initialize the SDK, and the AddRecvNewMsgCallback and SetConvEventCallback callbacks will be automatically bound.

using com.tencent.imsdk.unity.uikit;

Core.Init();


SetStickerPackageList

Set sticker package list through SetStickerPackageList.

using com.tencent.imsdk.unity.uikit;

Core.SetStickerPackageList(Config.stickers);


Login

Log in to the account through Login, and execute the bound callback function after the login is completed.

using com.tencent.imsdk.unity.uikit;

Core.Login((params string[] args) => {
});


SetMessageList

Add the message list of a session, merge it into the current session message dictionary after processing, and trigger the OnMsgListChanged event.

using com.tencent.imsdk.unity.uikit;

Core.SetMessageList(currentConvID, newMsgList, isFinished);


SetCurrentConv

Set the currently selected session and fire the OnCurrentConvChanged event.

using com.tencent.imsdk.unity.uikit;

Core.SetMessageList(convID, convType);


SetCurrentStickerIndex

Set the currently selected sticker group and trigger OnCurrentStickerIndexChanged event.

using com.tencent.imsdk.unity.uikit;

Core.SetMessageList(stickerIndex);


Logout

Log out and clear data.

using com.tencent.imsdk.unity.uikit;

Core.Logout((string[] parameters) => {
// Logout callback
});


TencentChatSDK

Unity TencentIMSDK Provides comprehensive instant communication capabilities based on the Unity platform. You can use TencentChatSDK to get other chatting related functions. For example, get user information through TencentChatSDK.

using com.tencent.imsdk.unity;

FriendShipGetProfileListParam param = new FriendShipGetProfileListParam
{
friendship_getprofilelist_param_identifier_array = new List<string>
{
"self_userid"
}
};

TIMResult res = TencentIMSDK.ProfileGetUserProfileList(param, (int code, string desc, List<UserProfile> profile, string user_data)=>{
});


Communication and Feedback

If you have any questions during access and use, you can enter the Unity platform of Tencent Cloud Instant Messaging IM ZhiLiao.