ssRender 引擎游戏项目

小宇智

已于 2023-04-17 18:36:07 修改

阅读量174

点赞数 2

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

于 2023-04-14 23:07:34 首次发布

@小宇

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

版权

ssRender学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

介绍：

主要用右侧绿色按钮控制英雄的位置移动，黄色区域为地图边界，灰黑色砖块为障碍物，右上角黄色为通关门，左下角为进入关卡的楼梯。每一关只有拿到钥匙的情况下才可以开门，当英雄和怪物相遇时，战斗会根据双方属性不同扣除不同的血量，吃不同的道具增加不同的属性。左侧红色区域为英雄的信息栏，会根据英雄的不同状态实时的变化。

操作步骤：

创建节点设置属性

节点名称	节点数量
Plugin	2
Item	28
Text	12
Button	9
SeqImage	2

节点名称	Preview对应显示情况
UserPlugin、UserPlugin 1	不显示，控制英雄的移动时的显示(上下左右不同显示状态)
Layer0	不显示，存放工程所有节点(除Page、UserPlugin)
Txt	不显示，用于存放自定义属性，工程的主要判断条件
BG	游戏背景图，左侧红色区域+右侧关卡区域
Ming、WQ、fy	按顺序对应左下角的生命、武器、防御图标
M01、M02、M03	按顺序对应左上角文字：生命、攻击、防御
Mnumber、Gnumber、Fnumber	按顺序对应生命、攻击、防御的数值
Massage	左上方文字：英雄信息
G1	不显示，右侧关卡节点的容器
Daoju1	右侧关卡中的武器（剑）
ZA25、1、14……	所有ZA前缀命名的节点都是灰黑色的障碍物
LT1	右侧右上角黄色门后面的楼梯
SeqImage0	右上角黄色的门
Yaoshi	右侧居中闪动的钥匙
SeqImage1	右侧蓝色转动的宝石
LT	关卡中左下方进入的楼梯
gw1	右侧钥匙下面的红色怪物
YX	本工程主角，银白色盔甲英雄
ML	右上角黄色门左侧的障碍物
Button_Right	不显示，存放右侧黑色背景图的按钮
up、down、left、right	对应右侧绿色上下左右四个按钮
up2、down2、left2、right2	对应右侧绿色上下左右四个按钮用于控制按钮实际功能的覆盖图

在这里插入图片描述

设置绑定和事件

首先我们设置几个自定义属性用来获取英雄的信息，在英雄处于不同状态的时候我们用它来进行判断。
xx用于获取英雄横坐标（x属性）
yy用于获取英雄纵坐标（y属性）
在这里插入图片描述
这里我们只展示xx自定义属性的信息，其余属性和xx一致。（这里我们并不是用它获取值，而是通过Button的Clicked事件让他做运算，用节点去获取它的值从而实现判断）

我们首先对左侧应用信息区域的三个数值进行设置，分别让它们获取刚才我们设置的自定义属性的值跟随着自定义属性变化而变化从而实现英雄的属性实时变化。
在这里插入图片描述

接下来我们开始设置右侧关卡中的节点。
首先我们设置武器道具的变化，当英雄和它的位置相同时，道具消失；并且让他自身的透明度循环变化，实现显隐的效果。

var a = {$./Opacity}
var x = {$../YX/X}
var y = {$../YX/Y}
var dx = {$./X}
var dy = {$./y}
(a != 0):{$./Opacity} = {$./Opacity}  - 0.02
(a == 0):1
(dx == x && dy == y):{$./Visible} = 0

接下来我们设置右上角黄色门的绑定，也是根据英雄的位置判断，又增加了是否拿到钥匙的判断，如果英雄拿到钥匙则门打开否则关闭。
在这里插入图片描述

var y = {$../../Button_Right/up/num}
var x = {$../../Button_Right/left/num}
var TG = {$../../Txt/TongGuan}
(y == 7 && x== 8  && TG == 1 ):{$./Index} = {$./Index}  + 1 
(y == 8 && x== 8):{$./Index} = {$./Index}  + 1 
(y == 8 && x== 8 && {$../YX/Opacity} == 0):0

接着设置钥匙的绑定，首先钥匙有一个循环透明度的值(0~1)这里和刚才设置过的武器是相同的，
这里我们不过多赘述。
在这里插入图片描述

var a = {$./Opacity}
var x = {$../YX/X}
var y = {$../YX/Y}
var dx = {$./X}
var dy = {$./y}
(a != 0):{$./Opacity} = {$./Opacity}  - 0.02
(a == 0):1
(dx == x && dy == y):{$./Visible} = 0

