gdcore-tools 2.0.0-beta2 → 2.0.0-beta4

package/dist/Runtime/Extensions/TileMap/JsExtension.js

@@ -164,18 +164,11 @@ const defineTileMap = function (extension, _, gd) {
     objectContent,
     instance,
     propertyName,
-    newValue,
-    project,
-    layout
+    newValue
   ) {
     return false;
   };
-  objectTileMap.getInitialInstanceProperties = function (
-    content,
-    instance,
-    project,
-    layout
-  ) {
+  objectTileMap.getInitialInstanceProperties = function (content, instance) {
     var instanceProperties = new gd.MapStringPropertyDescriptor();
     return instanceProperties;
   };
@@ -183,7 +176,7 @@ const defineTileMap = function (extension, _, gd) {
   const object = extension
     .addObject(
       'TileMap',
-      _('Tilemap'),
+      _('External Tilemap (Tiled/LDtk)'),
       _(
         'Displays a tiled-based map, made with the Tiled editor (https://www.mapeditor.org/) or the LDtk editor (https://ldtk.io/).'
       ),
@@ -598,6 +591,471 @@ const defineTileMap = function (extension, _, gd) {
     .setFunctionName('setHeight');
 };
 
+/**
+ * @param {gd.PlatformExtension} extension
+ * @param {(translationSource: string) => string} _
+ * @param {GDNamespace} gd
+ */
+const defineSimpleTileMap = function (extension, _, gd) {
+  var objectSimpleTileMap = new gd.ObjectJsImplementation();
+  objectSimpleTileMap.updateProperty = function (
+    objectContent,
+    propertyName,
+    newValue
+  ) {
+    if (propertyName === 'atlasImage') {
+      objectContent.atlasImage = newValue;
+      return true;
+    }
+    if (propertyName === 'columnCount') {
+      objectContent.columnCount = parseFloat(newValue);
+      return true;
+    }
+    if (propertyName === 'rowCount') {
+      objectContent.rowCount = parseFloat(newValue);
+      return true;
+    }
+    if (propertyName === 'tileSize') {
+      objectContent.tileSize = parseFloat(newValue);
+      return true;
+    }
+    if (propertyName === 'tilesWithHitBox') {
+      objectContent.tilesWithHitBox = newValue;
+      return true;
+    }
+
+    return false;
+  };
+  objectSimpleTileMap.getProperties = function (objectContent) {
+    var objectProperties = new gd.MapStringPropertyDescriptor();
+
+    objectProperties.set(
+      'columnCount',
+      new gd.PropertyDescriptor((objectContent.columnCount || 4).toString())
+        .setType('number')
+        .setLabel(_('Columns'))
+        .setDescription(_('Number of columns.'))
+        .setHidden(true)
+    );
+    objectProperties.set(
+      'rowCount',
+      new gd.PropertyDescriptor((objectContent.rowCount || 4).toString())
+        .setType('number')
+        .setLabel(_('Rows'))
+        .setDescription(_('Number of rows.'))
+        .setHidden(true)
+    );
+    objectProperties.set(
+      'tileSize',
+      new gd.PropertyDescriptor((objectContent.tileSize || 8).toString())
+        .setType('number')
+        .setLabel(_('Tile size'))
+        .setDescription(_('Tile size in pixels.'))
+    );
+    objectProperties.set(
+      'tilesWithHitBox',
+      new gd.PropertyDescriptor(objectContent.tilesWithHitBox || '')
+        .setType('string')
+        .setLabel(_('Tile ids with hit box'))
+        .setDescription(
+          _('The list of tile ids with a hit box (separated by commas).')
+        )
+        .setHidden(true)
+    );
+
+    objectProperties.set(
+      'atlasImage',
+      new gd.PropertyDescriptor(objectContent.atlasImage)
+        .setType('resource')
+        .addExtraInfo('image')
+        .setLabel(_('Atlas image'))
+        .setDescription(_('The Atlas image containing the tileset.'))
+    );
+
+    return objectProperties;
+  };
+  objectSimpleTileMap.setRawJSONContent(
+    JSON.stringify({
+      atlasImage: '',
+      rowCount: 1,
+      columnCount: 1,
+      tileSize: 8,
+      tilesWithHitBox: '',
+    })
+  );
+
+  objectSimpleTileMap.updateInitialInstanceProperty = function (
+    instance,
+    propertyName,
+    newValue
+  ) {
+    if (propertyName === 'tilemap') {
+      instance.setRawStringProperty('tilemap', newValue);
+      return true;
+    }
+    return false;
+  };
+
+  objectSimpleTileMap.getInitialInstanceProperties = function (
+    objectContent,
+    instance
+  ) {
+    var instanceProperties = new gd.MapStringPropertyDescriptor();
+
+    instanceProperties
+      .getOrCreate('tilemap')
+      .setValue(instance.getRawStringProperty('tileMap'))
+      .setType('string')
+      .setLabel('Tilemap')
+      .setHidden(true);
+
+    return instanceProperties;
+  };
+
+  const object = extension
+    .addObject(
+      'SimpleTileMap',
+      _('Tile map'),
+      _('Displays a tiled-based map.'),
+      'JsPlatform/Extensions/tile_map.svg',
+      objectSimpleTileMap
+    )
+    .setCategoryFullName(_('General'))
+    .addDefaultBehavior('EffectCapability::EffectBehavior')
+    .addDefaultBehavior('ResizableCapability::ResizableBehavior')
+    .addDefaultBehavior('ScalableCapability::ScalableBehavior')
+    .addDefaultBehavior('OpacityCapability::OpacityBehavior')
+    .setIncludeFile('Extensions/TileMap/simpletilemapruntimeobject.js')
+    .addIncludeFile('Extensions/TileMap/TileMapRuntimeManager.js')
+    .addIncludeFile('Extensions/TileMap/tilemapruntimeobject-pixi-renderer.js')
+    .addIncludeFile('Extensions/TileMap/pixi-tilemap/dist/pixi-tilemap.umd.js')
+    .addIncludeFile('Extensions/TileMap/collision/TransformedTileMap.js')
+    .addIncludeFile('Extensions/TileMap/pako/dist/pako.min.js')
+    .addIncludeFile('Extensions/TileMap/helper/TileMapHelper.js');
+
+  object
+    .addExpression(
+      'TilesetColumnCount',
+      _('Tileset column count'),
+      _('Get the number of column in the tileset.'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .setFunctionName('getTilesetColumnCount');
+
+  object
+    .addExpression(
+      'TilesetRowCount',
+      _('Tileset row count'),
+      _('Get the number of row in the tileset.'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .setFunctionName('getTilesetRowCount');
+
+  object
+    .addExpression(
+      'TileCenterX',
+      _('Scene X coordinate of tile'),
+      _('Get the scene X position of the center of the tile.'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .setFunctionName('getSceneXCoordinateOfTileCenter');
+
+  object
+    .addExpression(
+      'TileCenterY',
+      _('Scene Y coordinate of tile'),
+      _('Get the scene Y position of the center of the tile.'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .setFunctionName('getSceneYCoordinateOfTileCenter');
+
+  object
+    .addExpression(
+      'GridX',
+      _('Tile map grid column coordinate'),
+      _(
+        'Get the grid column coordinates in the tile map corresponding to the scene coordinates.'
+      ),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .setFunctionName('getColumnIndexAtPosition');
+
+  object
+    .addExpression(
+      'GridY',
+      _('Tile map grid row coordinate'),
+      _(
+        'Get the grid row coordinates in the tile map corresponding to the scene coordinates.'
+      ),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .setFunctionName('getRowIndexAtPosition');
+
+  object
+    .addExpressionAndConditionAndAction(
+      'number',
+      'TileIdAtPosition',
+      _('Tile (at position)'),
+      _('the id of the tile at the scene coordinates'),
+      _('the tile id at scene coordinates _PARAM3_ ; _PARAM4_'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .useStandardParameters('number', gd.ParameterOptions.makeNewOptions())
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .setFunctionName('setTileAtPosition')
+    .setGetter('getTileAtPosition');
+
+  object
+    .addAction(
+      'FlipTileOnYAtPosition',
+      _('Flip tile vertically (at position)'),
+      _('Flip tile vertically at scene coordinates.'),
+      _(
+        'Flip tile vertically at scene coordinates _PARAM1_ ; _PARAM2_: _PARAM3_'
+      ),
+      _('Effects'),
+      'res/actions/flipY24.png',
+      'res/actions/flipY.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .addParameter('yesorno', _('Flip vertically'), '', false)
+    .setDefaultValue('false')
+    .setFunctionName('flipTileOnYAtPosition');
+
+  object
+    .addAction(
+      'FlipTileOnXAtPosition',
+      _('Flip tile horizontally (at position)'),
+      _('Flip tile horizontally at scene coordinates.'),
+      _(
+        'Flip tile horizontally at scene coordinates _PARAM1_ ; _PARAM2_: _PARAM3_'
+      ),
+      _('Effects'),
+      'res/actions/flipX24.png',
+      'res/actions/flipX.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .addParameter('yesorno', _('Flip horizontally'), '', false)
+    .setDefaultValue('false')
+    .setFunctionName('flipTileOnXAtPosition');
+
+  object
+    .addAction(
+      'RemoveTileAtPosition',
+      _('Remove tile (at position)'),
+      _('Remove the tile at the scene coordinates.'),
+      _('Remove tile at scene coordinates _PARAM1_ ; _PARAM2_'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('removeTileAtPosition');
+
+  object
+    .addExpressionAndConditionAndAction(
+      'number',
+      'TileIdAtGrid',
+      _('Tile (on the grid)'),
+      _('the id of the tile at the grid coordinates'),
+      _('the tile id at grid coordinates _PARAM3_ ; _PARAM4_'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .useStandardParameters('number', gd.ParameterOptions.makeNewOptions())
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .setFunctionName('setTileAtGridCoordinates')
+    .setGetter('getTileAtGridCoordinates');
+
+  object
+    .addAction(
+      'FlipTileOnYAtGridCoordinates',
+      _('Flip tile vertically (on the grid)'),
+      _('Flip tile vertically at grid coordinates.'),
+      _(
+        'Flip tile vertically at grid coordinates _PARAM1_ ; _PARAM2_: _PARAM3_'
+      ),
+      _('Effects'),
+      'res/actions/flipY24.png',
+      'res/actions/flipY.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .addParameter('yesorno', _('Flip vertically'), '', false)
+    .setDefaultValue('false')
+    .setFunctionName('flipTileOnYAtGridCoordinates');
+
+  object
+    .addAction(
+      'FlipTileOnXAtGridCoordinates',
+      _('Flip tile horizontally (on the grid)'),
+      _('Flip tile horizontally at grid coordinates.'),
+      _(
+        'Flip tile horizontally at grid coordinates _PARAM1_ ; _PARAM2_: _PARAM3_'
+      ),
+      _('Effects'),
+      'res/actions/flipX24.png',
+      'res/actions/flipX.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .addParameter('yesorno', _('Flip horizontally'), '', false)
+    .setDefaultValue('false')
+    .setFunctionName('flipTileOnXAtGridCoordinates');
+
+  object
+    .addAction(
+      'RemoveTileAtGridCoordinates',
+      _('Remove tile (on the grid)'),
+      _('Remove the tile at the grid coordinates.'),
+      _('Remove tile at grid coordinates _PARAM1_ ; _PARAM2_'),
+      '',
+      'JsPlatform/Extensions/tile_map.svg',
+      'JsPlatform/Extensions/tile_map.svg'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('removeTileAtGridCoordinates');
+
+  object
+    .addCondition(
+      'IsTileFlippedOnXAtPosition',
+      _('Tile flipped horizontally (at position)'),
+      _('Check if tile at scene coordinates is flipped horizontally.'),
+      _(
+        'The tile at scene coordinates _PARAM1_ ; _PARAM2_ is flipped horizontally'
+      ),
+      _('Effects'),
+      'res/actions/flipX24.png',
+      'res/actions/flipX.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('isTileFlippedOnXAtPosition');
+
+  object
+    .addCondition(
+      'IsTileFlippedOnYAtPosition',
+      _('Tile flipped vertically (at position)'),
+      _('Check if tile at scene coordinates is flipped vertically.'),
+      _(
+        'The tile at scene coordinates _PARAM1_ ; _PARAM2_ is flipped vertically'
+      ),
+      _('Effects'),
+      'res/actions/flipY24.png',
+      'res/actions/flipY.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Position X'), '', false)
+    .addParameter('number', _('Position Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('isTileFlippedOnYAtPosition');
+
+  object
+    .addCondition(
+      'IsTileFlippedOnXAtGridCoordinates',
+      _('Tile flipped horizontally (on the grid)'),
+      _('Check if tile at grid coordinates is flipped horizontally.'),
+      _(
+        'The tile at grid coordinates _PARAM1_ ; _PARAM2_ is flipped horizontally'
+      ),
+      _('Effects'),
+      'res/actions/flipX24.png',
+      'res/actions/flipX.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('isTileFlippedOnXAtGridCoordinates');
+
+  object
+    .addCondition(
+      'IsTileFlippedOnYAtGridCoordinates',
+      _('Tile flipped vertically (on the grid)'),
+      _('Check if tile at grid coordinates is flipped vertically.'),
+      _(
+        'The tile at grid coordinates _PARAM1_ ; _PARAM2_ is flipped vertically'
+      ),
+      _('Effects'),
+      'res/actions/flipY24.png',
+      'res/actions/flipY.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .addParameter('number', _('Grid X'), '', false)
+    .addParameter('number', _('Grid Y'), '', false)
+    .getCodeExtraInformation()
+    .setFunctionName('isTileFlippedOnYAtGridCoordinates');
+
+  object
+    .addExpressionAndConditionAndAction(
+      'number',
+      'GridRowCount',
+      _('Grid row count'),
+      _('the grid row count in the tile map'),
+      _('the grid row count'),
+      _('Size'),
+      'res/actions/scaleHeight24_black.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .useStandardParameters('number', gd.ParameterOptions.makeNewOptions())
+    .setFunctionName('setGridRowCount')
+    .setGetter('getGridRowCount');
+
+  object
+    .addExpressionAndConditionAndAction(
+      'number',
+      'GridColumnCount',
+      _('Grid column count'),
+      _('the grid column count in the tile map'),
+      _('the grid column count'),
+      _('Size'),
+      'res/actions/scaleWidth24_black.png'
+    )
+    .addParameter('object', _('Tile map'), 'SimpleTileMap', false)
+    .useStandardParameters('number', gd.ParameterOptions.makeNewOptions())
+    .setFunctionName('setGridColumnCount')
+    .setGetter('getGridColumnCount');
+};
+
 /**
  * @param {gd.PlatformExtension} extension
  * @param {(translationSource: string) => string} _
@@ -761,17 +1219,13 @@ const defineCollisionMask = function (extension, _, gd) {
     objectContent,
     instance,
     propertyName,
-    newValue,
-    project,
-    layout
+    newValue
   ) {
     return false;
   };
   collisionMaskObject.getInitialInstanceProperties = function (
     content,
-    instance,
-    project,
-    layout
+    instance
   ) {
     var instanceProperties = new gd.MapStringPropertyDescriptor();
     return instanceProperties;
@@ -780,7 +1234,7 @@ const defineCollisionMask = function (extension, _, gd) {
   const object = extension
     .addObject(
       'CollisionMask',
-      _('Tilemap collision mask'),
+      _('External Tilemap (Tiled/LDtk) collision mask'),
       _('Invisible object handling collisions with parts of a tilemap.'),
       'JsPlatform/Extensions/tile_map_collision_mask32.svg',
       collisionMaskObject
@@ -1031,7 +1485,7 @@ module.exports = {
     extension
       .setExtensionInformation(
         'TileMap',
-        _('Tilemap'),
+        _('Tile map'),
         _(
           "The Tilemap object can be used to display tile-based objects. It's a good way to create maps for RPG, strategy games or create objects by assembling tiles, useful for platformer, retro-looking games, etc..."
         ),
@@ -1046,6 +1500,7 @@ module.exports = {
       .setIcon('JsPlatform/Extensions/tile_map.svg');
 
     defineTileMap(extension, _, gd);
+    defineSimpleTileMap(extension, _, gd);
     defineCollisionMask(extension, _, gd);
 
     return extension;
@@ -1141,7 +1596,6 @@ module.exports = {
     class RenderedTileMapInstance extends RenderedInstance {
       constructor(
         project,
-        layout,
         instance,
         associatedObjectConfiguration,
         pixiContainer,
@@ -1149,7 +1603,6 @@ module.exports = {
       ) {
         super(
           project,
-          layout,
           instance,
           associatedObjectConfiguration,
           pixiContainer,
@@ -1424,12 +1877,371 @@ module.exports = {
     );
 
     /**
-     * Renderer for instances of TileMap inside the IDE.
+     * Renderer for instances of SimpleTileMap inside the IDE.
+     */
+    class RenderedSimpleTileMapInstance extends RenderedInstance {
+      _placeholderTextPixiObject = new PIXI.Text(
+        'Select this instance\nto start painting',
+        new PIXI.TextStyle({
+          fontFamily: 'Arial',
+          fontSize: 16,
+          align: 'center',
+          padding: 5,
+        })
+      );
+      _placeholderImagePixiObject = new PIXI.Sprite(
+        PIXI.Texture.from(
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAADFBMVEUAAAAkMoYsfqH///8FP6xgAAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAjSURBVBjTpcYxAQAADIMwTGISlTsmoVcCQClzSmvNo2ueGnMajGpBwI5BnwAAAABJRU5ErkJggg=='
+        )
+      );
+      _placeholderPixiObject = new PIXI.Container();
+
+      constructor(
+        project,
+        instance,
+        associatedObjectConfiguration,
+        pixiContainer,
+        pixiResourcesLoader
+      ) {
+        super(
+          project,
+          instance,
+          associatedObjectConfiguration,
+          pixiContainer,
+          pixiResourcesLoader
+        );
+
+        // This setting allows tile maps with more than 16K tiles.
+        Tilemap.settings.use32bitIndex = true;
+
+        this.tileMapPixiObject = new Tilemap.CompositeTilemap();
+        this._pixiObject = new PIXI.Container();
+        this._pixiObject.addChild(this.tileMapPixiObject);
+        this._editableTileMap = null;
+
+        // Implement `containsPoint` so that we can set `interactive` to true and
+        // the Tilemap will properly emit events when hovered/clicked.
+        // By default, this is not implemented in pixi-tilemap.
+        this._pixiObject.containsPoint = (position) => {
+          // Turns the world position to the local object coordinates
+          const localPosition = new PIXI.Point();
+          if (this.tileMapPixiObject.visible) {
+            this.tileMapPixiObject.worldTransform.applyInverse(
+              position,
+              localPosition
+            );
+          } else {
+            this._placeholderImagePixiObject.worldTransform.applyInverse(
+              position,
+              localPosition
+            );
+          }
+
+          return (
+            localPosition.x >= 0 &&
+            localPosition.x < this.width &&
+            localPosition.y >= 0 &&
+            localPosition.y < this.height
+          );
+        };
+        this._placeholderTextPixiObject.interactive = true;
+        this._placeholderImagePixiObject.interactive = true;
+        this._placeholderTextPixiObject.anchor.x = 0.5;
+        this._placeholderTextPixiObject.anchor.y = 0.5;
+        this._placeholderTextPixiObject.y = 30;
+        this._placeholderImagePixiObject.y = -30;
+        this._placeholderImagePixiObject.x = -16;
+        this._placeholderPixiObject.addChild(this._placeholderTextPixiObject);
+        this._placeholderPixiObject.addChild(this._placeholderImagePixiObject);
+        this._pixiObject.addChild(this._placeholderPixiObject);
+        this._pixiContainer.addChild(this._pixiObject);
+        this.width = 48;
+        this.height = 48;
+        this._objectName = instance.getObjectName();
+        this.update();
+        this.updateTileMap();
+      }
+
+      onRemovedFromScene() {
+        super.onRemovedFromScene();
+        // Keep textures because they are shared by all tile maps.
+        this._pixiObject.destroy(false);
+      }
+
+      onLoadingError() {
+        this.errorPixiObject =
+          this.errorPixiObject ||
+          new PIXI.Sprite(this._pixiResourcesLoader.getInvalidPIXITexture());
+        this._pixiContainer.addChild(this.errorPixiObject);
+        this._pixiObject = this.errorPixiObject;
+      }
+
+      onLoadingSuccess() {
+        if (this.errorPixiObject) {
+          this._pixiContainer.removeChild(this.errorPixiObject);
+          this.errorPixiObject = null;
+          this._pixiObject = this.tileMapPixiObject;
+        }
+      }
+
+      /**
+       * Return the path to the thumbnail of the specified object.
+       */
+      static getThumbnail(project, resourcesLoader, objectConfiguration) {
+        const atlasImageResourceName = objectConfiguration
+          .getProperties()
+          .get('atlasImage')
+          .getValue();
+        return resourcesLoader.getResourceFullUrl(
+          project,
+          atlasImageResourceName,
+          {}
+        );
+      }
+
+      getEditableTileMap() {
+        return this._editableTileMap;
+      }
+
+      /**
+       * This is used to reload the Tilemap
+       */
+      updateTileMap() {
+        const atlasImageResourceName = this._associatedObjectConfiguration
+          .getProperties()
+          .get('atlasImage')
+          .getValue();
+        const tilemapAsJSObject = JSON.parse(
+          this._instance.getRawStringProperty('tilemap') || '{}'
+        );
+
+        const tileSize = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('tileSize')
+            .getValue(),
+          10
+        );
+        const columnCount = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('columnCount')
+            .getValue(),
+          10
+        );
+        const rowCount = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('rowCount')
+            .getValue(),
+          10
+        );
+
+        const atlasTexture = this._pixiResourcesLoader.getPIXITexture(
+          this._project,
+          atlasImageResourceName
+        );
+
+        const loadTileMap = () => {
+          /** @type {TileMapHelper.TileMapManager} */
+          const manager = TilemapHelper.TileMapManager.getManager(
+            this._project
+          );
+          manager.getOrLoadSimpleTileMap(
+            tilemapAsJSObject,
+            this._objectName,
+            tileSize,
+            columnCount,
+            rowCount,
+            (tileMap) => {
+              if (!tileMap) {
+                this.onLoadingError();
+                console.error('Could not parse tilemap.');
+                return;
+              }
+
+              this._editableTileMap = tileMap;
+
+              manager.getOrLoadSimpleTileMapTextureCache(
+                (textureName) =>
+                  this._pixiResourcesLoader.getPIXITexture(
+                    this._project,
+                    textureName
+                  ),
+                atlasImageResourceName,
+                tileSize,
+                columnCount,
+                rowCount,
+                (
+                  /** @type {TileMapHelper.TileTextureCache | null} */
+                  textureCache
+                ) => {
+                  this.onLoadingSuccess();
+                  if (!this._editableTileMap) return;
+
+                  this.width = this._editableTileMap.getWidth();
+                  this.height = this._editableTileMap.getHeight();
+                  TilemapHelper.PixiTileMapHelper.updatePixiTileMap(
+                    this.tileMapPixiObject,
+                    this._editableTileMap,
+                    textureCache,
+                    'all', // No notion of visibility on simple tile maps.
+                    0 // Only one layer is used on simple tile maps.
+                  );
+                }
+              );
+            }
+          );
+        };
+
+        if (atlasTexture.valid) {
+          loadTileMap();
+        } else {
+          // Wait for the atlas image to load.
+          atlasTexture.once('update', () => {
+            loadTileMap();
+          });
+        }
+      }
+
+      updatePixiTileMap() {
+        const atlasImageResourceName = this._associatedObjectConfiguration
+          .getProperties()
+          .get('atlasImage')
+          .getValue();
+
+        const tileSize = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('tileSize')
+            .getValue(),
+          10
+        );
+        const columnCount = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('columnCount')
+            .getValue(),
+          10
+        );
+        const rowCount = parseInt(
+          this._associatedObjectConfiguration
+            .getProperties()
+            .get('rowCount')
+            .getValue(),
+          10
+        );
+        /** @type {TileMapHelper.TileMapManager} */
+        const manager = TilemapHelper.TileMapManager.getManager(this._project);
+
+        manager.getOrLoadSimpleTileMapTextureCache(
+          (textureName) =>
+            this._pixiResourcesLoader.getPIXITexture(
+              this._project,
+              textureName
+            ),
+          atlasImageResourceName,
+          tileSize,
+          columnCount,
+          rowCount,
+          (
+            /** @type {TileMapHelper.TileTextureCache | null} */
+            textureCache
+          ) => {
+            this.onLoadingSuccess();
+            if (!this._editableTileMap) return;
+
+            this.width = this._editableTileMap.getWidth();
+            this.height = this._editableTileMap.getHeight();
+            TilemapHelper.PixiTileMapHelper.updatePixiTileMap(
+              this.tileMapPixiObject,
+              this._editableTileMap,
+              textureCache,
+              'all',
+              0
+            );
+          }
+        );
+      }
+
+      /**
+       * This is called to update the PIXI object on the scene editor
+       */
+      update() {
+        const isTileMapEmpty = this._editableTileMap
+          ? this._editableTileMap.isEmpty()
+          : false;
+        let objectToChange;
+        if (isTileMapEmpty) {
+          this._placeholderPixiObject.visible = true;
+          this.tileMapPixiObject.visible = false;
+          objectToChange = this._placeholderPixiObject;
+        } else {
+          this._placeholderPixiObject.visible = false;
+          this.tileMapPixiObject.visible = true;
+          objectToChange = this.tileMapPixiObject;
+        }
+
+        if (!isTileMapEmpty) {
+          // Don't change size of placeholder object.
+          if (this._instance.hasCustomSize()) {
+            objectToChange.scale.x = this.getCustomWidth() / this.width;
+            objectToChange.scale.y = this.getCustomHeight() / this.height;
+          } else {
+            objectToChange.scale.x = 1;
+            objectToChange.scale.y = 1;
+          }
+
+          // Place the center of rotation in the center of the object. Because pivot position in Pixi
+          // is in the **local coordinates of the object**, we need to find back the original width
+          // and height of the object before scaling (then divide by 2 to find the center)
+          const originalWidth = this.width;
+          const originalHeight = this.height;
+          objectToChange.pivot.x = originalWidth / 2;
+          objectToChange.pivot.y = originalHeight / 2;
+        }
+        // Modifying the pivot position also has an impact on the transform. The instance (X,Y) position
+        // of this object refers to the top-left point, but now in Pixi, as we changed the pivot, the Pixi
+        // object (X,Y) position refers to the center. So we add an offset to convert from top-left to center.
+        objectToChange.x =
+          this._instance.getX() +
+          objectToChange.pivot.x * objectToChange.scale.x;
+        objectToChange.y =
+          this._instance.getY() +
+          objectToChange.pivot.y * objectToChange.scale.y;
+
+        // Rotation works as intended because we put the pivot in the center
+        objectToChange.rotation = RenderedInstance.toRad(
+          this._instance.getAngle()
+        );
+      }
+
+      /**
+       * Return the width of the instance, when it's not resized.
+       */
+      getDefaultWidth() {
+        return this.width;
+      }
+
+      /**
+       * Return the height of the instance, when it's not resized.
+       */
+      getDefaultHeight() {
+        return this.height;
+      }
+    }
+
+    objectsRenderingService.registerInstanceRenderer(
+      'TileMap::SimpleTileMap',
+      RenderedSimpleTileMapInstance
+    );
+
+    /**
+     * Renderer for instances of TileMap collision mask inside the IDE.
      */
     class RenderedCollisionMaskInstance extends RenderedInstance {
       constructor(
         project,
-        layout,
         instance,
         associatedObjectConfiguration,
         pixiContainer,
@@ -1437,7 +2249,6 @@ module.exports = {
       ) {
         super(
           project,
-          layout,
           instance,
           associatedObjectConfiguration,
           pixiContainer,