[Confusing] can't insert wide sprite - always get shrunk

[omediadon]

Hi

I am facing a problem, a little one that made doubt myself!

I am inserting a sprite, which is 1000px width (it's a placeholder for bigger ones in production version)

It's inserted but shrunk!

Here's My code

Booting up:

var game;
window.onload = function() {
	game = new Phaser.Game(1000, 400, Phaser.AUTO);

	// Add the States your game has.
	game.state.add("Boot", Boot);
	game.state.add("Menu", Menu);
	game.state.add("Preload", Preload);
	game.state.add("Level", Level);

	// Now start the Boot state.
	game.state.start("Boot");
};

Boot.prototype.init = function() {
	this.input.maxPointers = 1;

	// Setup the scale strategy
	game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //OR ANY OTHER ScaleManager
	game.scale.pageAlignHorizontally = true;
	game.scale.pageAlignVertically = true;
};

My level:

/**
 * Level state.
 * Started already!
 */
function Level() {
	Phaser.State.call(this);
}

/** @type Phaser.State */
var proto = Object.create(Phaser.State);
Level.prototype = proto;

Level.prototype.create = function() {
    //Resizing the World to fit the Sprite inside it!
	game.world.setBounds(0, 0, 1000, 400);
	game.camera.setSize(100, game.world.height); //Does not work too
	
	game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.restitution = 0.1;
    game.physics.p2.gravity = 1400;
    
	this.addStreet();
	this.addObstacles();
};

Level.prototype.update = function() {
    move_camera_by_pointer(game.input.mousePointer);
    move_camera_by_pointer(game.input.pointer1);
};

Level.prototype.addStreet = function() {	
	// add the "the road"
	this.street = this.add.sprite(0, 400, "street"); 
    //Added at the bottom left, but it doesn't work either
	this.street.anchor.set(0, 0);
	
    //Bodies are not my problem, it works nicely
	this.game.physics.p2.enable(this.street, true);
	
	this.street.body.kinematic = true;
	this.street.body.loadPolygon("streetps", null);
	
    //For debugging
    this.street.inputEnabled = true;
    this.street.input.enableDrag(true);


};

Level.prototype.quitGame = function() {
	this.game.state.start("Menu");
};

//For debugging
function move_camera_by_pointer(o_pointer) {
    if (!o_pointer.timeDown) { 
    	return; 
    }
    
    if (o_pointer.isDown && !o_pointer.targetObject) {
        if (o_mcamera) {
            game.camera.x += o_mcamera.x - o_pointer.position.x;
            game.camera.y += o_mcamera.y - o_pointer.position.y;
        }
        o_mcamera = o_pointer.position.clone();
    }
    
    if (o_pointer.isUp) {
    	o_mcamera = null; 
    }
}

That code results in

Video_2016-08-24_004305.wmv

And this is my "street" image (actually the name is a place holder too and i kept it)

Edited August 23, 2016 by omediadon
Typo in title

[symof]

game = new Phaser.Game(1000, 400, Phaser.AUTO);

This line of code makes the game 1000 pixels wide and 400 pixels in height.

this.street = this.add.sprite(0, 400, "street"); 
//Added at the bottom left, but it doesn't work either
this.street.anchor.set(0, 0);

This line of code adds the sprite at 0 pixels from the left and 400 from the top. Now since your canvas is 400 in height then your sprite is placed outside of the canvas.

this.street = this.add.sprite(0, 0, "street");

Will make it so that your sprite is placed at the very top left corner.

[omediadon]

Still nothing seems to work!

Using your code (which was one of my tries already) does not help, I resized my sprite (1000*400) and inserted it at (0,0) without scaling, and with it!

The best result i get is the "street" sprite filling the available space (600, not 1000), seems good enough for a start!

But, whenever i enable p2 physics (with/without body shape) the sprite gets shrunk and misplaced again!

[symof]

That happens because p2 sets the anchor to 0.5 on the sprite. So you need to offset that by size*0.5 on both x and y axis.

Edit: I would suggest that you start with arcade as your first physics engine, as it is more intuitive, and less advanced.

[omediadon]

I have already made a couple of games using Arcade, p2 is great for my next game (i would love to use box2d, but it's paid)

I made other games using cocosd-x+box2d and libgdx at the time, that was greate but i like phaser more because it's concentrated and flexible. So i'm not new to phaser, nor game dev (both native and html5)