Forums » Help » Unresolved (circular?) Dependencies

Hello everyone,

I just got my hands on Impact yesterday and I've been playing around a bit. But now that I'm trying to set up a game I'm running into a little snag. This error comes up and nothing loads:

Uncaught Unresolved (circular?) dependencies. Most likely there's a name/path mismatch for one of the listed modules:
game.main (requires: game.screens.mainmenu_screen)
game.screens.mainmenu_screen (requires: game.screens.options_screen)
game.screens.options_screen (requires: game.screens.mainmenu_screen)

Here is what I have for the mentioned "screens":

mainmenu_screen.js

ig.module('game.screens.mainmenu_screen')
.requires('impact.game', 'impact.font', 'impact.image',
          'game.screens.game_screen', 'game.screens.options_screen')

.defines(function(){
    
    var startButton = new ig.Image('media/button/startbutton.png');
    var optionsButton = new ig.Image('media/button/optionsbutton.png');

    MainMenuScreen = ig.Game.extend({

        init: function() {
         this.backgroundImage = new ig.Image('media/background/mainmenubackground.png');
         ig.input.bind(ig.KEY.MOUSE1, 'select');
        },
        update: function() {
		this.parent();
		if(ig.input.pressed('select')){
                    if(ig.input.mouse.x >= 360 && ig.input.mouse.x <= 648){
                        if(ig.input.mouse.y >= 150 && ig.input.mouse.y <= 225){
                            ig.main( '#canvas', GameScreen, 60, 1024, 576, 1 );
                        }else if(ig.input.mouse.y >= 450 && ig.input.mouse.y <= 525){
                            ig.main( '#canvas', OptionsScreen, 60, 1024, 576, 1 );
                        }
                    }
                }
	},
	
	draw: function() {
		this.parent();
                this.backgroundImage.draw(0,0);
                startButton.draw(350,150);
                optionsButton.draw(360, 450);
	}
    });
});

options_screen.js

ig.module('game.screens.options_screen')
.requires('impact.game', 'impact.font', 'impact.image', 'game.screens.mainmenu_screen')

.defines(function(){
    
     var backButton = new ig.Image('media/button/back.png');
    
    OptionsScreen = ig.Game.extend({
        
        init: function() {
         this.backgroundImage = new ig.Image('media/background/blankbackground.png');
         ig.input.bind(ig.KEY.MOUSE1, 'select');
        },
        update: function() {
		this.parent();
		if(ig.input.pressed('select')){
                    if(ig.input.mouse.x >= 0 && ig.input.mouse.x <= 200){
                        if(ig.input.mouse.y >= 0 && ig.input.mouse.y <= 100){
                            ig.main( '#canvas', MainMenuScreen, 60, 1024, 576, 1 );
                        }
                    }
                }
	},
	
	draw: function() {
		this.parent();
                this.backgroundImage.draw(0,0);
                backButton.draw(0,0);
	}
    });
});

When I remove 'game.screens.mainmenu_screen' from the requires area in options_screen.js everything loads up but the back button fails since the link to MainMenuScreen was removed. I need some help getting through this circular dependencies error, 'game.screens.mainmenu_screen' needs to be in the requires area so the back button can work. I've tried a few ideas but I'm lost now =P

As it is right now, you're saying "Load module A before loading module B, but load module B before loading module A" - obviously you can't satisfy both.

In your case however, it doesn&039;t matter which module is loaded first. You only need to have all modules loaded at then end, but the load order is irrelevant. No code that is executed at load time - that is, when the #defines() function for the module is called - needs to know about the other modules. Only at runtime, when your Screen classes are actually instantiated, they reference the classes from the other module.

So there are a number of solutions to your problem:
1) require all Screen modules in your main.js and don't require any other Screen modules in your Screen modules

or 2) require the mainmenu_screen in your main.js and require the options_screen in your mainmenu_screen. Don't require the mainmenu_screen in your options_screen

or 3) the other way around: require the options_screen in your main.js and require the mainmenu_screen in your options_screen. Don't require the options_screen in your mainmenu_screen.

Edit: A bit more visual:
Solution 1)

game.main
	game.screens.mainmenu_screen
	game.screens.options_screen

Solution 2)

game.main
	game.screens.mainmenu_screen
		game.screens.options_screen

Solution 3)

game.main
	game.screens.options_screen
		game.screens.mainmenu_screen

Your current (broken) require chain:

game.main
	game.screens.options_screen
		game.screens.mainmenu_screen
			game.screens.options_screen
				game.screens.mainmenu_screen
					game.screens.options_screen
						game.screens.mainmenu_screen
							game.screens.options_screen
								...

What you tried to fix it (mainmenu_screen is never required):

game.main
	game.screens.options_screen

Again, you only have to ensure that all modules are loaded at some point. The order is - in your case - not important.

The order would be important if, for instance, your options_screen were a subclass of your mainmenu_screen, because the MainMenuScreen.extend() would need to be defined at load time of your options_screen.

I hope this explanation made sense :)

dominic, your explanation is very good! funny thing, right before i saw your reply i tried one more idea and it seemed to work out nicely. and this is what i came up with:

mainmenu_screen.js

ig.module('game.screens.mainmenu_screen')
.requires('impact.game', 'impact.font', 'impact.image',
          'game.screens.game_screen')
.defines(function(){
    
    var startButton = new ig.Image('media/button/startbutton.png');
    var optionsButton = new ig.Image('media/button/optionsbutton.png');
    var backButton = new ig.Image('media/button/back.png');

    MainMenuScreen = ig.Game.extend({
        
        init: function() {
         this.backgroundImage = new ig.Image('media/background/mainmenubackground.png');
         ig.input.bind(ig.KEY.MOUSE1, 'select');
        },
        update: function() {
		this.parent();
		if(ig.input.pressed('select')){
                    if(ig.input.mouse.x >= 360 && ig.input.mouse.x <= 648){
                        if(ig.input.mouse.y >= 150 && ig.input.mouse.y <= 225){
                             ig.system.setGame( GameScreen);
                        }else if(ig.input.mouse.y >= 450 && ig.input.mouse.y <= 525){
                             ig.system.setGame( OptionsScreen);
                        }
                    }
                }
	},
	
	draw: function() {
		this.parent();
                this.backgroundImage.draw(0,0);
                startButton.draw(350,150);
                optionsButton.draw(360, 450);
	}
    });
    
    OptionsScreen = ig.Game.extend({
        
        init: function() {
         this.backgroundImage = new ig.Image('media/background/blankbackground.png');
         ig.input.bind(ig.KEY.MOUSE1, 'select');
        },
        update: function() {
		this.parent();
		if(ig.input.pressed('select')){
                    if(ig.input.mouse.x >= 0 && ig.input.mouse.x <= 200){
                        if(ig.input.mouse.y >= 0 && ig.input.mouse.y <= 100){
                            ig.system.setGame( MainMenuScreen);
                        }
                    }
                }
	},
	
	draw: function() {
		this.parent();
                this.backgroundImage.draw(0,0);
                backButton.draw(0,0);
	}
    });
    
});

placing the OptionsScreen in the same js file seems to work and i don't need to add 'game.screens.options_screen' in the requires area. and something i noticed, using ig.system.setGame instead of ig.main works much better. the impact loading bar doesn't come up between screens which makes everything look a lot nicer.

thanks for your suggestions, i'm going to try them out now and play around with impact a little more. the more i learn the better right? =P