Pytmx从切片地图渲染动画切片

Question

所以我已经在一个项目上工作了一段时间，我真的很想在游戏中加入动画瓷砖。我正在创建一个2d像素的艺术风格的游戏与pygame和我使用一个编辑器称为平铺来创建地图。平铺将生成用于渲染贴图的.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上的项目，如果它有任何用处的话：

Answer 1

我今天找这个玩得很开心。毕竟，这并不是那么复杂。

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():

所有的动画瓦片都在道具“帧”中.

如果你看一下你的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>
        ...

所以道具“帧”的每一部分都是代表每个动画节点的表格.所以

if image == self.tmx_data.get_tile_image_by_gid(props['frames'][0].gid):

表示当前图像是动画平铺。在这种情况下，所有你需要做的就是在你的道具‘框架’表中的一块瓷砖上进行blit。如您所见，我创建了一个current_anim_index属性。我在update方法中改变了它。我确保这在我的游戏循环中被调用。帧参数的范围从0到60 (是，60 FPS)。和getFrequencyList(6)返回一个类似于0，10，20，30，40，50的表。