ssRender引擎制作一个音乐播放器

小宇智

已于 2023-03-31 11:04:54 修改

阅读量87

点赞数 2

分类专栏： ssRender学习文章标签：动画图形渲染游戏引擎

于 2023-03-31 11:03:47 首次发布

@小宇

本文链接：https://blog.csdn.net/weixin_45674099/article/details/129874754

版权

ssRender学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果

Musci播放器效果

操作流程

创建节点设置属性

节点名称	节点数量
Layer	1
Item	10
SeqImage	1
Button	7

节点名称	Preview显示情况
bg	绿色长方形背景图
ZZ1、ZZ2、Item3	绿色长方形遮罩，遮盖最上方滚动文字(ZZ2遮盖下方)
ssR	ssRender，Logo图片
SeqImage1	用于显示和切换歌词和音乐封面，设置动画效果
Image	音乐封面图片
GeCi	歌词图片
Button0、Button02	位置大小和SeqImage1 相同，用Clicked切换歌词和音乐封面
Right	切换下一首按钮
Left	切换上一首按钮
Center2、Center22	控制暂停和开始播放
JinDu	白色进度条背景
Item5	黑色进度条(不显示)
Kuai	黑色进度块
Mzhuan	ssRLogo右侧圆形音乐图片
Version	不显示，位置大小和ssRender文字相同，用于输入版本信息

Project窗口显示界面：

在这里插入图片描述

Preview窗口显示界面：

在这里插入图片描述

插入图片设置自定义属性

Resource窗口显示界面：

在这里插入图片描述

设置自定义属性，并拖拽到bg节点。
在这里插入图片描述

设置事件和绑定

设置Button0的事件

加粗样式

setProperty:{$../SeqImage1/Index} = 0
setProperty:{$./Visible} = 0
setProperty:{$../Button02/Visible} = 1

在这里插入图片描述

setProperty:{$../SeqImage1/Index} = 1
setProperty:{$./Visible} = 0
setProperty:{$../Button0/Visible} = 1

这里对Right节点进行操作设置音乐图片切换，音乐进度块位置移动，输出信息(下一首)。
在这里插入图片描述

setProperty:{$../JinDu/Item5/Visible} = 0
setProperty:{$../bg/SUM} = 0
setProperty:{$../Center2/Visible} = 0
setProperty:{$../Center22/Visible} = 1
setProperty:{$../SeqImage1/Image/Source} = "11.png"
setProperty:{$../SeqImage1/GeCi/Source} = "22.png"
setProperty:{$../SeqImage1/GeCi/Y} = 0
writeLog:"下一首"
writeLog:"当前播放：羽泉-奔跑"
setProperty:{$../Kuai/X} = 30

然后我们再对Left节点进行Clicked事件的设置，几乎和Right节点相同，只是具体数值变化一下。
注意：这里Source属性的设置运用了两种方法，但实现的效果是一致的(33+“.png”和"33.png"当前的效果是一致的，这里 + 做连接符)。
在这里插入图片描述

setProperty:{$../JinDu/Item5/Visible} = 0
setProperty:{$../bg/SUM} = 0
setProperty:{$../Center2/Visible} = 0
setProperty:{$../Center22/Visible} = 1
setProperty:{$../SeqImage1/Image/Source} = 33+".png"
setProperty:{$../SeqImage1/GeCi/Source} = "44.png"
setProperty:{$../SeqImage1/GeCi/Y} = 0
writeLog:"上一首"
writeLog:"当前播放：周杰伦-算什么男人"
setProperty:{$../Kuai/X} = 30

这里对Center2节点进行设置，这个节点作为暂停按钮，当我们点击播放按钮后在Preview窗口中会出现暂停按钮，播放按钮消失，并且控制节点的移动(歌词暂停，音乐Logo暂停)。
在这里插入图片描述

setProperty:{$../bg/SUM} = 0
setProperty:{$./Visible} = 0
setProperty:{$../Center22/Visible} = 1
writeLog:"暂停"
setProperty:{$../SeqImage1/GeCi/Y} = {$../SeqImage1/GeCi/Y} - 0
setProperty:{$../Kuai/X} = {$../Kuai/X} - 0

同样我们这里设置播放按钮，和暂停按钮相似的操作，控制节点变化(歌词移动，音乐LOGO旋转……)。
在这里插入图片描述

setProperty:{$../bg/SUM} = 1
setProperty:{$./Visible} = 0
setProperty:{$../Center2/Visible} = 1
writeLog:"播放"
setProperty:{$../JinDu/Item5/Visible} = 1

调节Version位置覆盖在左上角ssRender文字上，鼠标在Preview窗口中点击后输出版本信息。
在这里插入图片描述

设置绑定节点绑定，让黑色进度块在自定义属性sum=1的时候开始移动每次+1
在这里插入图片描述

var a = {$../bg/SUM}
( a == 1):{$./X} = {$./X} + 1
( a == 0):{$./X} = {$./X}

设置音乐LOGO的Rotation属性，让它旋转。
在这里插入图片描述

var a = {$../bg/SUM}
(a !=0 ):{$./Rotation} + 1
(a ==0 ):0

小结：

综合前几篇文章的应用，制作一款音乐播放器。本次工程需要理清结构，明确绑定和事件设置在什么位置，最重要的一点要了解编辑器中表达式的格式如何书写，实现功能上需要几个事件相互配合，也不能忘记自定义属性我们创建它的意义；细节方面就是要注意在做绑定和事件时一定看好当前选中的节点是谁，时刻看好Project窗口的节点和Properties窗口中的属性。