Cannot access "ScoreBar" before initialization

Phaser 3
1

Hello! I am a newbie developer creating a 2d platformer called Jump’N Wack using Phaser3. Here is my repository. My code was working until I added a ScoreBar class and tried to import it into my game scene. Now, whenever I try to create a new ScoreBar instance within my game scene using the imported class, I get this error in Chrome: Uncaught ReferenceError: Cannot access ‘ScoreBar’ before initialization at gameScene.js:24:16. The line causing the error is here. Thank you in advance for any help!

gameScene.js

import { fruitAnimKeys, loadFruitSpriteSheets, createFruitAnims, collectFruit} from '../fruits.js';
import {config, gameData} from '../main.js';
import {Player} from '../player.js';
import {ScoreBar} from '../scoreBar.js';

export var camera;           // phaser object
export var cursors;          // phaser object
export var controls;         // phaser object
export var graphics;

export var map;              // tilemap
export var tileset;          // tileset image

export var mapOffsetX;       // number
export var mapOffsetY;       // number

export var belowPlayerLayer; // phaser map layer
export var worldLayer;       // phaser map layer
export var objectLayer       // phaser map layer

export var fruits;           // static group

var player = new Player(this);
var scoreBar = new ScoreBar();

export class GameScene extends Phaser.Scene
{	
	constructor ()
	{
		console.log('Constructed gameScene');
		super({key: 'gameScene'});
	}
	
	preload ()
	{
		console.log('preloading...');
		console.log('loading tilemap');
		
		this.load.image("tiles", '../src/assets/tilesets/Terrain.png');
		this.load.tilemapTiledJSON("map", "../src/assets/tilemaps/map1.json");
		
		console.log('loading sprite sheets');
		
		player.loadSpriteSheets(this);
		loadFruitSpriteSheets(this);
		scoreBar.load(this);
	}
	
	create ()
	{
		console.log('creating...');
		
		graphics = this.add.graphics();
		
		console.log("loading animations");
		
		player.createAnims(this);
		createFruitAnims(this);
		
		// tilemap stuff
		
		console.log("loading map and layers");
		
		map = this.make.tilemap({ key: "map" });
		tileset = map.addTilesetImage("terrain", "tiles", 16, 16, 0, 0);
		
		// add the background color to the map (different from canvas background)
		console.log('map width ' + map.widthInPixels + ' map height ' + map.heightInPixels);
		drawBackground(this);
		
		belowPlayerLayer = map.createLayer("Below Player", tileset, 0, 0);
		worldLayer = map.createLayer("World", tileset, 0, 0);
		
		objectLayer = map.getObjectLayer('Objects');
		console.log(objectLayer);
		
		fruits = this.physics.add.staticGroup();
		
		objectLayer.objects.forEach(object => {
			if(object.type === "Apple")
			{
				let obj = fruits.create(object.x + 8, object.y - 8, "Apple");
      		obj.body.width = object.width;
      		obj.body.height = object.height;
				obj.anims.play(fruitAnimKeys.apple);
			}
		});
		
		worldLayer.setCollisionByProperty({ Collides: true });
		// obstaclesLayer.setCollisionByProperty({Kills: true});
		
		const spawnPoint = map.findObject("Spawns", obj => obj.name === "Player");
		const playerSprite = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, 'playerIdle', 0);
		player.initSprite(playerSprite, gameData.gravity);
		this.physics.add.overlap(player.sprite, fruits, collectFruit, null, this);
		this.physics.add.collider(player.sprite, worldLayer);
		
		initialiseSystem(this, camera, cursors, controls);
		
		scoreBar.draw(this);
	}
	
	update (time, delta)
	{
		controls.update(delta);
		player.handleKeypresses(cursors);
	}
}

function initialiseSystem(scene)
{
	camera = scene.cameras.main;
	cursors = scene.input.keyboard.createCursorKeys();
	controls = new Phaser.Cameras.Controls.FixedKeyControl(
		{
		camera: camera,
		left: cursors.left,
		right: cursors.right,
		up: cursors.up,
		down: cursors.down,
		}
	);
	
	// if scrolling is necessary...
	if(map.widthInPixels > config.width || map.heightInPixels > config.height)
	{
		console.log("setting up scrolling system.");
		
		gameData.cameraX = 0;
		gameData.cameraY = 0;
		gameData.cameraWidth = config.width;
		gameData.cameraHeight = config.height;
		
		camera.setBounds(gameData.cameraX, gameData.cameraY, gameData.cameraWidth, gameData.cameraHeight);
		camera.startFollow(player);	
	}
	
	// if the whole tilemap fits onscreen, center camera on map
	else
	{
		console.log("setting up centered view.");
		
		gameData.cameraX = -(config.width / 2 - map.widthInPixels / 2);
		gameData.cameraY = -(config.height / 2 - map.heightInPixels / 2);
		gameData.cameraWidth = config.width;
		gameData.cameraHeight = config.height;
		
		camera.setBounds(gameData.cameraX, gameData.cameraY, gameData.cameraWidth, gameData.cameraHeight);
	}
}

function drawBackground(scene)
{
	scene.add.rectangle(0, 0, map.widthInPixels, map.heightInPixels, 0x87ceeb).setOrigin(0, 0);
}

scoreBar.js

import {gameData} from "./main.js";

export class ScoreBar
{
	constructor()
	{
		this.key = "scoreBarKey";
		this.url = "../src/assets/Other/scoreBar.png";
		this.sprite = null;
		this.x = null;
		this.y = null;
		this.sprite = null;
		console.log("constructed score bar");
	}
	
	load(scene)
	{
		scene.load.image(this.key, this.url);		
	}
	
	draw(scene)
	{
		this.x = gameData.cameraX;
		this.y = gameData.cameraY;
		this.sprite = scene.physics.add.sprite(this.x, this.y, this.key);
	}
	
}
2

Are you seeing any issue that you import gameData in this file but your index.html includes ScoreBar before main.js (which contains your gameData).

3

I switched those two includes in index.html and it now works! Thank you!

1 Like