CN110262791A - 一种可视化编程方法、装置及运行器、可读存储介质 - Google Patents

Abstract

本申请公开了一种可视化编程方法、装置及运行器、可读存储介质。该方法包括：在可视化编程的编辑模式下，根据预定编程任务确定待编辑元素，并将其放置于所述编辑模式下的视图中，并将所述待编辑元素对应的逻辑控制组件放置于该同一个视图中；当需要建立待编辑元素与逻辑控制组件之间的关系时，在该同一视图中建立待编辑元素与逻辑控制组件之间的关系。通过该技术方案，将待编程元素、逻辑控制组件以及两者之间的逻辑关系表达在同一视图中，从而可以方便地确定待编程元素，提高了产品开发及编程效率。

Description

一种可视化编程方法、装置及运行器、可读存储介质

技术领域

本申请涉及编程技术领域，尤其涉及一种可视化编程方法、装置及运行器、可读存储介质。

背景技术

随着计算机行业的发展，编程语言从低级语言向高级语言演变，编程门槛越来越低。为进一步提高开发效率及降低编程难度，如今出现了可视化编程，比如，游戏行业中对游戏动画的编程：在可视化编程的编辑模式下，从预先准备好的游戏元素库(比如，控件库、美术资源库等)中获取将要设计的游戏场景的各个目标元素，然后对这些目标元素在虚拟世界中的位置、大小、色彩等参数进行编辑，再对这些元素相互之间的逻辑控制关系进行编辑。当组成游戏场景的所有元素在虚拟世界中的位置关系等参数以及相互之间的逻辑关系被设定好后，生成可执行文件，在编辑模式下预览或者执行该可执行文件，即可在显示装置上展现出相应的游戏动画及动作。

在类似上述的可视化编程中，一般会涉及两类各自独立的视图，即用于描述目标元素之间逻辑关系的逻辑关系图和在虚拟世界中呈现具有逻辑关系的各个目标元素的显示视图。这两类独立视图相互对应，但通常位于编程工具的不同窗体之中。编程操作需要先在一个视图中确定目标元素，然后对目标元素按照预定任务进行编程，再切换到另一张视图中进行相应编程，通过在这两类视图上多次来回切换以及相互辅助参照，最终实现预定的编程任务。

上述这种可视化编程方式虽然能完成预定的编程任务，但是，当作为编程对象的目标元素较多时，在视图上呈现的目标元素数量相当惊人，尤其逻辑视图中的各个组件控制关系，将变得十分的错综复杂，要在这样的视图中查找确定目标元素进而对其进行编辑，是比较麻烦的事。即便在一个视图中找到某个目标元素，对其进行修改后，要切换到另一张视图中也很难较好地对应到相应的元素。此外，在这两类视图之间来回切换，也增加了操作的复杂度，影响到编程效率。

发明内容

本申请实施例提供一种可视化编程方法、装置以及运行器、可读存储介质，用于解决或改善现有技术中可视化编程中存在的问题。

一方面，本申请实施例提供的可视化编程方法包括：

在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中；

当根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

优选地，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系，包括：在位于同一所述视图中的所述待编辑元素与所述逻辑控制组件之间设置连接组件，以建立所述待编程元素与所述逻辑控制组件之间的关系。

优选地，所述连接组件为动态连接组件，所述动态连接组件能够动态性地表征所述待编辑元素与所述逻辑控制组件之间的逻辑控制关系。

优选地，所述方法包括：确定可视化编程的编辑模式当前所处状态，根据所述状态在所述视图中显示对应的逻辑控制组件，和/或，根据所述状态在所述视图中显示预定数量的逻辑控制组件。

优选地，所述动态连接组件位于所述视图的最上层。

优选地，所述动态连接组件包括如下任何一种：

带箭头指向的动态连接线；

UV动画连接组件；

模型位置动画连接组件；

顶点动画连接组件。

优选地，在所述视图中的预定位置呈现逻辑控制组件图层，所述逻辑控制组件图层包括至少一个逻辑控制组件，所述将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中，包括：

从所述逻辑控制组件图层中，将确定的逻辑控制组件拖拽到所述待编辑元素所在的视图中。

