如何使用畫布繪製圖像精靈？

的代碼無法正常工作。如何改進我的代碼。

我有一些錯誤。

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); 
    } 
};

來源

2013-02-14 user1954217

什麼錯誤，這行？什麼是'nameImage'？ – 2013-02-14 05:37:54

'未捕獲的SyntaxError：意外令牌變種'管線'VAR BACKGROUND = {' – user1954217 2013-02-14 05:40:48

欲子畫面image_top，image_body，圖像底部的名稱將是'nameImage' – user1954217 2013-02-14 05:42:44

你必須用這段代碼來解決這個精靈動畫的許多問題。我不會去指出你的代碼的任何問題，但我強烈建議在嘗試編寫這種代碼之前先閱讀一下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");

來源

2013-02-14 06:50:48

要創建一個精靈動畫是非常重要的知道它是如何工作的。

你需要你的spritesheet使與像素精度（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 
       ); 
}

我希望我清楚d有用，

乾杯

PS：評論對問題或優化思路

來源

2013-02-21 11:11:29 Prox

如何使用畫布繪製圖像精靈？

回答

相關問題