关于 Reaktor 菜单选择

分享到微信朋友圈

· 曾照南 添加于 2017-05-17 · 共有 1 条评论

作者:曾照男

说到Reaktor菜单选择,最常见的无外乎List模块,它有4种显示方式,其中更直接更直观的显示属 Text Panel 和 Buttons,而 Text Panel 则是默认的显示(图1)。

图1

我们确实能清楚地看到这两种显示很直观,你可以很方便很快速地去选择你要的,但这种两种显示在使用需要注意一个问题,那就是选择的子项个数不能太多,就像上面4个,看起来是还好,假设子项个数很多,比如10个以上,那么这两种显示就显得不太合适了,尤其是 Buttons 显示。

所以Reaktor也考虑到更方便更不占空间的显示,那就是Menu和Spin显示(图2)。

图2

显然这两种显示能适合子项个数多的情况使用,不过相对来说,Menu显示更合适,而Spin显示则是一个一个地切换,可以往前切换也可以往后切换,尽管如此,List模块这两种显示都是这个界面,这也限制了在界面设计上的单调,有时候我们会自己设计一个菜单想用上去,但在List模块身上就行不通了,于是我们需要换换思路,所以今天我们要以Menu和Spin这两种显示的思路来重新设计一个属于自己全新的Menu和Spin。

为了更好地去开始今天的内容,我们需要先准备一张图,像这样:(图3)

图3

需要说明的是,这张图尺寸为40像素*80像素,大家可以用作图工具像Ps自己制作一张,为了更好地区分不同名称,我特地用不同的底色来辅助,最终注意保存后的图片必须是bmp或者png或者tga格式的才能用,因为Reaktor只支持这三种图片格式,千万不要保存成jpg格式的图片。

如果上面的都准备就绪,那我们就开始。

一、Menu

说到Menu,我们也知道对List模块的Menu显示无非就是下拉菜单的意思,那么我们要开始想,下拉菜单需要哪些动作呢?首先你需要点击吧,只有点击了,才能出现下拉菜单,接下来才能进行选择,所以一个标准的下拉菜单应该具备三个步骤:

第一、点击菜单;

第二、显示菜单;

第三、选择菜单。

好的,我们先来解决点击菜单的问题,要知道实现一个点击菜单的动作并不难,可以用到Mouse Area模块或者Multi Picture模块,当然我觉得更合适的应该是Multi Picture模块(图4),因为它不仅仅能实现点击的动作,也能帮助我们加载要显示的菜单图片。

图4

从图4我们看到了Multi Picture有个MB的输出,它就是Mouse Button的意思,当然单单只有点击的动作还不行,我们还需要对点击的动作做出反应,也就是显示下拉菜单,而这里下拉菜单显示的选择还能不能继续用Multi Picture模块,我认为也是可以的,但对后续的操作会稍微繁琐些,因为单单一个Multi Picture模块虽说能显示所有菜单的子项目,但在选择菜单的显示上需要再借助额外的模块来辅助,所以最好最优的选择其实是Multi Display模块,而这个模块能帮我们更方便更有效率地去实现选择菜单的部分。

因此,当你点击菜单后,应该是这样显示的:(图5)

图5

想要实现这个并不难,我们可以利用Stacked Macro来实现,我们可以把下拉菜单显示的部分放到Stacked Macro,也就是说对于Stacked Macro要有两个Macro,第一个是空的,第二个则是Multi Display模块,为了更好地分辨,我们给这两个Macro分别命名为“Close”和“Open”,而且我们还需要对Stacked Macro尺寸设置到40像素*80像素,包括其Style选项下的Frame要设置为None,还有BORDERS下对应的所有属性的数值都要设置成0,除此之外,名为“Close”和“Open”的Macro也要那样设置,搭建整体结果如下:(图6)

图6

从图6我们看到了有个Idx的输入,它是用来打开和关闭下拉菜单的显示,如果Idx等于1的话,就会显示下拉菜单,因此利用这点我们应该就可以把Mult Picture的MB输出连接到Idx输入,可连接后你会发现一个问题,但你鼠标点击不放的时候是会显示下拉菜单,一旦鼠标点击释放后,下拉菜单也跟着消失了,所以显然我们不能纯粹地把MB输出直接连接到Idx输入,为了更妥当些,我们可以利用Separator模块来分离MB点击后的数值事件,只选择大于0的部分。(图7)