优选地，所述逻辑控制组件包括至少一个属性，在所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系后，所述方法还包括：

按照预定编程任务对所述逻辑控制组件的属性进行配置。

优选地，所述按照预定编程任务对所述逻辑控制组件的属性进行配置，包括：

根据所述预定编程任务确定对所述逻辑控制组件的属性进行配置的配置项；

在所述视图中确定配置项的配置值；

根据所述配置值对所述逻辑控制组件的属性进行配置。

优选地，所述逻辑控制组件包括如下任何一种：

表达待编辑元素之间碰撞关系的碰撞控制组件；

对待编辑元素进行旋转操作的旋转控制组件；

对待编辑元素进行缩放操作的缩放控制组件；

表达待编辑元素之间吸附关系的吸附控制组件；

延时预定时间执行预定操作的时钟控制组件；

接收到指定时间触发预定控制组件的事件接收控制组件；

发送指定事件的派发控制组件。

另一方面，本申请实施例还提供了可视化编程装置。该装置包括：第一放置单元、第二放置单元和关系建立单元，其中：

所述第一放置单元，用于在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

所述第二放置单元，用于按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中；

所述关系建立单元，用于在根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

优选地，所述关系建立单元，具体用于在位于同一所述视图中的所述待编辑元素与所述逻辑控制组件之间设置连接组件，以建立所述待编程元素与所述逻辑控制组件之间的关系。

优选地，在所述视图中的预定位置呈现逻辑控制组件图层，所述逻辑控制组件图层包括至少一个逻辑控制组件，所述第二放置单元具体用于从所述逻辑控制组件图层中，将确定的逻辑控制组件拖拽到所述待编辑元素所在的视图中。

再一方面，本申请实施例提供了一种运行器，该运行器包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时，实现如上所述方法的步骤。

又一方面，本申请实施例还提供了计算机可读存储介质，在所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，实现如上所述方法的步骤。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

本申请实施例提供的技术方案在可视化编程的编辑模式下，根据预定编程任务，将选取的待编辑元素和与该编辑元素对应的逻辑控制组件以及两者之间的逻辑控制关系显示在同一个视图中。与现有技术相比，由于将被编辑的待编辑元素和逻辑控制组件位于同一视图之中，实现了“多图合一”，从而避免了编程时在不同视图之间进行频繁切换，查找某个元素时可直观定位到目标元素，提高了产品开发及编程效率。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为现有技术中可视化编程的界面示意图；

图2为本申请可视化编程方法的一个实施例的示意图；

图3为本申请可视化编程中一个示意性编程任务场景图；

图4为本申请可视化编程中一个实际场景图；

图5为本申请可视化编程装置的一个实施例的结构示意图；

图6为本申请的运行器实施例的结构示意图。

具体实施方式

在前述背景技术介绍中，现有技术已存在可视化编程做法，为更清楚的了解现有技术情况，下面结合实例做进一步说明。在可视化编程领域，虚幻引擎推出过一个比较典型的可视化编程工具-Unreal Engine Blueprints Visual Scripting(虚幻引擎可视化蓝图脚本编程)。参见图1所示，在该图呈现的界面中，包括位于左侧的带有虚拟动画人物图像的显示视图(views)以及位于右侧的带有箭头指向的各个编辑元素组成的逻辑关系图(Blueprints)。显示视图中显示的人物动画，即是在编程完成后将呈现给用户的目标对象，该目标对象的每一个最小组成部分可视为一个被编辑的元素；逻辑关系视图中箭头起点、终点即是具有逻辑关系的两个目标元素，显示视图中显示人物的属性、动作等均通过在逻辑关系视图中的定义来实现。由于这两个视图相互独立，以及视图中显示的内容位于不同的窗体之中，在具体编程过程中，需要在两个视图中不断的切换，找到对应的部分进行增删改等编程操作，这将带来几个问题：一是当目标元素特别多，逻辑关系极为复杂时，逻辑视图中的各个用于表征逻辑关系的连线将纵横交错，极为凌乱，要想在这样的逻辑关系图中准确而快速的找到将要进行编辑的目标对象，是一件不容易的事；二是当在直观的显示视图中确定进行编辑的目标对象后，需要切换到逻辑视图，但在对逻辑视图中的相应目标元素进行修改时，又将依赖目标对象在显示视图中的物理位置，而该位置在逻辑视图中将无法直接观察到，则又需要切换到显示视图中进行查看，增加了操作的不便利性。

