游戏萌新，和小孩一起从头 js+canvas 无框架写个塔防游戏。
那些短子弹（类似圆型）好说，直接用图片就行了，但我看别的塔防有长的子弹，会拉得很长（就是长度不固定，从塔可以直接拉伸到目标，比如闪电之类），这些直接用个长图片就不行了吧？会有拉伸变形。那这些子弹通常是怎么画出来的呢？
 |
1
kapaseker 1 天前
复制像素啊。。。中间的像素是复制的。Android 中是.9 patch 图片，游戏中应该是 tilemap 这种做法吧。
|
 |
2
alexsz 1 天前
目标在移动，射击方向不固定
应该需要旋转和伸缩计算，动态的 |
 |
3
bli22ard 1 天前
子弹两头中间，分为三张图， 中间还可以分为各种花纹， 然后拼接。这个思路可以发散一下
|
 |
4
mon6912640 1 天前
淘宝找闪电素材，找几段小段的不同形态的闪电 png ，然后实例化时候计算主角和敌人的距离，根据这个距离实例化几段随机闪电，这样的效果看起来会比较真实，实现上也比较简单
|
 |
5
darklinden 1 天前  1
单个长图片不行用多个啊，sprite frame animation 多帧图片动画
拉伸变形没问题，只需要你的像素精度拉伸之后可以接受就行 直接搜索闪电相关的游戏素材即可，本来就糊拉伸完快速闪过味儿就对了 比如大名鼎鼎的 itch.io/game-assets/tag-lightning |
 |
6
dosmlp 1 天前
着色器就可以做
|
 |
8
lyzz0612 1 天前
图片变长不是只有拉伸变形，还可以九宫格、图片重复
|
 |
9
Hypn0s 1 天前
1. 如果你基于 WebGL Context ，可以试着配合 AI 写 shader ，图片拉长然后用 repeat 的方式填充
2. 如果是基于 Canvas Context 的，那就拼图片，或者用 Graphic 画 |
 |
10
june4 OP @darklinden 感谢。就这个方法了。
|
 |
11
funcman 1 天前
现在就算 2D 游戏也没必要按位图帧动画的思维去做。
|
 |
13
lpe234 1 天前
关注一下 希望后面分享一下。等我儿子长大了我也教他
|
 |
14
sparklee 1 天前
动态绘制, 粒子生成, 就是用足够多的点
|
|
15
darklinden 1 天前
说 repeat 也好，九宫格也好，能填出闪电的麻烦帖张图先
另一种做法是 shander 自绘，webgl 支持 glsl shader ， 单线+噪声+随时间变化就可以搓出闪电。但是你用没用 webgl 不知道。 想搓游戏玩建议还是上引擎，站别人肩膀上和自己从 0 到 1 搓，工作量还是差异巨大的 |
 |
16
laminux29 1 天前
楼上所有回答，都本末导致了。
建议先了解一下，游戏软硬件的发展历史，早期的硬件游戏机，画面是由游戏机设备上的固定槽位，加上动态的像素点组成。而纯软件游戏，则是像素点 + 线条组成。对，就是这么朴实无华。 如果你想美观一点，人物形象可以用 png 背景透明的图像，但到了这一步，教育意义就已经完成了，子弹直接 png ，闪电用激光代替，激光直接绘制直线就行了。至于闪电效果、导弹跟踪、智能选路、AI 、联机游戏等等，对于小朋友来说就完全超纲了。 |
 |
17
andyskaura 1 天前
三段头尾能衔接上的图片，随机拼接。在闪电末端做形变。
|
|
18
june4 OP @laminux29 我就是想做个 Kingdom rush ，植物大战僵尸这类的 2d 小游戏，感觉还在中学生的能力范围内。
像楼上专业人士说的直接上 unity 手搓闪电，这我都很难上手，而且知识点实在太多了。 我把 kingdom rush 1 代那个游戏解包了，得到了上万张游戏素材，打算复制出个简易网页版，只是没从中发现长子弹的图，可能就是从小碎图拼起来的导致我没注意到。 |
 |
19
Rickkkkkkk 1 天前
这问题可太适合问 ai 了。
|
 |
20
WoodsGao 8 小时 34 分钟前
trail renderer 了解下
|
 |
21
UnluckyNinja 3 小时 34 分钟前
楼主想复杂了，我去搜了 kingdom rush 的视频，特斯拉塔的闪电压根就没考虑过变形的问题，就是单个素材重复使用，https://www.bilibili.com/video/BV1g14y1t7CK?t=1807.8 30:08 这里，右上角那个怪丝血被最近处电塔打时，闪电都缩到看不见了，相比正常情况变形很明显吧，但是 0 人在意，楼主练手作品更不需要在意这些细节
|
Select Language