feat: support image layer

adrien-bon · Dec 14, 2024 · 1860ac1 · 1860ac1
1 parent 90aa67b
commit 1860ac1
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ A [migration guide](https://adrien-bon.github.io/bevy_ecs_tiled/migrations/v0_5.
 ### Features
 
 - Update to Bevy 0.15
+- Support Tiled image layers (#16)
 
 ### Changed
 

diff --git a/assets/bevy_icon.png b/assets/bevy_icon.png
diff --git a/assets/finite.tmx b/assets/finite.tmx
@@ -1,34 +1,37 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.11.0" orientation="orthogonal" renderorder="right-down" width="10" height="10" tilewidth="32" tileheight="32" infinite="0" nextlayerid="6" nextobjectid="9">
- <tileset firstgid="1" source="Tileset1.tsx"/>
- <layer id="1" name="Tile Layer 1" width="10" height="10">
-  <data encoding="csv">
-2,2,2,2,2,2,2,2,2,2,
-2,0,0,0,0,0,0,0,0,2,
-2,0,7,7,7,7,7,7,7,2,
-2,0,0,0,0,0,0,0,0,2,
-2,0,0,0,5,5,0,0,0,2,
-2,5,5,0,0,0,0,5,5,2,
-2,0,0,0,0,0,0,0,0,2,
-2,3,3,3,3,3,3,3,0,2,
-2,0,0,0,0,0,0,0,0,2,
-2,2,2,2,2,2,2,2,2,2
-</data>
- </layer>
- <objectgroup id="5" name="Collisions">
-  <object id="1" x="0" y="2" width="319" height="29"/>
-  <object id="2" x="1" y="289" width="319" height="29"/>
-  <object id="3" x="33" y="226" width="254" height="61">
-   <ellipse/>
-  </object>
-  <object id="5" x="223" y="31" width="63" height="252">
-   <ellipse/>
-  </object>
-  <object id="6" x="2" y="36" width="116" height="78">
-   <ellipse/>
-  </object>
-  <object id="8" x="33" y="161">
-   <polygon points="0,0 96,-31 158,-31 158,0 63,31 1,31"/>
-  </object>
- </objectgroup>
-</map>
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.11.0" orientation="orthogonal" renderorder="right-down" width="10" height="10" tilewidth="32" tileheight="32" infinite="0" nextlayerid="7" nextobjectid="9">
+ <tileset firstgid="1" source="Tileset1.tsx"/>
+ <imagelayer id="6" name="Image Layer 1" offsetx="32.6667" offsety="112.667">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
+ <layer id="1" name="Tile Layer 1" width="10" height="10">
+  <data encoding="csv">
+2,2,2,2,2,2,2,2,2,2,
+2,0,0,0,0,0,0,0,0,2,
+2,0,7,7,7,7,7,7,7,2,
+2,0,0,0,0,0,0,0,0,2,
+2,0,0,0,5,5,0,0,0,2,
+2,5,5,0,0,0,0,5,5,2,
+2,0,0,0,0,0,0,0,0,2,
+2,3,3,3,3,3,3,3,0,2,
+2,0,0,0,0,0,0,0,0,2,
+2,2,2,2,2,2,2,2,2,2
+</data>
+ </layer>
+ <objectgroup id="5" name="Collisions">
+  <object id="1" x="0" y="2" width="319" height="29"/>
+  <object id="2" x="1" y="289" width="319" height="29"/>
+  <object id="3" x="33" y="226" width="254" height="61">
+   <ellipse/>
+  </object>
+  <object id="5" x="223" y="31" width="63" height="252">
+   <ellipse/>
+  </object>
+  <object id="6" x="2" y="36" width="116" height="78">
+   <ellipse/>
+  </object>
+  <object id="8" x="33" y="161">
+   <polygon points="0,0 96,-31 158,-31 158,0 63,31 1,31"/>
+  </object>
+ </objectgroup>
+</map>
diff --git a/assets/hex_map_flat_top_even.tmx b/assets/hex_map_flat_top_even.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.10.2" orientation="hexagonal" renderorder="right-down" width="20" height="22" tilewidth="60" tileheight="52" infinite="0" hexsidelength="26" staggeraxis="x" staggerindex="even" nextlayerid="3" nextobjectid="6">
+<map version="1.10" tiledversion="1.11.0" orientation="hexagonal" renderorder="right-down" width="20" height="22" tilewidth="60" tileheight="52" infinite="0" hexsidelength="26" staggeraxis="x" staggerindex="even" nextlayerid="4" nextobjectid="6">
  <tileset firstgid="1" source="simple hex flat top.tsx"/>
+ <imagelayer id="3" name="Image Layer 1" offsetx="576.769" offsety="143.887">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="Tile Layer 1" width="20" height="22">
   <data encoding="csv">
 0,0,0,0,0,0,7,7,8,0,0,0,0,0,0,0,0,0,0,0,

diff --git a/assets/hex_map_flat_top_odd.tmx b/assets/hex_map_flat_top_odd.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.10.2" orientation="hexagonal" renderorder="right-down" width="20" height="20" tilewidth="60" tileheight="52" infinite="0" hexsidelength="26" staggeraxis="x" staggerindex="odd" nextlayerid="3" nextobjectid="5">
+<map version="1.10" tiledversion="1.11.0" orientation="hexagonal" renderorder="right-down" width="20" height="20" tilewidth="60" tileheight="52" infinite="0" hexsidelength="26" staggeraxis="x" staggerindex="odd" nextlayerid="4" nextobjectid="5">
  <tileset firstgid="1" source="simple hex flat top.tsx"/>
+ <imagelayer id="3" name="Image Layer 1" offsetx="258.862" offsety="54.4388">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="Tile Layer 1" width="20" height="20">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,

diff --git a/assets/hex_map_pointy_top_even.tmx b/assets/hex_map_pointy_top_even.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.10.2" orientation="hexagonal" renderorder="right-down" width="10" height="10" tilewidth="16" tileheight="16" infinite="0" hexsidelength="8" staggeraxis="y" staggerindex="even" nextlayerid="5" nextobjectid="4">
+<map version="1.10" tiledversion="1.11.0" orientation="hexagonal" renderorder="right-down" width="10" height="10" tilewidth="16" tileheight="16" infinite="0" hexsidelength="8" staggeraxis="y" staggerindex="even" nextlayerid="7" nextobjectid="4">
  <tileset firstgid="1" source="drjamgo_hex_16x16.tsx"/>
+ <imagelayer id="6" name="Image Layer 1" offsetx="-36.6667" offsety="-68.6667">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="Tile Layer 1" width="10" height="10">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,

diff --git a/assets/hex_map_pointy_top_odd.tmx b/assets/hex_map_pointy_top_odd.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.11.0" orientation="hexagonal" renderorder="right-down" width="20" height="20" tilewidth="16" tileheight="16" infinite="0" hexsidelength="8" staggeraxis="y" staggerindex="odd" nextlayerid="4" nextobjectid="5">
+<map version="1.10" tiledversion="1.11.0" orientation="hexagonal" renderorder="right-down" width="20" height="20" tilewidth="16" tileheight="16" infinite="0" hexsidelength="8" staggeraxis="y" staggerindex="odd" nextlayerid="5" nextobjectid="5">
  <tileset firstgid="1" source="drjamgo_hex_16x16.tsx"/>
+ <imagelayer id="4" name="Image Layer 1" offsetx="134.27" offsety="-26.9557">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="TerrainLayer" width="20" height="20">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
@@ -28,20 +31,12 @@
  <objectgroup id="3" name="Object Layer ">
   <object id="1" name="Player spawn" x="98.0258" y="124.343" width="11.1064" height="7.24328">
    <properties>
-    <property name="SpawnInfos" type="class" propertytype="properties_basic::SpawnInfos">
-     <properties>
-      <property name="ty" propertytype="properties_basic::SpawnType" value="Player"/>
-     </properties>
-    </property>
+    <property name="SpawnInfos" type="class"/>
    </properties>
   </object>
   <object id="4" name="Enemy spawn" x="180.358" y="147.522" width="9.89915" height="9.65771">
    <properties>
-    <property name="SpawnInfos" type="class" propertytype="properties_basic::SpawnInfos">
-     <properties>
-      <property name="ty" propertytype="properties_basic::SpawnType" value="Enemy"/>
-     </properties>
-    </property>
+    <property name="SpawnInfos" type="class"/>
    </properties>
    <ellipse/>
   </object>

diff --git a/assets/isometric_diamond_map.tmx b/assets/isometric_diamond_map.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.11.0" orientation="isometric" renderorder="right-down" width="10" height="10" tilewidth="232" tileheight="110" infinite="0" nextlayerid="4" nextobjectid="6">
+<map version="1.10" tiledversion="1.11.0" orientation="isometric" renderorder="right-down" width="10" height="10" tilewidth="232" tileheight="110" infinite="0" nextlayerid="5" nextobjectid="6">
  <tileset firstgid="1" source="kenney-sketch-desert.tsx"/>
+ <imagelayer id="4" name="Image Layer 1" offsetx="1709.47" offsety="29.848">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="Tile Layer 1" width="10" height="10">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,

diff --git a/assets/isometric_staggered_map.tmx b/assets/isometric_staggered_map.tmx
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.10" tiledversion="1.10.2" orientation="staggered" renderorder="right-down" width="5" height="10" tilewidth="232" tileheight="110" infinite="0" staggeraxis="y" staggerindex="odd" nextlayerid="4" nextobjectid="7">
+<map version="1.10" tiledversion="1.11.0" orientation="staggered" renderorder="right-down" width="5" height="10" tilewidth="232" tileheight="110" infinite="0" staggeraxis="y" staggerindex="odd" nextlayerid="5" nextobjectid="7">
  <tileset firstgid="1" source="kenney-sketch-desert.tsx"/>
+ <imagelayer id="4" name="Image Layer 1" offsetx="911.855" offsety="-64.1731">
+  <image source="bevy_icon.png" width="256" height="256"/>
+ </imagelayer>
  <layer id="1" name="Tile Layer 1" width="5" height="10">
   <data encoding="csv">
 0,0,0,0,0,

diff --git a/src/components.rs b/src/components.rs
@@ -126,3 +126,8 @@ pub struct TiledMapTile;
 #[derive(Component)]
 #[require(Visibility, Transform)]
 pub struct TiledMapObject;
+
+/// Marker [Component] for a Tiled image
+#[derive(Component)]
+#[require(Visibility, Transform)]
+pub struct TiledMapImage;
diff --git a/src/lib.rs b/src/lib.rs
@@ -167,6 +167,7 @@ fn process_loaded_maps(
                 &mut tiled_id_storage,
                 render_settings,
                 tiled_settings,
+                &asset_server,
             );
 
             // Remove the respawn marker

diff --git a/src/loader.rs b/src/loader.rs
@@ -35,10 +35,11 @@ use crate::prelude::*;
 use bevy::{prelude::*, utils::HashMap};
 use bevy_ecs_tilemap::prelude::*;
 use tiled::{
-    ChunkData, FiniteTileLayer, InfiniteTileLayer, Layer, LayerType, ObjectLayer, Tile, TileId,
-    TileLayer,
+    ChunkData, FiniteTileLayer, ImageLayer, InfiniteTileLayer, Layer, LayerType, ObjectLayer, Tile,
+    TileId, TileLayer,
 };
 
+#[allow(clippy::too_many_arguments)]
 pub(super) fn load_map(
     commands: &mut Commands,
     map_entity: Entity,
@@ -47,6 +48,7 @@ pub(super) fn load_map(
     tiled_id_storage: &mut TiledIdStorage,
     render_settings: &TilemapRenderSettings,
     tiled_settings: &TiledMapSettings,
+    asset_server: &Res<AssetServer>,
 ) {
     commands.entity(map_entity).insert((
         Name::new(format!(
@@ -139,12 +141,12 @@ pub(super) fn load_map(
                 ));
                 warn!("Group layers are not yet implemented");
             }
-            LayerType::Image(_image_layer) => {
+            LayerType::Image(image_layer) => {
                 commands.entity(layer_entity).insert((
                     Name::new(format!("TiledMapImageLayer({})", layer.name)),
                     TiledMapImageLayer,
                 ));
-                warn!("Image layers are not yet implemented");
+                load_image_layer(commands, tiled_map, &layer_infos, image_layer, asset_server);
             }
         };
 
@@ -552,6 +554,38 @@ fn load_objects_layer(
     }
 }
 
+fn load_image_layer(
+    commands: &mut Commands,
+    tiled_map: &TiledMap,
+    layer_infos: &TiledLayerCreated,
+    image_layer: ImageLayer,
+    asset_server: &Res<AssetServer>,
+) {
+    let map_type = get_map_type(&tiled_map.map);
+    let grid_size = get_grid_size(&tiled_map.map);
+    let map_size = get_map_size(&tiled_map.map);
+
+    if let Some(image) = &image_layer.image {
+        let image_position =
+            from_tiled_coords_to_bevy(Vec2::splat(0.), &map_type, &map_size, &grid_size);
+        commands
+            .spawn((
+                Name::new(format!("Image({})", image.source.display())),
+                TiledMapImage,
+                Sprite {
+                    image: asset_server.load(image.source.clone()),
+                    ..Default::default()
+                },
+                Transform::from_xyz(
+                    image_position.x + image.width as f32 / 2.,
+                    image_position.y - image.height as f32 / 2.,
+                    0.,
+                ),
+            ))
+            .set_parent(layer_infos.layer);
+    }
+}
+
 fn get_animated_tile(tile: &Tile) -> Option<AnimatedTile> {
     let Some(animation_data) = &tile.animation else {
         return None;