Forums » Help » Noob questions, Create background and button

Hi, i just joined and still learning. Actually i stuck with this,
when i creating the background with system.context.drawimage, it is work and i can resize the image. while i want to add an entity of button, the button does not appear. Here is the code of game extend:

GameOxygen = ig.Game.extend({
	
	font: new ig.Font( 'media/04b03.font.png' ),// Load a font
	bgtitle: new FullsizeBackground('media/titlebg.png'),
	title: new ig.Image('media/title.png'),
	player: null,
	
	init: function() {
		this.player = this.spawnEntity(EntityButton,10,10);
	},
	
	draw: function() {
		var image = this.bgtitle.data;
		
		ig.system.context.drawImage( image, 0, 0, 640, 480);
                //this.parent();
	}
});

And this is the entity of button:

EntityButton = ig.Entity.extend({
        size: {x:50,y:50},
        type: ig.Entity.TYPE.B,
        animSheet : new ig.AnimationSheet('media/button.png',92,86),
        isClicked: false,
        
        init: function(x,y,settings){
            
            this.addAnim('normal', 1,[0]);
            this.addAnim('click', 1,[1]);
            this.parent(x,y,settings);
        },
        
        update: function(){
            
            if (this.isClicked) {
                this.currentAnim = this.anims.click;
            }else{
                this.currentAnim = this.anims.normal;
            }
            this.parent();
        },
        
        handleMovementTrace: function( res ) {
		
            this.parent(res);
        },
        
        clicked: function(){
            
        }
    });
});

What make me confuse is whenever i uncomment this.parent on game extend, the button will appear, but the background is disappear. Anyone please?

Try calling this.parent(); first thing!

draw: function() {
    this.parent();
    var image = this.bgtitle.data;   
    ig.system.context.drawImage( image, 0, 0, 640, 480);
}

The reason your background was disappearing is because this.parent(); clears the canvas so that the frame can be drawn afresh.

Thank you joncom for answering. yes the background is appear, but the entity of button does not appear. On init function, i already call it

this.player = this.spawnEntity(EntityButton,10,10);

can you explain me why?

The button is probably being drawn first, and therefore your "background" is being drawn on top and covering it up.

One possible solution might be to convert your "background" into an entity, and give it a lower zIndex than the button.

Actually i using the code source from example project of drop game from impactjs. Did you have the game joncom? How can it work while using totally same code as i use. The drop does not using zIndex and the background is being drawn on bottom of the entity. Its weird.

<original response removed>

The reason your initial attempts failed is because you forgot to copy this clearColor line from the "Drop" source code:

GameOxygen = ig.Game.extend({
    clearColor: null, // don't clear the screen
    ...

After adding it, this should work fine:

draw: function() {
    var image = this.bgtitle.data;   
    ig.system.context.drawImage( image, 0, 0, 640, 480);
    this.parent();
}

Oh my.., how can i miss that clearColor. Thank you vr much!
I have another question, how to scale animSheet image? Well if it just an image, i can use this

 ig.system.context.drawImage( image, 0, 0, 640, 480);

so how about the animSheet?

Quote from iast
how to scale animSheet image?

Perhaps try this?