colored background when loading sprites in Crafty.js

Question

When using a sprite with a transparent background with crafty.js, It comes up with a white background that I cant seem to get rid of, I made the sprite myself and am very new to javascript, Crafty and Stackoverflow, heres my code

Crafty.scene('World', function() {
//Draw borders, gotta find a more code efficent way
for (var i = 0; i < 64; i++)
{
Crafty.e('Border').at(i, 0);
}

for (var y = 0; y < 48; y++)
{
Crafty.e('Border').at(0, y);
}

for (var y = 0; y < 48; y++)
{
Crafty.e('Border').at(63, y);
}

for (var y = 0; y < 64; y++)
{
Crafty.e('Border').at(y, 47);
}
//draw ingame entities such as the player and obstacles
for (var y = 20; y <40; y++)
{
Crafty.e('Wall').at(y, 10);
}
Crafty.e('Wall').at(15, 10);
Crafty.e('Player').at(20,20);
});

Crafty.scene('Loading', function() {
//Load in Visual Assests
Crafty.load(['assets/male_white_Student_bitmap.gif'], function(){
//Define individual images from bitmap
Crafty.sprite(25, 37, 'assets/male_white_Student_bitmap.gif' , {
spr_Front: [0,0],
spr_Back: [1,0],
spr_Right: [0,1],
spr_Left: [1,1]
});

Crafty.scene('World')
})
});

Game = {

map_grid:{
    width: 64,
    height: 48,
    tile:{
    width: 10,
    height: 10
    }
    },

width: function(){
return this.map_grid.width * this.map_grid.tile.width;
},

height: function(){
return this.map_grid.height * this.map_grid.tile.height;
},

//start everything
start: function(){
//define game space and background colour
Crafty.init(Game.width(), Game.height());
Crafty.background('rgb(0, 100, 200)');
//draw borders (must be more efficient way of doing this)
Crafty.scene('Loading');
}
}

Crafty.c('Grid', {
init: function() {
this.attr({
  w: Game.map_grid.tile.width,
  h: Game.map_grid.tile.height
})
},

at: function(x, y) {
if (x === undefined && y === undefined) {
  return { x: this.x/Game.map_grid.tile.width, y: this.y/Game.map_grid.tile.height }
} else {
  this.attr({ x: x * Game.map_grid.tile.width, y: y * Game.map_grid.tile.height });
  return this;
}
}
});

Crafty.c('Actor', {
init: function() {
this.requires('2D, Canvas, Grid');
},
});
//solid entities within the gameworld
Crafty.c('Wall', {
init: function() {
this.requires('Actor, Color, Solid')
.color('rgb(112, 138, 144)');
},
});

Crafty.c('Border', {
init: function() {
this.requires('Actor, Color, Solid')
.color('rgb(0, 0, 0)');
},
});
//player character and collision code, using fourway for ease of use movement
Crafty.c('Player', {
init: function(){
this.requires('Actor, Color, Fourway, Collision, spr_Front')
.color('rgb(0, 0, 0)')
.fourway(4)
.stopOnSolids()
.onHit('Enemy', this.attackEnemy);
},

stopOnSolids: function() {
this.onHit('Solid', this.stopMovement);

return this;
},

stopMovement: function() {
if (this._movement) {
this.x -= this._movement.x;
if (this.hit('Solid') != false) {
this.x += this._movement.x;
this.y -= this._movement.y;
if (this.hit('Solid') != false) {
this.x -= this._movement.x;
}
}
} else {
this._speed = 0;
}
}
});

Answer 1

You have the "Color" component assigned to the entities. Set it to 'none'.

.color('none')