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

1 天前
 june4

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

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

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

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

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