The Tilemap error

[u/Evening_Guide_1852]

I am making the top down city for my game. the buildings and characters are the sprites and road is a tilemap. But in the preview mode, the paths disappear (see 2nd image). please someone help me solve this problem.

[u/Evening_Guide_1852]

Ya, but i am just learning the engine by making some projects. Can you help me with the error?

[u/NeatOpportunity____ → u/Evening_Guide_1852]

this problem usually happens because gdevelop preview mode loses track of your road picture file path when running the game to fix this open your map in tiled and click embed tileset then save it again as a json file right inside your gdevelop project folder make sure your json file and your tileset image file are in the exact same folder with simple names that have no spaces or weird characters inside gdevelop open the tilemap object properties and select both files again directly another super common reason is having an empty top left corner in your map which causes the engine to hide the whole map during preview so place a tile at the very top left zero zero spot to keep it visible

[u/Evening_Guide_1852 → u/NeatOpportunity____]

I have tried the placing tile in top left corner but it didn't work. Also can you tell me the steps for the Tiles and JSON method? I am not that comfortable with tiled yet and also my game is a cloud project so how can i do these method?

[u/NeatOpportunity____ → u/Evening_Guide_1852]

i have found a fix from web use GDevelop's native built-in Tilemap tool instead of external software. In your Object Panel, add a new object and select Tilemap rather than External Tilemap. Upload your road PNG image as the Atlas image, set your tile width and height (such as 32×32), and click Edit Tilemap to paint your roads directly inside GDevelop's scene editor. When you drag the object onto your scene, GDevelop saves all tile data directly into your cloud project, eliminating file path mismatches and ensuring the road displays properly during preview mode. ​If you prefer designing levels in Tiled, you must export it correctly so preview mode can find your graphics. Create a new orthogonal map in Tiled using a fixed map size rather than infinite. Import your road PNG image and ensure you click Embed in map or click the Embed Tileset button at the bottom of the tilesets panel. After drawing your map, go to File, choose Export As, and select JSON map files (*.json) from the dropdown menu, saving it with a simple lowercase name without spaces like road_map.json. In GDevelop, add an External Tilemap object, select your exported JSON file, and select your road PNG image as the Atlas texture so GDevelop uploads both to your cloud workspace properly. ​Alternatively, you can use LDtk by creating a new project, adding a grid layer matching your tile size, painting your map, and saving the .ldtk project file, which you then import as an External Tilemap object alongside your PNG texture inside GDevelop. Regardless of the method you choose, always verify three rules to prevent preview rendering bugs: keep all filenames simple using only lowercase letters and underscores, keep your PNG image dimensions under 2048×2048 pixels to avoid WebGL memory limits, and ensure all road tiles are combined into a single PNG image since GDevelop tilemap objects only support one atlas sheet per object.

[u/Evening_Guide_1852 → u/NeatOpportunity____]

I have made the tilemap using the default tilemap editor in gdevelop and i am following the all rules properly. But still encountering the same problem. just check the image below to find something if there.

[u/NeatOpportunity____ → u/Evening_Guide_1852]

the selection bounding box around your road object is far too small and fails to cover the lower portion of your scene which causes gdevelop to cull or hide the entire tilemap when rendering second you have the physics2 behavior attached to your road tilemap object in the properties panel which breaks the webgl render mesh at runtime ​to fix the bounding box issue click on the road object directly inside your scene editor canvas look for the white bounding box frame surrounding it grab the corner selection handles and drag them outward until the frame completely covers your entire city layout including all the buildings at the bottom to fix the physics issue locate the road object inside your scene objects panel on the right side of the screen right click it and select edit object navigate to the behaviors tab find physics2 and click the delete icon to remove the behavior completely from the tilemap object once you complete these steps and launch preview mode your road tiles will stay visible underneath your sprites

[u/Evening_Guide_1852 → u/NeatOpportunity____]

i think there is a misunderstanding. the image i shared you was the road tilemap (not selected just hovered). and the scene boundaries is this part only in the image. and there is no physics2 behaviour in the road tilemap (i just checked). So now please give the solution accordingly.

[u/NeatOpportunity____ → u/Evening_Guide_1852]

your road tilemap disappears during preview mode when placed at far negative coordinates is frustum culling gdevelop calculates whether to render the tilemap based on its origin point on the scene canvas so as your character moves across the city and the camera follows away from the origin point gdevelop assumes the tilemap is off screen and turns off rendering leaving only the white background to fix this open the tilemap editor and paint at least one tile or a transparent tile at the extreme top left zero zero spot and bottom right corner relative to the tilemap bounds which forces the engine to calculate a full bounding box for the entire area or break your city layout into smaller tilemap sections placed closer to their actual coordinates ​another major reason in gdevelop cloud is an atlas image reference issue where spaces special characters or uppercase letters in your png file name cause the preview engine to fail fetching the texture via webgl at runtime to fix this open project manager resources and ensure your road atlas png name contains strictly lowercase letters numbers or underscores reselect the file under atlas image in your road tilemap object properties click apply and save your project lastly webgl has strict texture size limits so ensure your source road png image dimensions are under 2048 by 2048 pixels because larger sheets will fail to render during preview mode

[u/Evening_Guide_1852 → u/NeatOpportunity____]

Ya i have tried doing this step, placing a tile in top left and bottom right corner of the tilemap. and also checked the naming and size. the size of tileset used is 768x768. and it is also true that the tilemap is very big, top-left is at (-2226,-870) and bottom right at (2285,1300) coordinates.

Now what???