Drawing of polygons

1

Hi I was trying to fill some translucent diamond shapes to show selected tiles on my staggered map. However, it doesn’t seem to work and nothing is displayed. Is this the correct way to draw (i.e. using the world coordinates, translating the polygon for each tile, fillPolygon, then translating it back to 0,0 again in preparing for the next polygon)?

import * as melonjs from 'melonjs';
import Play from '../states/Play';
import tileToWorld from 'src/utils/functions/tileToWorld';

export default class EligibleMoves extends melonjs.Renderable{
	static readonly TRANSLUCENT_WHITE=new melonjs.Color(255,255,255,0.5);

	constructor(public play:Play){
		super(0,0,32+(Play.ACTUAL_MAP_WIDTH+0.5)*play.zoom*64,16+(Play.ACTUAL_MAP_HEIGHT+0.5)*play.zoom*32);
	}

	draw(renderer:melonjs.CanvasRenderer|melonjs.WebGLRenderer,viewport?:melonjs.Camera2d):void{
		let polygon=new melonjs.Polygon(0,0,[
			new melonjs.Vector2d(0,-16*this.play.zoom),
			new melonjs.Vector2d(32*this.play.zoom),
			new melonjs.Vector2d(0,16*this.play.zoom),
			new melonjs.Vector2d(-32*this.play.zoom),
			new melonjs.Vector2d(0,-16*this.play.zoom)
		]);
		for(let i in this.play.store.availablePaths){
			let [x,y]=i.split(',').map(num=>parseInt(num));
			let worldCoordinates=tileToWorld(x,y,this.play.zoom);
			polygon.translate(worldCoordinates);
			console.log(polygon,worldCoordinates);
			renderer.setColor(EligibleMoves.TRANSLUCENT_WHITE);
			renderer.fillPolygon(polygon);
			polygon.translate(-(worldCoordinates.x as number),-(worldCoordinates.y as number));
		}
	}

	update(dt:number):boolean{
		return Object.keys(this.play.store.availablePaths).length>0;
	}
};
2

Looks about right, but maybe it’s a coordinates issue ?

See that example that draw a diamond shape under the current pointer position:

3

Problem solved!

Firstly, I had missed out an argument in some of the Vector2d constructor calls.

Secondly, I needed to set this.anchorPoint.x=0 and this.anchorPoint.y=0 in the constructor of my EligibleMoves class.

4

ah good ! yeah sometimes it’s the most obvious thing right in front of us :slight_smile: