Как нарисовать изображение спрайт с помощью холста?

Question

Я хочу нарисовать изображение спрайт, используя холст.

Код не работает. Как улучшить код.

У меня есть ошибка.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var Game = { 

draw_image: function(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH){ 

var img = new Image(); // Create new img element 
img.src = 'images/background.png'; // Set source path 
img.onload = function(){ 
      canvas.width = 1000; 
      canvas.height = 500; 
      ctx.drawImage(img, sourceX, sourceY, sourceW, sourceH, destX, destY, destW, destH); 
}; 
} 

var BACKGROUND = { 
    image_top: { x: 5, y: 5, w: 1280, h: 480 , dx:0 ,dy:0 ,dw:500 ,dh:500 }, 
    image_body: { x: 5, y: 495, w: 1280, h: 480 , dx:0 ,dy:150 ,dw:500 ,dh:350}, 
    image_bottom: { x: 5, y: 985, w: 1280, h: 480 , dx:0 ,dy:300 ,dw:500 ,dh:200 } 
}; 

for(var n = 0 ; n < BACKGROUND.length ; n++) { 
    draw_image(nameImage, BACKGROUND[n].x,BACKGROUND[n].y, BACKGROUND[n].w, BACKGROUND[n].h, BACKGROUND[n].dx, BACKGROUND[n].dy, BACKGROUND[n].dw, BACKGROUND[n].dh); 
    } 
}; 

Answer 1

У вас должно быть много проблем с этим кодом, чтобы сделать эту анимацию спрайтов. Я бы не стал указывать на какие-либо проблемы с вашим кодом, но я настоятельно рекомендую прочитать немного о functions and variable scope, прежде чем пытаться написать такой код.

Другое простое (и лучше всего подходит для новичков) решением может быть использовать структуру холста, как EaselJS, с этим вы можете сделать что-то подобное, чтобы анимировать спрайт

var data = { 
    images: ["images/background.png"], 
    frames: {width:50, height:50}, 
    animations: {run:[0,4], jump:[5,8,"run"]} 
}; 
var animation = new createjs.BitmapAnimation(data); 
animation.gotoAndPlay("run"); 

Answer 2

Для создания спрайтов анимации это важно знать, как это работает.

Вам нужен ваш спрайт с точностью до пикселя (1 пиксель может испортить вашу анимацию).

Как и у here, персонаж всегда находится в том же районе, что делает его простым, когда вы делаете спрайты.

При этом вы можете сделать объект для каждого спрайт у вас есть как:

function Sprite(_position, _numberFrame, _framesize, _image, _duration){ 
    this.position = _position;  //Array like { x : 0, y : 0 } 
    this.rendersize = _rendersize; //Array like { width : 50, height : 80 } 
    this.framesize = _framesize; //Array like { width : 50, height : 80 } 
    this.image = _image;   //Image object 
    this.chrono = new Chrono(_duration); //Explanation below 
} 

Для получения дополнительной анимации точности вы можете добавить хронограф, который будет управлять временем анимации:

function Chrono(_duration){ 
    this.currentTime = 0; 
    this.lastTime = 0; 
    this.timeElapse = 0; 
    this.duration = _duration; 
} 

Chrono.prototype.countTime = function(){ 
    this.currentTime = Date.now(); 

    if(this.lastTime != 0) 
     this.timeElapse += this.currentTime - this.lastTime; 

     this.lastTime = Date.now(); 

    if(this.timeElpase >= this.duration && this.lastTime != 0){ 
     this.timeElapse = 0; 
     return TRUE; 
    } else { 
     return FALSE; 
    } 
} 

Тогда функция для анимирования вашего спрайта может понравиться:

Sprite.prototype.render = function(){ 
    if(this.position.x <= this.image.width && this.chrono.countTime()){ 
     this.position.x += this.framesize.x; 
    } else { 
     this.position.x = 0; 
    } 
    ctx.drawImage(this.image, 
        this.position.x, this.position.y, 
        this.framesize.width, this.framesize.height, 
        this.rendersize.width, this.rendersize.height 
       ); 
} 

Надеюсь, я поняла, г полезно,

Приветствие

PS: Комментарии к вопросительным или оптимизации идей