Forums » Help » box2d: ig.world undefined

I&039;m getting a rather hair pulling error: #Uncaught TypeError: Cannot call method 'Step' of undefined

ig.world.Step( ig.system.tick, 5 );

The error points to this line is in game.js in the box2d plugin folder. So for some reason my ig.world is undefined. Any thoughts?

I had the same problem before, are you using the debug drawer?

If you have the debug drawer in your init, make sure it's under load level

should look like this:

        this.loadLevel( LevelTest);
		this.debugDrawer = new ig.Box2DDebug( ig.world );

Darn, I was so excited when I read you had a similar problem, but I'm not calling the debug drawer. I forgot to mention that I'm using MikeL's Director plugin, so maybe it's related.

My guess would be that something is trying to call ig.world before the level is loaded so it can't do a step of nothing. I'd double check all of the director plugin code and make sure the level is being loaded before anything else is called.

@nutbutter - I created Director before the Box2D plugin, so I haven't actually tested them together. Let me give it a try together with Dominic's sample code to see what I can find out.

@nutbutter - I added the director plugin to Dominic's "physics" example with Box2D. I couldn't find any problem. I essentially replaced the line:

this.loadLevel( LevelTest );

with

this.myDirector = new ig.Director(this, [LevelTest]);

After I did that I messed around a little and was able to reproduce the same error you have. In fact if you just take the physics example and comment out this line in init:

this.loadLevel( LevelTest );

You should see that error. Which means that somehow your level is not getting loaded.

I'd suggest making sure that your main.js matches the physics main.js as closely as possible with regards to the changes with box2d. From what I can telly you need to at least:
1. require 'plugins.box2d.game'
2. Define it with the extension:

