【TouchDesigner】用Replicator制作选择器

2024-05-23 14:11:42

文章目录

用Replicator制作选择器

用Replicator制作选择器

TouchDesigner：教程地址

看完一遍视频后有些步骤的元件不是很懂，又自己复原了一遍，希望可以帮助到你。

这个教程介绍了关于Replicator COMP元件的功能和具体运用。

链接Table DAT 和 Replicator COMP
建立 Master父级和子集Items的关系
CHOP Execute DAT的用法
设置与鼠标互动光影效果

目标说明
1.点击左侧小图片，在右侧能生成对应大图
2.制作文字的叠加效果
3.左侧图片鼠标移过能产生光影效果

流程
1.创建三个Container（COMP）元件
Container COMP 是一个存放其他元件的容器。
将三个元件改名为buttons，display，final。这三个容器里面完成不同的逻辑任务。

2.进入buttons容器
创建Replicator COMP 元件

接着创建Table DAT文本组件，null DAT组件

在Table的parmsters中添加提前写好的Table1文件（文件里的空位是制表符Tab）

添加文件后还要点击Pulse才显示。
将Table（null）拖给拖给Replicator COMP

再创建一个Container COMP容器改名master1
将master拖到自己的parmsters上的Clone Master中

再将master1拖给Replicator COMP 完成克隆

克隆的数量是根据文本内容决定的

3.进入masrer1容器中

点击分屏

将buttons下的ref（null）拖给master1下的select1获得文本信息。

给select1创建一个null改名ref（不同层级下是可以改成相同的名字的）

创建moviefilein1与null（改名bg）TOP元件

在master1的parmaster面板下的Background TOP中填入 ./bg 可以让master1里的moviefilein中的图层输出到master1上。

回到buttons蹭几下点击Replicator parmaster下的 Recreate All Operator ALL按钮刷新所有的子节点

可以看到所有子节点也输出bg的图像

给master1节点设置长200宽200

在master1层级下创建text1 与Composite TOP元件与moviefilein相连，给图片加上文字

给text面板加入 op(‘ref’)[me.parent().digits,0] 代码，表示父层级的数字。

选择Composite的融合方式为Over。

鼠标中键改变文字的translate

改变text的alpha通道

改变Resoution的值

在Composite中改变拉伸方式为自然

4.格式对齐

在buttons面板上并没有显示有所有字节点的画面

首先修改button的长度和宽度

调整Align为从左到右，最大单元为3.

动态的尺寸设定

5.进入display层级
创建select和null（改名bg） TOP元件

分屏将master1下bg拖给display下创建的select

display面板上设置背景为子节点bg

6.进入master1层级下编写脚本
新建panel和select CHOP面板，在select的Channel Names选择Select
鼠标点击响应。

创建chopexe DAT元件，并且将null CHOP 拖给它

需要用到Off to on 其他的可以关闭

打开脚本文本编辑器写入代码

打开控制台测试

7.渐变光影效果
进入master1层级创建select与null CHOP选择inside

创建level

将null2的数据拖给level的opacity选择

创建math1与filter 使得明暗能过度。

调整属性

进入buttons点击master1的parmaster上的Display取消渲染

在master父节点上给复制的子节点排序

【TouchDesigner】用Replicator制作选择器相关推荐

动态图表交互揭秘：制作选择器的奥秘
这一节内容介绍不同的选择器,具体怎么实现选择器和图表之间的连接,下节内容再放送.或可回顾前一篇系列文章,查看整体动态效果<这样用Excel动态交互图表,还要什么前端>. 选择器可以由窗体控 ...
jquery插件的写法
一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery. ...
动态改变eachers图表高_让你的Excel图表动起来
有读者提了这样一个问题,想要制作如下的动态图表,要怎么实现? 动态图表展示.gif 可以看到,这个动态效果里有4种选择器,左上方的组合框呈现出选择不同的方案展示相应柱形图的效果: 中间的复选框勾上显示 ...
动态图表揭秘：“动”的关键——取数
这一节内容介绍动态交互图表制作的核心内容,就是取数.没看过前两节的朋友可移步<这样用Excel动态交互图表,还要什么前端?>.<动态图表交互揭秘:制作选择器的奥秘>.首先要理解 ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
【网页制作】CSS基本选择器讲解（附讲解视频）
1.首先我们要知道什么是选择器? 选择器是通过一定的语法规则选取对应HTML标记,然后给对应的HTML标签设置样式.比如:长度,宽度,颜色等等. 2.选择器类别选择器一共有四类: 1基本选择器,2复 ...
制作一个用户头像选择器仿 WeGame
制作一个用户头像选择器仿 WeGame CropAvatar 作者:WPFDevelopersOrg - 驚鏵原文链接:https://github.com/WPFDevelopersOrg/WPF ...
android简单的颜色选择器制作
前两天需要开发一个蓝牙通信控制灯的颜色的项目,上网找了一个关于颜色选择器制作的帖子. 众所周知,android的控件只完成了基本的功能,对于像颜色选择的功能则需要自定义控件的使用. 网上的帖子主要都是 ...
利用DW制作简单的LOGO / 以及对CSS选择器的了解
利用DW制作简单的LOGO 创建新的文件夹(Ctrl+shift+N) 了解CSS选择器 1.CSS选择器的分类其中第三种id选择器是用的最多的,今天我们也要用到id选择器. 2.CSS是什么呢? ...

最新文章

热门文章