铁血丹心

 找回密码
 我要成为铁血侠客
搜索
查看: 2987|回复: 16

[技巧心得] 仿苍炎ui 界面,有兴趣可以看看

[复制链接]
发表于 2017-12-12 21:58 | 显示全部楼层 |阅读模式
本帖最后由 妖龙 于 2017-12-12 22:59 编辑

暂时发几张

这是我上个月用lua模仿苍炎的界面,根据电脑和安卓特点,写了一个算法,无需作任何判断,就可以在不同平台上完美自动适应显示
分辨率随便改,对UI毫无影响

本人这些年一直在研究UI,并且喜欢实现一些喜欢奇奇怪怪的UI
个人感觉模仿苍炎UI,并无难度,也谈不上完全模仿,因为没意义,还是有区别的



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?我要成为铁血侠客

x
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-12 22:04 | 显示全部楼层
下一次发贴,不知是何年何月
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 08:41 | 显示全部楼层
66666666666666666
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 09:09 | 显示全部楼层
能不能共享一下UI的自适应算法, 我一直在纠结这个
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 15:25 | 显示全部楼层
非常nb,建议欢帝采用
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-13 15:28 | 显示全部楼层
蓝烟清 发表于 2017-12-13 09:09
能不能共享一下UI的自适应算法, 我一直在纠结这个

啊 蓝大好

UI同时适应PC和安卓,其实也很简单,随便举个例子吧
1 考虑到不同平台分辨率,有些贴图虽然适合在PC窗口模式上拉伸全屏,但同时也要考虑安卓分辨率问题?我的方法是把LoadPNGPath参数percent设为1,LoadPNG最后两个参数分别设为(CC.ScreenH+(CC.ScreenH//3),CC.ScreenH),这样计算应该是合适的
2 文字显示位置,贴图坐标+(贴图大小除以合适的数字,可以是小数),然后就是字节字体大小这些,最终效果是无论分辨率怎么变动,位置都不会编移
3 文字随着UI缩小放大,大家应该都会


【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 15:32 来自手机 | 显示全部楼层
牛人!后辈学生致敬
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 15:55 来自手机 | 显示全部楼层
pc和安卓的分辨率最大的问题在于,通常pc上使用的是4:3比例,而手机上几乎都是16:9,图片拉伸变形的问题很让人恶心
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-13 17:12 | 显示全部楼层
苍天泰坦 发表于 2017-12-13 15:55
pc和安卓的分辨率最大的问题在于,通常pc上使用的是4:3比例,而手机上几乎都是16:9,图片拉伸变形的问题 ...

所以要对症下药
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-13 17:13 | 显示全部楼层
bt 发表于 2017-12-13 15:25
非常nb,建议欢帝采用

        无敌
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 20:51 | 显示全部楼层
哦不错不错,

江山代有才人出
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-13 23:55 | 显示全部楼层
妖龙 发表于 2017-12-13 15:28
啊 蓝大好

UI同时适应PC和安卓,其实也很简单,随便举个例子吧

固定宽度和高度,当时是随手设计出来的
(CC.ScreenH+(CC.ScreenH//3),CC.ScreenH)

为什么要用屏幕的高度来做限制, 而不是宽度,有点看不明白


准备重新做一整套的UI, 还不确定要怎么入手会比较简洁
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2017-12-14 00:11 | 显示全部楼层
妖龙 发表于 2017-12-13 15:28
啊 蓝大好

UI同时适应PC和安卓,其实也很简单,随便举个例子吧

全屏拉伸是没有问题的。

主要关键在于小的贴图,  对于小的贴图应该是要缩放来调整的。  
这个缩放的比例不知道是怎么做合适
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-14 10:47 | 显示全部楼层
蓝烟清 发表于 2017-12-13 23:55
固定宽度和高度,当时是随手设计出来的
(CC.ScreenH+(CC.ScreenH//3),CC.ScreenH)

主要是安卓宽高比例有点变态,不同分辨率下用宽度做限制,不保证贴图会变形
使用高度做限制,至少能确保贴图以正常比例进行缩放

【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-14 11:08 | 显示全部楼层
蓝烟清 发表于 2017-12-14 00:11
全屏拉伸是没有问题的。

主要关键在于小的贴图,  对于小的贴图应该是要缩放来调整的。  

做UI,我觉得全屏拉伸用的不多,也没什么必要,主要是比例会变形还不好看
不同分辨率显示效果


上面两张截图,800x680和320x240比较,毫无区别
晚上整理下思路,看看有没有更好的方案,明天给你答案

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?我要成为铁血侠客

x
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
 楼主| 发表于 2017-12-15 12:41 | 显示全部楼层
蓝烟清 发表于 2017-12-14 00:11
全屏拉伸是没有问题的。

主要关键在于小的贴图,  对于小的贴图应该是要缩放来调整的。  

不好意思,现在才有空
大概想了下,如果需要指定在贴图某个位置显示一些元素(小贴图),元素缩放有两个方法,大家应该都知道
1 直接设置比例,不要用limitX(CC.ScreenW/800*100,0,100)来调整,感觉不合理,对比下就能发现问题,安卓上缩放比例明显和PC不一致,可以用CC.ScreenH/6代替
2 自定义宽高,这是我常用的
假如需要在背景图内一个标点显示元素,我会根据背景图比例范围计算出标点大小再缩放元素,主要是测试比较繁琐
指定位置显示元素和指定显示文字差不多........
感觉有更好方法,有空再研究吧


【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。
发表于 2018-4-18 18:34 | 显示全部楼层
666666666666
【武侠.中国】铁血丹心论坛(大武侠):致力于推广和发展武侠文化,让我们一起努力,做全球最大的武侠社区。
可能是目前为止最好的金庸群侠传MOD游戏交流论坛,各种经典武侠游戏等你来玩,各种开源制作工具等你来实现你的游戏开发之梦。

本版积分规则

小黑屋|手机版|铁血丹心

GMT+8, 2024-11-15 08:52

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表