问题描述
所以我已经在一个项目上工作了一段时间,我真的很想在游戏中加入动画图块。我用 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,4,6,13,15,12,11,25,5,22,23,9,7,24,3,27,8,16,17,18,26,10,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
解决方法
我今天找这个很开心。而且毕竟没那么复杂。
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] 的表。