.defines(function(){

MyGame = ig.Box2DGame.extend({

3. And potentially use the additional loadLevel code that is in that example right after init (although commenting it out didn't affect anything).

Also, make sure to initialize Director in your main.js init function in the same place you would typically use this.loadLevel() function. You really should only have your ig.input code before it and nothing else.

Hope that helps.

Thanks to both of you for your help.

Great plugin by the way Mike, I actually don't think that Director is the cause of the problem. Here is my main.js file thus far:

ig.module('game.main')
.requires(
	'impact.game', 
	'impact.font',
	'plugins.director.director',
	'game.entities.player',
	'game.entities.crate',
	'game.levels.title',
	'game.levels.main',
	'game.levels.0x0',
	'game.lang.load',
	'plugins.box2d.game'
)
.defines(function () {
    //localization
    Lang = enUS;
    //the game
    MyGame = ig.Box2DGame.extend({
        //all entities are affected
        gravity: 100,
        touches: function (th, buf) {
            return (
            touch.clientX > th.pos.x - ig.game.screen.x + oL - buf && touch.clientY > th.pos.y - ig.game.screen.y + oT - buf && touch.clientX < (th.pos.x - ig.game.screen.x + oL) + th.size.x + buf && touch.clientY < (th.pos.y - ig.game.screen.y + oT) + th.size.y + buf);
        },
		//clearColor: '#1b2026',
        // Load fonts
        h1xlight: new ig.Font('media/h1.font.eee.png'),
        h1xdark: new ig.Font('media/h1.font.222.png'),
        h2xlight: new ig.Font('media/h2.font.eee.png'),
        h2xdark: new ig.Font('media/h2.font.222.png'),
        bodyxlight: new ig.Font('media/body.font.eee.png'),
        bodyxdark: new ig.Font('media/body.font.222.png'),

        STATE: {
            GAMEOVER: 0,
            GAMEPLAYING: 1,
            PLAYERELIMINATED: 2,
            BEDROOM: 3,
            MENU: 4,
            LOBBY: 5
        },

        init: function () {
            //bind keys
            ig.input.bind(ig.KEY.LEFT_ARROW, 'left');
            ig.input.bind(ig.KEY.RIGHT_ARROW, 'right');
            ig.input.bind(ig.KEY.UP_ARROW, 'up');
            ig.input.bind(ig.KEY.DOWN_ARROW, 'crouch');
            ig.input.bind(ig.KEY.ESC, 'toggleMenu');
            ig.input.bind(ig.KEY.SPACE, 'jump');
            ig.input.bind(ig.KEY.ENTER, 'enter');
            ig.input.bind(ig.KEY.X, 'interact');
            ig.input.bind(ig.KEY.C, 'attack');
			if( ig.ua.mobile ) {
				ig.input.bindTouch( '#buttonLeft', 'left' );
				ig.input.bindTouch( '#buttonRight', 'right' );
				ig.input.bindTouch( '#buttonShoot', 'shoot' );
				ig.input.bindTouch( '#buttonJump', 'jump' );
			}
            // Initialize your game here; bind keys etc.
            this.timer = new ig.Timer(1);
            this.eliminatedTimer = new ig.Timer(5);
            this.transitionTimer = new ig.Timer(3);
            this.screenWidth = 640;
            this.screenHeight = 480;
            this.currentState = this.STATE.LOBBY;
            this.drawCoordinates = {
                lives: {
                    x: ig.system.width - 30,
                    y: ig.system.height - 10
                },
                score: {
                    x: ig.system.width - 50,
                    y: 0
                },
                gameover: {
                    x: ig.system.width / 2,
                    y: ig.system.height / 2
                },
                title: {
                    x: ig.system.width / 2,
                    y: ig.system.height / 2 - 30
                }
            }
            this.myLevels = new ig.Director(this, [LevelTitle, Level0x0]);
        },
        drawBackground: function () {

            for (var i = 0; i < this.backgroundMaps.length; i++) {
                this.backgroundMaps[i].draw();
            }
        },
        isLevelCompleted: function () {
            enemyTypes = [EntityEnemyBasic, EntityEnemyBlink, EntityEnemyWide, EntityEnemySpinner, EntityEnemyBase];
            for (en = 0; en < enemyTypes.length; en++) {
                var enemy = this.getEntitiesByType(enemyTypes[en]);
                if (enemy.length > 0) {
                    return false;
                }
            }
            return true;
        },
        update: function () {
            // Update all entities and backgroundMaps
            switch (this.currentState) {
            case this.STATE.GAMEPLAYING:
                // Check to see if all enemies have been destroyed, every 1 second.
                // If they have then transition to the next level. Also check to see
                // if the player is out of lives. If so change to player eliminated 
                // game state.
                break;
            case this.STATE.PLAYERELIMINATED:
                if (this.eliminatedTimer.delta() > 0) {
                    this.changeState(this.STATE.GAMEOVER);
                }
                break;
            case this.STATE.BEDROOM:
                if (ig.input.pressed('enter') || ig.input.pressed('jump')) {
                    this.changeState(this.STATE.GAMEPLAYING);
                }
                break;
            default:
                if (ig.input.pressed('enter') || ig.input.pressed('jump')) {
                    this.changeState(this.STATE.BEDROOM);
                }
                break;
            }

            if (this.currentState != this.STATE.BEDROOM) {
                this.parent();
            }

            // Add your own, additional update code here
        },
        changeState: function (newState) {
            this.currentState = newState;
            switch (this.currentState) {
            case this.STATE.GAMEPLAYING:
                this.timer.reset();
                break;
            case this.STATE.BEDROOM:
                //Advance to next level. If false then we are at the
                //end of the levels and need to go back to the first 
                //playing level.
                if (!this.myLevels.nextLevel()) {
                    this.myLevels.jumpTo(LevelMain);
                }
                this.transitionTimer.reset();
                break;
            case this.STATE.PLAYERELIMINATED:
                this.eliminatedTimer.reset();
                break;
            default:
                this.myLevels.jumpTo(LevelTitle);
                break;
            }
        },
        draw: function () {
            // Draw all entities and backgroundMaps
            if (this.currentState != this.STATE.BEDROOM) {
                // Draw all entities and backgroundMaps
                this.parent();
            } else {
                //In a level transition, therefore draw only the background
                this.drawBackground();
            }


        }
    });

    if( ig.ua.iPad ) {
    	ig.Sound.enabled = false;
    	ig.main('#canvas', MyGame, 60, 240, 160, 2);
    }
    else if( ig.ua.mobile ) {	
    	ig.Sound.enabled = false;
    	ig.main('#canvas', MyGame, 60, 160, 160, 2 * ig.ua.pixelRatio);
    	ig.system.canvas.style.width = '320px';
    	ig.system.canvas.style.height = '320px';
    	
    	ig.$('#body').style.height = '800px';
    }
    else {
    	ig.main('#canvas', MyGame, 60, 480, 320, 1);
    }

});

I'm not sure if this is helpful or just causes a lot of scrolling for you guys, but I can't find the culprit in the code. I've tried individual removing calls to most all of the required files (player, crate, lang, etc), but it didn't help.

A couple of things I'm noticing:
1. There are no entities loaded in that code. You need to require the same entities that are in your levels.
2. You've got:

              this.myLevels.jumpTo(LevelMain);

in the change state function, which will cause an error later since there is no LevelMain.

I noticed that Weltmeister is included in the physics demo. Wonder if you need to use that version to build your levels? Afraid I haven't messed around with box2d enough to help any further.

No, Weltmeister wasn't changed for the physics example (or any other). It's the same version as in the impact-1.17.zip.

As MikeL already said, I think your level is never loaded some reason. The Box2D plugin normally creates the world when loadLevel() is called.

What is the earliest error you see in your browser&039;s console? There has to be an error before it gets spammed with #Uncaught TypeError: Cannot call method 'Step' of undefined!? :)

Yes, Uncaught TypeError: Cannot call method 'Step' of undefined is the first error, and the one I can't quite decipher.

As far as LevelMain is concerned, it was a victim of rapid experimentation while trying to determine the cause of the bug. It used to be there (as were the entities). :)

I've updated the code above.

I got it to work by starting again from scratch. Thanks for the help! I still don't know what was causing the problem.

Hi, just an FYI - I had a similar issue, and found that in the box2d plugin at line 23 in /lib/plugins/box2d/game.js says

if( id.name == 'collision' ) {
 //world gets created here from the layer
}

So I guess this means you need a collision layer, I didn't have one, so the world wasn't created, and got the error 'ig.world is undefined'. Once I added a layer (just an empty one) it worked fine.

@anaish yup, if there's no collision layer, the problem disappears