仿苍炎ui 界面，有兴趣可以看看

妖龙 · 发表于 2017-12-12 21:58

本帖最后由妖龙于 2017-12-12 22:59 编辑

暂时发几张

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

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

妖龙 · 发表于 2017-12-12 22:04

下一次发贴，不知是何年何月

xhb1987830 · 发表于 2017-12-13 08:41

66666666666666666

蓝烟清 · 发表于 2017-12-13 09:09

能不能共享一下UI的自适应算法，我一直在纠结这个

bt · 发表于 2017-12-13 15:25

非常nb，建议欢帝采用

妖龙 · 发表于 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缩小放大，大家应该都会

龍凰=至尊 · 发表于 2017-12-13 15:32

牛人！后辈学生致敬

苍天泰坦 · 发表于 2017-12-13 15:55

pc和安卓的分辨率最大的问题在于，通常pc上使用的是4：3比例，而手机上几乎都是16：9，图片拉伸变形的问题很让人恶心

妖龙 · 发表于 2017-12-13 17:12

苍天泰坦发表于 2017-12-13 15:55
pc和安卓的分辨率最大的问题在于，通常pc上使用的是4：3比例，而手机上几乎都是16：9，图片拉伸变形的问题 ...

所以要对症下药

妖龙 · 发表于 2017-12-13 17:13

bt 发表于 2017-12-13 15:25
非常nb，建议欢帝采用

无敌

winson7891 · 发表于 2017-12-13 20:51

哦不错不错，

江山代有才人出

蓝烟清 · 发表于 2017-12-13 23:55

妖龙发表于 2017-12-13 15:28
啊蓝大好

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

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

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

准备重新做一整套的UI，还不确定要怎么入手会比较简洁

蓝烟清 · 发表于 2017-12-14 00:11

妖龙发表于 2017-12-13 15:28
啊蓝大好

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

全屏拉伸是没有问题的。

主要关键在于小的贴图，对于小的贴图应该是要缩放来调整的。
这个缩放的比例不知道是怎么做合适

妖龙 · 发表于 2017-12-14 10:47

蓝烟清发表于 2017-12-13 23:55
固定宽度和高度，当时是随手设计出来的
(CC.ScreenH+(CC.ScreenH//3),CC.ScreenH)

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

妖龙 · 发表于 2017-12-14 11:08

蓝烟清发表于 2017-12-14 00:11
全屏拉伸是没有问题的。

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

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

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

妖龙 · 发表于 2017-12-15 12:41

蓝烟清发表于 2017-12-14 00:11
全屏拉伸是没有问题的。

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

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

无尊123 · 发表于 2018-4-18 18:34

666666666666

账号		自动登录	找回密码
密码			我要成为铁血侠客

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

本帖子中包含更多资源

本帖子中包含更多资源