Player and Colliding Objects

[Souleste]

Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with.

How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. 

My game.js

// variables for items, walls, etc.
var walls;
var house;


var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

//add house to game
function addHouse(image) {
  house = game.add.physicsGroup();
  house.create(-250, -240, 'greenhouse');
  house.setAll('body.immovable', true);
}

// add fences/walls to the game
function addWalls(image) {
  walls = game.add.physicsGroup();
  // fences up top
  walls.create(-90, -200, 'fencefront');
  walls.create(5, -200, 'fencefront');
  walls.create(100, -200, 'fencefront');
  walls.create(195, -200, 'fencefront');
  // fences to right
  walls.create(288, -200, 'fenceright');
  walls.create(288, -135, 'fenceright');
  walls.create(288, -70, 'fenceright');
  walls.create(288, -5, 'fenceright');
  // fences at bottom
  walls.create(-90, 59, 'fencefront');
  walls.create(5, 59, 'fencefront');
  walls.create(100, 59, 'fencefront');
  walls.create(195, 59, 'fencefront');
  // fences to left
  walls.create(-91, -200, 'fenceright');
  walls.create(-91, -135, 'fenceright');
  walls.create(-91, -70, 'fenceright');


  // set the walls to be static
  walls.setAll('body.immovable', true);
}



// preload items, walls, players, etc.
function preload() {
  // preload player
    game.load.spritesheet('player', 'hero.png', 64, 64);

    // preload houses
    game.load.image('greenhouse', 'greenhouse.png');

    // preload fences
    game.load.image('fencefront', 'fencefront.png');
    game.load.image('fenceleft', 'fenceleft.png');
    game.load.image('fenceright', 'fenceright.png');

}

// variables for character
var cursors;
var player;
var left;
var right;
var up;
var down;


// add what will be in game
function create() {


  game.world.setBounds(-250, -250, 550, 550);

    // set background color
    game.stage.backgroundColor = ('#3c6f42');


    // add player image and place in screen
    player = game.add.sprite(-232,  -100, 'player', 1);
    player.smoothed = false;
    player.scale.set(1);

    // player will "collide" with certain images like walls and houses
    player.collideWorldBounds = true;

// ANIMATION FOR PLAYER CONTROLS
    down = player.animations.add('down', [0,1,2,3], 10, true);
    left = player.animations.add('left', [4,5,6,7], 10, true);
    right = player.animations.add('right', [8,9,10,11], 10, true);
    up = player.animations.add('up', [12,13,14,15], 10, true);

    // enable physics in the game (can't go through walls, gravity, etc.)
    game.physics.enable(player, Phaser.Physics.ARCADE);
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.enable(player);

    // make sure to add this code to add items/walls/buildings
    addHouse();
    addWalls();


    // enable keyboard arrows for controls
    cursors = game.input.keyboard.createCursorKeys();
    // camera will follow the character
    game.camera.follow(player);
}

// what happens when player does something
function update() {

  // player will now collide with these images rather than pass over them
  game.physics.arcade.collide(player, house);
  game.physics.arcade.collide(player, walls);


// PLAYER CONTROLS
    player.body.velocity.set(0);
    // player presses left key
    if (cursors.left.isDown)
    {
        player.body.velocity.x = -100;
        player.play('left');
    }
    // player presses right key
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 100;
        player.play('right');
    }
    // player presses up key
    else if (cursors.up.isDown)
    {
        player.body.velocity.y = -100;
        player.play('up');
    }
    // player presses down key
    else if (cursors.down.isDown)
    {
        player.body.velocity.y = 100;
        player.play('down');
    }
    // player does not press anything
    else
    {
        player.animations.stop();
    }


}

function render() {


}

The HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
		<link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      html {
        background: black
      }
      canvas {
        margin: auto;
      }
			h1 {
				font-family: 'Syncopate', sans-serif;
				color: rgb(194, 68, 91);
				text-align: center;
				margin: 0 auto;
				font-size: 25px;
			}
    </style>
	</head>
	<body>
		<header>
			<h1>Crafty Heroes</h1>
		</header>
    <script src="phaser.js"></script>
		<script src="game.js"></script>
	</body>
</html>

[RubbleGames]

Use player.body.setSize(width, height, offsetX, offsetY) to choose your players hit box size.