从零开始的星露谷-Unity还原星露谷物语:移动界面篇(1)

从零开始的星露谷-Unity还原星露谷物语:移动界面篇(1)

首页模拟经营电视演播室物语debug更新时间:2024-04-22

作者:对马骑马使用炎拳

大家好,我是再无悲喜的炎拳。

作为爆卖1000万份的模拟农场RPG,星露谷自然吸引了我这样的休闲玩家,本期待能愉悦的搭建自己的小农场,结果却沉迷钓鱼下矿无法自拔,过起了007的日子,最后只能大叹西八!

熬夜伤身体~

当然,这些只是玩笑话,星露谷中丰富的人物互动事件,有趣的耕种建造系统,以及春夏秋冬独有节日和大量的彩蛋,让玩家刚入便能迅速融入这个可爱的小镇。听着小曲,结束一天的冒险后,带着路边摘得野花回家,路上遇到喜欢的人,顺手将花送给她,知道她对你的爱心又多了一个。晚上在家门口钓钓鱼,回家摸摸宠物入睡。。这样充实愉悦的生活,不由让我感叹,比起城里和乡下,还是做一只星露谷中的老鼠好啊~

夏日结束的时候,记得来看月光水母起舞~

废话不多说,进入主题,原作者Eric Barone花费了四年时间,独立开发了星露谷物语,可见里面看似简单的功能还是工作量蛮大的。实际上在复刻星露谷的过程中,我也逐渐察觉到了许多在玩的时候,并未在意的丰富的细节。尝试还原自己喜爱的游戏,是一个有趣的过程,你能更为透彻的感受这个世界的肌理,以及制作者的心情~


作为一款2D像素游戏,首先自然是移动,网上找的星露谷素材包里人物的精灵图分割的挺有条理,我选择了阿比盖尔作为主角。

使用前需要对素材进行设置,过滤模式设置为Point,默认选项设置为不压缩图片质量,同时修改图集参数Pixels Per Unit为16(具体根据图集的人物长度决定)。 最后用SpriteEditor中Grid By Cell Size的方法将图集分割成16 * 16像素大小的图片,阿比盖尔的素材就准备完成了:

接下来制作人物的移动动画,星露谷中人物的移动有八个方向:上下左右,左上,左下,右上右下,实际上展示的动画只有上下左右四个方向,素材中已经包含了这一套动作,我们直接使用unity 的动画系统制作各个方向的移动动画即可:

10s快速做动画!

同时在代码中写个方向的枚举类做准备,这里看起来比较繁琐,但星露谷中几乎所有的操作都和方向有关,需要获得人物当前精准的方向,所以还是选择了这个比较笨重的办法来控制动画:

public enum Direction { Down,Up,Left,Right,DownLeft,DownRight,UpLeft,UpRight,Stand }

然后开始制作动画状态机,星露谷中人物的日常状态为站立和行走,同时每种状态包含四个方向,所以我们可以选择混合树来管理这些方向的转换:

新建两个混合树

每个混合树包含四个方向的动画

星露谷人物移动没有加速的过程,直接匀速运动,所以我们直接设置类型为1D,通过检测按键按下 长按事件,控制动画转换即可:

public void UniformMove() { Vector2 position = transform.position; switch (GetDirection()) { case Direction.Down: position.y = position.y -Speed * Time.deltaTime; break; case Direction.Up: position.y = position.y Speed * Time.deltaTime; break; case Direction.Left: position.x = position.x -Speed * Time.deltaTime; break; case Direction.Right: position.x = position.x Speed * Time.deltaTime; break; case Direction.DownLeft: position.y = position.y -Speed * Time.deltaTime * TurnSpeed; position.x = position.x -Speed * Time.deltaTime * TurnSpeed; break; case Direction.DownRight: position.y = position.y -Speed * Time.deltaTime * TurnSpeed; position.x = position.x Speed * Time.deltaTime * TurnSpeed; break; case Direction.UpLeft: position.y = position.y Speed * Time.deltaTime * TurnSpeed; position.x = position.x -Speed * Time.deltaTime * TurnSpeed; break; case Direction.UpRight: position.y = position.y Speed * Time.deltaTime * TurnSpeed; position.x = position.x Speed * Time.deltaTime * TurnSpeed; break; case Direction.Stand: break; default: break; } rigidbody2D.MovePosition(position); }

游戏中人物选中物品,会有一个举起物品一起走的动作,物品也会有一个一上一下的动画,在状态机里新建一层layer执行物品动画即可,最终效果如下:

这样人物的移动暂时就完成了,后续要添加新的动画也比较方便,接下来完成人物的状态栏背包,首先同样从精灵图集中找到面板素材,面板需要增删物品时自动排列,所以我选择用Unity自带的UI控件Scrollview来完成,物品是在横向逐渐增加,所以我们直接删除滚动条,给Viewport增加一个Horizontal组件:

然后再根据需求建立物品的模板预制体,并在Horizontal中测试出物品之间的合适的间距,当涉及到物品的增删操作,就不需要自己再调整布局了,效果如下:

这里可能有朋友注意到不同物品的信息面板大小也有所不同,星露谷中物品繁多,对应的描述文字数量也不同,所以当我们生成不同的物品的时候,需要根据文字的数量来决定面板的宽度,具体代码如下:

//构造信息展示面板 ,传入参数的info中包含描述信息 public void SetDesPanel(ItemInfo info ) { //载入字体,获取描述文字 Font font = Resources.Load<Font>("Font/Arial"); int fontsize = 18; string text = info.description; //获取这段文字的总字符长度 font.RequestCharactersInTexture(text, fontsize, FontStyle.Normal); CharacterInfo characterInfo; float width = 0f; for (int i = 0; i < text.Length; i ) { // Debug.Log("字符长度"); font.GetCharacterInfo(text[i], out characterInfo, fontsize); width = characterInfo.advance; } //设置信息面板长宽 if (width <=253 && width > 173) { DisplayPanel.rectTransform.sizeDelta = new Vector2(width, 245); } else if (width < 173) { DisplayPanel.rectTransform.sizeDelta = new Vector2(173, 245); } else { int line =(int)(width /253); //Debug.Log("行数" line ); DisplayPanel.rectTransform.sizeDelta = new Vector2(300, 245 line*27); } }

同时要保证信息面板始终渲染在物品的后面,这样才不会被物品图标遮挡,所以将其父级设置为Inventory_Tabs,和Viewport同一层级:

DisplayPanel.transform.SetParent(inventory_Tabs.transform,false );

最后一个关键点是选中物品并对其进行操作,这里要结合数据的读取来说,我把这部分内容放在下一篇,最后放一张目前实现的进度:包括从Excel表格和json中分别载入物品信息,数据的存储,基于Tilemap的单独每块地上植物的小动画(有点小麻烦),施工还没完成,就先不放工程了,敬请期待~


欢迎加入游戏开发群欢乐搅基:1082025059

对游戏开发感兴趣的童鞋可戳这里进一步了解:http://levelpp.com/

我们的公众号:“皮皮关"

B站:“皮皮关做游戏

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved