写在开头:U3D小白一枚,第一次写博客,如有写的不足或错误之处,请大佬多多指教。另外,我不是第一个吃螃蟹的人,该项目用了一位兄台的资源,借鉴了游戏处理的逻辑,下面就把链接贴出来: 链接
该游戏的UI比较多,用到的Sprite更多,要想做这个游戏的第一步,先把图片分类好(是的,你没有看错)。该游戏的序列帧动画也非常多,如果不想自己动手,可以借鉴一下上面链接里的,但是如果想自己熟悉怎么用Sprite做动画的话,可以自行百度,方法也很简单,这里不再赘述。
一、制作地图以及建造点
地图以及建造点的摆放可以借鉴链接,这里主要说一下建造点的点击事件,可以用EventTrigger或者Button,还是两个一起用,自行选择,不过,EventTrigger可获取的事件类型比Button要多,EventTrigger的用法也可以自行百度。
不过,这里如果不注意的话,会踩到一个坑(我也踩了),如果UI被上层UI遮挡,那么,事件是不会响应的,所以,在设计UI父子关系时,要严谨慎重一些。下面贴出我的点击建造点的代码:
//返回初始建造点
public void CusorExitPoint()
{
GetComponent<Image>().sprite = CusorExitPointSprite;
}
public void CusorOnPoint()
{
GetComponent<Image>().sprite = cusorOnPointSprite;
}
//点击建造点
public void OnTowerPointClick()
{
if (!hasTower)
{
if (buildChoice.transform.localScale.x < 1 && buildChoice.transform.localScale.y < 1)
{
buildChoice.transform.DOScale(new Vector3(1.5f, 1.5f, 1), 0.2f);
if (!buildChoice.activeSelf)
{
buildChoice.SetActive(true);
}
}
else
{
buildChoice.transform.DOScale(new Vector3(0, 0, 1), 0.2f);
}
}
}
public void OnMapClicked()
{
if (buildChoice.transform.localScale == new Vector3(1.5f, 1.5f, 1))
{
buildChoice.transform.DOScale(new Vector3(0, 0, 1), 0.2f);
}
}
public void SetHasTower()
{
hasTower = true;
}
二、建造防御塔
在点击建造点后,会弹出建造选项,弹出选项的效果,链接里是用动画实现的,本人借用了DoTween插件实现,需要的小伙伴可以去网上自行下载,功能十分强大,使用也十分便利。弹出建造选项后,鼠标移动到各个选项即可预览每座塔,主要也是EventTrigger的使用。代码如下:
public void CusorExitChoice1()
{
if (archerTower.activeSelf)
{
archerTower.SetActive(false);
}
}
public void CusorOnChoice1()
{
archerTower.SetActive(true);
}
public void CusorOnChoice2()
{
turretTower.SetActive(true);
}
public void CusorExitChoice2()
{
if (turretTower.activeSelf)
{
turretTower.SetActive(false);
}
}
public void CusorOnChoice3()
{
archmageTower.SetActive(true);
}
public void CusorExitChoice3()
{
if (archmageTower.activeSelf)
{
archmageTower.SetActive(false);
}
}
public void CusorOnChoice4()
{
barrack.SetActive(true);
}
public void CusorExitChoice4()
{
if (barrack.activeSelf)
{
barrack.SetActive(false);
}
}
public void ClickChoice()
{
gameObject.SetActive(false);
if (EventSystem.current.currentSelectedGameObject.name == "ArcherTower")
{
archerTower.SetActive(false);
archerTowerBuildingProcess.SetActive(true);
}
else if (EventSystem.current.currentSelectedGameObject.name == "TurretTower")
{
turretTower.SetActive(false);
turretTowerBuildingProcess.SetActive(true);
}
else if (EventSystem.current.currentSelectedGameObject.name == "ArchmageTower")
{
archmageTower.SetActive(false);
archmageTowerBuildingProcess.SetActive(true);
}
else if (EventSystem.current.currentSelectedGameObject.name == "Barrack")
{
barrack.SetActive(false);
barrackBuildingProcess.SetActive(true);
}
towerPoint.GetComponent<TowerPoint>().SetHasTower();
}
三、建造过程效果实现
建造防御塔的过程也十分简单,当点击的哪座塔,就将它SetActive(true)即可,还有建造进度的制作,这里详细说一下。首先创建一个Image,放到塔的顶部,在该Image下创建一个新的Image作为进度条填充,如下:
HP对象的Image的color选择红色作为底部颜色,
在HpFill中,将HPBar的图片拖到SourceImage中,然后color设置为绿色,ImageType设置为Filled,FillMethod设置为Horizontal,FillOrigin设置为Left,至此,拖动FillAmount你就会发现效果,当FillAmount的值越大,填充的比例越高,在代码中也是利用FillAmount来控制进度条的:
private void Start()
{
fillImage = processingBar.transform.GetChild(0).GetComponent<Image>();
}
private void Update()
{
//激活防御塔建造过程
if (gameObject.activeSelf)
{
if (!processingBar.activeSelf)
{
processingBar.SetActive(true);
}
//进度条加载
fillImage.fillAmount += 0.02f;
//进度条加载完成
if (fillImage.fillAmount == 1)
{
fillImage.fillAmount = 0;
//显示建造完成的防御塔
//关闭攻击范围,此后只在点击防御塔之后才会显示
tower.transform.GetChild(0).gameObject.SetActive(false);
tower.SetActive(true);
if (tower.name == "ArcherTower")
{
tower.transform.GetChild(1).GetComponent<ArcherTowerController>().SetIsComplete(true);
}
else if (tower.name == "TurretTower")
{
tower.transform.GetChild(1).GetComponent<TurretTowerController>().SetIsComplete(true);
}
else if (tower.name == "ArchmageTower")
{
tower.transform.GetChild(1).GetComponent<ArchmageTowerController>().SetIsComplete(true);
}
else if (tower.name == "Barrack")
{
tower.transform.GetChild(2).GetComponent<BarrackController>().SetIsComplete();
}
//关闭建造过程
processingBar.SetActive(false);
gameObject.SetActive(false);
}
}
}
这样,就完成了建造防御塔之前的全部过程。PS:把内容比较简单,也是为了照顾跟我一样的萌新可以看懂,大佬勿喷。如有不足或错误之处,也请多多指教,谢谢。最后,祝各位新年快乐,学习快乐。