Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by pokypine

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

code snippet?

1 decade ago by odiemiranda

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.

1 decade ago by pokypine

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...

1 decade ago by odiemiranda

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

1 decade ago by pokypine

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?

1 decade ago by wicht

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 ;)

1 decade ago by pokypine

Thanks wicht :) That's exactly the info I was looking for.
Page 1 of 1
« first « previous next › last »