手势

zepetoworldcontent api 允许您为所需的手势/姿势类别设置缩略图，并在点击缩略图时启用特定的手势/姿势。 要使用 zepetoworldcontent api，您必须按如下方式编写导入语句。 import { officialcontenttype, worldservice, zepetoworldcontent, content } from 'zepeto world'; 包含手势/姿势信息的内容类的成员变量和函数信息如下： api 描述 public get id() string 内容唯一标识符 public get title() string 手势、姿势标题文本 \ 语言将根据设备语言自动翻译 public get thumbnail() unityengine texture2d 2d缩略图 public get animationclip() unityengine animationclip 手势动画剪辑 public get isdownloadedthumbnail() boolean 确定您是否之前下载过此缩略图的功能 public get isdownloadedanimation() boolean 确定您是否之前下载过此动画剪辑的功能 public downloadanimation($complete system action)\ void 一个动画剪辑下载功能，接收一个完成回调 \ 如果 isdownloadedanimation() 为 false，则实现 downloadanimation() 被调用。 public downloadthumbnail($complete system action)\ void 下载缩略图的功能 \ 如果 isdownloadedthumbnail() 为 false，则实现 downloadthumbnail() 被调用。 officialcontenttype enum 内容类型（世界 1 9 0 及更高版本） \ 手势 = 2 \ 姿势 = 4 \ 自拍 = 8 \ 手势问候 = 16 \ 手势姿势 = 32 \ 手势肯定 = 64 \ 手势舞蹈 = 128 \ 手势否定 = 256 \ 手势等 = 512 \ 全部 = 14 您可以使用现有的功能， public downloadthumbnail($character zepeto character controller zepetocharacter, $complete system action)\ void ，没有任何功能方面的问题。然而，由于它不再接受zepeto角色作为参数，请使用新修改的功能 public downloadthumbnail($complete system action)\ void 替代。 步骤 1 设置用户界面 步骤 1 1 创建手势按钮 1\) 添加层级 > 用户界面 > 画布，并将排序顺序设置为2，以避免被其他用户界面遮挡。 2\) 添加层级 > ui > 按钮。 步骤 1 2 组织手势面板 1\) 添加层级 > 创建空对象并重命名为 panelparent。 2\) 添加层级 > ui > 面板作为 panelparent 的子项。 3\) 关闭按钮：添加 ui > 按钮后，添加 onclick 事件以禁用手势面板。 4\) 打开按钮：请为上面创建的打开按钮添加一个激活手势面板的 onclick 事件。 5\) 添加一张图片作为标题区域。 6\) 配置一个滚动视图以显示手势缩略图。 添加层级 > ui > 滚动视图。 勾选水平并禁用滚动条图像，因为您只会使用垂直滚动，水平滚动将不需要。 在滚动视图的内容中添加网格布局，以将缩略图对齐为网格模式。 添加内容大小适配器，使对象的大小适合内容的大小。 当您实现脚本时，必须将滚动视图中的内容设置为手势缩略图的父级（以便整个区域被识别并滚动） 7\) 按手势类型配置选项卡。 添加层级 > 创建一个空对象作为面板的子项，并将其重命名为 gesturetitle。 这是切换按钮的父对象。 添加水平布局以水平对齐选项卡。 添加切换组组件。 👍 要配置更多选项卡，添加层级 > ui > 滚动视图，并在滚动视图选项中勾选水平。 8\) 将用作切换按钮的文本添加为gesturetitle的子项，并将其替换为全部。 将文本颜色设置为灰色。 添加在选中时显示的高亮文本作为文本的子项。 设置字体内容、大小和粗细相同，并将颜色设置为黑色。 添加切换组件。 指定组中的父对象。 添加您作为graphic的子项添加的高亮文本。 仅检查将首先显示的所有切换组件的ison。 以相同的方式创建gesture和pose切换按钮。 步骤 1 3 制作缩略图预制件 使用创建缩略图按钮作为预制件的方法，然后在脚本中生成它的实例。 1\) 将 ui > 按钮添加为 scroll view 中 content 的子项，并将其重命名为 prethumb。 2\) 添加 raw image 后，请将名称更改为 thumb。 此图像将作为缩略图。请适当调整大小。 3\) 添加文本。 设置位置以居中图像底部。 调整文字的大小和粗细，并添加内容大小适配器。 水平适配 首选大小 垂直适配 首选大小 4\) 如果设置完成，请将其制作成预制件并放入 resources 文件夹中。 步骤 1 4 用户界面设置指南视频 https //www youtube com/watch?v=v ias8t8wq0 https //www youtube com/watch?v=v ias8t8wq0 👍 视频中显示的用户界面大小和位置值是推荐的，但您可以将其修改为您想要的值！ 一旦用户界面设置完成，继续进行脚本编写。 步骤 2 编写脚本 此脚本基于单次播放。 步骤 2 1 缩略图 项目 > 创建 > zepeto > typescript 并重命名为缩略图。 编写如下示例脚本。 这是一个将手势内容信息（标题、图像）组织到 ui 中的脚本。 缩略图 import { zepetoscriptbehaviour } from 'zepeto script'; import { content } from 'zepeto world'; import { rawimage, text } from 'unityengine ui'; import { texture2d } from 'unityengine'; export default class thumbnail extends zepetoscriptbehaviour { @hideininspector() public content content; start() { this getcomponentinchildren\<text>() text = this content title; this getcomponentinchildren\<rawimage>() texture = this content thumbnail as texture2d; } } 创建脚本后，打开 prethumb 预制件并添加脚本。 步骤 2 2 gestureloader 创建一个层次结构 > 创建空对象并将其重命名为 gestureloader。 创建一个项目 > 创建 > zepeto > typescript 并将其重命名为 gestureloader。 编写如下示例脚本。 gestureloader import { zepetoscriptbehaviour } from 'zepeto script'; import { localplayer, spawninfo, zepetocharacter, zepetoplayers } from 'zepeto character controller'; import { officialcontenttype, worldservice, zepetoworldcontent, content } from 'zepeto world'; import { rawimage, text, button } from 'unityengine ui'; import { gameobject, texture2d, transform, waituntil } from 'unityengine'; import thumbnail from ' /thumbnail'; export default class gestureloader extends zepetoscriptbehaviour { @hideininspector() public contents content\[] = \[]; @hideininspector() public thumbnails gameobject\[] = \[]; @serializefield() private count number = 50; @serializefield() private contentsparent transform; @serializefield() private prefthumb gameobject; private mycharacter zepetocharacter; start() { // 创建角色 zepetoplayers instance createplayerwithuserid(worldservice userid, new spawninfo(), true); zepetoplayers instance onaddedlocalplayer addlistener(() => { this mycharacter = zepetoplayers instance localplayer zepetoplayer character; // 为了用我的角色获取缩略图，您需要在角色创建后请求内容。 this contentrequest(); }); } // 1 从服务器接收内容 private contentrequest() { // 所有类型请求 zepetoworldcontent requestofficialcontentlist(officialcontenttype all, contents => { this contents = contents; for (let i = 0; i < this count; i++) { if (!this contents\[i] isdownloadedthumbnail) { // 使用我的角色拍摄缩略图 this contents\[i] downloadthumbnail(() =>{ this createthumbnailobjcet(this contents\[i]); }); } else { this createthumbnailobjcet(this contents\[i]); } } }); } // 2 创建缩略图对象 private createthumbnailobjcet(content content) { const newthumb gameobject = gameobject instantiate(this prefthumb, this contentsparent) as gameobject; newthumb getcomponent\<thumbnail>() content = content; // 每个缩略图的按钮监听器 newthumb getcomponent\<button>() onclick addlistener(() => { this loadanimation(content); }); this thumbnails push(newthumb); } // 3 加载动画 private loadanimation(content content) { // 验证动画加载 if (!content isdownloadedanimation) { // 如果动画尚未下载，则下载它。 content downloadanimation(() => { // 播放动画片段 this mycharacter setgesture(content animationclip); }); } else { this mycharacter setgesture(content animationclip); } } } 计数是每个标签上要下载的最大手势数量。如果您将其设置为大于100的数字，缩略图下载过程中可能会出现错误，因此请仅根据需要进行设置。 脚本流程如下： 1\) 调用 contentsrequest() 自定义函数以在加载 zepeto 角色后生成缩略图。 contentsrequest() 函数通过分别分离手势和姿势来接收内容信息。 如果存在现有的缩略图，则跳过；否则，检索缩略图。 检索到的缩略图数据存储在各自的列表中。 步骤 2 3 uicontroller 创建一个层次结构 > 创建空对象并将其重命名为 uicontoller。 创建项目 > 创建 > zepeto > typescript 并将其重命名为 uicontoller。 编写如下示例脚本。 uicontroller import { zepetoscriptbehaviour } from 'zepeto script'; import { button, rawimage, text, toggle } from 'unityengine ui'; import { localplayer, zepetocharacter, zepetoplayers, zepetoscreentouchpad } from 'zepeto character controller'; import { officialcontenttype, content } from 'zepeto world'; import { object, gameobject, transform } from 'unityengine'; import gestureloader from ' /gestureloader'; import thumbnail from ' /thumbnail'; export default class uicontroller extends zepetoscriptbehaviour { @serializefield() private closebutton button; @serializefield() private typetogglegroup toggle\[]; private gesturelodaer gestureloader; private mycharacter zepetocharacter; start() { this gesturelodaer = object findobjectoftype\<gestureloader>(); zepetoplayers instance onaddedlocalplayer addlistener(() => { this mycharacter = zepetoplayers instance localplayer zepetoplayer character; // if click the touchpad, cancel the gesture object findobjectoftype\<zepetoscreentouchpad>() onpointerdownevent addlistener(() => { this stopgesture(); }); // if click the close button, cancel the gesture this closebutton onclick addlistener(() => { this stopgesture(); }); }); // ui listener this typetogglegroup\[0] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype all); }); this typetogglegroup\[1] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype gesture); }); this typetogglegroup\[2] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype pose); }); } // category toggle ui set private setcategoryui(category officialcontenttype) { if (category == officialcontenttype all) { this gesturelodaer thumbnails foreach((obj) => { obj setactive(true); }); } else { for (let i = 0; i < this gesturelodaer thumbnails length; i++) { const content = this gesturelodaer thumbnails\[i] getcomponent\<thumbnail>() content; if (content keywords includes(category)) { this gesturelodaer thumbnails\[i] setactive(true); } else { this gesturelodaer thumbnails\[i] setactive(false); } } } } private stopgesture() { this mycharacter cancelgesture(); } } 脚本流程如下： 触摸触控板或关闭按钮以使用cancelgesture()函数取消播放。 点击标签（切换按钮）以调用setcategoryui()自定义函数。 setcategoryui()函数使用每个缩略图中的手势内容信息为每个相应类别设置。 如果是适用类型则启用，不是则禁用。 完成脚本后，将关闭按钮和类型切换组分配给检查器。 类型切换组的入口是手势面板中切换组的子切换。 步骤 3 运行 ❗️ 注意 在播放之前，请禁用 panelparent，以便在播放时仅显示打开按钮。 步骤 4 同步多玩家手势 在多玩家的情况下，必须添加一个同步代码，该代码接收特定玩家所采取的手势信息值，并将其应用于所有访问房间的玩家。 关键是发送和接收关于哪个玩家做了哪个手势的房间消息，在服务器和客户端之间进行。 步骤 4 1 客户端代码 缩略图 多人游戏 编写与单人游戏客户端代码中实现的相同脚本。 缩略图 多人游戏 import { zepetoscriptbehaviour } from 'zepeto script'; import { content } from 'zepeto world'; import { rawimage, text } from 'unityengine ui'; import { texture2d } from 'unityengine'; export default class thumbnail extends zepetoscriptbehaviour { @hideininspector() public content content; start() { this getcomponentinchildren\<text>() text = this content title; this getcomponentinchildren\<rawimage>() texture = this content thumbnail as texture2d; } } 手势加载器 多人游戏 默认情况下，单人游戏客户端代码中实现的脚本是相同的。 此外，客户端声明接口以包含 playergestureinfo。 当将您的信息发送到服务器时：请参见 sendmygesture() 自定义函数 当您的玩家按下缩略图以进行手势时，使用 room send() 将手势 id 发送到服务器。 当您取消手势时，处理它以发送您已取消的信息。 从服务器接收来自另一个客户端的手势信息时："onchangegesture" 房间消息被发送到 this room addmessagehandler() 内的 start() 通过在 "onchangegesture" 消息中包含会话 id 和手势 id 来实现同步，并使适当的玩家执行手势。 import { zepetoscriptbehaviour } from 'zepeto script'; import { localplayer, spawninfo, zepetocharacter, zepetoplayers } from 'zepeto character controller'; import { officialcontenttype, worldservice, zepetoworldcontent, content, zepetoworldmultiplay } from 'zepeto world'; import { rawimage, text, button } from 'unityengine ui'; import { gameobject, texture2d, transform, waituntil } from 'unityengine'; import thumbnail from ' /thumbnail'; import { room, roomdata } from 'zepeto multiplay'; interface playergestureinfo { sessionid string, gestureid string } const cancelmotion = "" as const; export default class gestureloadermultiplay extends zepetoscriptbehaviour { public multiplay zepetoworldmultiplay; @hideininspector() public contents content\[] = \[]; @hideininspector() public thumbnails gameobject\[] = \[]; @serializefield() private count number = 50; @serializefield() private contentsparent transform; @serializefield() private prefthumb gameobject; private mycharacter zepetocharacter; private room room; private contentsmap map\<string, content> = new map\<string, content>(); start() { // 创建角色 zepetoplayers instance onaddedlocalplayer addlistener(() => { this mycharacter = zepetoplayers instance localplayer zepetoplayer character; // 为了用我的角色获取缩略图，您需要在角色创建后请求内容。 this contentrequest(); }); // 多人游戏 this multiplay roomcreated += (room room) => { this room = room; // 从服务器接收用户的手势信息 this room addmessagehandler("onchangegesture", (message playergestureinfo) => { let playergestureinfo playergestureinfo = { sessionid message sessionid, gestureid message gestureid }; this loadanimation(playergestureinfo); }); }; } // 1 从服务器接收内容 private contentrequest(){ // 所有类型请求 zepetoworldcontent requestofficialcontentlist(officialcontenttype all, contents => { this contents = contents; for (let i = 0; i < this count; i++) { if (!this contents\[i] isdownloadedthumbnail) { // 使用我的角色拍摄缩略图 this contents\[i] downloadthumbnail(() =>{ this createthumbnailobjcet(this contents\[i]); }); } else { this createthumbnailobjcet(this contents\[i]); } } }); } // 2 创建缩略图对象 private createthumbnailobjcet(content content) { const newthumb gameobject = gameobject instantiate(this prefthumb, this contentsparent) as gameobject; newthumb getcomponent\<thumbnail>() content = content; // 创建一个字典以通过内容 id 查找内容 this contentsmap set(content id, content); // 每个缩略图的按钮监听器 newthumb getcomponent\<button>() onclick addlistener(() => { this sendmygesture(content id); }); // 缩略图列表 this thumbnails push(newthumb); } // 多人游戏 // 将点击的手势信息发送到服务器 public sendmygesture(gestureid) { const data = new roomdata(); data add("gestureid", gestureid); this room send("onchangegesture", data getobject()); } // 3 加载动画 private loadanimation(playergestureinfo playergestureinfo){ if (!zepetoplayers instance hasplayer(playergestureinfo sessionid)) { console log("玩家不存在"); return; } const zepetoplayer = zepetoplayers instance getplayer(playergestureinfo sessionid) character; if (playergestureinfo gestureid == cancelmotion) { zepetoplayer cancelgesture(); return; } else if(!this contentsmap has(playergestureinfo gestureid)) { console log("资源尚未加载"); return; } const content = this contentsmap get(playergestureinfo gestureid); // 验证动画加载 if (!content isdownloadedanimation) { // 如果动画尚未下载，则下载它。 content downloadanimation(() => { // 播放动画剪辑 zepetoplayer setgesture(content animationclip); }); } else { zepetoplayer setgesture(content animationclip); } } } 完成脚本后，检查员将为multiplay分配一个额外的对象，使用zepeto world multiplay组件。 uicontroller 多人游戏 默认情况下，单人游戏客户端代码中实现的脚本是相同的。 与单人游戏客户端代码的区别在于 stopgesture() 自定义函数。 在 gestureloadermultiplay 中调用 sendmygesture() 自定义函数。 处理发送手势已被取消的信息。 import { zepetoscriptbehaviour } from 'zepeto script'; import { button, rawimage, text, toggle } from 'unityengine ui'; import { localplayer, zepetocharacter, zepetoplayers, zepetoscreentouchpad } from 'zepeto character controller'; import { officialcontenttype, content } from 'zepeto world'; import { object, gameobject, transform } from 'unityengine'; import gestureloadermultiplay from ' /gestureloadermultiplay'; import thumbnail from ' /thumbnail'; const cancelmotion = "" as const; export default class uicontroller extends zepetoscriptbehaviour { @serializefield() private closebutton button; @serializefield() private typetogglegroup toggle\[]; private gesturelodaer gestureloadermultiplay; private mycharacter zepetocharacter; start() { this gesturelodaer = object findobjectoftype\<gestureloadermultiplay>(); zepetoplayers instance onaddedlocalplayer addlistener(() => { this mycharacter = zepetoplayers instance localplayer zepetoplayer character; // 如果点击触摸板，取消手势 object findobjectoftype\<zepetoscreentouchpad>() onpointerdownevent addlistener(() => { this stopgesture(); }); // 如果点击关闭按钮，取消手势 this closebutton onclick addlistener(() => { this stopgesture(); }); }); // ui 监听 this typetogglegroup\[0] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype all); }); this typetogglegroup\[1] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype gesture); }); this typetogglegroup\[2] onvaluechanged addlistener(() => { this setcategoryui(officialcontenttype pose); }); } // 类别切换 ui 设置 private setcategoryui(category officialcontenttype) { if (category == officialcontenttype all) { this gesturelodaer thumbnails foreach((obj) => { obj setactive(true); }); } else { for (let i = 0; i < this gesturelodaer thumbnails length; i++) { const content = this gesturelodaer thumbnails\[i] getcomponent\<thumbnail>() content; if (content keywords includes(category)) { this gesturelodaer thumbnails\[i] setactive(true); } else { this gesturelodaer thumbnails\[i] setactive(false); } } } } private stopgesture() { this gesturelodaer sendmygesture(cancelmotion); } } 步骤 4 2 服务器代码 服务器代码然后声明接口以包含 playergestureinfo，方式相同。 服务器代码默认基于 multiplay sample 中的服务器代码。 它创建了一个 onmessage() 回调，当手势在 oncreate() 中变化时，将手势信息发送给其他客户端。 import { sandbox, sandboxoptions, sandboxplayer } from 'zepeto multiplay'; import { player, transform, vector3 } from 'zepeto multiplay schema'; // 定义一个接口 playergestureinfo 来表示玩家手势的信息。 interface playergestureinfo { sessionid string, gestureid string } export default class extends sandbox { // 定义一个常量对象 `message type` 来存储脚本中使用的消息类型。 message type = { onchangegesture "onchangegesture" } oncreate(options sandboxoptions) { // 当房间创建时调用。 // 处理房间的状态或数据初始化。 this onmessage("onchangedtransform", (client, message) => { const player = this state players get(client sessionid); const transform = new transform(); transform position = new vector3(); transform position x = message position x; transform position y = message position y; transform position z = message position z; transform rotation = new vector3(); transform rotation x = message rotation x; transform rotation y = message rotation y; transform rotation z = message rotation z; player transform = transform; }); this onmessage("onchangedstate", (client, message) => { const player = this state players get(client sessionid); player state = message state; player substate = message substate; // 角色控制器 v2 }); // 当手势改变时， this onmessage\<playergestureinfo>(this message type onchangegesture, (client, message) => { let gestureinfo\ playergestureinfo = { sessionid client sessionid, gestureid message gestureid }; // 将手势发送给除客户端以外的其他玩家 this broadcast(this message type onchangegesture, gestureinfo); }); } onjoin(client sandboxplayer) { // 在创建玩家对象后设置初始值，玩家对象在 schemas json 中定义。 console log(`\[onjoin] sessionid ${client sessionid}, userid ${client userid}`) const player = new player(); player sessionid = client sessionid; if (client userid) { player zepetouserid = client userid; } // 使用 sessionid 管理玩家对象，这是客户端对象的唯一键值。 // 客户端可以通过将 add onadd 事件添加到 players 对象来检查有关添加的玩家对象的信息。 this state players set(client sessionid, player); } onleave(client sandboxplayer, consented? boolean) { // 通过设置 allowreconnection，可以保持电路的连接，但在基本指南中立即清理。 // 客户端可以通过将 add onremove 事件添加到 players 对象来检查有关已删除玩家对象的信息。 this state players delete(client sessionid); } }