Question

我试图通过构建我自己的游戏引擎来教自己。当我说基本的基本游戏引擎时，那不是拼写错误。到目前为止，我所拥有的只是一个简单的文本加载器，而且我正在使用单个图像加载器。即使使用和.onload =函数样式技术，我也无法将图像显示在画布中。事实上，我总是有图像加载的问题，我只是为了屎和咯咯笑，制作了一个视频加载器，加载了四个短视频，制作和附加视频标签和持有它们的div，而STILL，图像驱动我坚果家伙和女孩！ WTF！任何帮助，但更重要的是，洞察力对于新手试图理解而不是在没有理解的情况下进行复制是非常有价值的。提前谢谢。

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

function drawText(context, pxSize, fontStyle, color, text, x, y){
  context.font = pxSize + 'px ' + fontStyle;
  context.fillStyle = color;
  context.fillText(text, x, y);
}

function drawHero(src, sourceX, sourceY, sourceWidth, sourceHeight, x, y, height, width){ 

  var hero = {
    image: new Image(),
    src: src,
    sourceX: sourceX,
    sourceY: sourceY,
    sourceWidth: sourceWidth + 'px',
    sourceHeight: sourceHeight + 'px',
    x: x,
    y: y,
    width: width + 'px',
    height: height + 'px'
  };

  hero.image.onload = function(){

   context.drawImage(hero.image, hero.sourceX, hero.sourceY, hero.sourceWidth, 

hero.sourceHeight, hero.x, hero.y, hero.width, hero.height);
  }
  hero.image.src = src;
}


drawHero("sonic.png" , "sonic1", 0, 0, 85, 119, 10, 10, 85, 119);

Answer 1

您将hero.width和hero.height定义为字符串，这会导致错误，因为context.drawImage需要高度和宽度的数字。

取走width: width + "px"和height: height + "px"，并将其替换为width: width和height: height。

编辑：刚刚意识到你对hero.sourceWidth和hero.sourceHeight做了同样的事情。

编辑2：刚刚意识到，当只有9个参数时，你将10个参数传递给drawHero。你应该删除"sonic1"。

编辑3：您也错误地将参数排序为context.drawImage。您可能希望阅读此内容：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage。用这个： context.drawImage(hero.image, hero.x, hero.y, hero.width, hero.height, hero.sourceX, hero.sourceY, hero.sourceWidth, hero.sourceHeight);

祝你的游戏引擎好运！

Answer 2

要让你的图片，更一般地说是你的资源，加载正确，有一个单独的功能来创建资源，并有一个开始＆＃39;每个资源加载后启动引擎的函数。

var resourceCount = 0;
function loadResource(type, src) {
    if (type == Image) {
       resourceCount++;
       var newImage = new Image();
       newImage.onload = resourceLoaded;
       // you might want to handle errors to ease debugging.
       // newImage.onerror = ...
       newImage.src = src;
       return newImage;
    }
    // ... some other code for your text / sound / ... ressources
}

function resourceLoaded(loadedEvt) {
   resourceCount--;
   if (resourceCount == 0) startEngine();
}

// use with :
var heroImage = loadResource(Image, 'hero.png');

试图建立一个基本的基本游戏引擎

2 个答案: