2D 游戏中的长子弹(比如闪电)是怎么绘制的?

70 天前
 june4

游戏萌新,和小孩一起从头 js+canvas 无框架写个塔防游戏。

那些短子弹(类似圆型)好说,直接用图片就行了,但我看别的塔防有长的子弹,会拉得很长(就是长度不固定,从塔可以直接拉伸到目标,比如闪电之类),这些直接用个长图片就不行了吧?会有拉伸变形。那这些子弹通常是怎么画出来的呢?

4412 次点击
所在节点    游戏开发
22 条回复
kapaseker
70 天前
复制像素啊。。。中间的像素是复制的。Android 中是.9 patch 图片,游戏中应该是 tilemap 这种做法吧。
alexsz
70 天前
目标在移动,射击方向不固定
应该需要旋转和伸缩计算,动态的
bli22ard
70 天前
子弹两头中间,分为三张图, 中间还可以分为各种花纹, 然后拼接。这个思路可以发散一下
mon6912640
70 天前
淘宝找闪电素材,找几段小段的不同形态的闪电 png ,然后实例化时候计算主角和敌人的距离,根据这个距离实例化几段随机闪电,这样的效果看起来会比较真实,实现上也比较简单
darklinden
70 天前
单个长图片不行用多个啊,sprite frame animation 多帧图片动画
拉伸变形没问题,只需要你的像素精度拉伸之后可以接受就行
直接搜索闪电相关的游戏素材即可,本来就糊拉伸完快速闪过味儿就对了
比如大名鼎鼎的 itch.io/game-assets/tag-lightning
dosmlp
70 天前
着色器就可以做
zuosiruan
70 天前
@dosmlp 人家带小朋友做的 你这一下搞得人家小朋友直接撂挑子了
lyzz0612
70 天前
图片变长不是只有拉伸变形,还可以九宫格、图片重复
Hypn0s
70 天前
1. 如果你基于 WebGL Context ,可以试着配合 AI 写 shader ,图片拉长然后用 repeat 的方式填充
2. 如果是基于 Canvas Context 的,那就拼图片,或者用 Graphic 画
june4
70 天前
@darklinden 感谢。就这个方法了。
funcman
70 天前
现在就算 2D 游戏也没必要按位图帧动画的思维去做。
june4
70 天前
@funcman 更好的做法是什么呢?
lpe234
70 天前
关注一下 希望后面分享一下。等我儿子长大了我也教他
sparklee
69 天前
动态绘制, 粒子生成, 就是用足够多的点
darklinden
69 天前
说 repeat 也好,九宫格也好,能填出闪电的麻烦帖张图先
另一种做法是 shander 自绘,webgl 支持 glsl shader , 单线+噪声+随时间变化就可以搓出闪电。但是你用没用 webgl 不知道。
想搓游戏玩建议还是上引擎,站别人肩膀上和自己从 0 到 1 搓,工作量还是差异巨大的
laminux29
69 天前
楼上所有回答,都本末导致了。

建议先了解一下,游戏软硬件的发展历史,早期的硬件游戏机,画面是由游戏机设备上的固定槽位,加上动态的像素点组成。而纯软件游戏,则是像素点 + 线条组成。对,就是这么朴实无华。

如果你想美观一点,人物形象可以用 png 背景透明的图像,但到了这一步,教育意义就已经完成了,子弹直接 png ,闪电用激光代替,激光直接绘制直线就行了。至于闪电效果、导弹跟踪、智能选路、AI 、联机游戏等等,对于小朋友来说就完全超纲了。
andyskaura
69 天前
三段头尾能衔接上的图片,随机拼接。在闪电末端做形变。
june4
69 天前
@laminux29 我就是想做个 Kingdom rush ,植物大战僵尸这类的 2d 小游戏,感觉还在中学生的能力范围内。
像楼上专业人士说的直接上 unity 手搓闪电,这我都很难上手,而且知识点实在太多了。
我把 kingdom rush 1 代那个游戏解包了,得到了上万张游戏素材,打算复制出个简易网页版,只是没从中发现长子弹的图,可能就是从小碎图拼起来的导致我没注意到。
Rickkkkkkk
69 天前
这问题可太适合问 ai 了。
WoodsGao
68 天前
trail renderer 了解下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1143381

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX