Forums » Help » spawnEntity nothing showing up

Hello everyone, I'm new to ImpactJS and JavaScript in general so please be easy on me!

I'm trying to spawn entities from another .js file and this is the code I have right now.

options.js

ig.module(
    'game.entities.options'
)
.requires(
    'impact.entity',
    'impact.image'
)
.defines(function(){

EntityOption1 = ig.Entity.extend({

        image: new ig.Image('media/image.png'),
        size: {x: 146, y: 100},
           
        
	init: function( x, y, settings ) {  
		this.parent( x, y, settings );
                
                console.log("entityspawned");      
	},
        
});

});

selectscreen.js

ig.module(
    'game.screens.selectscreen'
)
.requires(
    'impact.game',	
    'impact.font',
    'impact.image',
    'game.entities.options'
)
.defines(function(){
ModeSelect = ig.Game.extend({
    
        font: new ig.Font( 'media/04b03.font2.png' ),
        
        backgroundImage: new ig.Image('media/game_bg_pc.png'),
         
 	init: function() {
		// Initialize your game here; bind keys etc.
		//ig.game.spawnEntity(EntityOption1, 320, 240);
		//this.backgroundImage.resize(0.5);
		
	},
        
        update: function() {
            
	   
           
        },
        draw: function() {
		
                // Add your own drawing code here
                var x = ig.system.width/2,
                    y = ig.system.height/2;
		
		
                this.backgroundImage.draw(x - (this.backgroundImage.width)/2,y - (this.backgroundImage.height)/2);
                
                this.font.draw( 'Choose your allegiance', x, y * 1.6, ig.Font.ALIGN.CENTER );               
		this.list();
        },
        
        list: function(){
	    ig.game.spawnEntity(EntityOption1, 320, 240);
        }
        
    });

});

At this point the entity seems to have spawned as I am able to get the "entityspawned" message in the console but nothing shows up on screen. Any ideas on what might be going wrong?

Are you seeing the "entityspawned" message over and over again? It looks like you are spawning that entity every draw cycle. That should be updated as you only need to spawn it once.

Also at no point in the EntityOption1 are you drawing the image. You are just loading the image.

That's correct, I see the "entityspawned" message over and over again.

I see what you mean by only loading the image - what should I be doing differently?

What I am ultimately trying to achieve is have entities spawn and have a function within the entity to respond to being clicked by the mouse pointer (which I have yet to implement). Right now I'm just trying to get the entity to show up with on screen with an image/texture.

I've looked a numerous example projects but most of them spawn their entities through the level editor which I am not using as I require to spawn enemies in my game on-the-fly.

Any ideas on a good way to go about spawning EntityOption1 once and rendering it in my above code?

Quote from inihility
That's correct, I see the "entityspawned" message over and over again.

I see what you mean by only loading the image - what should I be doing differently?

You're loading the spritesheet, so now all you have to do is create the animations:

this.addAnim('idle', 1, [0]);

'idle' is your animation name. The 1 is the delay between frame change. The array is the frames from the spritesheet to draw.

See the docs for more info: http://impactjs.com/documentation/class-reference/entity#addanim

EDIT: Whoops. Just realized you don't want a spritesheet, but rather an individual image. In that case, add this in your draw method for your entity:

this.image.draw(targetX, targetY);

See the docs for more info: http://impactjs.com/documentation/class-reference/image#draw

Thanks for your response, I've tried playing around with spritesheet/image calls, I did what you said with adding a draw: function and adding a .draw() call to it for my entity but still nothing shows up - am I calling spawnEntity() in the right place?

Here's my revised code:

options.js

ig.module(
    'game.entities.options'
)
.requires(
    'impact.entity',
    'impact.image'
)
.defines(function(){


EntityOption1 = ig.Entity.extend({

        image: new ig.Image('media/image.png'),
        size: {x: 146, y: 100},
           
        
	init: function( x, y, settings ) {  
		this.parent( x, y, settings );
                console.log("entityspawned");      
	},
        draw: function(){
                this.image.draw(320,240);
        }
        
});
});

selectscreen.js

ig.module(
    'game.screens.selectscreen'
)
.requires(
    'impact.game',	
    'impact.font',
    'impact.image',
    'game.entities.options'
)
.defines(function(){
ModeSelect = ig.Game.extend({
    
        font: new ig.Font( 'media/04b03.font2.png' ),
        
        backgroundImage: new ig.Image('media/game_bg_pc.png'),
         
 	init: function() {
		// Initialize your game here; bind keys etc.
		// I am spawning the entity here, if I try doing it in update: or draw: it spawns the entity more than once
		this.list(); 
		
	},
        
        update: function() {
		
           
        },
        draw: function() {
		
                // Add your own drawing code here
                var x = ig.system.width/2,
                    y = ig.system.height/2;
		
		
                this.backgroundImage.draw(x - (this.backgroundImage.width)/2,y - (this.backgroundImage.height)/2);
                
                this.font.draw( 'Choose your allegiance', x, y * 1.6, ig.Font.ALIGN.CENTER );           
        },
        
        list: function(){
	    ig.game.spawnEntity(EntityOption1, 320, 240);
        }
      
    });
});

I end up with a black screen when I comment out all the other draw calls, does that mean the entity never gets drawn?

EDIT: Been at this for hours, driving me nuts how it's probably a simple syntax error that's causing the entity to not show up on screen as an image. Any help would really be appreciated.

Update:

I added this to my selectscreen.js

        update: function() {
		if (this.init) {
			this.list();
			this.init = false;
		}
        },

This seemed to make it work!

EDIT: Now it seems like the issue I have is that my background image is rendered after the entity, covering it - how can I ensure that my entities render after?

EDIT2: I made the background image into an entity and rendered them both as such:

        update: function() {
		if (this.init) {
			this.drawBackground();
			this.listOptions();
			this.init = false;
		}
        },

Everything seems to be in order.

I posted an example in this topic. Please go take a look:
http://impactjs.com/forums/help/how-to-move-entities-ig-image-vs-ig-animationsheet