Cant load state

[3ddy]

Hello,
I'm trying to move my existing project to Intel XDK. I've succesfully moved my preload state that is working, but I can't start next state. Please take a look at my code, probably it is some scope problem (usually i have problems with that )

So in index.html I load the scripts :
 

<script src="lib/phaser.min.js"></script>
    <!-- Load game source files -->
    <script src="src/Game.js"></script>
    <script src = "src/preload.js"></script>
    <script src = "src/intro.js"></script>
    <!-- Load game entrance -->
    <script src="src/app.js"></script>

Then app.js is executed, where states are loaded

(function () {
    /* globals Phaser:false, BasicGame: false */
    //  Create your Phaser game and inject it into the game div.
    //  We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
    var game = new Phaser.Game(480, 640);

    game.state.add('Game', BasicGame.Game);
    game.state.add('Preload', BasicGame.preload);
    game.state.add('Intro', BasicGame.intro);

    game.state.start('Preload');
})();

My preload.js :

var BasicGame = {
    jsonData2 : null,
    };

BasicGame.preload = function (game) {
    
};


BasicGame.preload.prototype = {
    
    init: function () {
        this.stage.backgroundColor = 0xffffff
        this.text = this.add.text(this.world.centerX, this.world.centerY, 'LOADING', {font: "30px Arial", fill: "#000000", align: "left"});
    },
    
    preload: function () {
            this.load.json('jsonData', 'asset/smth.json', false);
            this.load.image('background', 'asset/background.jpg');
    },
    
    create: function () {
        this.jsonData = this.cache.getJSON('jsonData');
        jsonData2 = this.jsonData;
        this.state.start('Intro', false, true, 'W1');
    },
    
};

And here is the place where I get an error : "Phaser.StateManager - No state found with the key: Intro" on line this.state.start();

When I print this in console i get BasicGame.preload. Using BasicGame instead of preload doesn't work as well.


EDIT:
i'll show you my Intro state :
 

BasicGame.intro = function(game) {
	this.userPath = [];
	this.conditionArray = [];
	this.nodeID = 'W1';
	this.node = null;
};

BasicGame.intro.prototype = {

	init: function(nodeID) {
		this.nodeID = nodeID;
		this.node = this.getNodeByID(this.nodeID);
	},

	create: function() {
		this.background = this.add.sprite(0, 0, 'background');
		this.background.scale.setTo(2.5);
		this.displayData();

		game.scale.pageAlignHorizontally = true;
		game.scale.pageAlignVertically = true;
		// using RESIZE scale mode
		game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		game.scale.setScreenSize(true);
	},

	// some not important functions

};

 

[3ddy]

I was playing with the code around and found something weird... In app.js I'm starting states :

 

game.state.add('Game', BasicGame.Game);
    game.state.add('Preload', BasicGame.preload);
    game.state.add('Intro', BasicGame.intro);

    //  Now start the Game state.
    game.state.start('Intro');

BUT I can start only the state that is loaded lastly in html file :
 

<script src="src/Game.js"></script>
    <script src="src/preload.js"></script>
    <script src="src/intro.js"></script>

That means that if I have all 3 entries in html file, I can only start Intro state, Game and Preload are not working.

If I comment intro.js in html file, then I can start only Preload state, Game is not working... And in order to start Game state I must comment both preload and intro in html file... What's wrong? 

Here is my updated intro.js file (changed it since previous topic for testing - I just copied there code that was working in Game.js and changed name of state only
 

/* globals Phaser:false */
// create BasicGame Class
BasicGame = {

};

// create Game function in BasicGame
BasicGame.intro = function (game) {
    this.userPath = [];
	this.conditionArray = [];
	this.nodeID = 'W1';
	this.node = null;
};

// set Game function prototype
BasicGame.intro.prototype = {

    init: function () {
        console.log('init function');
        // set up input max pointers
        this.input.maxPointers = 1;
        // set up stage disable visibility change
        this.stage.disableVisibilityChange = true;
        // Set up the scaling method used by the ScaleManager
        // Valid values for scaleMode are:
        // * EXACT_FIT
        // * NO_SCALE
        // * SHOW_ALL
        // * RESIZE
        // See http://docs.phaser.io/Phaser.ScaleManager.html for full document
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        // If you wish to align your game in the middle of the page then you can
        // set this value to true. It will place a re-calculated margin-left
        // pixel value onto the canvas element which is updated on orientation /
        // resizing events. It doesn't care about any other DOM element that may
        // be on the page, it literally just sets the margin.
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
        // Force the orientation in landscape or portrait.
        // * Set first to true to force landscape. 
        // * Set second to true to force portrait.
        this.scale.forceOrientation(false, true);
        // Sets the callback that will be called when the window resize event
        // occurs, or if set the parent container changes dimensions. Use this 
        // to handle responsive game layout options. Note that the callback will
        // only be called if the ScaleManager.scaleMode is set to RESIZE.
        this.scale.setResizeCallback(this.gameResized, this);
        // Set screen size automatically based on the scaleMode. This is only
        // needed if ScaleMode is not set to RESIZE.
        this.scale.updateLayout(true);
        // Re-calculate scale mode and update screen size. This only applies if
        // ScaleMode is not set to RESIZE.
        this.scale.refresh();

    },

    preload: function () {

        // Here we load the assets required for our preloader (in this case a 
        // background and a loading bar)
        this.load.image('logo', 'asset/phaser.png');
    },

    create: function () {
        // Add logo to the center of the stage
        this.logo = this.add.sprite(
            this.world.centerX, // (centerX, centerY) is the center coordination
            this.world.centerY,
            'logo');
        // Set the anchor to the center of the sprite
        this.logo.anchor.setTo(0.5, 0.5);

    },

    gameResized: function (width, height) {

        // This could be handy if you need to do any extra processing if the 
        // game resizes. A resize could happen if for example swapping 
        // orientation on a device or resizing the browser window. Note that 
        // this callback is only really useful if you use a ScaleMode of RESIZE 
        // and place it inside your main game state.

    }

};

 

[drhayes]

The code you've shown for your intro and preload states both start with a declaration of BasicGame like this: "var BasicGame = {...". That overwrites the previous definition of BasicGame and blows away your previously defined states.

You can either change those declarations to something like this: "var BasicGame = BasicGame || {};", or you can get your states out of that namespace. You don't really need to put everything on a namespace like that. Each one can just be a global name, that's okay. You also don't need to surround your app.js code in an IIFE; again, it's *your* global namespace so it's okay for you to pollute it. That kind of defensive programming is mostly for libraries.