Forums » Help » Is a Tetris-like game possible?

Is it possible to create a tetris-like game with Impact?

I haven't dug in too far with the idea but initially it seems like having all the entities be square in Impact prevents having different shapes that could fit together.

I saw the forum post about making entities be circles with the physics example, is it possible to define arbitrary shapes for entities?

Thanks!
Colin

It certainly is possible, yes.

But using Impact's collision detection (or Box2D) for something like Tetris is really the wrong approach. It will end up like this: http://www.youtube.com/watch?v=EaFzw_2vN7E :)

Also, Impact&039;s entity system won't help you that much. You could use the BackgroundMap and CollisionMap for those blocks that are already static and use one entity for the currently active block. You can also overwrite the #draw() method of the block entity, to draw the block out of 4 tiles, instead of just using one graphic.

But remember that you don't have to use any of the features that Impact offers. If you want to draw your block graphics yourself, just load an ig.Image and do so. You don't have to use entities if it makes no sense for your game.

Hi dominic,

I'm making a tetris like game and I can't get a block in the area of another block, I mean:

http://cl.ly/6llu

I read the previous post and now I got the angle block drawn overwriting the draw() method of the entity, but actually I got the same behavior than loading a complete graphic because I need to specify the size of the block...

EntityAnglePiece = EntityPiece.extend({
	size: {x:8, y:12},

	draw: function() {
		var tile = new ig.Image('media/pieces/angle_tile.png');
		tile.drawTile(this.pos.x, this.pos.y, 0, 4);
		tile.drawTile(this.pos.x, this.pos.y + 4, 0, 4);
		tile.drawTile(this.pos.x, this.pos.y + 8, 0, 4);
		tile.drawTile(this.pos.x + 4, this.pos.y + 8, 0, 4);
	}
});

Can you give me a bit of light to this problem? Thanks!

Entities are boxes when it comes to collision-- way cheaper than polygons and curves. There may be a way around it, but if not, what if you made each tetris block be a container for smaller pieces?

In your example above, EntityAnglePiece would be the container (no collision), and each 'tile' would be a 4x4 entity that is moved with its parent that actually deals with the collision.

Also, I'd imagine you'd have to do some magic code if you're letting the collision code do the work-- it'd be pretty hard to squeeze those blocks in the right spots and being pixel perfect!

This is totally possible. I just had one idea that probably isn't the best but I'll put it out there anyway.

What I think would work is if you were to have an entity called EntityL (which thes L shaped piece) and inside that entity have the four smaller blocks that make the L. Set the EntityL to have no collision and have it rely on the inner blocks. Call them EntityBlock. That way you can move them as a group and collision will be tied to them.

At least, that's how I'd do it. :)

First of all, thanks for the help.

OK. So I have an entity called block now but, how can I draw it on its container? this.spawnEntity is not working on the container entity...

Thanks

spawnEntity is a method of your game instance; try:

ig.game.spawnEntity(EntityTileBlock, x, y);

Quote from jsantell
spawnEntity is a method of your game instance; try:
##
ig.game.spawnEntity(EntityTileBlock, x, y);
##

Ooops... I tried that writing ig.Game.spawnEntity instead ig.game.spawnEntity! :P

All right, I have now this code:

EntityPieceBlock = ig.Entity.extend({
    size: {x:4, y:4},

    init: function() {
		this.addAnim('idle', 1, [0]);
    }
});

EntityAnglePieceBlock = EntityPieceBlock.extend({
    animSheet: new ig.AnimationSheet('media/pieces/angle_tile.png', 4, 4)
});

EntityAnglePiece = EntityPiece.extend({
	init: function() {
            ig.game.spawnEntity(EntityAnglePieceBlock, 20, 20);
            ig.game.spawnEntity(EntityAnglePieceBlock, 20, 20);
            ig.game.spawnEntity(EntityAnglePieceBlock, 20, 20);
            ig.game.spawnEntity(EntityAnglePieceBlock, 20, 20);
	}
});

Those x=20 and y=20 are random values right now, because whatever location I specify the blocks appears on 0, 0

http://cl.ly/6pYM

Some help? :(

I think you're getting the idea slightly wrong.

You wanna build the L shape with the positions of the EntityAnglePieceBlock's.

So something like...

ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y+4);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y+4+4);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x+4, this.pos.y+4+4+4);

//  1
//  2
//  3 4

ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y+4);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x, this.pos.y+4+4);
ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x+4, this.pos.y+4+4+4);

// 1
// 2
// 3 4

I agree this would be the proper way of creating the L shape. Simply add an extra 4px onto Y or X as appropriate. Although I should suggest one minor improvement to getting the shape right:

ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x+4, this.pos.y+4+4+4);##

should be:

ig.game.spawnEntity(EntityAnglePieceBlock, this.pos.x+4, this.pos.y+4+4);##

(one less +4 on the Y pos)

The other way would give:

// 1
// 2
// 3
// 4

The Y pos should not increase for the last bock. 4 needs to be the length Y as 3 for it to match up.
Lengthy explanation I know.