画布drawImage莫名其妙地偏移了1个像素

织物

我正在做一个使用角色精灵表的画布游戏。
角色的尺寸为64像素宽和128像素高,每个动画10帧。
因此,单个动画的总宽度为640px宽和128px高。
但是,当我使用以下代码时,动画偏移1px,有时在按住移动键时会闪烁。

player.width = 64;  
player.height = 128;  
player.x = canvas.width / 2;
player.y = canvas.height / 2;


ctx.drawImage(
    LoadedImages.player_sprite,
    64, // This is offset by 1px when moving. 63px fixes it.
    128,
    player.width,
    player.height,
    player.x,
    player.y,
    player.width,
    player.height
);  

这是发生的情况的图片:将宽度更改为63似乎可以解决问题,但是并不能解释为什么它首先要这样做。
该死

完整代码可在Codepen
http://codepen.io/Codewoofy/pen/QNGLNj
Sprite Sheet上找到:
哦

完整代码:

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;

// jQuery Objects
var $canvas = $("#canvas");
var $debug = $("#debug");

var KEY = {
   W: 1,
   UP: 38,
   LEFT: 39,
   RIGHT: 37,
   SPACE: 32,
   SHIFT: 16
};

var COLOR = {
   DARKRED: "#9C1E33",
   WHITE: "#FFFFFF"
}

var MESSAGE = {
   UNDEFINED: "",
   PRELOAD_ATTEMPT: "Attempting to preload: ",
   ERROR_IMAGE_PRELOAD: "Unable to preload images.",
   SUCCESS_IMAGE_PRELOAD: "Images successfully preloaded."
}

// Images
var Images = {
   player_sprite: "http://h.dropcanvas.com/30npe/Talia-Sheet-Fix.png",
   main_background: "http://h.dropcanvas.com/9kgs1/background_main.png"
}
var LoadedImages = {};

// Dictionaries.
var game = {};
game.enviroment = {};
game.canvas = $canvas[0];
game.canvas.height = 500;
game.canvas.width = 700;
var ctx = game.canvas.getContext('2d');
var player = {};

// Debug
game.debug = function(msg) {
   if (msg == "") msg = MESSAGE.UNDEFINED;
   $debug.prepend(msg + "<br />");
}

// Preloader.
game.loadImages = function() {
   LoadedImages = {};
   Object.keys(Images).forEach(function(path) {
      game.debug(MESSAGE.PRELOAD_ATTEMPT + path);
      var img = new Image;
      img.onload = function() {
         LoadedImages[path] = img;
         if (Object.keys(LoadedImages).length == Object.keys(Images).length) {
            game.onImagesLoaded();
         }
      }
      img.onerror = function() {
         game.onFailedPreload();
      }
      img.src = Images[path];
   });
}

game.onFailedPreload = function() {
   game.debug(MESSAGE.ERROR_IMAGE_PRELOAD);
}

game.onImagesLoaded = function() {
   game.debug(MESSAGE.SUCCESS_IMAGE_PRELOAD);
   game.game_update();
}

game.onLoad = function() {
   // Game settings
   game.keys = [];
   game.running = false;
   game.lastUpdate = 0;
   // Enviroment
   game.enviroment.gravity = 0.5;
   game.enviroment.friction = 0.9;
   // Player settings
   player.name = "Talia";
   player.color = COLOR.DARKRED;
   player.direction = 'L';
   player.width = 64;
   player.height = 128;
   player.speed = 4;
   player.walkspeed = 4;
   player.sprintspeed = 10;
   player.jumping = false;
   player.animation_frame = 0;
   player.velX = 0;
   player.velY = 0;
   player.x = 0;
   player.y = 0;
   // Player Stats
   player.health = 100;
   player.mana = 100;
   player.maxhealth = 100;
   player.maxmana = 100;

   game.loadImages();
}

/* Update the game every frame */
game.game_update = function() {
   // Sprint
   if (game.keys[KEY.SHIFT]) {
      console.log(LoadedImages);
      player.speed = player.sprintspeed;
   } else {
      player.speed = player.walkspeed;
   }
   // Jump
   if (game.keys[KEY.UP] || game.keys[KEY.SPACE]) {
      if (!player.jumping) {
         player.jumping = true;
         player.velY = -player.walkspeed * 2;
      }
   }
   // Left
   if (game.keys[KEY.LEFT]) {
      player.direction = "L";
      if (player.velX < player.speed) {
         player.velX++;
      }
   }
   // Right
   if (game.keys[KEY.RIGHT]) {
      player.direction = "R";
      if (player.velX > -player.speed) {
         player.velX--;
      }
   }
   // Gravity and Friction
   player.velX *= game.enviroment.friction;
   player.velY += game.enviroment.gravity;
   player.x += player.velX;
   player.y += player.velY;

   // Collisions
   // LEFT RIGHT
   if (player.x >= game.canvas.width - player.width) { // Check Right Collision
      player.x = game.canvas.width - player.width;
   } else if (player.x <= 0) { // Check Left Collision
      player.x = 0;
   }
   // UP DOWN
   if (player.y >= game.canvas.height - player.height) {
      player.y = game.canvas.height - player.height;
      player.jumping = false;
   }

   // Draw Objects
   game.draw_background();
   game.draw_player();

   // Request next animation frame
   requestAnimationFrame(game.game_update);
}

game.draw_player = function() {
   ctx.beginPath();
   ctx.drawImage(LoadedImages.player_sprite, 64, 128, player.width, player.height, player.x, player.y, player.width, player.height);
   /*
   if (player.direction == "R") {
      ctx.drawImage(LoadedImages.player_sprite, 65, 128, player.width, player.height, player.x, player.y, player.width, player.height);
   } else if (player.direction == "L") {
      ctx.drawImage(LoadedImages.player_sprite, 63, 0, player.width, player.height, player.x, player.y, player.width, player.height);
   }
   */

   ctx.closePath();
}

game.draw_background = function() {
   ctx.beginPath();
   ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
   ctx.closePath();
}

game.draw_UI = function() {
   ctx.beginPath();

   ctx.closePath();
}

/* Listeners */
document.body.addEventListener("keydown", function(e) {
   game.keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
   game.keys[e.keyCode] = false;
});

/* Load Game */
window.addEventListener("load", function() {
   game.onLoad();
});
body,
html {
   position: relative;
}

canvas {
   border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="700" height="500"></canvas>Use Arrow keys to move.
<p id="debug"><p>

1cgonza

问题似乎是您player.x是个浮动会员。这样很难解释像素完美的涂料。

当您用速度更新值时,四舍五入player.xdrawImage()或。

使用按位运算符,您可以简单地执行以下操作:

player.x += player.velX | 0;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本莫名其妙地忽略了其容器的边界

来自分类Dev

tar莫名其妙地试图打开一个不存在的目录

来自分类Dev

tar莫名其妙地试图打开一个不存在的目录

来自分类Dev

C代码莫名其妙地跳过了行

来自分类Dev

pandas.merge莫名其妙地缓慢

来自分类Dev

OpenGL矩形莫名其妙地占据了整个窗口

来自分类Dev

C代码莫名其妙地跳过了行

来自分类Dev

Javac 在 Hudson 上莫名其妙地失败了

来自分类Dev

jQuery .empty() && .append() 莫名其妙地失败

来自分类Dev

PHP 变量莫名其妙地更新

来自分类Dev

isKindOfClass莫名其妙的身份问题

来自分类Dev

bash:莫名其妙的行为

来自分类Dev

ComputeHash调用莫名其妙地有所不同

来自分类Dev

Rails / Ruby:TimeWithZone比较莫名其妙地失败了等效值

来自分类Dev

Rails路由助手在请求之前莫名其妙地使用了“后安装”

来自分类Dev

UITapGestureRecognizer莫名其妙地停止识别轻击手势

来自分类Dev

yarn / npm在摩卡和打字稿中莫名其妙地使用了过时的代码

来自分类Dev

应用于元组的map函数总是莫名其妙地评估为True

来自分类Dev

Grails发布莫名其妙地无法发布到Nexus

来自分类Dev

油煎面包块显示不正确-CroutonQueue莫名其妙地卡住了?

来自分类Dev

Rails路由助手莫名其妙地将“ postinstall”添加到请求中

来自分类Dev

自定义函数会莫名其妙地停止某些值的工作

来自分类Dev

草绘为XCode图像大小?(莫名其妙)

来自分类Dev

数组和循环中输出的莫名其妙的变化

来自分类Dev

莫名其妙的行为国防部重写

来自分类Dev

WebClient.DownloadFile的莫名其妙的行为

来自分类Dev

Azure Functions中的莫名其妙的存储事务

来自分类Dev

NHibernate突然非常慢-莫名其妙的行为

来自分类Dev

莫名其妙的mod_rewrite行为

Related 相关文章

  1. 1

    文本莫名其妙地忽略了其容器的边界

  2. 2

    tar莫名其妙地试图打开一个不存在的目录

  3. 3

    tar莫名其妙地试图打开一个不存在的目录

  4. 4

    C代码莫名其妙地跳过了行

  5. 5

    pandas.merge莫名其妙地缓慢

  6. 6

    OpenGL矩形莫名其妙地占据了整个窗口

  7. 7

    C代码莫名其妙地跳过了行

  8. 8

    Javac 在 Hudson 上莫名其妙地失败了

  9. 9

    jQuery .empty() && .append() 莫名其妙地失败

  10. 10

    PHP 变量莫名其妙地更新

  11. 11

    isKindOfClass莫名其妙的身份问题

  12. 12

    bash:莫名其妙的行为

  13. 13

    ComputeHash调用莫名其妙地有所不同

  14. 14

    Rails / Ruby:TimeWithZone比较莫名其妙地失败了等效值

  15. 15

    Rails路由助手在请求之前莫名其妙地使用了“后安装”

  16. 16

    UITapGestureRecognizer莫名其妙地停止识别轻击手势

  17. 17

    yarn / npm在摩卡和打字稿中莫名其妙地使用了过时的代码

  18. 18

    应用于元组的map函数总是莫名其妙地评估为True

  19. 19

    Grails发布莫名其妙地无法发布到Nexus

  20. 20

    油煎面包块显示不正确-CroutonQueue莫名其妙地卡住了?

  21. 21

    Rails路由助手莫名其妙地将“ postinstall”添加到请求中

  22. 22

    自定义函数会莫名其妙地停止某些值的工作

  23. 23

    草绘为XCode图像大小?(莫名其妙)

  24. 24

    数组和循环中输出的莫名其妙的变化

  25. 25

    莫名其妙的行为国防部重写

  26. 26

    WebClient.DownloadFile的莫名其妙的行为

  27. 27

    Azure Functions中的莫名其妙的存储事务

  28. 28

    NHibernate突然非常慢-莫名其妙的行为

  29. 29

    莫名其妙的mod_rewrite行为

热门标签

归档