Forums » Help » Image not showing on screen

What's up fellas

I have a question I hope y'all can help me with.

I am trying to draw an image on top of an entity, based on the current player color, in a multiplayer tower defense.

So let me explain a little:

I have a function in a self made util class that named ftd (short for Fantasy TD).
This function returns the current player with all it's attributes (I just need the player.color for this one).

    placeTowerFlag : function()
    { 
      var player = ftd.getCurrentPlayer();
      var bannerImg = new ig.Image( 'media/banner/banner_' + player.color + '.png' );
      var _x = (this.pos.x + this.size.x) - bannerImg.width;
      var _y = (this.pos.y + this.size.y) - bannerImg.height;
      bannerImg.draw( _x, _y );
    },

What I am trying to do is to draw an image on top of my tower entity, so that when I place a tower, the flag (based on player.color) is placed on top of the placed tower, according to the tower positions and the pixel size of the image.
Now.. I can place the tower, all the positions have been logged and they are correct, the path is correct, I'm given no warnings in the console, and I receive the banner_0.png in "Network".
But.. I get no entity drawn in the debugger, and I can't see the image in the canvas..

Can someone please help me? I'm really desperate ^_^

Thank you in advance!

Where are you calling this function? If its in main.js draw() are you calling it after this.parent()?

Drawing is all about the order you do it. It might not be showing up because it's getting covered by the entity or even cleared by the clearColor. Read this post for more explanation on this. http://impactjs.com/forums/help/particles-dont-display-over-menu#post8180

I think I understood most of the thread you linked to, and after reading it through I tested out some different things;

I've tried setting the this.clearColor = null; in the main init(), and
I've tried calling it in the draw() method of tower, and then calling parent,
I've tried calling it in the init(), as the first thing,

but none of them worked;

I've made a function: maintainStates(), which i call in the update() method.

First I'm listening on a div made of towers, onClick, I'm spawning the tower-entity in the game, and I can then move it around. I'm calling the this.placeTowerFlag() in the maintainStates() method, when the tower is places on the map.

I've tried making it a seperate entity named "EntityFlag" and spawning that entity in the maintainStates() method, and then passing the array of settings, like this:

      var player = ftd.getCurrentPlayer();
      // Add playercolor-flag animation effect.
      var settings = {
        sprite : 'banner_' + player.color + '.png',
        frameTime : 99999999999,
        runs: 1,
        seq : [0],
        size : {x:16, y:32}
      };
      var _x = (this.pos.x + this.size.x) - settings.size.x;
      var _y = (this.pos.y + this.size.y) - settings.size.y;
      ig.game.spawnEntity( EntityFlag, _x, _y, settings );

This banner entity simply add's an animationSheet and animates the Flag on top. This Works.
But I thought it would be more logical to just draw it, instead of having an entire entity for this purpose.

What do you think?

I don't know. Without seeing more code it's hard to know what exactly you have going on. You said you did your draws before this.parent() in the draw() method of the tower which might be the problem because your tower's animation sheet might be drawing over the top of it. Do your draws after this.parent().

What you are trying to do is not difficult though. I threw together a working example for you:

http://d.pr/f/UmE4

(You'll need to add Impact)

Thank you very much Graphikos. I added impact to the code snippets you send, and it gave me an idea.

The error was a combination of the following:

Because i have implemented a scrollscreen-, and a startscreen-option for the game, and I had not used the ig.system.getDrawPos() for the coordinates, it ran out on me when the screen started at the bottom.

Also, I had misplaced the drawing of the flag before a parent call in the draw method of the tower (Silly me, apparently I had two.)

If you are interested here is a screenshot of the current game :-):

1 decade ago by Graphikos