Jump to content

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


Recommended Posts


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.

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() {

/** @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.p2.restitution = 0.1;
    game.physics.p2.gravity = 1400;

Level.prototype.update = function() {

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;


Level.prototype.quitGame = function() {

//For debugging
function move_camera_by_pointer(o_pointer) {
    if (!o_pointer.timeDown) { 
    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



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

Edited by omediadon
Typo in title
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites


  • Recently Browsing   0 members

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