1 decade ago by Cavalier
It doesn't seem that anything similar was posted yet, so I'll share my code with you guys.
First, in your main.js, add the initialization of the variable (otherwise you'll get an error) and the code to draw the rectangle in the draw() function.
This will allow a rectangle to be drawn with your mouse. Now, on your entity's file, add this to your update() function:
The position of the this.parent(). in the entity's update code doesn't seem to affect the working.
You may also want to use
EDIT: Forgot to take into consideration the screen/camera position. In the main.js draw() function, when setting the global variable, you have to sum the current screen position to properly select what the rectangle is drawn over.
First, in your main.js, add the initialization of the variable (otherwise you'll get an error) and the code to draw the rectangle in the draw() function.
MyGame = ig.Game.extend({
mouseStart: {x = 0, y = 0},
init: function(){
this.parent();
//==Your code==
ig.global.selectionRectangle = [0,0,0,0]; //x start, x end, y start, y end
}
draw: function() {
// Draw all entities and backgroundMaps
this.parent();
//Detects the initial click
if (ig.input.pressed('lclick')) {
this.mouseStart.x = ig.input.mouse.x;
this.mouseStart.y = ig.input.mouse.y;
}
//As long as the click is held, keep redrawing the rectangle
if (ig.input.state('lclick')) {
ig.system.context.strokeRect(this.mouseStart.x, this.mouseStart.y,
(ig.input.mouse.x - this.mouseStart.x),(ig.input.mouse.y -this.mouseStart.y));
}
//Release the button and the values are saved to a global variable for use
if (ig.input.released('lclick')) {
ig.global.selectionRectangle = [this.mouseStart.x, ig.input.mouse.x,this.mouseStart.y, ig.input.mouse.y]; //x start, x end, y start, y end
ig.system.context.strokeRect(this.mouseStart.x,this.mouseStart.y,
(ig.input.mouse.x - this.mouseStart.x),(ig.input.mouse.y -this.mouseStart.y));
} else {
ig.global.selectionRectangle = [0,0,0,0];
}
},
This will allow a rectangle to be drawn with your mouse. Now, on your entity's file, add this to your update() function:
if ( ((this.pos.x > ig.global.selectionRectangle[0] && this.pos.x < ig.global.selectionRectangle[1] ) ||
(this.pos.x < ig.global.selectionRectangle[0] && this.pos.x > ig.global.selectionRectangle[1] ) )
&&
((this.pos.y > ig.global.selectionRectangle[2] && this.pos.y < ig.global.selectionRectangle[3] ) ||
(this.pos.y < ig.global.selectionRectangle[2] && this.pos.y > ig.global.selectionRectangle[3] ))
){
console.log('selected +1');
}
The position of the this.parent(). in the entity's update code doesn't seem to affect the working.
You may also want to use
(this.pos.x + (this.size.x/2) instead of just position, so you'll compare whether the center of the entity was inside, not its origin point (0,0)EDIT: Forgot to take into consideration the screen/camera position. In the main.js draw() function, when setting the global variable, you have to sum the current screen position to properly select what the rectangle is drawn over.
if (ig.input.released('lclick')) {
var startx = this.mouseStart.x + ig.game.screen.x;
var starty = this.mouseStart.y + ig.game.screen.y;
var endx = ig.input.mouse.x + ig.game.screen.x;
var endy = ig.input.mouse.y + ig.game.screen.y;
ig.global.selectionRectangle = [startx, distx, endy, endy];