Hola muchas gracias, por sus respuestas y una disculpa por contestar apenas, voy entrando y realice la supuesta 'solución', metí las 19 imágenes a un spritesheet, pero ahora obtengo este resultado, que me da como una salto va bajando las manos y usando la otra tecnica de cargar 19 imágenes no pasaba esto.
Anterior mente lo que pasaba era de que parpadeaba mi imagen, ahora como que no corre todos los frames, les dejo ambos códigos para que vean como lo ejecuto y ejecutaba:
Este es el antiguo cargando 19 imágenes:
canvas_spr=document.getElementById("myCanvas");
canvas_spr.width= 145;
canvas_spr.height= 175;
var time_changecaracter;
var cc=1;
var tiempo_edit=30;
var url_spr = "../Avatar/000001/";
var ctx_spr=canvas_spr.getContext("2d");
var img_spr= new Image();
img_spr.src= url_spr;
ctx_spr.drawImage(img_spr,0,0,145,175);
time_changecaracter= setInterval(function(){
switch(cc){
case 1:img_spr.src= url_spr+ cc+ ".png";break;
case 2:img_spr.src= url_spr+ cc+ ".png";break;
case 3:img_spr.src= url_spr+ cc+ ".png";break;
case 4:img_spr.src= url_spr+ cc+ ".png";break;
case 5:img_spr.src= url_spr+ cc+ ".png";break;
case 6:img_spr.src= url_spr+ cc+ ".png";break;
case 7:img_spr.src= url_spr+ cc+ ".png";break;
case 8:img_spr.src= url_spr+ cc+ ".png";break;
case 9:img_spr.src= url_spr+ cc+ ".png";break;
case 10:img_spr.src= url_spr+ cc+ ".png";break;
case 11:img_spr.src= url_spr+ cc+ ".png";break;
case 12:img_spr.src= url_spr+ cc+ ".png";break;
case 13:img_spr.src= url_spr+ cc+ ".png";break;
case 14:img_spr.src= url_spr+ cc+ ".png";break;
case 15:img_spr.src= url_spr+ cc+ ".png";break;
case 16:img_spr.src= url_spr+ cc+ ".png";break;
case 17:img_spr.src= url_spr+ cc+ ".png";break;
case 18:img_spr.src= url_spr+ cc+ ".png";break;
case 19:img_spr.src= url_spr+ cc+ ".png";cc= 0;break
};
ctx_spr.clearRect(0,0,145,175);ctx_spr.drawImage(img_spr,0,0,145,175);cc++},tiempo_edit);
Ahora estoy estoy haciendo usando el spritesheet
var sprite_spr,sprite_sheet,canvas_spr;
function sA01 () {
window.requestAnimationFrame(sA01);
sprite_spr.update();
sprite_spr.render();
}
function sprite (options) {
var that = {},frameIndex = 0,tickCount = 0,ticksPerFrame = options.ticksPerFrame || 0,numberOfFrames = options.numberOfFrames || 1;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
if (frameIndex < numberOfFrames - 1) {
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function () {
that.context.clearRect(0, 0, that.width, that.height);
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
0,
0,
that.width / numberOfFrames,
that.height);
};
return that;
}
canvas_spr=document.getElementById("myCanvas");
canvas_spr.width= 145;
canvas_spr.height= 175;
sprite_sheet = new Image();
sprite_spr = sprite({
context: canvas_spr.getContext("2d"),
width: 2755,
height: 175,
image: sprite_sheet,
numberOfFrames: 19,
ticksPerFrame: 3
});
sprite_sheet.addEventListener("load", sA01);
sprite_sheet.src = "../Avatar/000001/spritesheet.png";