所以我已经在一个项目上工作了一段时间,我真的很想在游戏中加入动画图块。我用 pygame 创建了一个 2d 像素艺术风格的游戏,我使用一个名为 Tiled 的编辑器来创建地图。 Tiled 生成一个 .tmx 文件和一个 .tsx 文件,用于渲染地图。我已经让地图渲染没有任何问题。问题在于渲染动画图块。他们只是没有得到动画。我了解动画工作原理的基础知识。我只需要获取动画的第一张图像,等待帧之间的持续时间,然后渲染下一帧。但我就是不知道如何让它工作。 pytmx 及其如何从平铺文件读取动画的文档很少。
这是 .tmx 文件:
<?xml version="1.0" encoding="UTF-8"?>
<map version="1.2" tiledversion="1.3.4" orientation="orthogonal" renderorder="right-down" width="32" height="32" tilewidth="96" tileheight="96" infinite="0" nextlayerid="5" nextobjectid="5">
<tileset firstgid="1" source="Bigger-Textures(96x96).tsx"/>
<layer id="1" name="Tile Layer 1" width="32" height="32">
<data encoding="csv">
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,4,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,13,15,1,1,1,1,1,1,12,12,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,13,15,1,1,1,1,1,1,11,12,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,13,25,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,22,23,23,23,23,23,23,23,9,7,23,23,23,23,23,23,24,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,13,15,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,13,15,1,1,1,1,12,3,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,12,12,1,4,5,5,27,25,5,5,6,1,1,12,12,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,11,12,1,13,7,8,9,7,8,9,15,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,12,1,1,13,16,17,18,16,11,18,15,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,13,25,26,27,25,26,27,15,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,13,7,23,23,23,23,23,24,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,13,15,1,1,1,1,1,10,12,12,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,13,15,1,1,1,1,1,12,1,12,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,13,25,5,5,5,5,5,5,5,5,5,6,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,22,23,23,23,23,23,23,23,23,23,23,24,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
</data>
</layer>
<objectgroup id="4" name="Obstacles">
<object id="1" name="wall" x="0" y="-96" width="3168" height="96"/>
<object id="2" name="wall" x="3072" y="0" width="96" height="3168"/>
<object id="3" name="wall" x="-96" y="3072" width="3168" height="96"/>
<object id="4" name="wall" x="-96" y="-96" width="96" height="3168"/>
</objectgroup>
</map>
这是 .tsx 文件:
<?xml version="1.0" encoding="UTF-8"?>
<tileset version="1.2" tiledversion="1.3.4" name="Bigger-Textures (96x96)" tilewidth="96" tileheight="96" tilecount="81" columns="9">
<image source="../gfx/tiles/tilesheets/Textures-sprite-sheet-4X.png" width="864" height="864"/>
<tile id="1">
<animation>
<frame tileid="1" duration="500"/>
<frame tileid="2" duration="500"/>
</animation>
</tile>
<tile id="2">
<animation>
<frame tileid="2" duration="500"/>
<frame tileid="1" duration="500"/>
</animation>
</tile>
<tile id="9">
<animation>
<frame tileid="9" duration="500"/>
<frame tileid="10" duration="500"/>
</animation>
</tile>
<tile id="10">
<animation>
<frame tileid="10" duration="500"/>
<frame tileid="9" duration="500"/>
</animation>
</tile>
</tileset>
这就是我目前渲染图块的方式:
def render(self):
self.ti = self.handler.currentMap.get_tile_image_by_gid
xStart = max(0, self.handler.camera.xOffset / self.handler.currentMap.tilewidth)
xEnd = min(self.handler.currentMap.width, (self.handler.camera.xOffset + self.handler.displayWidth) / self.handler.currentMap.tilewidth + 1)
yStart = max(0, self.handler.camera.yOffset / self.handler.currentMap.tileheight)
yEnd = min(self.handler.currentMap.height, (self.handler.camera.yOffset + self.handler.displayHeight) / self.handler.currentMap.tileheight + 1)
for i in range(len(self.handler.currentMap.layers) - 1):
for x in range(int(xStart), int(xEnd)):
for y in range(int(yStart), int(yEnd)):
tile = self.handler.currentMap.get_tile_image(x, y, i)
if (tile):
self.display.blit(tile, (x * self.handler.currentMap.tilewidth - self.handler.camera.xOffset,
y * self.handler.currentMap.tileheight - self.handler.camera.yOffset))
Pytmx github 上是这样写的:
# just iterate over animated tiles and demo them
# tmx_map is a TiledMap object
# tile_properties is a dictionary of all tile properties
# iterate over the tile properties
for gid, props in tmx_map.tile_properties.items():
# iterate over the frames of the animation
# if there is no animation, this list will be empty
for animation_frame in props['frames']:
# do something with the gid and duration of the frame
# this may change in the future, as it is a little awkward now
image = tmx_map.get_tile_image_by_gid(gid)
duration = animation_frame.duration
...
非常感谢任何帮助! 这是 GitHub 上的项目,如果它有任何用途:D
答案 0 :(得分:0)
我今天找这个很开心。而且毕竟没那么复杂。
I made something like this in Tiled
注意动画水砖。
现在看下面的代码:
def update(self, frame):
if frame in getFrequencyList(6):
self.current_anim_index += 1
if self.current_anim_index == 4:
self.current_anim_index = 0
def getSurface(self):
for layer in self.tmx_data.visible_layers:
for x, y, image in layer.tiles():
for gid, props in self.tmx_data.tile_properties.items():
if image == self.tmx_data.get_tile_image_by_gid(props['frames'][0].gid):
image = self.tmx_data.get_tile_image_by_gid(props['frames'][self.current_anim_index].gid)
self.surface.blit(image, (x * 16, y * 16))
else:
self.surface.blit(image, ((x * 16) + layer.offsetx, (y * 16) + layer.offsety))
return super().getSurface()
当您按层浏览切片列表时,您可以按位置(x 和 y)恢复图像。 原理是,在显示当前图像(瓷砖)之前,我们检查它实际上不是动画。 为此,您必须获得所有动画图块。
我们这样做
for gid, props in self.tmx_data.tile_properties.items():
所有动画图块都在 props['frames'] 中。
如果您查看您的 tsx 文件,您可能会看到如下内容:
<?xml version="1.0" encoding="UTF-8"?>
<tileset version="1.5" tiledversion="1.6.0" name="Overworld (Light)"
tilewidth="16" tileheight="16" tilecount="1664" columns="52">
<image source="Overworld (Light).png" trans="ff00ff" width="832" height="512"/>
<tile id="30">
<animation>
<frame tileid="30" duration="250"/>
<frame tileid="82" duration="250"/>
<frame tileid="134" duration="250"/>
<frame tileid="186" duration="250"/>
</animation>
</tile>
...
所以 props['frame'] 的每一部分都是代表每个动画节点的表格。 所以
if image == self.tmx_data.get_tile_image_by_gid(props['frames'][0].gid):
表示当前图像是动画图块。在这种情况下,您需要做的就是对 props['frame'] 表中的一个图块进行 blit。如您所见,我创建了一个 current_anim_index 属性。在更新方法变化。 我确保在我的游戏循环中调用它。帧参数从 0 到 60(是的,60 FPS)不等。然后 getFrequencyList(6) 返回一个类似 [0, 10, 20, 30, 40, 50] 的表。