Duplicate Player Image. One Animates and Moves, the other one stay static. Q.sheet problem?

[acarlstein]

In this URL, you can see what I am working on: http://codepen.io/acarlstein/pen/MjNLBQ Use the arrows to move the ship (player) so you can see the problem I am spotting.

I believe that there may be a problem with Q.sheet or how I am using it.

The issue reside that there is a duplicate image of the player. There should only being one image of the player. One is static in the center. It doesn't animate or move. The other does animates and move.

(Just a FYI, I am loading the resources via urls.)

Here is the CSS code: body { overflow:hidden; padding: 0; margin: 0; }

Here is the JS code: ` /**

• Libraries loaded:
• -> https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
• -> http://cdn.html5quintus.com/v0.2.0/quintus-all.js
• -> https://cdn.rawgit.com/cykod/Quintus/master/lib/quintus_scenes.js
• Note: To turn text js into cdn go to http://rawgit.com/ */

var backgroundUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/background.png"; var playerUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/EXL-BR2-sizes.gif"; var shotUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/M484BulletCollection1.png"; var alienUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/spaceship.png"; var resourcesUrlList = [backgroundUrl, playerUrl, shotUrl, alienUrl];

// Include Sprite module and set game's canvas size var Q = Quintus().include("Sprites, Anim, 2D, Input, Scenes, Touch") .setup({width: 800, height: 480})
.touch() .controls();

Q.Sprite.extend("Player", { init: function(player){
this._super(player, {
sprite: "player", sheet: "player", x: Q.el.width / 2, y: Q.el.height / 2, type: Q.SPRITE_FRIENDLY, speed: 10 });
this.add("animation"); this.play("default"); this.add("Gun"); }, step: function(dt){

if (Q.inputs['left']){
  this.p.x -= this.p.speed;
}else if (Q.inputs['right']){
   this.p.x += this.p.speed;
}    
this.p.x = clamp(this.p.x, 0 + (this.p.w / 2), Q.el.width - (this.p.w / 2));

} });

var clamp = function(value, min, max){ return value < min ? min : (value > max ? max : value); }

Q.Sprite.extend("Shot", { init: function(player){ this._super(player, { sprite: "shot", sheet: "shot", speed: 200 }); this.add("animation"); this.play("default"); }, step: function(dt){ this.p.y -= this.p.speed * dt; // Execute in different intervals if (this.p.y > Q.el.height || this.p.y < -10){ this.destroy(); } } });

Q.Sprite.extend("Alien", { init: function(player){ this._super(player, { sprite: "alien", sheet: "alien", x: Q.el.width / 2, speed: 200 }); //this.p.x = clamp(this.p.x, 0 + (this.p.w / 2), Q.el.width - (this.p.w / 2)); this.p.y = this.p.h; this.add("animation"); this.play("default"); } });

Q.component("Gun", { added: function(){ this.entity.p.shots=[]; this.entity.p.canFire = true; this.entity.on("step", "handleFiring"); }, extend: { handleFiring: function(dt){ var entity = this; for (var i = entity.p.shots.length - 1; i >= 0; --i){ if(entity.p.shots[i].isDestroyed){ entity.p.shots.splice(i, 1); // Removed shot! } } if (Q.inputs['fire']){
entity.fire();
} }, fire: function(){
if (Q.inputs['fire']){
var entity = this; if (!entity.p.canFire) return; var shotSetting = {x: entity.p.x, y: entity.p.y - 50, speed: 200, type: Q.SPRITE_DEFAULT | Q.SPRITE_FRIENDLY}; var shot = Q.stage().insert(new Q.Shot(shotSetting)); entity.p.shots.push(shot); entity.p.canFire = false; setTimeout(function(){ entity.p.canFire = true; }, 300); } } } });

Q.scene("mainLevel", function(stage) {

var background = new Q.Sprite({ asset: backgroundUrl, x: Q.el.width / 2, y: Q.el.height / 2, type: Q.SPRITE_NONE}); stage.insert(background);

var player = new Q.Player();

stage.insert(player);

stage.insert(new Q.Shot());

stage.insert(new Q.Alien()); });

var defaultAnimationFrame = { default: { frames: [0, 1, 2, 3], rate: 1/4 } };

Q.load(resourcesUrlList, function(){

Q.sheet("player", playerUrl,{ tilew: 29.5, // Each tile is 31 pixels; however, I use 29.5 pixels to make it work. I need to find out why. tileh: 32, // and 32 pixels tall sx: 89, // start the sprites at x = 89 sy: 166, // and y = 166
w: 238, h: 206 });

Q.sheet("shot", shotUrl,{ tilew: 15,
tileh: 11,
sx: 173,
sy: 142,
w: 520, h: 361 });

Q.sheet("alien", alienUrl,{ tilew: 50,
tileh: 25,
sx: 50,
sy: 30,
w: 250, h: 55 });

Q.animations("player", defaultAnimationFrame);
Q.animations("shot", defaultAnimationFrame); Q.animations("alien", defaultAnimationFrame);

Q.clearStages(); Q.stageScene("mainLevel");

});

`

[viki53]

Hi

Did you look at your background image? Seems like the problem wasn't Quintus… 😉

P.S.: Please try to use proper MarkDown next time to make your code and message more legible.

[acarlstein]

I apologize for no noticing such mistake from my part. Thanks for your help and time.