图7

尽管图7的解决方式已经解决了MB直接连接Idx带来的问题,但这也同样会带来另外一个问题,那就点击后,下拉菜单显示出来,可却关不了,因为Idx一直都是1,所以这就是接下来选择菜单要做的事了,我们可以让选择菜单选择确定后来执行关闭下拉菜单,同时也把最终选择哪个的索引数指定给Multi Picture的Sel输入进行重新设置显示。

OK,我们来看看怎么实现选择菜单的部分,也就是Multi Display模块的部分。

其实要实现选择菜单的重点在于分析我们要做的上面那张菜单图,我们知道图的尺寸是40像素*80像素,但对于我们来说,有用的是高度,由于是4个选择的意思,因此对于高度80像素,我们可以把它4等分,也就是说每个选项只占用的高度为20个像素,如果我们把0到80所有的数除以20再向下取整数的话,那么你会发现一个简单的规律:

  • 小于等于20,除数等于0;
  • 大于等于20小于40,除数等于1;
  • 大于等于40小于60,除数等于2;
  • 大于等于60小于80,除数等于3。

这个规律得到的除数很重要,因为它显然符合了我们选择后制定给Multi Picture模块Sel输入的要求。

那么怎么实现上面的除数呢?很简单,我们需要一个Mouse Area模块,尺寸设置跟Multi Display模块一致,并激活它的Always Send PX and PY Events选项,然后我们就可以这样来做:(图8)

图8

不过单单靠Mouse Area模块是无法解决问题的,因为我们要把Mouse Area模块和Multi Display模块结合起来用,所以也要对Multi Display模块进行一些设置,比如它Y值的取值范围也要跟Mouse Area模块的PY一直都是保持在0到80之间,除此之外,我们也需要对Mouse Area模块PY的结果重新调整使用,调整结合结果如下:(图9)

图9

现在我们可以说算是完成了选择菜单的部分了,但还没有完,因为我们还要对选择的进行确认,所以接下来我们要用到Mouse Area的BL输出,也就是鼠标左键点击的动作,除了确认以外,还要关掉下拉菜单的显示。(图10)

图10

图10我们把相应的事都做完了,包括初始化状态,通过Snap Value模块来保存上一次的数值为了下一次初始化赋值,当然也可以不需要用到Snap Value模块,可这样它每次开始都是出于零的状态,最后别忘了最终的连接,也包括下拉菜单显示的初始化,因为一开始必须不显示。(图11)

图11

好的,一个完整的自定义Menu就这样完成了,接下来我们来开始Spin。

二、Spin

Spin显然就没有Menu那种下拉菜单显示,它就靠旁边那个加减符号来进行下一个或者上一个选择,不过在一开始,我并不喜欢再添加两个按钮来进行操作,其实我们可以更直接一点,使用Mouse Area模块的BL和BR来代替,很容易,当按鼠标左键的时候,显示下一个,当按鼠标右键的时候,显示上一个,简洁易操作。(图12)

图12

有了这样的要求,实际上Spin的实现显然更简单了,可以说几个模块就轻松搞定了,不信你看:(图13)

图13

是不是很简单啊,当然上面并没有很好的初始化,每次一开始都是0,所以Multi Picture一开始显示的都是Saw。

当然这个先不讨论,因为我们接下来要更进阶,不单单只是单调的切换效果,而是要有动画效果,而这个动画效果就像是播放胶卷影片一样,只不过我们把速度调到低了,更能看清当前一张到下一张的变化。(图14)


 图14

上面只是简单展示了从Saw到Pulse是怎么变化的,为了更好地说明,这边用了5个步骤,但实际上,中间可以省略很多,也就是从Saw到Pulse的变化可以更细分,比如分成100,因为上面那张图每个子选项占用的高度像素是20,所以每次移动的最小单位应该就是20/100,即使0.2。

好的,如果是要实现这样的效果,那么就不像上面那种简单的Spin显示那么容易了,我们要考虑的东西就变复杂了。

