ssRender引擎绑定和事件

效果：

介绍：

             点击控制车手位置向下移动

            点击控制车手位置向右移动

            点击控制车手移动到终点

            车手每次移动时，视图中右上方会出现文字提示

操作步骤：

           打开ssRenderEditor新建一个工程

创建节点设置属性：
        

        创建5个Item节点并重新命名:1~5，分别设置其颜色并调整属性(X/Y)到对应的位置(如图1-1所示:5个颜色不同的长方形)

        创建5个Item节点并重命名为(Down、Right、Move)，分别设置其属性Source插入图片，调整不同的旋转角度(如下图1-1所示:绿色箭头)

        创建Text节点设置其位置(X/Y)和颜色，并且设置Visible属性让未选中(如图1-2所示：Visible未选中，文字为隐藏状态)

        创建1个Item节点命名为 Car，设置Source插入车手图片

图1-1设置Item节点名称

图1-2 Text0节点Visible未选中

创建Button节点设置绑定和事件：

        创建5个Button 按钮，分别设置其位置(X/Y)属性与每个Item节点(Down、Right、Move)位置重合

图2-1 Button节点与Down_G1(绿色向下箭头)位置重合

        创建2个自定义属性，控制X和Y的位置移动：(如下图2-2所示)

图2-2 自定义属性设置

​​​​​​​​​​​​​​​​​​​​​        选择Car节点设置将两个自定义属性拖动至Customization下然后点击X/Y右侧绑定图标，把自定义属性分别拖动到X/Y的脚本编辑器中 (如下图所示2-3、图2-4)

图2-3 拖动Xx至白色区域

图2-4 拖动Yy至白色区域

​​​​​​​​​​​​​​​​​​​​​        选择Text节点中Properties窗口下的Text点击右侧绑定图标拖动属性Text至脚本编辑器

图2-5 绑定Text节点

​​​​​​​​​​​​​​​​​​​​​        分别设置Button节点的事件(如下图所示,效果：使车手移动，文字变化)

图2-6 Down_1节点的Clicked事件

setProperty:{$../Car/Yy} = {$../Car/Yy} + 276
setProperty:{$../../Layer1/Text0/Text} = "向下走一格"
setProperty:{$../../Layer1/Text0/FontColor} = "#48BD41FF"
setProperty:{$../../Layer1/Text0/Visible} = 1

图2-7 down_2节点的Clicked事件

setProperty:{$../Car/Yy} = {$../Car/Yy} + 276
setProperty:{$../../Layer1/Text0/Text} = "再进一步"

图2-8 Right_1节点的Clicked事件

setProperty:{$../Car/Xx} = {$../Car/Xx} + 330
setProperty:{$../../Layer1/Text0/Text} = "向右走一格"

图2-9 Move_R2节点的Clicked事件

setProperty:{$../Car/Xx} = {$../Car/Xx} + 330
setProperty:{$../../Layer1/Text0/Text} = "距离终点已经很近了！"

图2-10 Move_R3节点的Clicked事件

setProperty:{$../Car/Xx} = 60
setProperty:{$../Car/Yy} = 0
setProperty:{$../../Layer1/Text0/Text} = "驶进终点！"
setProperty:{$../../Layer1/Text0/FontColor} = "#FF002AFF"

---

小结：

           难点:首先明确要做什么效果？依据这个效果我们需要哪类节点，大概需要几个？理清工程结构。

           个人感觉难点不在于软件的操作上，因为不需要编写大量代码，拖拽就可以实现效果，只要理清思路和操作顺序，操作起来会很快很容易。

            注意:操作时看好当前选中节点再进行操作，很多错误都是由此出现的而且排查时很容易忽略。