举例说明：在一个复杂的场景中，如果需要通过某种逻辑操作将显示视图中的一个物体M(即目标元素)的位置从A点移动到B点，那么，编程人员首先需要在一个扁平化的包含成百上千个物体的逻辑视图中，找到物体M，然后在物体M的属性中添加动画控制器，再在该动画控制器中设置A点坐标和B点坐标。由于A点坐标和B点坐标在逻辑视图中无法直观看出，编程人员又需要回到显示视图的场景中，查找到准确的A点的坐标和B点坐标，然后再填写回逻辑视图中动画控制器之中。上述过程的查找物体A、来回切换视图以及确定逻辑视图和显示视图对应物体之间的对应关系，都给编程增加了难度。

为了解决现有技术中的这些问题，本申请实施例将逻辑关系描述和虚拟世界中目标对象位置等属性的描述关联整合，通过线条、可视化物体以及控制器等之间动态连线，达到实现空间关联和逻辑控制的目的。下面结合附图进行详细说明。在详细说明之前，基于理解本方案的需要，先对个别术语进行介绍。

在本实施例中涉及“编辑模式”术语。编辑模式是相对于非编辑模式而言的，比如编辑完成后形成可执行文件并运行可执行文件的运行模式。编辑模式下，可以对待编辑元素在视图中的空间位置、逻辑控制关系、大小比例等要素进行设置、修改，整个过程处于对可视化编程对象的开发状态。需要说明的是，在某些情况下，可视化编程工具可能会提供暂时运行或者预览功能，以便及时的了解编辑的效果，在本实施例中，这种状态可以仍然视为在编辑模式，当然，如果非要将其严格定义为非编辑模式，那也是可以理解的。

在本实施例中还涉及“元素”，这里的元素是组成目标场景的组成部分，比如一个虚拟世界中的战斗场景，那么该场景中“人”、“武器”、“城堡”等便是组成该场景的元素。元素可以从不同的角度进行分类，一种划分方式可以是从是否可细分的角度，划分为不可再分的独立元素和由多个更小粒度子元素构成的复合元素。比如，一个人物在某些情况下可以是一个独立元素，在另一些情况下，该人物的头部、躯干、四肢等则可以分别构成独立元素，该人物为这些独立元素组成的复合元素。另一种划分方式可以是从编程进程角度，划分为元素集合中的元素和处于编辑状态中的元素，前者可以是可视化编程工具内置库中预先定型化的模板性元素，编辑过程中作为编程者完成预定编程任务的候选元素，也可以是编程者在正式编辑模式下编辑之前，先自行进行元素创造而形成的作为自己完成预定编程任务的元素，这些元素还未被放置于编辑模式下的视图中，因而可以认为是元素集合中的元素。需要说明的是，这里的元素集合可以是如前所述的预先形成的预置模板库，也可以是“现做现用”形成的元素集合，集合中的元素可以为一个，也可以为多个。编辑状态中的元素是从元素集合中选取进入到编辑模式下的视图中的元素，这些元素根据预定编程任务的需要，可能将被进行编辑，因而可以称为待编辑元素。但这里的编辑不单单指后续技术方案中将要提到的建立“可编辑元素”与“逻辑控制组件”之间的关系，这种特定的编辑内容，也泛指进行的其他编辑，比如位置的移动，大小的调整等。

