Jump to content

Cant load state


3ddy
 Share

Recommended Posts

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

};

 

Link to comment
Share on other sites

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.

    }

};

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...