下载 App

【UI教程】更省积分,也更加精准还原布局的UI制作方案

精华05/10959 浏览开发交流 包含 AI 合成内容
相信各位使用嗒啦啦的maker在制作各种UI界面时,少不了跟嗒啦啦的斗智斗勇,然而这种斗智斗勇的结果往往是你盯着嗒啦啦给出的雷霆UI怀疑自己刚才到底给这个憨货交代了什么......
那么有没有一种既省积分,又还可以精确还原自己的布局意图,而且还轻松的方法呢?
(当然是有了,不然我发帖干嘛)
先展示一下嗒啦啦中实现的效果,在嗒啦啦中制作该界面效果只使用了这一次对话:
TapTap
嗒啦啦复现界面截图
然后就是我们这次教程中真正出力的核心,deepseekV4的识图模式,先给各位看一下在deepseek中调试完成,导入嗒啦啦前的效果:
TapTap
D指导调试界面截图
这种处理方式的好处相信各位已经看到了,不管是界面还原度上,还是积分消耗上,都要远优于你跟嗒啦啦进行反复对话得到的结果,下面我们就可以正经讲讲这到底是怎么做的。
首先,你需要一张UI布局图,可以是自己绘制的,也可以是ai跑的,总之,需要现有一张布局图。
(如果不知道怎么用ai跑出来质量相对较高的布局图,可以蹲下我后面的教程)
这次我们使用如下图片进行教学内容:
TapTap
教程使用的UI布局图
接着,登录网页版的deepseek,选择识图模式,打开深度思考,上传我们选择的这张布局图,输入“描述图片内容”:
TapTap
第一步
(上面这一步其实是可以省略的,不过我在测试过程中发现如果不加这一步,D指导给出的样式代码可能无法运行或者界面与图片布局有出入)
接下来就是真正开始的环节,输入指令“根据图片反推该界面的样式代码”
TapTap
第二步
这一步D指导通常就能给出一套如下图情况的可直接运行的样式代码,点击运行就可以直接看到对应的UI界面。如果出现无法运行的情况,可以直接告诉他“给你一个可以直接运行的代码版本”
TapTap
运行按钮位置
TapTap
运行效果
其实到这里,如果D指导给出的样式代码呈现出的UI效果你基本满意的话,就可以直接复制对应的样式代码到嗒啦啦进行复现了,不过考虑到肯定有maker会有在这里进一步修改的需求,所以我们多提一嘴如何在D指导中修改这个UI界面。
简单的,可以用文字语言描述的情况,我们直接对话即可:
TapTap
修改对话
各位应该已经注意到了,D指导在这次修改中给出的代码只是片段,实际运行出来的效果也并非之前的完整界面。
TapTap
代码片段的运行效果
这种情况我们只需要让他整合为完整代码就可以获得能够正常预览的可运行代码了。
TapTap
整合代码效果
可以看到修改也正常适配了。
如果是单凭文字描述无法精确表述的情况,使用任意截图工具,截图后对需要修改的部分进行标注,之后上传该图片,用文字辅助说明修改需求就行。
接下来就是如何将D指导给出的样式代码,在嗒啦啦中还原的办法了。
首先,复制我们在D指导中调整好的最终版本样式代码。在嗒啦啦中根据我们需要修改的UI页面输入以下指令,比如我这里是营地界面的UI,那么指令就是“根据以下样式代码,修改营地界面的UI布局:”
TapTap
嗒啦啦正在应用样式代码
通常只需要这一次对话,就可以完整还原你之前在D指导中调试出的UI界面。
TapTap
背景图是我后加的
如果已经应用到自己项目中之后,因为功能调整或者增加有了修改布局的需求,那么可以通过嗒啦啦自己的截图标记功能进行修改。
TapTap
点击预览窗口顶部的“截图插入对话”
TapTap
点击标注圈出需要修改调整区域
圈出修改区域后正常和嗒啦啦对话就行。如果是比较大的修改,比如界面重做一类的情况,那我还是更推荐去D指导里改或者干脆重新做一份。
至于UI做到这一步后,怎么精确替换为自己做好的美术素材,这个我也还在研究,欢迎交流讨论。
(另外,求积分,孩子激活晚了没蹭到老用户的计划2,现在就还剩1万出头了,填问卷的那3000也没到账,提档的申请也还没反应,现在随便一句话基本就是几百积分没了,剩的这点估计连主要功能模块都做不完,赈灾粮什么时候才能下来啊?!)
[TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待][TapFamily庆生-万物皆可联动_期待]
猜你想搜
taptap 制造ui教程
别再烧积分了!从每次 2000 到每次 50 的血泪经验截图
别再烧积分了!从每次 2000 到每次 50 的血泪经验
适用场景:所有在用 TapTap Code 开发游戏的小白 难度:★☆☆☆☆ 背景最近群里总有人"炫耀"一次操作花了几千积分,说实话这不是值得高兴的事——这是在告诉所有人你的开发方式有根本性问题。我也走过这条弯路,所以来说说怎么改。 积分消耗的本质是什么积分 = AI 处理的 token 数量 = 你发给 AI 的内容 + AI 回给你的内容所以烧积分的本质只有两种: 你让 AI 做了大量无效/重
精华
82 赞
23 回复
如何提升你游戏中的UI美术水平截图
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体 很多开发者没有注意到其实UI界面中最重要的元素是字体,一款合适的字体能给整个游戏的界面感官带来蜕变。 请看案例 那么如何挑选适合自己的字体呢? 我总结出了一些小经验可供参考: 黑体:通用 宋体:古风、武侠、修仙 楷体:古风、武侠、修仙 圆体:卡通、动漫、Q版 科技:科幻、未来、电子 顺手分享一个免费可商用字体网站: 当然 如果你不知道自己的游戏适合什么风格
精华
126 赞
44 回复
开发日志(day2)坚持去做就是好的开始截图
开发日志(day2)坚持去做就是好的开始
今天主要是修复了一下昨天遇到的很多问题,闪帧;装备的等级没有随怪物等级参考;再次进入地下城,怪物状态竟然显示(已倒下);不会自动更换目标,导致会反复鞭尸;等很多的问题,不过通过昨天的经验,有效的向ai提出问题并且发送截图发给ai调试,也是把这些问题成功排除,甚至还有多余的free额度来生成新的内容。 新增的内容有返回城镇;返回主界面;中途退出地下城保留进入前的状态;完成地下城的面板结算;当然最有感
1 赞
1 回复
【UI教程】如何将已有的效果图应用为实际的UI界面截图
【UI教程】如何将已有的效果图应用为实际的UI界面
在经过了一些折腾和比较折磨的尝试后,我总算是摸清楚了嗒啦啦怎么把UI效果图转换为实际游戏中的UI组件,今天就给大家带来这部分的经验分享。 tips:1.本篇教程需要各位掌握最基本的ps使用,具体的操作部分我会大致讲解,但仍需各位自行学习ps的基本操作,部分可以由ai代劳的环节我会注明。 2.本篇教程需要在以我前两篇教程作为前置环节,请在阅读这两篇前置教程后再进行本篇教程内容的学习 在按照前
12 赞
5 回复
00:54
等距场景编辑器——自行编辑2D瓦片场景地图截图
等距场景编辑器——自行编辑2D瓦片场景地图
一个可嵌入任何 UrhoX 项目的完整等距瓦片地图编辑器,适用于 RPG、策略、模拟经营等类型游戏的关卡设计。 SKILL审核已通过,各位创作者可以根据自己的需要对工具进行调整修改 声明:该工具仅作为场景编辑以及序列化,交互等功能需要用户自行在项目中定义 后续会根据实际情况补充rule tile相关逻辑,实现tile map编辑自由 目录 1. 界面总览 2. 六种编辑工具 3. 双视图模式 4.
精华
21 赞
11 回复
永恒虚空持续开发日记1——关于游戏中的新名词:场频截图
永恒虚空持续开发日记1——关于游戏中的新名词:场频
写在前边:首先感谢TapTap制造版主大大@汪崽 对于作品潜力的肯定,给与了我积分计划二的权限[表情_不好意思]。这边也在加紧开发改进各种功能中,期望尽快给大家带来成熟的版本。[表情_猫咪举手] 大家好,我是永恒虚空的制作人黑猫不详,大家叫我黑猫就好。从今天开始我将以后置开发日记的形式给大家分享我在TapTap制造中制作的游戏永恒虚空的开发过程,新人希望大家多多关照! 今天先给大家介绍我作品中最重
投票
3 赞
01:05
【开发日记】零号危城vol.1截图
【开发日记】零号危城vol.1
战斗模块的各项功能和UI布局基本调试完成,后续调优等待接入美术资产时继续进行。 有建议或者反馈欢迎沟通讨论。
4 赞
浅记《阿方的旅程》开发历程截图
浅记《阿方的旅程》开发历程
预计阅读时长10分钟,欢迎您先品鉴游戏,再回来看这篇“流水账” 这是我第一次实际接触“用自然语言制作游戏”,也是我第一次接触游戏开发工作,所以一切都是从零开始,跌跌撞撞,懵懵懂懂。[表情_豹哭] 我是通过获得的本次开发资格,6月22日晚,在微信公众号收到了测试资格的消息,最开始公布主题“跳跃”的时候,脑子里最先想到的就是几款非常经典的游戏「马里奥」「Flappy Bird」「Doodle Jump
10 赞
1 回复
关于制作出质量很高的横版战斗角色的方法截图
关于制作出质量很高的横版战斗角色的方法
其实全篇就一句话,角色为啥做起来这么好看,因为我一帧一帧K的。 在做角色之前,我们需要一个角色的设计稿,这个东西很简单,你把人设写好剩下的交给AI就行了,所有图片,序列帧都可以让AI绘制和处理,学会绘图是你要制作高质量游戏的第一课。 这里拿我在做的角色举例,他的参考图是这样: 当你拥有了一个角色以后,就要想办法让她动起来了。 那么如何让她动起来,答案是序列帧。 在此之前你需要知道,最容易出现一个误
42 赞
12 回复
【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面截图
【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面
因为一直在追着各种新的ai生图模型跑,所以image2上线的第一时间我就去各种测试了一下。image2的各方面能力其实并不是那么均衡,强项主要在宣传图设计和平面设计上,而UI恰恰就属于平面设计的一种。 现在嗒啦啦也是接入了image2,喜大普奔,真正可以白嫖image2生图的地方出现了!( 好了,说正题,相信看过上一期UI教程或者没看过的朋友们,在使用嗒啦啦进行制作的时候都会有一个需求,那就是——
精华
35 赞
5 回复