在本实施例中还将涉及“逻辑控制”这一术语。逻辑控制表达了在虚拟世界中不同的元素之间的控制关系，该控制关系反映现实但不是现实，因而是“逻辑的”。逻辑控制是通过在元素之间设置逻辑控制组件来实现，不同的逻辑控制组件表达不同的逻辑控制关系。比如旋转控制组件，与该逻辑控制组件关联的元素，将在满足该逻辑控制组件触发条件的情况下，实现元素的旋转；还比如碰撞控制组件，与该碰撞控制组件关联的元素，将在满足该碰撞控制组件触发条件的情况下，实现元素之间的碰撞。除此之外，还有对元素实现缩放的缩放控制组件、元素之间在满足条件自动吸附的吸附控制组件、延时预定时间执行后续预定操作的时钟控制组件、接收到指定时间触发预定控制组件的事件接收控制组件、发送指定事件的派发控制组件、取消控制器能力的取消控制组件(比如指向定时器控制器，相当于暂停改定时器)、行为控制组件(比如，系统封装常用的一些行为控制)等。

下面结合附图具体描述本申请的实施例。参见图2，该图示出了一种可视化编程方法的流程。该流程包括：

S201：在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

在编辑模式下进行编程并非“乱涂鸦”，而是为了完成预定编程任务。预定编程任务决定了需要选取哪些元素作为待编程元素，要进行何种编辑，如何与该元素之外的其他元素发生关系，发生什么样的关系，如同一个唱戏的“剧本”。当然，这里的“预定编程任务”未必需要要求多高的“专业性”，也未必需要形成专门的文档，当需要把本申请的技术方案实施于一个通用化、兴趣化的编程工具之中时，其本身就是面向专业程度不等的大众化用户，因而预定编程任务的门槛可以体现得很低，比如，仅仅是编程者的一个想法、一个桥段，一个简单的场景，即可作为一个预定编程任务。与此相反的更专业的情形，比如，形成了比较完备的预定编程任务文档，将该文档进行解析，自动得到该编程任务需要的待编程元素，本申请的技术方案亦不与排斥，将其廊括在内。对预定编程任务的认识，实际上从“结果”反推“初心”，可能更好理解：只要编程者最终通过本申请的技术方案获得了一个编程结果，那么即可认为在编程之前，编程者已获悉或形成有一个预定的“编程任务”，该编程任务就是完成当前这个“编程结果”。

在编程者进入可视化编辑模式后(即处于编辑模式)，即可根据编程任务的需要从元素集合中选取待编辑元素，将其放置在编辑模式的视图之中。这里有几点值得说明：

一是元素集合的体现形式问题，其可以是作为一种“百宝盒”以显示面板的方式，显示在编辑模式下的界面上，从而方便编程者直接从该盒子中取出需要的元素作为待编辑元素；也可以是编程者先自行创建形成的一个或多个元素集合。也就是说，“元素集合”所体现的是“选取”操作的一个动作指向地，即“选取”需要从哪里去选取，至于该“元素集合”本身如何得到或形成，在本申请的实施例中并没有必要予以限制。

二是单次选取的元素数量问题。在确定出编程任务中，便可知晓应当选取哪些元素进入到视图之中，但是，编程者可以根据自己的方便，一次性地将其认为需要的元素全部取出，然后在编辑模式下再逐一对其进行编辑；也可以一次仅选取一个元素，然后编辑一个元素，再选取第二个元素，编辑第二元素，以此类推，由此可见，尽管上述步骤中记载根据预定编程任务从元素集合中选取至少一个待编辑元素，当然不意味着一次仅能选取一个待编辑元素，更不意味着需要一次性将编程任务所需要的全部元素均选取出来，实际上，如何具体实现编程，完全可以由编程者随“心”而定，本实施例强调的重点在于元素是由编程任务所要求的、元素是在编辑模式下选取的。可以理解的一种现实情况是，编程者在选择过程中不小心进行了误选，这时，编程者可以放弃该元素，重新进行选择，重新将其放置于编辑模式下的视图之中。当然，本申请实施例可以提供一种防止这种情况发生的办法，比如在预定编程任务形成为文件的情况下，由编程工具对其自动进行解析以确定需要的编程元素，在编程者选择元素时对其进行校验，如果不在解析出来的元素列表中，则可以认为编程者发生了错误选择，给予语音提示，或者将元素列表之外的其他元素集合中的元素设置为“灰色”，使其不可选，那么发生错误选择的可能便被杜绝。

