界面显示方法、装置、电子设备及计算机可读存储介质与流程

1.本技术涉及计算机技术领域，更具体地，涉及一种界面显示方法、装置、电子设备及计算机可读存储介质。


背景技术：

2.界面开发是游戏开发流程中的重要一环。为开发人员提供所见即所得的节点树预览工具，可以有效地提升界面开发效率。在实际的界面开发过程中，可能需要借助于脚本在界面开发引擎的引擎层上再封装一层界面类型，来维护界面的信息存储和逻辑运行，即由封装的上层脚本界面实例来管理一个或者多个引擎层节点。但是相关技术中，界面开发引擎所提供的节点树预览工具仅支持显示引擎层节点和对引擎层节点进行编辑，这样，对于界面开发人员而言，降低了界面开发的效率。


技术实现要素：

3.鉴于上述问题，本技术实施例提出了一种界面显示方法、装置、电子设备及计算机可读存储介质，以解决相关技术中因节点树预览工具仅支持显示引擎层节点所导致界面开发效率低的问题。
4.根据本技术实施例的一个方面，提供了一种界面显示方法，包括：显示引擎层节点树，所述引擎层节点树包括至少一个第一节点，所述第一节点是指关联了上层脚本界面实例的节点；响应于对所述引擎层节点树中目标第一节点的触发操作，基于第一节点与上层脚本界面实例之间的映射关系确定并显示目标上层脚本界面实例，所述目标上层脚本界面实例是指被触发的所述目标第一节点所关联的上层脚本界面实例。
5.根据本技术实施例的一个方面，提供了一种界面显示装置，包括：第一显示模块，用于显示引擎层节点树，所述引擎层节点树包括至少一个第一节点，所述第一节点是指关联了上层脚本界面实例的节点；第二显示模块，用于响应于对所述引擎层节点树中目标第一节点的触发操作，基于第一节点与上层脚本界面实例之间的映射关系确定并显示目标上层脚本界面实例，所述目标上层脚本界面实例是指被触发的所述目标第一节点所关联的上层脚本界面实例。
6.根据本技术实施例的一个方面，提供了一种电子设备，包括：处理器；存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如上所述的界面显示方法。
7.根据本技术实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机可读指令，当所述计算机可读指令被处理器执行时，实现如上所述界面显示方法。
8.根据本技术实施例的一个方面，提供了一种计算机程序产品，其包括计算机指令，所述计算机指令被处理器执行时实现如上的界面显示方法。
9.在本技术的方案中，在显示引擎层节点树的基础上，引擎层节点树中存在关联了上层脚本界面实例的第一节点，如果引擎层节点树中的目标第一节点被触发，基于第一节
点与上层脚本界面实例之间的映射关系确定并显示目标第一节点所关联的上层脚本界面实例，由此实现了可以通过引擎层节点树中的节点访问该节点所关联的上层脚本界面实例，从而，便于进行上层脚本界面实例的编辑、测试和调试，可以有效提升界面开发效率。
附图说明
10.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
11.图1是根据本技术的一个实施例示出的界面显示方法的流程图。
12.图2a是根据本技术的一个实施例示出的步骤120在一实施例中的流程图。
13.图2b是根据本技术一实施例示出的第一交互窗口中第一控件的示意图。
14.图2c示例性示出了目标上层脚本界面实例的示意图。
15.图3是根据本技术一实施例示出的图2a对应实施例中步骤122在一实施例中的流程图。
16.图4是根据本技术一实施例示出的引擎层节点树的示意图。
17.图5是根据本技术一实施例示出的在第一交互窗口中显示第二控件的示意图。
18.图6是根据本技术一实施例示出的自动定位到脚本文件中定义封装类型的脚本代码的流程图。
19.图7是根据本技术一实施例示出的在第一交互窗口中显示第三控件的示意图。
20.图8是根据本技术一实施例示出的目标上层脚本界面实例的节点树的示意图。
21.图9是根据本技术一实施例示出的属性窗口的示意图。
22.图10a是根据本技术另一实施例示出的目标上层脚本界面实例的节点树的示意图。
23.图10b是根据本技术一实施例示出的动画编辑窗口的示意图。
24.图11是根据本技术一实施例示出的界面显示装置的框图。
25.图12示出了适于用来实现本技术实施例的电子设备的结构示意图。
具体实施方式
26.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本技术将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。
27.此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本技术的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本技术的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本技术的各方面。
28.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现
这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
29.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
30.需要说明的是：在本文中提及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
31.在对本技术的方案进行具体说明之前，对本技术涉及的术语进行如下解释：
32.cocos：本文中是指cocos-2dx游戏引擎，包含了导演、场景、控件、动作等概念，主流是以c++开发，lua为辅。
33.上层脚本封装界面：是指通过脚本实现的界面类型，例如在cocos-2dx游戏引擎中，会在cocos的基础上通过脚本再封装一层界面类型，来维护游戏界面的信息存储和逻辑运行，即由该上层脚本界面实例来管理一组cocos节点(一个或多个画布的控件)，该cocos节点即为引擎层节点树中的引擎层节点。
34.上层脚本界面实例：将上层脚本封装界面进行实例化得到的脚本对象。
35.在实际的界面开发过程中，可能需要借助于脚本在引擎层上再封装一层界面类型，来维护界面的信息存储和逻辑运行，即由封装的上层脚本界面实例来管理一个或者多个引擎层节点(例如cocos节点)。但是相关技术中，界面开发引擎所提供的节点树预览工具仅支持显示引擎层节点和对引擎层节点进行编辑，这样，对于界面开发人员而言，访问节点所关联的上层脚本界面实例花费的时间较长，降低了界面开发的效率。基于此，提出了本技术的方案。
36.以下对本技术实施例的技术方案的实现细节进行详细阐述：
37.图1是根据本技术的一个实施例示出的界面显示方法的流程图，该方法可以由具备处理能力的电子设备执行，电子设备可以是具备显示屏的终端，例如台式电脑、笔记本电脑等，在此不进行具体限定。该终端可以运行界面开发引擎的客户端程序，从而可以显示界面开发引擎的用户界面。参照图1所示，该方法至少包括步骤110至步骤120，详细介绍如下：
38.步骤110，显示引擎层节点树，引擎层节点树包括至少一个第一节点，第一节点是指关联了上层脚本界面实例的节点。
39.其中，引擎层节点树是指通过界面开发引擎进行界面开发所得到呈现界面的结构的节点树，或者说，引擎层节点树中的节点是依赖于界面开发引擎所提供的驱动引擎中的核心组件实现，而不需要借助于外部的其他系统的功能来实现的节点。引擎层节点树中的引擎层节点是指通过界面开发引擎所开发的界面中的界面元素，界面元素例如界面中的控件(例如释放技能的控件、例如攻击的控件、例如返回的控件等)、菜单栏中的选项等等。在本技术中，是在界面开发引擎的客户端的显示界面中显示引擎层节点树。
40.基于界面开发引擎所开发的界面可以是游戏应用的游戏界面、即时通信应用的界面、购物应用的界面、视频应用的界面、直播应用的界面等，在此不进行具体限定。
41.在一具体实施例中，界面开发引擎所开发的界面可以是游戏应用的游戏界面，其中，界面开发引擎可以是cocos-2dx游戏引擎，该cocos-2dx游戏引擎所集成的节点树预览工具可以显示引擎层节点树中的节点，其中，引擎层节点树中的节点即为cocos节点。
42.上层脚本界面实例是指将脚本语言编写的界面类型进行实例化所得到的脚本对象，脚本语言例如javascript、python、vbscript等，在此不进行具体限定。在一具体实施例中，若界面开发引擎为cocos-2dx游戏引擎，上层脚本界面实例可以是python实现的界面实例。
43.在具体实施例中，界面开发引擎所集成的节点树预览工具提供了节点树窗口和属性窗口，其中，节点树窗口用于显示节点树，从而，在步骤110中，可以在节点树预览工具的节点树窗口中显示引擎层节点树。属性窗口用于显示各节点的属性信息。
44.第一节点也可以理解为在引擎层节点树中由上层脚本界面实例管理的引擎层节点。在具体实施例中，可以在创建上层脚本界面实例的过程中，将上层脚本节点实例的实例信息与所指定由该上层脚本界面实例管理的引擎层节点(即第一节点)的节点标识关联缓存在引擎层节点树中，从而，在显示引擎层节点树的过程中，可以根据引擎层节点树中引擎层节点是否关联存储了上层脚本界面实例的实例信息来确定一引擎层节点是否为第一节点。上层脚本界面实例的实例信息例如下文中上层脚本界面实例的静态数据。
45.步骤120，响应于对引擎层节点树中目标第一节点的触发操作，基于第一节点与上层脚本界面实例之间的映射关系确定并显示目标上层脚本界面实例，目标上层脚本界面实例是指被触发的目标第一节点所关联的上层脚本界面实例。
46.目标第一节点是指引擎层节点树中被用户触发选定的第一节点。在显示引擎层节点树的基础上，引擎层节点树中的节点可以呈树状展开，从而，用户可以根据需要选定节点，进而可以对节点的信息(例如节点的属性信息)进行编辑，如果被选定的节点是第一节点，则可以按照本技术的方式，显示该第一节点所关联的上层脚本界面实例。
47.如上所描述，引擎层节点树中存储了上层脚本节点实例的实例信息与所指定由该上层脚本界面实例管理的引擎层节点(即第一节点)的节点标识，即，相当于引擎层节点树中存储了上层脚本界面实例与第一节点之间的映射关系，从而，根据第一节点与上层脚本界面实例之间的映射关系，可以对应确定被选定的目标第一节点所关联的上层脚本界面实例(即目标上层脚本界面实例)。
48.其中，对目标第一节点的触发操作可以是点击操作(例如鼠标左键单击、鼠标右键单击、鼠标左键双击、鼠标右键双击)、触摸操作、滑动操作、长按操作等，或者针对为目标第一节点所提供的可触发控件触发的操作，在此不进行具体限定。
49.在一些实施例中，可以在对引擎层节点树中目标第一节点进行触发操作后，直接显示目标上层脚本界面实例；在另一些实施例中，也可以是对引擎层节点树中目标第一节点进行触发操作后，提供中间选项，然后点击中间选项中用于进入该目标第一节点所关联上层脚本界面实例的选项后，显示目标上层脚本界面实例。
50.图2a是根据本技术一实施例示出的步骤120在一实施例中的流程图，如图2a所示，步骤120包括步骤121-步骤122，详细介绍如下：
51.步骤121，响应于对引擎层节点树中目标第一节点的触发操作，显示第一交互窗口，第一交互窗口中包括第一控件。
52.在本技术中，第一控件是用于进入第一节点所关联的上级脚本界面实例的入口，也可以理解为，第一控件是第一交互窗口中用于进入第一节点所关联的上级脚本界面实例、且可以被触发的页面元素。第一控件可以以按钮、虚拟图标、菜单中的选项等形式呈现。
53.其中，对第一节点的触发操作可以是点击操作(鼠标左击操作、鼠标右击操作)、鼠标悬停操作、双击操作、触摸操作、长按操作等操作，在此不进行具体限定。第一交互窗口可以以浮窗的形式显示在节点树窗口中。可以理解的是，第一交互窗口中还可以包括除第一控件外的其他可被触发的控件，具体可根据实际需要设定，所显示的第一交互窗口中的可被触发的控件即为上文中的中间选项。
54.图2b是根据本技术一实施例示出的第一交互窗口中第一控件的示意图。如图2b所示，节点树窗口210中显示了针对开发的显示界面的引擎层节点树，若触发引擎层节点树中“panelbgbg”这一节点，可以在节点树窗口210显示第一交互窗口220，第一交互窗口220中“记录所在界面实例”控件221即为本技术中的第一控件。进一步的，在图2b中，第一交互窗口220中还包括除第一控件外的其他控件，例如“复制名称”控件、“复制id”控件、“复制类名”控件、“复制csb路径”控件等。
55.在一些实施例中，由于引擎层节点树中还包括未关联上层脚本界面实例的节点，如果引擎层节点树中还包括未关联上层脚本界面实例的节点被触发，在第一交互窗口中可以不显示第一控件，或者使第一交互窗口中的第一控件呈不可被触发的状态，从而，避免误导用户。
56.步骤122，响应于对第一控件的触发操作，基于第一节点与上层脚本界面实例之间的映射关系，显示目标上层脚本界面实例。
57.其中，对第一控件的触发操作可以是点击操作(鼠标左击操作、鼠标右击操作)、鼠标悬停操作、双击操作、触摸操作、长按操作等操作，在此不进行具体限定。图2c示例性示出了目标上层脚本界面实例的示意图，即，若用户点击图2b中“记录所在界面实例”控件221，可以显示图2c所示的目标上层脚本界面实例，图2c中的globaldata.uiassistselectedguicomponent即为目标上层脚本界面实例。
58.在一具体实施例中，第一节点与上层脚本界面实例之间的映射关系指示了第一节点的节点标识与静态数据之间的对应关系，静态数据指示了所对应上层脚本界面实例的脚本文件的脚本文件路径。在本实施例中，如图3所示，步骤122可以包括如下的步骤310-步骤340，详细介绍如下：
59.步骤310，响应于对第一控件的触发操作，获取与目标第一节点的节点标识相关联的静态数据。
60.在本技术中，在通过脚本创建上层脚本界面实例的过程中，缓存所创建的上层脚本界面实例的静态数据，之后，基于该上层脚本界面实例所管理的节点(该节点即为第一节点)，将所管理的下层的节点(即第一节点)的节点标识与该节点所对应的上层脚本界面实例的静态数据进行关联存储。
61.在此基础上，对于第一节点，若需要获取该第一节点所关联的上层脚本界面实例的静态数据，基于节点与静态数据之间的映射关系，将与第一节点的节点标识相关联的节点数据作为第一节点所关联的上层脚本界面实例的静态数据。
62.对应的，针对第一节点，在步骤310之前，该方法还包括：在创建目标上层脚本界面实例的过程中，缓存目标上层脚本界面实例的静态数据；根据目标上层脚本界面实例所管理的目标第一节点，建立目标第一节点所对应节点标识与目标上层脚本界面实例的静态数据之间的映射关系。
63.其中，目标上层脚本界面实例的静态数据包括封装类型、画布名称、模块路径、点击回调方法名等信息。
64.在具体实施例中，若引擎层节点树中包括第一节点，可以在引擎层节点树中显示该第一节点所属上层脚本界面实例的封装类型、以及画布名称。图4是根据本技术一实施例示出的引擎层节点树的示意图，图4所示出的引擎层节点树中包括关联了上层脚本界面实例的第一节点，图4中节点树窗口210示出了3个第一节点所关联上层脚本界面实例的封装类型，即图4中第一虚线框410所框选的部分。图4中还进一步示出了第一节点所关联上层脚本界面实例对应的画布名称，即图4中第二虚线框420中的内容。进一步的，在界面开发过程中，还可以将界面进行标记，用来标记界面的一些特有的信息，例如，若一节点被标记了图4中第三虚线框430中“注”这一标记，表明开发人员在该节点的画布中写有注释，通过该标记来提醒对应的开发人员查看注释。
65.在一些实施例中，根据目标上层脚本界面实例所管理的目标第一节点，建立目标第一节点所对应节点标识与目标上层脚本界面实例的静态数据之间的映射关系之前，方法还包括：将目标第一节点所属控件的控件名、目标第一节点所属类的类名和目标第一节点在同一级节点中的计数进行拼接，得到目标第一节点对应的节点标识。
66.可以理解的是，引擎层树中包括呈树状排布的多个节点，不同的节点的节点名称可能相同，例如，若多个节点均表示控件，如果用节点所表示控件的控件名称来作为该节点的节点标识，如果存在控件名称重复的节点，则对应的节点标识重复。因此，在本实施例中，将第一节点所属控件的控件名、所属类的类名以及第一节点在同一级节点中的计数进行拼接，将拼接结果作为该第一节点对应的节点标识，相当于结合了第一节点所属父节点的信息和第一节点自身的信息来确定第一节点的节点标识，从而可以保证为第一节点所确定节点标识在引擎层节点树中可以唯一标识该第一节点，避免因节点的控件名重复造成节点标识重复的情况。
67.由于所生成的节点标识可以唯一标识对应的第一节点，从而，基于第一节点的节点标识和所属上层脚本界面实例的静态数据建立的映射关系，相当于构建了第一节点到上层脚本界面实例的一一映射。从而，便于引擎层节点中的第一节点获取到对应的上层脚本界面实例，获得上层脚本界面实例之后便可以查看其属性和调用方法，便于进行上层脚本界面实例的调试。
68.步骤320，根据与目标第一节点的节点标识相关联的静态数据，确定目标上层脚本界面实例所对应脚本文件的脚本文件路径。
69.具体的，步骤320包括：从与目标第一节点的节点标识相关联的静态数据中获取封装类型和模块路径；将封装类型和模块路径进行拼接，得到目标上层脚本界面实例所对应脚本文件的脚本文件路径。
70.步骤330，根据脚本文件路径，获取目标上层脚本界面实例所对应脚本文件。
71.可以理解的是，脚本文件路径指示了目标上层脚本界面实例所对应脚本文件的存储位置，因此，按照脚本文件路径进行文件访问，可以对应获取到目标上层脚本界面实例所对应脚本文件。
72.步骤340，基于目标上层脚本界面实例所对应脚本文件，显示目标上层脚本界面实例。
73.具体的，在步骤340中，执行目标上层脚本界面实例所对应脚本文件，即实现封装类型的实例化，可以对应得到目标上层脚本界面实例。例如，若目标上层脚本界面实例对应的脚本文件是通过python脚本编写的，则将目标上层脚本界面实例对应为实例化得到的python对象。
74.在如上的实施例中，由于在创建上层脚本界面实例时，缓存上层脚本界面实例的静态数据，并将上层脚本界面实例的静态数据与所管理的第一节点的节点标识建立映射关系，之后，如果对上层脚本界面实例进行编辑(例如销毁、移动、修改)等，对应将映射关系进行同步更新，即如果销毁上层脚本界面实例，则可以删除该映射关系，如果对上层脚本界面实例进行了修改，则对应将映射关系中的静态数据进行修改；如果上层脚本界面实例管理的节点发生移动，则对应更新映射关系中的节点标识，相当于实现了对上层脚本界面实例的弱引用的动态管理，从而保证了从引擎层节点树中查找第一节点所对应上层脚本界面实例的实现。
75.在一些实施例中，在获取到目标上层脚本界面实例之后，可以打印该实例的属性以及执行其实例方法，从而执行游戏界面的各种功能逻辑，既可以有效提高界面的开发和迭代效率，更有助于所开发界面中相关异常(bug)的定位、调试和修复。
76.在本技术的方案中，在显示引擎层节点树的基础上，对于关联了上层脚本界面实例的第一节点，如果触发该第一节点，显示的第一交互窗口中包括用于进入被触发的第一节点所关联上层脚本界面实例的第一控件，之后，通过触发第一控件可以显示第一节点所关联的上层脚本界面实例，由此实现了可以通过引擎层节点树中的节点访问该节点所关联的上层脚本界面实例，从而，便于进行上层脚本界面实例的测试和调试，可以有效提升界面开发效率。
77.通过本技术的方案，可以在引擎层节点树的节点中缓存上层脚本界面实例的静态数据，而且支持对上层脚本界面实例进行动态管理，维护引擎层节点到上层脚本界面实例的一一映射关系，从而可以通过节点树预览工具中显示的引擎层节点获取到对应的上层脚本界面实例，进一步可以支持对上层脚本界面实例的信息显示和调试上层脚本界面实例的功能逻辑。
78.相关技术中，通过封装的上层脚本界面实例可以随时获取到它所管理的第一节点(例如cocos节点)，但不支持查找cocos节点所归属的上层脚本界面实例。相关技术中，如果需要对上层脚本界面实例进行调试，需要先根据项目组内部的ui框架先获取到顶层的脚本界面实例，然后再通过类属性来逐步找到所需要调试的上层界面实例，比如说a界面(假设赋值给a)嵌套b界面(记录在属性b)，b界面又嵌套c界面(记录在属性c)，如果需要取到c界面则需要经过a.b.c这么一串调用的过程，缺乏直接获得c界面的一步到位的操作。而采用本技术的方案，通过引擎层节点树，基于第一交互窗口中的第一控件可以直接访问被触发的第一节点的上层脚本界面实例，可以有效解决相关技术中不支持查找cocos节点所归属的上层脚本界面实例的问题，而且访问路径较短，不需要花费大量的时间去访问上层脚本界面实例，便于对上层脚本界面实例进行调试和功能逻辑验证。
79.在一些实施例中，在引擎层节点树中，针对第一节点还可以显示第一节点所关联上层脚本界面实例的封装类型、以及画布名称，例如按照图4所示的方式进行显示。这样，可以是引擎层节点树的层次展示更清晰，可以很直观地看出界面之间的组织关系，比如界面a
在哪个cocos节点下挂接了界面b；scrollview(滚动条)中挂的是哪些封装类型的item等等，提升了开发人员的用户体验。
80.在一些实施例中，第一交互窗口中还包括第二控件；步骤121之后，该方法还包括：响应于对第二控件的触发操作，在代码编辑器中打开目标上层脚本界面实例的脚本文件，并定位到脚本文件中定义封装类型的脚本代码。
81.第二控件是用于第一节点所对应目标上层基本界面实例中定义封装类型的脚本代码的入口。也可以理解为，第二控件是用于进入目标上层脚本界面实例中定义封装类型的脚本代码、且可被触发的页面元素，第二控件可以以按钮、虚拟图标、菜单中的选项等方式呈现。
82.图5是根据本技术一实施例示出的在第一交互窗口中显示第二控件的示意图，如图5所示，该第一交互窗口220中“跳至类型”控件222可以视为本技术中的第二控件。图2b中第一交互窗口220中“跳至类型”控件222也为本技术中的第二控件。
83.具体的，如图6所示，该步骤包括如下的步骤610-步骤640：
84.步骤610，响应于对第二控件的触发操作，获取目标上层脚本界面实例的脚本文件。
85.获取目标上层脚本界面实例的脚本文件的过程可以参见步骤310-步骤330的过程，在此不再赘述。
86.步骤620，根据目标上层脚本界面实例的脚本文件，生成目标上层脚本界面实例的抽象语法树。
87.抽象语法树(abstract syntax tree，ast)是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，抽象语法树并不会表示出真实源代码语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。
88.在具体实施例中，可以对目标上层脚本界面实例的脚本文件进行语法分析，来生成目标上层脚本界面实例的抽象语法树。进一步的，若界面开发引擎为cocos-2dx游戏引擎，可以通过该游戏引擎中内置的complie()函数生成目标上层脚本界面实例的抽象语法树，具体的，将ast.pycf_only_ast作为旗标(flag)传递给complie()函数，由complie()函数生成对应的抽象语法树。
89.步骤630，遍历抽象语法树的节点，以统计类节点的起始行号。
90.类节点是指抽象语法树中定义封装类型的节点，即ast.classdef节点。类节点的起始行号指示了脚本文件中定义封装类型的脚本代码的开始行号和结束行号，即指示了脚本文件中定义封装类型的脚本代码在脚本文件中的位置。
91.步骤640，在代码编辑器中打开目标上层脚本界面实例的脚本文件，并根据类节点的起始行号，定位到脚本文件中定义封装类型的脚本代码。
92.代码编辑器可以内嵌在界面开发引擎中，从而，在界面开发引擎的显示界面中，可以调用代码编辑器来打开目标上层脚本界面实例的脚本文件。基于类节点的起始行号，可以控制跳转到代码文件中类节点的开始行号所在行和类节点的结束行号所在行，从而定位到脚本文件中定义封装类型的脚本代码。
93.在具体实施例中，可以通过代码编辑器中的代码跳转指令来控制自动跳转到脚本文件中定义封装类型的脚本文件；例如，若代码编辑器为pycharm，其代码跳转指令为“start/b pycharm64.exe
‑‑
line行号文件路径”；若代码编辑器为vscode，其代码跳转指令为“code
‑‑
goto文件路径：行号”。其中，代码跳转指令中的文件路径即为脚本文件的脚本文件路径，行号即为类节点的开始行号到类节点的结束行号之间的行号。
94.在本实施例中，通过触发第一交互窗口中的第二控件，可以自动在代码编辑器中打开被触发的第一节点所关联的目标上层脚本界面实例的脚本文件，并自动定位到脚本文件中定义封装类型的脚本代码，从而，不需要开发人员人工查找并定位到脚本文件中定义封装类型的脚本代码。
95.在一些实施例中，第一交互窗口中还包括第三控件；步骤121之后，该方法还包括：响应于对第三控件的触发操作，在代码编辑器中打开目标上层脚本界面实例的脚本文本，并定位到脚本文本中定义点击回调方法的脚本代码。
96.第三控件是用于第一节点所对应目标上层基本界面实例中定义点击回调方法的脚本代码的入口。也可以理解为，第三控件是用于进入目标上层脚本界面实例中定义点击回调方法的脚本代码、且可被触发的页面元素，第三控件可以以按钮、虚拟图标、菜单中的选项等方式呈现。
97.图7是根据本技术一实施例示出的在第一交互窗口中显示第三控件的示意图，如图7所示，该第一交互窗口220中“跳至点击回调”控件223可以视为本技术中的第二控件。
98.具体的，响应于对第三控件的触发操作，在代码编辑器中打开目标上层脚本界面实例的脚本文本，并定位到脚本文本中定义点击回调方法的脚本代码，可以包括如下的步骤a1-步骤a4，详细介绍如下：
99.步骤a1，响应于对第三控件的触发操作，获取目标上层脚本界面实例的脚本文件。
100.具体获取目标上层脚本界面实例的脚本文件的过程可以参见步骤310-步骤330的过程，在此不再赘述。
101.步骤a2，根据目标上层脚本界面实例的脚本文件，生成目标上层脚本界面实例的抽象语法树。
102.步骤a3，遍历抽象语法树的节点，以统计方法节点的起始行号。
103.方法节点是指抽象语法树中定义点击回调方法的节点，即ast.functiondef节点。同理，方法节点的起始行号指示了脚本文件中定义点击回调方法的脚本代码的开始行号和结束行号，即指示了脚本文件中定义点击回调方法的脚本代码在脚本文件中的位置。
104.步骤a4，在代码编辑器中打开目标上层脚本界面实例的脚本文件，并根据方法节点的起始行号，定位到脚本文件中定义点击回调方法的脚本代码。
105.同理，可以通过代码编辑器中的代码跳转指令来控制自动跳转到脚本文件中定义封装类型的脚本文件；例如，若代码编辑器为pycharm，其代码跳转指令为“start/b pycharm64.exe
‑‑
line行号文件路径”；若代码编辑器为vscode，其代码跳转指令为“code
‑‑
goto文件路径：行号”。其中，代码跳转指令中的文件路径即为脚本文件的脚本文件路径，行号即为方法节点的开始行号到方法节点的结束行号之间的行号。
106.在本实施例中，通过触发第一交互窗口中的第二控件，可以自动在代码编辑器中打开被触发的第一节点所关联的目标上层脚本界面实例的脚本文件，并自动定位到脚本文件中定义封装类型的脚本代码，从而，不需要开发人员人工查找并定位到脚本文件中定义封装类型的脚本代码。
107.在一些实施例中，该方法还包括：响应于对第一控件的触发操作，显示目标上层脚本界面实例的节点树；响应于目标上层脚本界面实例的节点树中节点的触发操作，在属性窗口中显示被触发节点的属性信息，以在属性窗口中进行属性编辑。
108.在本实施例中，可以对上层脚本界面实例中通用属性或方法进行封装，从而，将封装后的通用属性或方法可以视为目标上层脚本界面实例的节点树中的节点。这样，可以通过触发目标上层脚本界面实例的节点树中节点，来对被触发的节点的属性进行编辑。
109.图8是根据本技术一实施例示出的目标上层脚本界面实例的节点树的示意图，若触发图8中节点树窗口210中所显示“panelbtnl_1”这一节点，在属性窗口中可以显示图9所示的信息，所显示的信息即为被触发的节点的属性信息。
110.基于属性窗口中所显示的属性信息，可以通过上层脚本界面实例的自定义属性读写等便可以完成各种脚本层面上的功能调试，而不再局限于修改cocos引擎层面的属性。
111.在另一些实施例中，该方法还包括：响应于对第一控件的触发操作，显示目标上层脚本界面实例的节点树；响应于目标上层脚本界面实例的节点树中动画对象节点的触发操作，在动画编辑窗口中显示被触发动画对象节点对应的动画对象。
112.动画对象节点是指定义动画对象的节点。基于在动画编辑窗口中显示被触发动画对象节点对应的动画对象，可以对动画对象进行编辑。其中，动画对象例如音效动画等。具体的，在获取到目标上层脚本界面实例后，可以通过提供的属性来管理当前节点的actiontimeline对象(即动画对象)，通过getaction方法获取到动画对象，并进入动画编辑窗口。
113.图10a是根据本技术另一实施例示出的目标上层脚本界面实例的节点树的示意图，若触发图10a中节点树窗口210中所显示“node(gactiontimeline)”这一动画对象节点，可以进入到图10b所示的动画编辑窗口，在图10b所示的动画编辑窗口可以对ui动画时间轴进行编辑，进而调试动画播放等功能。
114.以下介绍本技术的装置实施例，可以用于执行本技术上述实施例中的方法。对于本技术装置实施例中未披露的细节，请参照本技术上述方法实施例。
115.图11是根据本技术一实施例示出的界面显示装置的框图，如图11所示，该界面显示装置包括：第一显示模块1110，用于显示引擎层节点树，引擎层节点树包括至少一个第一节点，第一节点是指关联了上层脚本界面实例的节点；第二显示模块1120，用于响应于对引擎层节点树中目标第一节点的触发操作，基于第一节点与上层脚本界面实例之间的映射关系确定并显示目标上层脚本界面实例，目标上层脚本界面实例是指被触发的目标第一节点所关联的上层脚本界面实例。
116.在一些实施例中，第二显示模块1120包括：第一显示单元，用于响应于对引擎层节点树中目标第一节点的触发操作，显示第一交互窗口，第一交互窗口中包括第一控件；第二显示单元，用于响应于对第一控件的触发操作，基于第一节点与上层脚本界面实例之间的映射关系，显示目标上层脚本界面实例。
117.在一些实施例中，第一节点与上层脚本界面实例之间的映射关系指示了第一节点的节点标识与静态数据之间的对应关系，静态数据指示了所对应上层脚本界面实例的脚本文件的脚本文件路径；第二显示单元，包括：静态数据获取单元，用于响应于对第一控件的触发操作，获取与目标第一节点的节点标识相关联的静态数据；脚本文件路径确定单元，用
于根据与目标第一节点的节点标识相关联的静态数据，确定目标上层脚本界面实例所对应脚本文件的脚本文件路径；脚本文件获取单元，用于根据脚本文件路径，获取目标上层脚本界面实例所对应脚本文件；显示单元，用于基于目标上层脚本界面实例所对应脚本文件，显示目标上层脚本界面实例。
118.在一些实施例中，脚本文件路径确定单元，包括：第一获取单元，用于从与目标第一节点的节点标识相关联的静态数据中获取封装类型和模块路径；拼接单元，用于将封装类型和模块路径进行拼接，得到目标上层脚本界面实例所对应脚本文件的脚本文件路径。
119.在一些实施例中，第一交互窗口中还包括第二控件；界面显示装置还包括：第一代码显示模块，用于响应于对第二控件的触发操作，在代码编辑器中打开目标上层脚本界面实例的脚本文件，并定位到脚本文件中定义封装类型的脚本代码。
120.在一些实施例中，第一代码显示模块，包括：第二获取单元，用于响应于对第二控件的触发操作，获取目标上层脚本界面实例的脚本文件；抽象语法树生成单元，用于根据目标上层脚本界面实例的脚本文件，生成目标上层脚本界面实例的抽象语法树；第一遍历单元，用于遍历抽象语法树的节点，以统计类节点的起始行号；第一定位单元，用于在代码编辑器中打开目标上层脚本界面实例的脚本文件，并根据类节点的起始行号，定位到脚本文件中定义封装类型的脚本代码。
121.在一些实施例中，第一交互窗口中还包括第三控件；界面显示装置还包括：第二代码显示模块，用于响应于对第三控件的触发操作，在代码编辑器中打开目标上层脚本界面实例的脚本文本，并定位到脚本文本中定义点击回调方法的脚本代码。
122.在一些实施例中，第二代码显示模块，包括：第三获取单元，用于响应于对第三控件的触发操作，获取目标上层脚本界面实例的脚本文件；抽象语法树生成单元，用于根据目标上层脚本界面实例的脚本文件，生成目标上层脚本界面实例的抽象语法树；第二遍历单元，用于遍历抽象语法树的节点，以统计方法节点的起始行号；第二定位单元，用于在代码编辑器中打开目标上层脚本界面实例的脚本文件，并根据方法节点的起始行号，定位到脚本文件中定义点击回调方法的脚本代码。
123.在一些实施例中，界面显示装置还包括：第三显示模块，用于响应于对第一控件的触发操作，显示目标上层脚本界面实例的节点树；属性窗口显示模块，用于响应于目标上层脚本界面实例的节点树中节点的触发操作，在属性窗口中显示被触发节点的属性信息，以在属性窗口中进行属性编辑。
124.在另一些实施例中，界面显示装置还包括：第四显示模块，用于响应于对第一控件的触发操作，显示目标上层脚本界面实例的节点树；动画对象显示模块，用于响应于目标上层脚本界面实例的节点树中动画对象节点的触发操作，在动画编辑窗口中显示被触发动画对象节点对应的动画对象。
125.在一些实施例中，界面显示装置还包括：缓存模块，用于在创建目标上层脚本界面实例的过程中，缓存目标上层脚本界面实例的静态数据；映射关系建立模块，用于根据目标上层脚本界面实例所管理的目标第一节点，建立目标第一节点所对应节点标识与目标上层脚本界面实例的静态数据之间的映射关系。
126.在一些实施例中，界面显示装置还包括：节点标识生成模块，用于将目标第一节点所属控件的控件名、目标第一节点所属类的类名和目标第一节点在同一级节点中的计数进
行拼接，得到目标第一节点对应的节点标识。
127.图12是根据本技术一实施例示出的电子设备的结构示意图。该电子设备可以是台式电脑、笔记本电脑等终端，用于执行本技术所提供的界面显示方法。
128.如图12所示，该电子设备可以包括：处理器1201，例如cpu，网络接口1204，用户接口1203，存储器1205，通信总线1202。其中，通信总线1202用于实现这些组件之间的连接通信。用户接口1203可以包括显示屏(display)、输入单元比如键盘(keyboard)，可选的，用户接口1203还可以包括标准的有线接口、无线接口。网络接口1204可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。存储器1205可以是高速ram存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1205可选的还可以是独立于前述处理器1201的存储装置。
129.本领域技术人员可以理解，图12中示出的电子设备的结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
130.如图12所示，作为一种计算机可读存储介质的存储器1205中可以包括操作系统、网络通信模块、用户接口模块以及实现界面显示方法的程序。
131.在图12所示的电子设备中，网络接口1204主要用于与其他设备进行通信连接，例如界面开发引擎的服务器等。用户接口1203主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1201可以用于调用存储器1205中存储的实现界面显示方法的程序，并执行如上任一方法实施例中的界面显示方法的步骤。
132.根据本技术实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机可读指令，当所述计算机可读指令被处理器执行时，实现如上任一方法实施例中的界面显示方法。
133.需要说明的是，本技术实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasable programmable read only memory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compact disc read-only memory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本技术中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本技术中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。
134.根据本技术实施例的一个方面，提供了一种计算机程序产品，其包括计算机指令，所述计算机指令被处理器执行时实现如上任一方法实施例中的界面显示方法。
135.附图中的流程图和框图，图示了按照本技术各种实施例的系统、方法和计算机程
序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
136.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本技术的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
137.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本技术实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本技术实施方式的方法。
138.本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。
139.应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求来限制。