Recommended Posts

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() {, -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 will "collide" with certain images like walls and houses
    player.collideWorldBounds = true;

    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);

    // make sure to add this code to add items/walls/buildings

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

// 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 presses left key
    if (cursors.left.isDown)
        player.body.velocity.x = -100;'left');
    // player presses right key
    else if (cursors.right.isDown)
        player.body.velocity.x = 100;'right');
    // player presses up key
    else if (cursors.up.isDown)
        player.body.velocity.y = -100;'up');
    // player presses down key
    else if (cursors.down.isDown)
        player.body.velocity.y = 100;'down');
    // player does not press anything


function render() {



<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
		<link href="" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
      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;
			<h1>Crafty Heroes</h1>
    <script src="phaser.js"></script>
		<script src="game.js"></script>





Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.