这里设置SeqImage1蓝色水晶的绑定，让它循环旋转，并且判断英雄位置决定自身是否隐藏。
在这里插入图片描述
接下来我们设置怪物的绑定，让它败于英雄，英雄位置和它重叠的时候，他就闪动2下然后消失，并且怪物对英雄造成一定的生命值损失。
这里的闪动效果是用Plugin制作的，绑定在UserPlugin1的Flicker闪动属性上，实现怪物闪动2下。
在这里插入图片描述
接下来我们设置英雄，首先我们控制它的X和Y用上面我们创建好的自定义属性xx和yy

给英雄的透明度设置一个动画效果，让它在通关的时候，淡淡的缓慢消失。

接下来我们开始设置他的Source属性让他实现在不同方向移动时有不同人物状态。这里也是用Plugin制作（1234按顺序对应人物的上下左右方向）
在这里插入图片描述

首先我们对按钮区的up和left中增加自定义属性用于获取人物的位置，从而用自定义属性的值来控制人物可以移动的范围和每个障碍物所在的位置，根据这些固定的值来控制Button的Clicked事件是否取消。
在这里插入图片描述

我们现在看一下当前英雄所在位置

这样让人物的位置和其余障碍物和道具的位置变成一个固定的值，这样我们就更好判断从而更好的实现当前工程的许多效果。

最后我们设置右侧按钮区域，让英雄动起来并且按照我们控制的范围去移动。
首先我们设置向上移动的按钮的绑定和事件,当点击up按钮时，首先是判断英雄所处的位置然后正确的移动并且给对应的自定义属性赋值，通过这种方式控制道具的显示隐藏，通关门是否打开……一系列的判断（例：人物在最上方或障碍物的正下方，那让up按钮无法点击，通过显示up2遮盖住原节点来实现）其次在移动的时候让Log区域输出英雄的坐标位置。
在这里插入图片描述

setProperty:{$./num} = {$./num} + 1
setProperty:{$../../Txt/yy} = {$../../Txt/yy} - 32
setProperty:{$../../../UserPlugin/Direction} = 1
writeLog:"向上移动"+"当前位置："+{$../../G1/YX/Y}

var x = {$../left/num}
var y = {$./num}
(x == 4 && y ==5)setProperty:{$../../G1/YaoShi/Visible} = 0
(x == 4 && y ==5)setProperty:{$../../Txt/TongGuan} = 1
var WQ ={$../../G1/Daoju1/Visible}
(x == 0 && y == 8 && WQ == 1)setProperty:{$../../Txt/G} = {$../../Txt/G} + 10
(x == 0 && y == 8 ):{$../../G1/Daoju1/Visible} = 0
var gw = {$../../G1/gw1/Visible}
var m = {$../../Txt/M}
(x == 4 && y == 4 && gw == 1):{$../../Txt/M} = m - 50
(x == 4 && y == 4 && gw == 1):{$../../../UserPlugin1/CharacterStatus} = 1
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Opacity}=0
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Visible}=0
var yo = {$../../G1/YX/Opacity}
(x == 8 && y == 8 ):{$../../G1/YX/Opacity} = 0

接下来我们用类似的判断去设置其余几个按钮。

在这里插入图片描述

setProperty:{$../../Txt/yy} = {$../../Txt/yy} + 32
setProperty:{$../../../UserPlugin/Direction} = 2
writeLog:"向下移动"+"当前位置："+{$../../G1/YX/Y}
setProperty:{$../up/num} = {$../up/num}  - 1 

var x = {$../left/num}
var y = {$../up/num}
var blue = {$../../G1/SeqImage1/Visible}
(x == 8 && y == 3 && blue == 1)setProperty:{$../../Txt/M} = {$../../Txt/M} + 100
(x == 8 && y == 3 ):{$../../G1/SeqImage1/Visible} = 0

var yo = {$../../G1/YX/Opacity}
(x == 8 && y == 7 ):{$../../G1/YX/Opacity} = 1

在这里插入图片描述

setProperty:{$./num} = {$./num} - 1
setProperty:{$../../Txt/xx} = {$../../Txt/xx} - 32
writeLog:"向左移动"+"当前位置："+{$../../G1/YX/X}
setProperty:{$../../../UserPlugin/Direction} = 3

