Forums » Help » Custom image loaded into entity

Hi all,
I've been trying to figure out a way to create a simple entity that I can add to weltmeister that will load the an image, and resize the collision box to the image size. This is simply going to be used as a placeholder for the real graphic that gets loaded, it saves me creating a custom entity for each image.

The problem I'm facing is that with the following code, the image will load fine in the weltmeister editor, but when used in the real game itself, is scaled up twice the original scale. For example, a 100px X 100px image gets scaled up to 400px X 400px in the game, but it diplays perfectly fine in the WM editor. Not sure whats going on, any help would be greatly appreciated. Also if someone has a better way of achieving what I'm doing I would appreciate that too.

ig.module(
    'game.entities.building'
)
.requires(
    'impact.entity'
)
.defines(function(){

EntityBuilding = ig.Entity.extend({
    
    size: {x: 10, y:10}, // collision box size
    offset: {x:0, y: 0},
    collides: ig.Entity.COLLIDES.FIXED,
    type: ig.Entity.TYPE.BOTH,

    _wmScalable: true,
    _wmDrawBox: true,
    _wmBoxColor: 'rgba(196, 255, 0, 0.1)',
    selectedImage: "undefined",
    sizeX: 96,
    sizeY: 80,
    imgReady: false,
   
    init: function( x, y, settings ) {
            var myImageString =  "media/buildings/"+this.selectedImage+".png";
            img = new ig.Image( myImageString);
            console.log(this.sizeX);
            img.width = img.data.width;
            img.height = img.data.height;
            img.load( this.imageLoaded.bind(this) );

     this.parent( x, y, settings );   
    },

    imageLoaded: function( path, success ) {
        if( success ) {
            this.imgReady = true;

            this.size.x = this.sizeX;
            this.size.y = this.sizeY;
        }
        else {
            ig.log( 'Error loading the image: ', path );
        }
    },
    
    draw: function()
    {
               
        if(this.imgReady == true)
        {
            img.draw(this.pos.x, this.pos.y);      
        }
    }

});

});

ig.Image will scale up images according to ig.system.scale. You typically set the scale for the game in the ig.main() call.

You probably also want to change this:

img = new ig.Image( myImageString);
// to
this.img = new ig.Image( myImageString);

and reference this.img in your entity everywhere. Otherwise you end up with one global img var.

You can also omit setting the width and height of the image. ig.Image will do this itself once it's loaded.

Note that images that are loaded this way will not be loaded by the preloader. See Using the Preloader for more info.


All in all, I'd do it like this:

EntityBuilding = ig.Entity.extend({
	collides: ig.Entity.COLLIDES.FIXED,
	type: ig.Entity.TYPE.BOTH,

	_wmScalable: true,
	_wmDrawBox: true,
	_wmBoxColor: 'rgba(196, 255, 0, 0.1)',

	images: {
		house1: new ig.Image("media/buildings/house1.png"),
		house2: new ig.Image("media/buildings/house2.png"),
		house3: new ig.Image("media/buildings/house3.png")
	},

	selectedImage: 'house1',

	init: function( x, y, settings ) {
		// Call this.parent() first to merge the 'settings' 
		// into this entity
		this.parent( x, y, settings ); 

		// Get the size from the image
		this.size = {
			x: this.images[this.selectedImage].width,
			y: this.images[this.selectedImage].height
		};
	},

	draw: function() {
		this.images[this.selectedImage].draw( this.pos.x, this.pos.y );
	}
});

Edit: updated the code; I forgot to call the ig.Image constructor.

This way the images will use the preloader and you don&039;t have to deal with all the #imgReady stuff.

Thanks so much for that Dominic, you've been a great help, I'm just been trying variations of my code for hours and hours to no end, its funny sometimes when you see the solution it makes you wonder how it was so easily missed.

Thanks again!!

Know this is an old post but thought I'd add to it that using dominic's solution directly above caused the images to do funky things in weltmeister. The bounding boxes would remain where they were intended but the images themselves didn't respond well to the ctrl+ movement of the working area. The tweaked code below gives more desirable results in weltmeister, though at a bit of a loss in efficiency.

EntityElement = ig.Entity.extend({
        
    _wmScalable: false,
    _wmDrawBox: true,
    _wmBoxColor: 'rgba(196, 255, 0, 0.1)',

    images: {
        default: new ig.Image("media/ui/default.png"),
        menubar: new ig.Image("media/ui/menubar.png"),
        commandlist: new ig.Image("media/ui/commandlist.png"),
        gearbar: new ig.Image("media/ui/gearbar.png"),
        command_forward:new ig.Image('media/ui/command_forward.png'),
        command_turn_right:new ig.Image('media/ui/command_turn_right.png'),
        command_turn_left:new ig.Image('media/ui/command_turn_left.png'),
        command_loop:new ig.Image('media/ui/command_loop.png'),
        command_jump:new ig.Image('media/ui/command_jump.png'),
        controls:new ig.Image('media/ui/controls.png')
    },

    elementType:'default',

    init: function( x, y, settings ) {

        this.parent( x, y, settings ); 

        this.sheets = {};
        for(var key in this.images) {
          this.sheets[key] = new ig.AnimationSheet(this.images[key].path,this.images[key].width,this.images[key].height);
        }

        this.setAnimationSheetFromElementType();
    },

    draw: function() {
        if(ig.global.wm) {
          // Done so that when "elementType" property is updated in weltmeister the 
          // change is responded to.  Not done in normal gameplay to reduce processing.
          this.setAnimationSheetFromElementType();
        }
        this.parent();
    },

    setAnimationSheetFromElementType: function() {
        this.animSheet = this.sheets[this.elementType];

        // Get the size from the image
        this.size = {
            x: this.images[this.elementType].width,
            y: this.images[this.elementType].height
        };

        this.addAnim('normal', 1, [0]);
        this.currentAnim = this.anims['normal'];
    }

});