Hello! This is my first time using tilemaps in any programming project whatsoever, so my difficulties are no doubt because of my inexperience, so please pardon my ignorance! I recently decided to code a Mario-style platform game in this repo. I got my Tilemap partially finished and it was rendering in Safari (Chrome has some sort of new audio policy that makes things complicated to run now) but something changed, I’m not sure what, and now whenever I edit any portion of the Tilemap (using Tiled), all the indexes that I edited are rendered as completely transparent I refresh the page. And yes, I am using a local python server I can’t figure out why, and perhaps someone else has had this same issue and knows what to do? Thank you!
A picture of the strange issue:
*look at the missing tiles in the right border.
Here is my project info, which is also available on Github
My project organization:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
War Escape
</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.min.js"></script> -->
<script src="./lib/phaser.min.js"></script>
<script type='module' src="./src/main.js"></script>
<script type='module' src="./src/scenes/game.js"></script>
</head>
<body>
<div class="page-container">
<!-- Phaser loads the canvas into this element -->
<div id="game-container"></div>
</div>
</body>
</html>
main.js
import GameScene from './scenes/game.js'
var gameScene = new GameScene()
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#87ceeb',
parent: 'game-container',
physics: {
default: 'arcade',
arcade: {
gravity: { y: 5, x: 0 },
debug: false
}
},
scenes: [ gameScene ],
assets: '../assets/',
level: 0,
lives: 1,
score: 0,
};
const game = new Phaser.Game(config);
console.log('initialised game');
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();
game.scene.add('gameScene', gameScene);
game.scene.start('gameScene');
export default config;
game.js
import config from "../main.js";
var cursors;
var controls;
class GameScene extends Phaser.Scene
{
constructor ()
{
console.log('constructed gameScene');
super({key: 'gameScene'});
}
preload ()
{
console.log('preloading...');
this.load.image("tiles", '../src/assets/tilesets/Terrain.png');
this.load.tilemapTiledJSON("map", "../src/assets/tilemaps/map1.json");
}
create ()
{
console.log('creating...');
const map = this.make.tilemap({ key: "map" });
const tileset = map.addTilesetImage("tileset", "tiles");
// Parameters: layer name (or index) from Tiled, tileset, x, y
const worldLayer = map.createLayer("World", tileset, 0, 0);
// var cursors = this.input.keyboard.createCursorKeys();
// var controlConfig = {
// camera: this.cameras.main,
// left: cursors.left,
// right: cursors.right,
// up: cursors.up,
// down: cursors.down,
// speed: 0.5
// };
// controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
}
update (time, delta)
{
// controls.update(delta);
}
}
export default GameScene;
map1.json
{ "compressionlevel":-1,
"height":20,
"infinite":false,
"layers":[
{
"compression":"",
"data":"WQAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABbAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABxAAAAbwAAACQAAAAlAAAAAAAAAAAAAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABxAAAAbwAAADoAAAA7AAAAAAAAAAAAAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABxAAAAWQAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAHMAAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABxAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE4AAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAAAcAAAATgAAAHIAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABbAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE4AAABOAAAAAAAAAAAAAABOAAAATgAAAE4AAABOAAAATgAAAE4AAAAAAAAAAAAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE4AAABOAAAATgAAAAAAAAAAAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAAAAAAAAAAAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABOAAAATgAAAE4AAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAWQAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABaAAAAWgAAAFoAAABzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjAQAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJAAAACUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABxAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOgAAADsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4AAAA\/AAAAQAAAAAcAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAJAAAAbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAAAAlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0AAAAeAAAAHgAAAB4AAAAeAAAAHgAAAB4AAAAeAAAAHgAAAB4AAAAfAAAAhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoAAAA7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0AAAAeAAAAHgAAAB4AAAAeAAAAHgAAAB4AAAAeAAAAHgAAAB4AAAAfAAAABwAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAADMAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA1AAAA",
"encoding":"base64",
"height":20,
"id":1,
"name":"World",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.8.2",
"tileheight":16,
"tilesets":[
{
"backgroundcolor":"#76d6ff",
"columns":22,
"firstgid":1,
"image":"..\/tilesets\/Terrain.png",
"imageheight":176,
"imagewidth":352,
"margin":0,
"name":"tileset",
"spacing":0,
"tilecount":242,
"tileheight":16,
"tilewidth":16,
"transparentcolor":"#211f30"
},
{
"columns":22,
"firstgid":243,
"image":"..\/tilesets\/Terrain.png",
"imageheight":176,
"imagewidth":352,
"margin":0,
"name":"terrain",
"spacing":0,
"tilecount":242,
"tileheight":16,
"tilewidth":16,
"transparentcolor":"#211f30"
},
{
"columns":22,
"firstgid":485,
"image":"..\/tilesets\/Terrain.png",
"imageheight":176,
"imagewidth":352,
"margin":0,
"name":"terrain",
"spacing":0,
"tilecount":242,
"tileheight":16,
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":"1.8",
"width":30
}
