Quintus獲取第一個精靈顯示 - 非常簡單

Question

我已經寫了一些基於Quintus的代碼，我相信它應該在畫布上顯示一個球......但它不會！

如果有人能指出問題，將不勝感激。我修改了幾個不同來源的代碼，這可能是問題所在。

的代碼以下，但只是一對夫婦的事情：

• 爲ball.png請求成功地與一個200完成;
• 的JavaScript控制檯顯示沒有錯誤
• 畫布可見，但ball.png不是

所以這裏的代碼：

window.addEventListener("load",function() { // Wait for the window to finish loading 

var Q = window.Q = Quintus()    // Create a new engine instance 
    .include("Sprites, Scenes, Input, 2D, Anim, Touch, UI") // Load any needed modules 
    .setup("myGame")      // Bind Quintus to the canvas with ID "myGame" 
    .controls()        // Add in default controls (keyboard, buttons) 
    .touch();        // Add in touch support (for the UI) 

    /* 
    ... Actual game code goes here ... 
    */ 
    Q.Sprite.extend("Ball",{ 
     init:function(p) { 
     this._super(p,{ 
      asset: "ball.png", 
      x: 0, 
      y: 300, 
      vx: 50, 
      vy: -400 
     }); 
     }, 

     step: function(dt) { 
     this.p.vy += dt * 9.8; 

     this.p.x += this.p.vx * dt; 
     this.p.y += this.p.vy * dt; 
     } 
    }); 

    Q.load(["ball.png"],function() { 
     var ball = new Q.Ball(); 
     Q.gameLoop(function(dt) { 
     ball.update(dt); 
     Q.clear(); 
     ball.render(Q.ctx); 
     }); 
    }); 

}); 

Answer 1

當我想你的代碼，它給了我沒有錯誤，因爲窗口加載事件沒有被觸發。不知道爲什麼在那部分，但我設法解決這個問題，不要等待窗口加載（刪除代碼中的第一行和最後一行）。

這樣做後，我在控制檯中遇到了一些錯誤，即在quintus_sprites中有一個函數試圖訪問未定義的屬性。 quintus_sprites嘗試訪問的屬性是Q._generateCollisionPoints函數中的obj.p.points.length，但obj.p.points未定義（您從未在您的Ball init函數中定義它，並且您從未將該精靈插入到階段 - 在這一點上，Quintus會幫助根據精靈的資產生成點）。我設法通過在sprite的init函數中設置任意數組的點來解決這個問題。

下面是進行上述修正後爲我的作品的代碼：

var Q = window.Q = Quintus()    // Create a new engine instance 
.include("Sprites, Scenes, Input, 2D, Anim, Touch, UI") // Load any needed modules 
.setup("myGame")      // Bind Quintus to the canvas with ID "myGame" 
.controls()        // Add in default controls (keyboard, buttons) 
.touch();        // Add in touch support (for the UI) 

/* 
... Actual game code goes here ... 
*/ 
Q.Sprite.extend("Ball",{ 
    init:function(p) { 
     this._super(p,{ 
      asset: "ball.png", 
      points: [[0, 0], [1, 0], [1, 1], [0, 1]], 
      x: 0, 
      y: 300, 
      vx: 50, 
      vy: -400 
     }); 
    }, 

    step: function(dt) { 
     this.p.vy += dt * 9.8; 

     this.p.x += this.p.vx * dt; 
     this.p.y += this.p.vy * dt; 
    } 
}); 

Q.load("ball.png",function() { 
    console.log("Loaded"); 
    var ball = new Q.Ball(); 
    Q.gameLoop(function(dt) { 
     ball.update(dt); 
     Q.clear(); 
     ball.render(Q.ctx); 
    }); 
});