三是编辑模式下的视图问题。在前述背景介绍中提到现有技术中通常存在两类视图，即逻辑视图和显示视图，在本实施例中，对放置元素的视图不再做区分，不同的元素以及后续将提到的逻辑控制组件将被放置于相同的视图中，该视图兼具有本申请中要求的现有技术中提及的逻辑视图和显示视图的功能，该视图如同一个“画布”，可以将从元素集合中选择的一个个元素拖拽到画布上，以便为按照预定编程任务完成编程做好准备。

S202：按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的视图中；

在一项预定编程任务中，通常不可能仅仅只有组成场景的元素，而还需要为元素设置逻辑关系，使其“活”起来，如同人之所以称其为人，不仅在于其具有作为物质的“人之躯体”，还在于具有人之为人的“人之精神”，这些从元素集合中选取出来的元素，还得被赋予其“动”的特质，以便在运行模式下表现出和其他元素或事物的对外关系。为此，编程者需要按照预定编程任务为前述的元素确定逻辑控制组件，并将这些逻辑控制组件放置于与前述视图同一个视图之中。与前述元素的存在形式类似，逻辑控制组件也可以以显示面板或者浮层等形式，呈现在视图所在的界面之中，编程者可以轻松地从该面板和浮层中选择，比如直接拖拽到视图之中，以提高编程效率。但与元素的存在形式稍有差别的是，逻辑控制组件通常是由可视化编程工具的开发者预先规定好的，而不是编程者自己创造出来的，其背后是由或长或短的程序代码所支撑，而对于普通的编程用户而言，可能没有必要自己去创建一个面板或浮层中没有的逻辑控制组件。当然，如果本实施例的实施者是一个编程的专业高手，其要自己创造独特的逻辑控制组件，那也未尝不可。

这里再次强调一个重要问题：本申请实施例中的从元素集合中选取的可编辑元素和逻辑控制组件是放置于相同的视图中的，即不再明确区分逻辑视图和显示视图，在本实施例中，显示视图中有逻辑的部分，逻辑视图中呈现有虚拟世界中的显示元素，两者是“合一”的。但是，这并不否定如下两种情况：一个编程工具的编程模式下可以有多个视图以及一个视图中不全部显示待编辑元素和逻辑控制组件。对于第一种情况，由于本实施例强调的是同一个编程任务涉及的待编辑元素和逻辑控制组件位于相同视图，那么如果是不同的编程任务，完全可以具有与该编程任务逐一对应的不同的视图，即一个编程工具的编辑模式下可以具有多个视图，只不过每个视图各自对应自己的编程任务。对于第二种情况，尽管如前所述将待编辑元素和逻辑控制组件放置于同一视图中，但是编程者在编程时，时而会着眼全局，时而会关注局部，当其关注局部时，从显示的角度，完全可以不显示全局情况下的全部元素和逻辑控制组件，也就是说，在编辑模式的某个局部区域，完全可能只存在待编程元素，或者只存在逻辑控制组件，而没有包含两者，此情形下不能就此否定本步骤提及的将同一预定任务所要求的逻辑控制组件与逻辑控制组件被放置于相同的视图中。

S203：当根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

按照预定编程任务，选取好待编辑元素和逻辑控制组件后，接下来是对他们之间的关系进行编辑。在现实中，预定编程任务中可能出现两种截然不同的情形：一种是某个待编辑元素本身即是孤立的，不需要其他和其他元素或逻辑控制组件发生关联；另一种当然就是需要和其他元素或逻辑控制组件发生关联，这是常态，是大多数。因而在本步骤的表述中，使用了“条件状语”来表达这种现实带来的区分，即只有在根据编程任务需要建立待编程元素与逻辑控制组件之间的关系时，才在相同视图中去建立待编程元素与逻辑控制组件之间的关系；当某个待编程元素按照预定编程任务的规定本身即是孤立元素时，则没有必要建立和其他逻辑控制组件之间的关系。在声明这些内容后，便能更深刻理解本申请技术方案的保护范围，也就是说，本实施例的该步骤(S203)是或然性步骤，在完成预定编程任务过程中，某些时候并不需要执行该步骤，那么本申请的技术方案可以仅仅包括前面两个步骤即可(S201、S202)，当需要执行该步骤(S203)时，才将该步骤加入到前两个步骤之后形成该情形下适用的完整技术方案。当然，需要看到，作为一个可行的预定编程任务，仅仅具有孤立的元素，而不需要通过逻辑控制组件之间的连接，毕竟是少数情形。“少数”虽然不妨碍“大流”，但不能被遗漏。在具体建立待编辑元素与逻辑控制组件之间的关系时，可以在位于同一视图中的待编辑元素与逻辑控制组件之间通过连接组件来建立两者之间的关系。即在一张视图中容纳了待编辑元素、逻辑控制组件和连接组件。