尽管事情已经变得复杂了,不过对于图13的Spin实现我们仍然需要用到,而且我们可以对它进行重新加工,比如加入Snap Value模块来保存数值和限制数值范围在0到3,具体做法就是把它们封装到一个Macro里去,并给这个Macro命名为Spin,然后内部设计如下。(图15)

图15

完成了上面Spin的搭建,让我们回到问题上,由于要有动画效果,所以肯定是不能再用原来的Multi Picture模块了,那么我们唯一能选择的只能是Multi Display模块了。

既然如此,那么我们怎么利用Multi Display模块来实现切换的动画效果呢?我们可以先来想想应该实现的原理是什么?其实思路很简单,无非就排列的问题,看谁排在前面,也就是我们需要比较两个子选择项的上下排列顺序就可以了,比如这样:(图16)

图16

从上面我们可以看出如果切换到Pulse,Saw排在上面,Pulse排在下面,然后执行移动切换动画的话,整体往上面移动20个像素就可以了,而切换到Tri也一样的道理;可从Spin数值的角度来考虑的话,因为它每次只能产生一个数值,比如开始是1,接下来是2,但我们要的是等于1的是,它不仅仅只有产生数值1的事件,也要产生前一个数值0的事件,相反的如果是2也如此,那么Reaktor里有我们想要解决这种问题的模块吗?答案当然是有,但不是Primary Level的模块,而是Core Level的模块,也就是接下来我们需要用到Core Cell来解决这个问题。

首先一个简单的输出当前事件数值和前面一个事件数值的做法如下:(图17)

图17

注意为了一开始当前事件数值和前一个事件数值一致,我们需要使用Latch模块和Merge模块来初始化这个状态,不然默认前一个事件数值是0,这会导致Multi Display在选择显示对象的问题上出错。

当然除此之外,我们还需要把当前数值和前一个数值用Array保存起来为了后面的调用,一定要注意写入的顺序:(图18)

图18

实现了上面的问题,接下来的问题就是怎么把排列的顺序显示在Multi Display模块对应在Panel面板上的图形显示,当然我们要对Multi Display模块进行相应的设置,比如X和Y的取值范围都可以分别控制在0到40和0到80,然后还需要注意Obj对象的显示必须能独立选择,也就是说要关闭Multi Display模块INDEX选项下的Ignore Index for Obj,这样我们就可以先来实现上下排列的问题了。(图19)

图19

上面算是完成了最简单的上下排列问题了,不过由于没有动画效果,所以它操作的结果仍然看起来是个Spin显示,所以为了更好地实现切换动画效果,我们还需要另外一组Iteration模块来实现。(图20)

图20

到这里我们算是基本完成了切换动画的效果了,注意图20高光显示的Iteration模块需要对它的SPEED选项进行设置,比如Iterations per Second要设置100,这样只是让切换动画的速度稍微变慢些,可以让自己看清楚切换的动画效果,当然这个数值也可以再设置高一点,根据自己而定,然后非常要注意的是Limited Speed务必要打开,如果没有打开,上面的Iterations per Second无论设置多少都是没有任何作用的。

图21

但实际上,上面还是会存在BUG,比如一开始是Saw,然后你按鼠标左键,它会变到下一个Pulse,如果这个时候你按鼠标右键,尽管Pulse会变化到Saw,可这种变化似乎不对劲,按道理Saw变到Pulse,是从下到上的移动变化,而Pulse变到Saw不应该是相反的吗?所以我们还需要对Mouse Area模块的BL和BR输出进行分辨,复杂度越来越高了,除了BL和BR的问题以外,我们还再次需要对上一个事件数值和当前事件数值的部分进行调整,最后直接给出结果(图22),如果有兴致的可以看看或者再进一步完成它。

图22


可下载 Midifan for iOS 应用在手机或平板上阅读(直接在App Store里搜索Midifan即可找到,或扫描下面的二维码直接下载),在 iPad 或 iPhone 上下载并阅读。








文章出处:http://magazine.midifan.com/detail.php?month=2017-05#36做人要厚道,转载文章请注明出自 midifan.com,谢谢

共有 1 条评论

添加评论