diff --git a/doc/components.md b/doc/components.md index 076d4d640..0cbdd3b58 100644 --- a/doc/components.md +++ b/doc/components.md @@ -237,17 +237,19 @@ An example of how to use the API can be found [here](/doc/examples/tiled). # Isometric Tile Map Component -This component allows you to render an isometric map based off of a cartesian matrix of blocks and an isometric tileset. +This component allows you to render an isometric map based on a cartesian matrix of blocks and an isometric tileset. A simple example on how to use it: ```dart + // creates a tileset, the block ids are automatically assigned sequentially starting at 0, from left to right and then top to bottom. final tileset = await IsometricTileset.load('tileset.png', 32); + // each element is a block id, -1 means nothing final matrix = [[0, 1, 0], [1, 0, 0], [1, 1, 1]]; add(IsometricTileMapComponent(tileset, matrix)); ``` -It also provides methods to converting coordinates so you can handle clicks, hovers, render entities on top of tiles, add a selector, etc. +It also provides methods for converting coordinates so you can handle clicks, hovers, render entities on top of tiles, add a selector, etc. A more in-depth example can be found [here](/doc/examples/isometric). diff --git a/doc/examples/isometric/.gitignore b/doc/examples/isometric/.gitignore deleted file mode 100644 index 07488ba61..000000000 --- a/doc/examples/isometric/.gitignore +++ /dev/null @@ -1,70 +0,0 @@ -# Miscellaneous -*.class -*.log -*.pyc -*.swp -.DS_Store -.atom/ -.buildlog/ -.history -.svn/ - -# IntelliJ related -*.iml -*.ipr -*.iws -.idea/ - -# Visual Studio Code related -.vscode/ - -# Flutter/Dart/Pub related -**/doc/api/ -.dart_tool/ -.flutter-plugins -.packages -.pub-cache/ -.pub/ -/build/ - -# Android related -**/android/**/gradle-wrapper.jar -**/android/.gradle -**/android/captures/ -**/android/gradlew -**/android/gradlew.bat -**/android/local.properties -**/android/**/GeneratedPluginRegistrant.java - -# iOS/XCode related -**/ios/**/*.mode1v3 -**/ios/**/*.mode2v3 -**/ios/**/*.moved-aside -**/ios/**/*.pbxuser -**/ios/**/*.perspectivev3 -**/ios/**/*sync/ -**/ios/**/.sconsign.dblite -**/ios/**/.tags* -**/ios/**/.vagrant/ -**/ios/**/DerivedData/ -**/ios/**/Icon? -**/ios/**/Pods/ -**/ios/**/.symlinks/ -**/ios/**/profile -**/ios/**/xcuserdata -**/ios/.generated/ -**/ios/Flutter/App.framework -**/ios/Flutter/Flutter.framework -**/ios/Flutter/Generated.xcconfig -**/ios/Flutter/app.flx -**/ios/Flutter/app.zip -**/ios/Flutter/flutter_assets/ -**/ios/ServiceDefinitions.json -**/ios/Runner/GeneratedPluginRegistrant.* - -# Exceptions to above rules. -!**/ios/**/default.mode1v3 -!**/ios/**/default.mode2v3 -!**/ios/**/default.pbxuser -!**/ios/**/default.perspectivev3 -!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages diff --git a/doc/examples/isometric/README.md b/doc/examples/isometric/README.md index e15c6fe43..0e9837f20 100644 --- a/doc/examples/isometric/README.md +++ b/doc/examples/isometric/README.md @@ -1,3 +1,3 @@ # isometric -A FLame game showcasing how to use the Isometric Tile Map component. +A Flame game showcasing how to use the Isometric Tile Map component. diff --git a/lib/components/isometric_tile_map_component.dart b/lib/components/isometric_tile_map_component.dart index e72b711ef..8d2a8aa31 100644 --- a/lib/components/isometric_tile_map_component.dart +++ b/lib/components/isometric_tile_map_component.dart @@ -27,8 +27,12 @@ class IsometricTileset { IsometricTileset(this.tileset, this.size); /// Compute the number of columns the image has - /// by using the image width and tile width. - int get cols => tileset.width ~/ size; + /// by using the image width and tile size. + int get columns => tileset.width ~/ size; + + /// Compute the number of rows the image has + /// by using the image height and tile size. + int get rows => tileset.height ~/ size; /// Get a sprite to render one specific tile given its id. /// @@ -39,8 +43,8 @@ class IsometricTileset { } Sprite _computeTile(int tileId) { - final i = tileId % cols; - final j = tileId ~/ cols; + final i = tileId % columns; + final j = tileId ~/ columns; final s = size.toDouble(); return Sprite.fromImage(tileset, x: s * i, y: s * j, width: s, height: s); }