下载 App

不加载一张贴图,我用 Canvas 程序化 "画" 出了水彩瓶子和液体

09/2421 浏览开发交流
最初我的瓶子和液体都是 PNG 贴图,问题很快就来了:包体大、瓶子皮肤和液体颜色一多就得导出一堆图,想做个选中浮动、倒水的动画更是麻烦。
后来干脆换了个思路 ——DOM 只负责布局和存数据(每个色块带一个颜色标记),在瓶子上盖一层全屏透明 Canvas,所有视觉全部程序化绘制,再用 CSS 把 DOM 的背景图全部 background-image:none 关掉。
液体是怎么画的: ・每个瓶子按色块分段,用 "亮 / 基色 / 暗" 三段渐变先做出体积感; ・再用一套 "材质族" 区分不同水皮肤:果冻族画大颗气泡、宝石族画交错三角刻面和星芒、魔药族用中心自发光的径向渐变加细密气泡、星尘族做纵向深邃感; ・最后补侧壁水光(左侧一道白、右侧压暗)、液面弧度,以及色弱模式下的符号。
瓶身则是先勾出玻璃试管的轮廓和瓶口,再用一张材质参数表(玻璃 / 木 / 金属 / 霓虹)去驱动描边和反光。
这么做的好处很直接:零贴图、包体骤降,换皮肤只改一组参数,任何动画都是重新绘制一帧的事。
踩过的坑也记一下:Canvas 必须和 DOM 用同一套尺寸,窗口 resize 要重绘;要处理 devicePixelRatio,否则高分屏发虚;Canvas 层记得 pointer-events:none,让点击穿透到下面的 DOM。
想问问大家做这种小游戏,更习惯用贴图还是程序化绘制?有没有更轻的方案,评论区交流。
#开发心得 #ai做游戏 #独立游戏 #休闲游戏 #解谜游戏
猜你想搜
taptap制造 canvas程序化绘制
别再烧积分了!从每次 2000 到每次 50 的血泪经验截图
别再烧积分了!从每次 2000 到每次 50 的血泪经验
适用场景:所有在用 TapTap Code 开发游戏的小白 难度:★☆☆☆☆ 背景最近群里总有人"炫耀"一次操作花了几千积分,说实话这不是值得高兴的事——这是在告诉所有人你的开发方式有根本性问题。我也走过这条弯路,所以来说说怎么改。 积分消耗的本质是什么积分 = AI 处理的 token 数量 = 你发给 AI 的内容 + AI 回给你的内容所以烧积分的本质只有两种: 你让 AI 做了大量无效/重
精华
82 赞
23 回复
100 关水排序,怎么保证程序 "随机生成的每一关都一定能解"截图
100 关水排序,怎么保证程序 "随机生成的每一关都一定能解"
做关卡生成时最怕一件事:纯随机倒出来的布局可能是死局,这种是最致命影响体验的。 我的整体流程是:先用一条难度曲线定下每关参数(颜色数从 3 递增到 10、瓶子容量 4 到 5、空瓶 1~2 个),然后 随机切块 → 丢给内置求解器验证 → 存下布局;解不出来就重新 roll,直到可解为止。 所以核心是给自己写了一个水排序求解器: ・胜利判定:所有非空瓶都装满且颜色一致、颜色不重复; ・枚举合法走法
2 赞
如何提升你游戏中的UI美术水平截图
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体 很多开发者没有注意到其实UI界面中最重要的元素是字体,一款合适的字体能给整个游戏的界面感官带来蜕变。 请看案例 那么如何挑选适合自己的字体呢? 我总结出了一些小经验可供参考: 黑体:通用 宋体:古风、武侠、修仙 楷体:古风、武侠、修仙 圆体:卡通、动漫、Q版 科技:科幻、未来、电子 顺手分享一个免费可商用字体网站: 当然 如果你不知道自己的游戏适合什么风格
精华
127 赞
44 回复
2D 等轴测视角:完整理论截图
2D 等轴测视角:完整理论
2D 等轴测视角:完整理论 一、视角的本质 什么是等轴测 人站在高处斜着往下看地面,地面上的方格子不再是正方形,而变成了菱形。这就是等轴测的视觉本质。 俯视(正上方看下去): 等轴测(斜上方看下去): ┌──┬──┬──┐ ◇ ├──┼──┼──┤ ◇ ◇ ├──┼──┼──┤ ◇ ◇ ◇ └──┴──┴──┘ ◇ ◇ ◇ 正方形网格经过旋转 + 压缩,变成了菱形网格。 为什么是 2:1
6 赞
【UI教程】如何将已有的效果图应用为实际的UI界面截图
【UI教程】如何将已有的效果图应用为实际的UI界面
在经过了一些折腾和比较折磨的尝试后,我总算是摸清楚了嗒啦啦怎么把UI效果图转换为实际游戏中的UI组件,今天就给大家带来这部分的经验分享。 tips:1.本篇教程需要各位掌握最基本的ps使用,具体的操作部分我会大致讲解,但仍需各位自行学习ps的基本操作,部分可以由ai代劳的环节我会注明。 2.本篇教程需要在以我前两篇教程作为前置环节,请在阅读这两篇前置教程后再进行本篇教程内容的学习 在按照前
12 赞
5 回复
【开发者实践分享】单手搜打撤大楼的减法与音效压迫感打磨截图
【开发者实践分享】单手搜打撤大楼的减法与音效压迫感打磨
大家好,我们是灰色龟记工作室。这两天《最后的钟声》开启不删档公开测试后,陆续收到了第一批玩家的五星鼓励,后台看到试玩同学的人均单日游玩时长超过了 29 分钟,这让我们松了一大口气。借「开发者实践分享」版块,和各位创作者聊聊我们在 TapTap 制造(UrhoX + NanoVG)里打磨这款单人「搜打撤」的三个真实踩坑与设计取舍。 一、核心减法:怎么让“搜打撤”在手机上单手就能爽玩? 传统撤离射击往
浅记《阿方的旅程》开发历程截图
浅记《阿方的旅程》开发历程
预计阅读时长10分钟,欢迎您先品鉴游戏,再回来看这篇“流水账” 这是我第一次实际接触“用自然语言制作游戏”,也是我第一次接触游戏开发工作,所以一切都是从零开始,跌跌撞撞,懵懵懂懂。[表情_豹哭] 我是通过获得的本次开发资格,6月22日晚,在微信公众号收到了测试资格的消息,最开始公布主题“跳跃”的时候,脑子里最先想到的就是几款非常经典的游戏「马里奥」「Flappy Bird」「Doodle Jump
10 赞
1 回复
自由建造游戏搭建墙体参考截图
自由建造游戏搭建墙体参考
本文只提供自由建造游戏2d类围墙方便思路,给萌新一条通天大道,下面是个人总结哈,大佬可以忽略 1.自由建造游戏需要先确定地图方向,地图瓦片,建造物,树木登场景瓦片,如何用瓦片拼接地图这里我就不教了之前有发过,也可以在taptap制造论坛精华帖找一找。 2.确实方向后我们拿2d,有高度感,正向相机视角举例子哈,看上面图一这是一片空地,我们需要做出来有高度感的围墙应该怎么做? 第一步:用ai生图,参考
4 赞
1 回复
游戏上新自荐《这也能跳?》截图
游戏上新自荐《这也能跳?》
一句话游戏玩法:点击,然后跳跃,根据距离获得金币,然后升级机器人,跳出更远的距离,解锁外观和新区域! 具体介绍:《这也能跳?》是一款横屏轻休闲跳远养成游戏。玩家将操控一台弹跳机器人,从整备舱出发,在自动助跑中把握蓄力时机完成起跳,挑战更远距离。每次跳远都会根据计分距离获得当前区域货币,用于升级肢体、驱动核心和身价倍率,让下一次跳得更远、收益更高。游戏包含新手引导、真实轨迹反馈、纪录刷新、四个区域挑
2 赞
1 回复
01:13
【游戏自荐】《王朝崛起》——一个人做的2D骑马砍杀,但真的上头截图
【游戏自荐】《王朝崛起》——一个人做的2D骑马砍杀,但真的上头
略沙盒,玩法硬核,还在修bug,但真的上头 先声明:我不是托,是开发者自己来安利的。如果你喜欢《骑马与砍杀》那种从零拉起部队、跑商、招降将领、攻城叛变的玩法,那这款游戏大概率会对你的胃口。 一、这游戏玩什么? · 超大的2D沙盒地图:64座城市 + 128个村庄,四大势力割据,满地图的蛮族部落。· 动态世界 & AI:AI势力之间会自己宣战、结盟、叛变;武将忠诚度低了会自立为王,最多能冒出8个新势
13 赞
8 回复