Forums » Help » Box2d Coordinate system with scale

Hi everyone,

I'm trying to make some Emanuelle Feronato's examples of box2d and I'm having a bad time with the coordinate system that box2d use. I'm not a pro dev.

I'm trying to draw a simple line between the entity and the click point.

I'm using a laser beam code that I found in the forum:

ig.game.spawnEntity( EntityLaser, ig.game.player.pos.x,ig.game.player.pos.y, {center:ig.game.player.body.GetWorldCenter()});

Entity Laser

 EntityLaser = ig.Entity.extend({

		start: {},
		target: {},
		gravityFactor:0,
		laserLength:null,
		maxVel:{x:1000, y:1000},
		type:ig.Entity.TYPE.NONE,
		checkAgainst:ig.Entity.TYPE.B,
		collides:ig.Entity.COLLIDES.PASSIVE,

		init: function(x, y, settings) {
			this.parent(x,y,settings);
			//this.timer = new ig.Timer(1);
		},

		update: function() {
			if (/*this.timer.delta() >= 0 || */ig.input.released('mouseLeft')  || ig.input.pressed('mouseLeft')==false) {
				this.kill();
			}
			this.parent();
		},

		draw: function() {
		
			var laserEndX = ig.input.mouse.x;
			var laserEndY = ig.input.mouse.y;
			var laserStartX  = this.pos.x;
			var laserStartY  = this.pos.y; // straight line laser only demo
				ig.system.context.fillStyle = "blue";
				ig.system.context.font = "bold 16px Arial";			
			ig.system.context.fillText("laserstart="+laserStartX+" - laserend="+laserStartY, ig.input.mouse.x, ig.input.mouse.y);
			ig.system.context.strokeStyle = "red";
			ig.system.context.lineWidth = 5;
			ig.system.context.beginPath();
			ig.system.context.moveTo(laserStartX,laserStartY);
			ig.system.context.lineTo(laserEndX,laserEndY);
			ig.system.context.stroke();
			ig.system.context.closePath();
			
		}
	});

If I use "this.pos" to get the start position of the entity, for some reason, when the entity start moving the draw line goes crasy and leaves the screen.

I I use getWorldCenter (setting center of my code) the start point gets up high in the screen, not even close the entity in the "ground".

The laser end point works beatifully when the canvas is scaled to 1, but if I scale it, no good. The laser end dont get near the click point.

I'm trying to make some MouseToWorld function and EntityToWorldCoord function so I can draw this line between those points.

Thx!

If you're having trouble with the coordinate system (converting between Box2D and Impact coordinate systems is a pain in the butt), then you should try using this plugin instead. It makes Box2D with Impact a lot more pleasant in my opinion.

For example, you don&039;t have to worry about converting scale. You just manipulate your entities via #this.pos, this.size, this.vel, etc. and it all just works.

Quote from Joncom
If you're having trouble with the coordinate system (converting between Box2D and Impact coordinate systems is a pain in the butt), then you should try using this plugin instead. It makes Box2D with Impact a lot more pleasant in my opinion.

For example, you don&039;t have to worry about converting scale. You just manipulate your entities via #this.pos, this.size, this.vel, etc. and it all just works.

Thx man, but I simply cant use this plugin.

My Player

