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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.