HTML5 Game Development Blog

  • Tiled Game Engine slide



Unit selection decals

Category : Tiled Game Engine Mar 24th, 2015

Pages: 1 2

Unit Selection Decal demo
To manage units on maps we should select it somehow, the most usable way – by click or by tap on it. To visualize it we should spot selection unit somehow. And some visual effects will be nice. This post is about creating selection decals, custom entity type and unit selection itself.

Creating unit selection decal entity

Fist, let’s start with simple spot circle for unit selection. There are several options to do that, but I’d like to show how to create a procedural animation entity with Tiled Game Engine.

So, let’s start with new entity Selection, inherited from base Entity object:

	function Selection() {
        // call super-class implementation
        TiledGameEngine.EntitiesFactory.entity.call(this);

	// cached value of entity screen position
        this.scr = undefined;
	};

    // super-class inheritance
    Selection.prototype = Object.create(TiledGameEngine.EntitiesFactory.entity.prototype);

    Selection.prototype.init = function(data, assetManager, map) {
        // convert source data: screen coordinates to the tile coordinates, if any
        // data.x = data.x / map.tilewidth * 2;
        // data.y = data.y / map.tileheight;

        // call super-class implementation
        TiledGameEngine.EntitiesFactory.entity.prototype.init.call(this, data, assetManager, map);
	};

    Selection.prototype.update = function update(dt, time, viewport) {
        this.redraw = true;
        if (!this.animation) {
			this.redraw = false;
            return 1000;
        }
	};

    Selection.prototype.render = function render(ctx, stage, viewport) {
        if (!this.visible) return;
	};

    TiledGameEngine.EntitiesFactory.register('Selection', Selection);

Nothing new here. Let’s add some useful code inside. Let’s start from rendering:

    Selection.prototype.render = function render(ctx, stage, viewport) {
        if (!this.visible) return;

        // cache entity screen position, if not done yet
        if (!this.scr) {
            var scr = stage.tile2Scr( this.x, this.y);
            this.scr = new Int32Array([scr[0] - viewport[0],
                                       scr[1] - viewport[1] + ~~(this.map.tileheight/2)]);
        }

        ctx.save();
        ctx.beginPath();

        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.lineWidth;

        var PI2 = 2*Math.PI,
            x = this.scr[0] + viewport[0],
            y = this.scr[1] + viewport[1];

        ctx.ellipse(x, y, 20, 10, 0, 0, PI2);
        ctx.stroke();

        ctx.closePath();
        ctx.restore();
    };

Code above will draw ellipse on the screen. In most games that’s is default selection decal, but let’s add some animation. Our animation will make our selection ‘breathing’:

    Selection.prototype.render = function render(ctx, stage, viewport) {
        if (!this.visible) return;

        // cache entity screen position, if not done yet
        if (!this.scr) {
            var scr = stage.tile2Scr( this.x, this.y);
            this.scr = new Int32Array([scr[0] - viewport[0],
                                       scr[1] - viewport[1] + ~~(this.map.tileheight/2)]);
        }

        ctx.save();
        ctx.beginPath();

        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.lineWidth;

        var PI2 = 2*Math.PI,
            x = this.scr[0] + viewport[0],
            y = this.scr[1] + viewport[1];
        for (var i = 0; i < this.frame+1; ++i) {
            ctx.ellipse(x, y, 20 - i*2, 10 - i, 0, 0, PI2);
            ctx.stroke();
        }

        ctx.closePath();
        ctx.restore();
    };

Difference is in highlighted code. On each frame it will draw several ellipses. Count of them is equal to the frame number. Each ellipse is drawn with different radius, so on the frame #0 – it will be just one ellipse, on frame #1 – 2 nested ellipses and so on.

Playing with stroke color and it’s opacity we can make good looking effects.


Change unit selection decal color.

Source code, as usual, available on GitHub.

Watch Issue Star


Pages: 1 2

SHARE :

Leave a Reply

Your email address will not be published.


Like it? Share It!

We're making our best to provide good and valuable content. Please help us by clicking on one of the social icons, thanks for everything.