本步骤说明了元素与逻辑控制组件之间的关系，并未特别说明元素与元素之间的关系。实际上，元素与元素之间的关系正是通过各个元素与相应的逻辑控制组件之间建立关系而间接体现出来的。举例说明如下：在虚拟世界上存在两个元素：A人物元素和B人物元素，预定编程任务是A人物需要打击B任务一拳，B被打飞到50米之外，参见附图3。该假设情形之中，A与一个作为逻辑控制组件的触发控制器建立了关系，在该触发控制器满足预定条件受到触发后，触动与A建立关系的打击事件控制器，A发出打击一拳的动作，与打击事件控制器也建立关系的B则发出被打一拳的动作，然后与B关联的抛拽控制器将B甩开到50米外，这里的A与B之间发生关系即是通过他们均与其建立关系的打击事件控制器实现的，A受到触发和B受到抛甩则仅是和一个逻辑控制组件建立关系，也就是说，在本实施例中，可能存在一个逻辑控制组件仅和一个元素建立关系，也可能存在与多个元素建立关系的情况。

前述的实施例比较详细地说明了技术方案内容，通过上面的描述可以看到，本实施例实现了“二合一”或“三合一”化的视图处理，即将原本位于不同的窗体独立在两个视图中的内容，融合到一个视图中进行显示，该视图既包含了表达逻辑控制关系的逻辑控制组件，也包含作为预定编程任务最终成果的显示元素，这种看似简单的做法，实则体现了一种全新的理念，即不再将逻辑部分和显示部分作为两个独立的事物来看待，而是将其均作为一个预定编程任务之下的具有同等地位且能够“互动有无”的有机组成部分，其统一于编程任务。在底层技术的实现上，逻辑控制组件作为一段独立代码在编辑模式下，按照与相应待编程元素之间的逻辑关系，被放入到了涵盖相应元素的代码之中，通过不同的图层渲染出来，从而实现技术上的整合。

正是上述这种相对于现有技术的变革，使得现有技术中的问题迎刃而解：即便视图中的目标元素众多，但“所见即所得、所触即所得”，编程者通过鼠标等指向性工具指向或点击某个目标元素，便可清晰地确定该目标元素，以及轻松获知该元素与其他元素(逻辑控制组件)之间的关系，进而对目标元素进行修改、更新等编辑操作，需要调整逻辑控制组件相应属性时，也可顺着“目标元素”这个藤摸到“逻辑控制组件”这个“瓜”，进而对逻辑控制组件的属性进行调整。同时，由于均在同一张视图中，无论是对可编辑元素进行编辑，还是对逻辑控制组件属性进行调整，可直接在该图中进行，不用进行视图的切换，减小了操作的复杂度，有利于提高编程效率。

为了更清晰的说明本申请的技术方案，下面再结合图4所示的一个示例性场景图进行介绍。图4是在可视化编程工具的编辑模式下呈现的一个状态截面，

在图4中展现的一个平直的方块地面上，红色列车即是从元素集合中获得一个待编辑元素，此外，还有带两个白条的板子为构成公路的路面板，该路面板也是一个待编辑元素。在该图的左下角，具有数个逻辑控制组件的控制面板或浮层，比如碰撞组件、旋转组件、播放组件、吸附组件、事件接收器等，这些组件以不同的颜色表征，方便操作者进行区分。当需要在当前视图中加入某个逻辑控制组件时，可以将控制面板或浮层中相应的逻辑控制组件直接拖拽到视图中即可，为编程提供了大大的方便。需要强调的是，在浮层或控制面板中，具体显示哪些逻辑控制组件以及显示多少逻辑控制组件，可以根据可视化编程的编辑模式当前所处的状态而定，假如当前元素的编辑需要用到更多的逻辑控制组件，那么便可以根据预设的呈现策略呈现全部的可用逻辑控制组件，或者仅仅显示部分逻辑控制组件。

