游戏UI教程-9-slice按钮菜单切片技术

pixel32 编译整理
教你画像素画 出品 | 公众号 pixelart

9-slice是一种切片技术,使你可以重复使用图片。9-slice将图片分割成9个部分,当调整图片的尺寸时,就可以无损缩放或平铺。

 

 

游戏UI教程-9-slice按钮菜单切片技术

 

1,3,7,9是四个角,可以有不同的细节;2,8可以横向平铺;4,6可以垂直平铺;5中间的部分应该做到上下左右都可以拼接。只需要很少的图片,就可以拼出一个游戏所需的全部按钮和菜单。

 

9-slice有以下特点:

 

多用于按钮,菜单;

中间部分应避免复杂的细节;

四个角落可以有复杂的细节;

 

游戏UI教程-9-slice按钮菜单切片技术

 

下面是实际应用示范,这是横向的扩展。

 

游戏UI教程-9-slice按钮菜单切片技术

 

当你掌握基本用法后,可以玩一些花样。本质上9-slice技术跟拼出场景的图块技术没什么两样。所以可以自由的替换里面的图块,就像下面图片中那样,给菜单添加更多的变化和装饰。

 

游戏UI教程-9-slice按钮菜单切片技术

 

可以通过叠加菜单制造更多的变化。

 

游戏UI教程-9-slice按钮菜单切片技术

 

类似血条,技能条,也可以使用这个技术来制作。

 

游戏UI教程-9-slice按钮菜单切片技术

 

这个技术可以应用在绝大多数的UI菜单中。

 

游戏UI教程-9-slice按钮菜单切片技术

完。

本账号系网易新闻-网易号“各有态度”签约账号
查看更多像素画教程,欢迎关注

游戏UI教程-9-slice按钮菜单切片技术

 

始发于微信公众号:教你画像素画

通过「BeePress|微信公众号文章采集」WordPress 插件生成