Forums » Help » Moving sprite on X-axis.

I have a few powerups in my game (Hearts, Coins, etc).

I'd like to add some code within the update() method of an entity that hovers it in mid air (i.e. moves it up a few pixels and down a few pixels continuously).

e.g. Super Rocketeer Dev Video 3 - Synth Cards

I've used code in another entity to spin my entity using the following, I wasn't sure what kind of trigonometry I need to hover it in mid-air though:

update: function() {
  this.currentAnim.angle += Math.PI/0.8 * ig.system.tick;
}

I realise that the way I want the animating should probably be part of the entire sprite sheet and that's something I'll probably do in the future. But for the time being I'd like to be able to handle such movement in the update() method.

If you only want to move the entity up and down (Y axis !) then you can use a simple timer to either change the velocity or position . this.pos.y this.vel.y. Simply set the upper limit and record the start position and check against these values.

startposY: null,
moveUp: 5,

init..
this.startposY= this.pos.y;
this.endposY=this.pos.y-this.moveUp;

setup a timer and in your update code move the entity position between the two values. Use the timer to get the required speed.

If you want an animated flip as in the link I suggest you create the sprite sheet.

Thanks for the info Stuart, much appreciated. Yes, I tried to change the thread title from X-axis to Y-axis but it wouldn't let me. Ouch.

Having a little trouble with the timer.

startPosY: null,
endPosY: null,
moveUp: 5,
hoverTimer: null,
init: function(x, y, settings) {
    this.hoverTimer = new ig.Timer(2);
    this.startPosY = this.pos.y;
    this.endPosY = this.pos.y - this.moveUp;
    this.parent(x, y, settings);
},
update: function() {
    if (this.hoverTimer.delta() > 0) {
        this.startPosY += this.pos.y; // ?
        this.endPosY += this.pos.y - this.moveUp; // ?
        this.hoverTimer.reset();
    }
    this.currentAnim.update();
}

startPosY: null,
endPosY: null,
hoverTimer: null,

init: function(x, y, settings) {
    this.hoverTimer = new ig.Timer(2);
    
    this.pos.x = 50;
    this.pos.y = 100;
    this.vel.y = 5;
   
    this.parent(x, y, settings);
},

update: function() {
    if ( ! this.hoverTimer.delta() ) {
        this.vel.y *= -1;
        this.hoverTimer.reset();
    }
    this.currentAnim.update();
}

How about that?

Set up the timer, on update if the timer is 0, then reverse the velocity. So you will be moving 5 pixels / second, then 5 pixels down per second. And it will just keep alternating.

Typically when you are MOVING something you want to use this.vel because changing the pos.x or pos.y is like 'warping' or teleporting your entity and things get tricky.

this.pos === checking for location
this.vel === you want to move something

Doesn't seem to be working as intended. The entity just sits there in the same position with that code.

Quote from jswart

startPosY: null,
endPosY: null,
hoverTimer: null,

init: function(x, y, settings) {
    this.hoverTimer = new ig.Timer(2);
    
    this.pos.x = 50;
    this.pos.y = 100;
    this.vel.y = 5;
   
    this.parent(x, y, settings);
},

update: function() {
    if ( ! this.hoverTimer.delta() ) {
        this.vel.y *= -1;
        this.hoverTimer.reset();
    }
    this.currentAnim.update();
    this.parent(); // <-- add this
}

What about with the changes. I typically right pseudo-code response, they need to be fleshed out.

If I add the missing this.parent(); the entity falls to the ground.

EDIT: Still occurs if I remove this.currentAnim.update(); as well.

Here's the full snippet of code for the entity:

ig.module('game.entities.coin').requires('impact.entity').defines(function () {
    EntityCoin = ig.Entity.extend({
        size: { x: 8, y: 8 },
        checkAgainst: ig.Entity.TYPE.A,
        animSheet: new ig.AnimationSheet('media/sprites/coin.png', 9, 9),
        collectSFX: new ig.Sound('media/sounds/coin.ogg'),
		hoverTimer: null,
        init: function (x, y, settings) {
            this.addAnim('idle', 0.2, [0, 1, 2, 3]);
			
			this.hoverTimer = new ig.Timer(2);
			
			this.pos.x = 50;
			this.pos.y = 100;
			this.vel.y = 5;

            this.parent(x, y, settings);
        },
        check: function (other) {
            this.kill();
            this.collectSFX.play();
            ig.game.coinCount++;
        },
        update: function () {
			if (!this.hoverTimer.delta()) {
				this.vel.y *= -1;
				this.hoverTimer.reset();
            }
            this.currentAnim.update();
			this.parent();
        }
    });
});

Example: speed is to set the timer ,distance is used to set y velocity and flip changes the direction.I also set the gravityFactor to 0 just in case the default has been changed.

ig.module('game.entities.card').requires('impact.entity').defines(function () {
    EntityCard = ig.Entity.extend({
        size: { x: 32, y: 32 },
        checkAgainst: ig.Entity.TYPE.A,
        animSheet: new ig.AnimationSheet('media/card.png', 32, 32),
        gravityFactor:0,
        hoverTimer: null,
        flip:false,
        speed: 0.5,
        distance: 20,
        init: function (x, y, settings) {

            this.addAnim('idle', 0.2, [0]);
            this.hoverTimer = new ig.Timer(this.speed);
            this.parent(x, y, settings);

        },
        check: function (other) {

            this.kill();
        },

        update: function () {

            if (this.hoverTimer.delta() > 0) {
                this.flip = !this.flip;
                this.hoverTimer.reset();
            }

            if (!this.flip) {
                this.vel.y = this.distance;
            } else {
                this.vel.y = -this.distance;
            }

            this.parent();
        }
    });
});

Quote from jswart

startPosY: null,
endPosY: null,
hoverTimer: null,

init: function(x, y, settings) {
    this.hoverTimer = new ig.Timer(2);
    
    this.pos.x = 50;
    this.pos.y = 100;
    this.vel.y = 5;
   
    this.parent(x, y, settings);
},

update: function() {
    if ( ! this.hoverTimer.delta() ) {
        this.vel.y *= -1;
        this.hoverTimer.reset();
    }
    this.currentAnim.update();
}

Found the error for me. timer.delta() is a big float that approaches 0 but never quite gets there. So you can use timer.delta > 0, or i used

if ( ! Math.floor(this.hoverTimer.delta()) ) // ...

Ended up using the code by StuartTresadern. Thanks for your support guys.