除了可编辑元素和逻辑控制组件外，图4中还包括带有箭头的关系线，该关系线表达了其连接的元素和逻辑控制组件之间的关系，箭头所指向的方向表达了控制流向。在实际的应用过程中，为了更清晰而直观地观察各个组成部分之间的关系，这些带有箭头的关系线可以表现为动态图，比如，GIF动图。当然，除动态箭头外，为动态表现逻辑控制组件与元素之间的关系，还可以采用UV动画连接组件、模型位置动画连接组件、顶点动画连接组件等方式。由于图3仅仅是示例性的，显得并不凌乱，但是，在实际应用过程中，融合了大量元素、逻辑控制组件和关系组件的视图，将变得较为复杂，此情况下，在图像进行渲染过程中，可以将表达待编辑元素与逻辑控制组件之间关系的关系组件进行最后渲染，这样关系组件将被在其他组成部分绘制出来之后才予以绘制，因而将位于视图的最上层，不会被其他组成部分所覆盖，编程者便可以关系组件表达的逻辑关系为“纲”进行编程。

关系组件可以表现出多种属性，在图4中，当某个关系组件被选定后，呈现出了“连接”、“微调”、“复制”等属性，编程者可根据需要对其进行修改。与此类似的，逻辑控制组件也可以表现为多种属性，编程者可以对逻辑控制组件的属性进行配置，其先根据预定编程任务确定对逻辑控制组件的属性进行配置的配置项目，在该视图中确定配置项目的配置值，然后根据该配置值对逻辑控制组件的属性进行配置。在该配置过程中，不需要如现有技术那样切换到显示视图中去找到需要配置的配置量(配置值)，而是在该同一个视图中直接获取到配置量，进而完成配置。比如，在前述图3所示的A打击B的例子中，如果需要设定B被打击后被甩开的距离，按照现有技术的做法，则需要在编辑逻辑视图过程中切换会显示视图，然后丈量B为打击后甩开到的目的位置的坐标，再回到逻辑视图中将该位置坐标填写到逻辑控制组件的属性之中；而按照本实施例中的做法，可直接在视图中的目标位置进行点击或其它类似操作，从而将其赋予给逻辑控制组件配置项。

上述内容详细介绍了本申请提供的可视化编程方法的各种实施例。与上述内容同样的道理，上述的方法可以虚拟为可视化编程装置。值得说明的是，这些可视化编程装置也能取得与前述方法实施例相同或类似的技术效果，相应的实施例只要不妨碍技术方案的实现也可以平滑过渡装置的实施例之中。参见图5，该图即示出了可视化编程装置的一个实施例，所述装置本申请实施例提供的可视化编程装置，包括：第一放置单元U51、第二放置单元U52和关系建立单元U53，其中：

第一放置单元U51，用于在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

第二放置单元U52，用于按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中；

关系建立单元U53，用于在根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

优选地，所述关系建立单元，具体用于在位于同一所述视图中的所述待编辑元素与所述逻辑控制组件之间设置连接组件，以建立所述待编程元素与所述逻辑控制组件之间的关系。

优选地，在所述视图中的预定位置呈现逻辑控制组件图层，所述逻辑控制组件图层包括至少一个逻辑控制组件，所述第二放置单元具体用于从所述逻辑控制组件图层中，将确定的逻辑控制组件拖拽到所述待编辑元素所在的视图中。

此外，本申请的实施例还提供一种运行器。参照图6，该图示出了运行器的一个实施例的结构示意图，所述运行器60中包含存储器61、处理器62及存储在所述存储器61上并可在所述处理器62上运行的计算机程序，所述计算机程序被所述处理器62执行时实现上述记载的基于区块链的数据处理方法的步骤。与此道理类似，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述记载的基于区块链的数据处理方法的步骤。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (15)

