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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.