昆图斯显示第一个精灵 - 非常简单

Quintus getting first sprite displayed - very simple

本文关键字：非常 简单 精灵 第一个 显示      更新时间：2023-09-26

我已经编写了一些基于 Quintus 的代码，我认为这些代码应该在画布上显示一个球......但它没有！

如果有人能指出这个问题，将不胜感激。我已经从几个不同的来源改编了代码，这可能是问题所在。

代码如下，但只有几件事：

  • 对球.png的请求以 200 成功完成;
  • JavaScript 控制台未显示任何错误
  • 画布是可见的，但球.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);
      });
    });
});

当我尝试您的代码时，它没有给我任何错误，因为由于某种原因没有触发窗口加载事件。不知道为什么，但我设法通过不等待窗口加载来解决这个问题（删除代码中的第一行和最后一行）。

这样做之后，我在控制台中遇到了一些错误，即quintus_sprites中有一个函数试图访问未定义的属性。quintus_sprites尝试访问的属性是Q._generateCollisionPoints函数中的obj.p.points.length，但obj.p.points是未定义的（您从未在Ball init函数中定义过它，也从未将精灵插入到阶段中 - 此时只有Quintus会帮助根据精灵的资产生成点）。我设法通过在精灵的 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);
    });
});
相关文章：