Forums » Help » Dragging

Does Impact support dragging of entities with mouse/touch? For instance a simple sliding tile puzzle type game?

code snippet?

I've tried doing a simple code

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	pos: {x:0, y:0},
	m_pos:{x:0, y:0},
	font: new ig.Font( 'media/fonts/tungsten-18.png' ),
	backdrop : new ig.Image('media/background/bg.png'),
	
	
	init: function() {
		// Initialize your game here; bind keys etc.
		
		ig.input.initMouse();
		ig.input.bind( ig.KEY.MOUSE1, 'lbtn' );
        
	},
	
	update: function() {
		// Update all entities and backgroundMaps
        this.parent();
        
        
        if (ig.input.pressed('lbtn')) {
            this.m_pos.x = ig.input.mouse.x;
            this.m_pos.y = ig.input.mouse.y;
            this.pos.old_y = this.pos.y;
            this.pos.old_x = this.pos.x;
        }
        
        if (ig.input.state('lbtn')) {
            this.pos.y = this.pos.old_y - -(ig.input.mouse.y - this.m_pos.y);
            this.pos.x = this.pos.old_x - -(ig.input.mouse.x - this.m_pos.x);
        }

		// Add your own, additional update code here
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		this.backdrop.draw(this.pos.x,this.pos.y);
		
		// Add your own drawing code here
		var x = ig.system.width/2,
			y = ig.system.height/2;
		
		this.font.draw( 'It Works!', this.pos.x + x, this.pos.y + y, ig.Font.ALIGN.CENTER );
	}
});


// Start the Game with 60fps, a resolution of 720x520, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 740, 540, 1 );

});

Hope this helps to give you an idea.

Wouldn't this just cause the entire game to move around? Can a similar approach be used to drag individual entities? Whichever one was clicked/touched...

Well, my intention is not give an exact solution but just to give the idea.

Well, I'm new to this and I need to know if it will work before I spend $99 on this just to test. My experience is in Actionscript, and getting general info about where the mouse is, is quite different than being able to known what object was clicked on and such...

Anyone? Is there support for determining which entity was clicked on?

To check if an entity has been clicked:

1. Bind the mouse button to an event
2. In the entity's update method check for that event
3. If the event happens, check if the entity is under the mouse

in main.js

init: function() {
    ...
    ig.input.bind(ig.KEY.MOUSE1, 'click');
    ...
}

in the entity:

inFocus: function() {
    return (
        (this.pos.x <= ig.input.mouse.x <= this.pos.x + this.size.x) &&
        (this.pos.y <= ig.input.mouse.y <= this.pos.y + this.size.y)
    );
}

update: function() {
    ...
    if (ig.input.pressed('click') && this.inFocus()) {
        // do whatever you want when this entity is clicked
    }
}

Quite easy, isn't it ;)

If you wan't to make heavy use of drag and drop, it's maybe better to use DOM stuff in conjunction with Impact ... e.g. an inventory is easier to integrate with DOM in my opinion, and nobody says that you should only use Impact to draw stuff ;)

Thanks wicht :) That's exactly the info I was looking for.