Lukripar

Scene not defined.

Recommended Posts

I'm trying to code a simple game using scenes. I am new to Phaser 3 and relatively new to coding in general so I may be making a dumb mistake. I've just hit a wall.

I'm trying to get my main menu "start" button to start the game state. Simple enough right? But when I run the files on http-server, i get:

``ncaught ReferenceError: Game is not defined
    at testmain.js:6``

 

my html:

<!doctype html>
<html lang="en">
 
<head>
<meta charset="UTF-8" />
<title>FCM Classes Test</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.9.0/dist/phaser.js"></script>
</head>
 
<body>
<canvas id="canvas"></canvas>
<script type="module" src="js/testmain.js"></script>
<script type="module" src="js/scenes/game.js"></script>
<script src="js/scenes/mainMenu.js"></script>
<script src="js/scenes/preload.js"></script>
 
 
 
</body>
 
</html>

main.js

var config = {
type: Phaser.AUTO,
width: 800,
height: 800,
parent: "#canvas",
scene: [Preload, MainMenu, Game ],
title: 'Fantasy Cage Match'
 
}
 
let game = new Phaser.Game(config);

 

mainMenu.js

let startButton, menubg;
class MainMenu extends Phaser.Scene{
constructor() {
super({key: "MainMenu"});
}
 
create()
{
 
this.menubg = this.add.image(400,400,'menubg');
this.startButton = this.add.sprite(400, 400, 'startbutton').setInteractive();
 
this.startButton.on('pointerdown', function startGame(pointer){
this.scene.start('gamescene');
}, this);
 
}
 
}

and my game.js I haven't added any other code because I just want to see my sprite move around on screen.. (I know i haven't done anything with cursors yet..)

import Player from '../characters/Player.js'
let bg, cursors, player;
class Game extends Phaser.Scene{
constructor() {
super({key: "gamescene"});
}
 
create(){
bg = this.add.image(400,400,'background');
 
player = this.add.sprite(400,400,'dude');
 
this.player = new Player(this)
setupCollision(this)
}
 
}

First time posting, so I'm sorry if I didn't follow correct etiquette. Thanks in advance for any ideas.

Share this post


Link to post
Share on other sites

Hey. 

I'm a Javascript beginner to (coming from cpp/python) so I'm not sure I understood it correctly, but as far as I know the order of the script mathers... When the browser reaches your testmain.js it trys to run it and therefor create your game. 

But at this time, your other scripts didn't run and therefor your scenes are not defined. 

So you could try moving your main script at the end or (probably even better) use 

window.onload = function () { var game = ... }

Not sure if this is the problem though.. 

Edit: As noted in the other post, it might be helpfull to set up some sort of development toolchain that handels all the importing stuff for you... It helped me to get something on the browser anyway.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.