1.一种可视化编程方法，其特征在于，包括：

在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中；

当根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

2.根据权利要求1所述的方法，其特征在于，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系，包括：

在位于同一所述视图中的所述待编辑元素与所述逻辑控制组件之间设置连接组件，以建立所述待编程元素与所述逻辑控制组件之间的关系。

3.根据权利要求2所述的方法，其特征在于，所述连接组件为动态连接组件，所述动态连接组件能够动态性地表征所述待编辑元素与所述逻辑控制组件之间的逻辑控制关系。

4.根据权利要求3所述的方法，其特征在于，所述方法包括：

确定可视化编程的编辑模式当前所处状态，根据所述状态在所述视图中显示对应的逻辑控制组件，和/或，根据所述状态在所述视图中显示预定数量的逻辑控制组件。

5.根据权利要求4所述的方法，其特征在于，所述动态连接组件位于所述视图的最上层。

6.根据权利要求1-5中任何一项所述的方法，其特征在于，所述动态连接组件包括如下任何一种：

带箭头指向的动态连接线；

UV动画连接组件；

模型位置动画连接组件；

顶点动画连接组件。

7.根据权利要求1所述的方法，其特征在于，在所述视图中的预定位置呈现逻辑控制组件图层，所述逻辑控制组件图层包括至少一个逻辑控制组件，所述将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中，包括：

从所述逻辑控制组件图层中，将确定的逻辑控制组件拖拽到所述待编辑元素所在的视图中。

8.根据权利要求6所述的方法，其特征在于，所述逻辑控制组件包括至少一个属性，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系后，所述方法还包括：

按照预定编程任务对所述逻辑控制组件的属性进行配置。

9.根据权利要求7所述的方法，其特征在于，所述按照预定编程任务对所述逻辑控制组件的属性进行配置，包括：

根据所述预定编程任务确定对所述逻辑控制组件的属性进行配置的配置项；

在所述视图中确定配置项的配置值；

根据所述配置值对所述逻辑控制组件的属性进行配置。

10.根据权利要求7-9中任何一项所述的方法，其特征在于，所述逻辑控制组件包括如下任何一种：

表达待编辑元素之间碰撞关系的碰撞控制组件；

对待编辑元素进行旋转操作的旋转控制组件；

对待编辑元素进行缩放操作的缩放控制组件；

表达待编辑元素之间吸附关系的吸附控制组件；

延时预定时间执行预定操作的时钟控制组件；

接收到指定时间触发预定控制组件的事件接收控制组件；

发送指定事件的派发控制组件。

11.一种可视化编程装置，其特征在于，所述装置包括：第一放置单元、第二放置单元和关系建立单元，其中：

所述第一放置单元，用于在可视化编程的编辑模式下，根据预定编程任务从元素集合中选取编程任务需要的至少一个待编辑元素，并将所述待编辑元素放置于所述编辑模式下的视图中；

所述第二放置单元，用于按照预定编程任务确定所述待编辑元素对应的逻辑控制组件，并将所述逻辑控制组件放置于所述待编辑元素所在的同一视图中；

所述关系建立单元，用于在根据预定编程任务需要建立待编辑元素与逻辑控制组件之间的关系时，在同一所述视图中建立所述待编辑元素与所述逻辑控制组件之间的关系。

12.根据权利要求11所述的装置，其特征在于，所述关系建立单元，具体用于在位于同一所述视图中的所述待编辑元素与所述逻辑控制组件之间设置连接组件，以建立所述待编程元素与所述逻辑控制组件之间的关系。

13.根据权利要求11所述的装置，其特征在于，在所述视图中的预定位置呈现逻辑控制组件图层，所述逻辑控制组件图层包括至少一个逻辑控制组件，所述第二放置单元具体用于从所述逻辑控制组件图层中，将确定的逻辑控制组件拖拽到所述待编辑元素所在的视图中。

14.一种运行器，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时，实现如权利要求1至10中任一项所述的方法的步骤。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，实现如权利要求1至10中任一项所述的方法的步骤。