var x = {$./num}
var y = {$../up/num}
var WQ = {$../../G1/Daoju1/Visible}
(x == 0 && y == 8 && WQ == 1)setProperty:{$../../Txt/G} = {$../../Txt/G} + 10
(x == 0 && y == 8 ):{$../../G1/Daoju1/Visible} = 0
var gw = {$../../G1/gw1/Visible}
var m = {$../../Txt/M}
(x == 4 && y == 4 && gw == 1):{$../../Txt/M} = m - 50
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Opacity}=0
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Visible}=0
(x == 4 && y == 4 && gw == 1):{$../../../UserPlugin1/CharacterStatus} = 1

在这里插入图片描述

setProperty:{$../left/num} = {$../left/num}  + 1
setProperty:{$../../Txt/xx} = {$../../Txt/xx} + 32
writeLog:"向右移动"+"当前位置："+{$../../G1/YX/X}
setProperty:{$../../../UserPlugin/Direction} = 4

var x = {$../left/num}
var y = {$../up/num}
var blue = {$../../G1/SeqImage1/Visible}
(x == 8 && y == 3 && blue == 1)setProperty:{$../../Txt/M} = {$../../Txt/M} + 100
(x == 8 && y == 3 ):{$../../G1/SeqImage1/Visible} = 0

var gw = {$../../G1/gw1/Visible}
var m = {$../../Txt/M}
(x == 4 && y == 4 && gw == 1):{$../../Txt/M} = m - 50
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Opacity}=0
(y == 4 && x == 4 )setProperty:{$../../G1/gw1/Visible}=0
(x == 4 && y == 4 && gw == 1):{$../../../UserPlugin1/CharacterStatus} = 1

注：这里需要注意的是根据障碍物位置的不同我们会对按钮进行不同的设置例如我们的英雄走到这个区域的时候我们只需要将右侧按钮(right)的停止Clicked功能，其他按钮也是一样，所以我们需要考虑到较为全面的情况来控制英雄的移动，不然就会出现人物穿墙等一系列问题，所以这里需要大家思考到。
在这里插入图片描述
接下来我们设置up2、left2、right2、down2用于覆盖上面按钮的节点，用以实现当人物到特定的位置后有哪些按钮就不可以点击，也就是我们刚才所说的取消Clicked事件功能。
我们根据自定义属性的值(人物的位置-XY坐标)来判断当前人物处于的位置，（是否在障碍物附近，障碍物在左/右/上/下）从而让up2显示覆盖掉原本的up按钮实现Clicked事件取消（点不到）。
在这里插入图片描述

var x = {$../left/num}
var y = {$../up/num}
var TG = {$../../Txt/TongGuan}

(y == 8):1
(x>1 && y==1):1
(x == 3 && y==4):1
(x == 5 && y==4):1
(x == 4 && y==5):1
(x == 7 && y==7):1
(x == 8 && y == 7 && TG == 0):1

在这里插入图片描述

var y = {$../up/num}
var x = {$../left/num}
(y == 0):1
(x>1 && y==3):1
(x== 5  && y==6):1
(x== 4  && y==7):1
(x== 3  && y==6):1

在这里插入图片描述

var x = {$../left/num}
var y = {$../up/num}
(x == 0):1
(x == 4 && y==5):1
(x == 5 && y==6):1
(x == 6 && y==5):1
(x == 8 && y==8):1

在这里插入图片描述

var a = {$../left/num}
var b = {$../up/num}
(a == 8):1
(a ==6 && b ==8):1
(a ==4 && b ==5):1
(a ==3 && b ==6):1
(a ==2 && b ==5):1
(a ==1 && b ==2):1

总结：

首先本次工程感谢@一棵大树在Plugin和工程结构上等多方面的帮助，能够让工程的效果更好的体现节省更多时间可以去制作工程细节；本次工程为游戏项目的开篇后续会对该项目持续更新；本次功能制作收获颇多，在人物的移动位置上可能花费时间比较大一时间没有想到比较好的方法，但在人物位置的思路上通了以后紧接着道具的显隐和其他效果就快了不少，总体来说在思路上还是需要拓宽一些多思考。
下次工程会在人物和怪物的攻击，攻击界面，开始动画，左侧信息栏增加道具显示……这些方面展开，具体细节上可能会在思考一下。

小宇智

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ssRender 引擎游戏项目

本次工程为游戏项目的开篇后续会对该项目持续更新；本次功能制作收获颇多，在人物的移动位置上可能花费时间比较大一时间没有想到比较好的方法，但在人物位置的思路上通了以后紧接着道具的显隐和其他效果就快了不少，总体来说在思路上还是需要拓宽一些多思考。下次工程会在人物和怪物的攻击，攻击界面，开始动画，左侧信息栏增加道具显示……这些方面展开，具体细节上可能会在思考一下。
复制链接

扫一扫