ig.module('game.entities.player')
.requires('plugins.joncom.box2d.entity')
.defines(function(){
    EntityPlayer = ig.Entity.extend({
        /* your entity code here */
		jumpHeight:120,
		init: function( x, y, settings ) {
				this.parent( x, y, settings );
		},
		update: function(){
				this.parent();

				if (ig.input.pressed('jump') && this.standing) {
						this.body.ApplyImpulse( new Box2D.Common.Math.b2Vec2(0,-this.jumpHeight), this.body.GetWorldCenter() );
						console.log(this.standing);
				}
				if (ig.input.state('mouseLeft')) {
					ig.game.spawnEntity( EntityLaser, ig.game.entities[0].pos.x,ig.game.entities[0].pos.y);
				}				
				
		}		
    });
    EntityLaser = ig.Entity.extend({
		start: {},
		target: {},
		gravityFactor:0,
		laserLength:null,
		maxVel:{x:1000, y:1000},
		type:ig.Entity.TYPE.NONE,
		checkAgainst:ig.Entity.TYPE.B,
		collides:ig.Entity.COLLIDES.PASSIVE,

		init: function(x, y, settings) {
			this.parent(x,y,settings);
			//this.timer = new ig.Timer(1);
		},

		update: function() {
			if (/*this.timer.delta() >= 0 || */ig.input.released('mouseLeft')  || ig.input.pressed('mouseLeft')==false) {
				this.kill();
			}
			this.parent();
		},

		draw: function() {
		
			var laserEndX = ig.input.mouse.x;
			var laserEndY = ig.input.mouse.y;
			var laserStartX  = this.pos.x;
			var laserStartY  = this.pos.y; // straight line laser only demo
				ig.system.context.fillStyle = "blue";
				ig.system.context.font = "bold 16px Arial";			
			ig.system.context.fillText("laserstart="+laserStartX+" - laserend="+laserStartY, ig.input.mouse.x, ig.input.mouse.y);
			ig.system.context.strokeStyle = "red";
			ig.system.context.lineWidth = 5;
			ig.system.context.beginPath();
			ig.system.context.moveTo(laserStartX,laserStartY);
			ig.system.context.lineTo(laserEndX,laserEndY);
			ig.system.context.stroke();
			ig.system.context.closePath();
			
		}
	});	
});

My main

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font',
	//'impact.debug.debug',
	'game.levels.fase1',
	'plugins.joncom.box2d.debug',
	'game.entities.player'
)
.defines(function(){

MyGame = ig.Game.extend({
	gravity:50,
	init: function() {
		// Initialize your game here; bind keys etc.
		this.loadLevel(LevelFase1);
		this.debugDrawer = new ig.Box2DDebug( ig.world );
		ig.input.bind( ig.KEY.MOUSE1, 'mouseLeft' );
		ig.input.bind( ig.KEY.SPACE, 'jump' );
	},
	
	update: function() {
		this.parent();
		ig.world.Step( ig.system.tick, 6, 6 );
		ig.world.ClearForces();		
	},
	
	draw: function() {
		this.parent();
		this.debugDrawer.draw();	
	}
});

ig.main( '#canvas', MyGame, 60, 640, 480, 2 );

});

"this.standing" doenst work. It's always "false".

When I click and hold, it's supposed to create several entities lines on the same place, but with this plugin creates a lot of boxes too.

this.pos.x and this.pos.y returned "undefined", so I used ig.game.entities[0].pos.x to get the position of my player.

Like I said before, I'm not very good using plugins. I'm trying to reproduce the examples of Feronato because he explain very well what he's doing and it's pure box2d.

@RockLeo: Add console.log(this.standing); right after this.parent(); in your player update function so that it's printing the value out constantly. Are you certain it's always false? Is it possible it's just inverted from what you'd expect?

Also, remove this line, you don't need it:

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

Remove these too:

ig.world.Step( ig.system.tick, 6, 6 );
ig.world.ClearForces();

And:

this.debugDrawer.draw();

Hi there Joncom.

I removed the lines you said.

http://uploaddeimagens.com.br/imagens/plugintest-png

About the topic, can you point me in any direction?

Everything I'm trying is going no where.

I'm trying to understand this topic http://box2d.org/forum/viewtopic.php?f=3&t=8198 can you figure it out?

Thx

Quote from RockLeo
I'm trying to understand this topic http://box2d.org/forum/viewtopic.php?f=3&t=8198 can you figure it out?

All the coordinate work is done under the hood already. Have you made a "regular game" in Impact before? If so, just treat your "Box2D game" exactly the same. Pretend Box2D isn't even there and do things the way you're used to.

// Want to move your entity to the top left corner of the map?
entity.pos = { x: 0, y: 0 };

// Want to move your entity to the right by exactly 7 pixels?
entity.pos.x += 7;

// Want your entity to jump upward at a rate of 300 pixels per second?
entity.vel.y -= 300;

You don't need to understand that article. It's just noise.

Edit: As for the this.standing thing, are you able to zip and share all your code so I could take a look? No need to include the licensed impact folder though.

Hey there @Joncom,

It doesnt work like you said. In some moment world position and impact's dont match.

here is my code: http://googledrive.com/host/0B-xgGOfe7ExcR0NNbUJDb0FhdGc/

Thx for your help.