Forums » Help » Highlight a portion of an entity.

I've got an entity that has a size of 120x120 whereas most of my entities are 40x40. What I want to be able to do is break my entity up into 40x40 sections and so create a smaller grid on it. The idea being that these grids could then have 'building' entities placed on top of them. When a user clicks the large entity I would like to 'highlight' the section they have chosen and present a menu. So far the only idea I have to 'highlight' the area, is to create a separate transparent entity with a border and position this on top, I could then just move this around or get rid of it as and when.

Does this sound like the best approach for this or can anyone think of a better method?

thanks

Personally... I'd do context draws...

For example:
http://jsfiddle.net/graphikos/VN6Wj/

Hi Graphikos,

Not sure if there is a slight misunderstanding here. I don't need to draw the grid over the whole entity, I just want to be able to highlight one particular section of the grid on click. So in essence this happens in the update cycle of the entity. I initially tried using ig.system.context to draw, but then i'd need to keep track of whether the entity has been selected in the first place as well as the coords of the highlight to constantly draw this in the update cycle. I think using an entity for the highlight also allows me a bit more control, in that I could use this entity to control the showing and hiding of menus as well.

Thanks

If there will only ever be one square of the grid highlighted at any given moment, then it may make most sense to create a "highlight" entity that simply floats over the selected region.

If we use the following convention on the selected square :
UpperLeft = 0 ; UpperRight = 1 ; LowerLeft = 2 ; LowerRight = 3;
- this information is stored in the selectedSquare property -

then the following code inside your entity player class should get you close to your goal :

drawSelectionSquare : function() {
   if (this.noSquareSelected) return;
   var drx = this.pos.x - this.offset.x - ig.game._rscreen.x;
   var dry = this.pos.y - this.offset.y - ig.game._rscreen.y;
   var scale = ig.system.scale ;
   var w = this.size.x / ( 2 * scale ) ;
   var h = this.size.y / ( 2 * scale ) ;
   drx+= ( this.selectedSquare & 1 ) * w;
   dry+= ( this.selectedSquare & 2 ) * h ;
   var ctx = ig.system.context;
   ctx.save();
   ctx.fillStyle = '#FF4' ;
   ctx.globalAlpha = 0.4 ; 
   ctx.globalCompositeOperation = 'lighter';
   ctx.fillRect(ig.system.getDrawPos(drx),
                      ig.system.getDrawPos(dry),
                      w,
                      h );
   ctx.restore();
   },
  
draw : function() {
     this.parent();
     this.drawSelectionSquare();
   },