Tengo una imagen que quiero desplazar horizontalmente repetidamente, y la he manejado la mayor parte del tiempo, incluso configurando la relación de aspecto de la imagen con el tamaño de la pantalla, etc... pero por alguna razón hay una brecha, y tartamudea por un segundo y luego funciona bien. Código de lienzo JS a continuación, HTML5 estándar con jQuery y una etiqueta de lienzo y los márgenes del cuerpo y el relleno se eliminan y se estiran para ajustarse al tamaño de la ventana en CSS.
Es solo una brecha tartamudeada con una pantalla horizontal, en un retrato, la segunda imagen se mueve más rápido que la primera ... cualquier ayuda sería MUY apreciada.
let canvas; let context; let map = new Image(); let roadMovement = 0; let increment = 4; let fpsCheck = 0; let screenx = window.innerWidth; let screeny = window.innerHeight; let bumper = 0; let secondsPassed; let oldTimeStamp; let fps; window.onload = init; function init() { canvas = document.getElementById('gameCanvas'); context = canvas.getContext('2d'); //Set canvas size canvas.width = screenx; canvas.height = screeny; //Start game loop gameLoop(); } function draw() { map.src = "downMap.png"; } function gameLoop(timeStamp) { // Calculate the number of seconds passed since the last frame secondsPassed = (timeStamp - oldTimeStamp) / 1000; oldTimeStamp = timeStamp; // Calculate fps fps = Math.round(1 / secondsPassed); // setup FPS to screen context.font = '25px Arial'; context.fillStyle = 'red'; context.fillText("FPS: " + fps, 120, 30); var aspectRat = window.innerWidth / window.innerHeight; var correctedHeight = map.width / aspectRat; roadMovement += increment; map.onload = function () { if (bumper < screeny) { //setup main BG image context.drawImage(map, 0, roadMovement, map.width, correctedHeight, 0, 0, screenx, screeny); } if (roadMovement >= map.height - correctedHeight) { bumper += increment; //setup secondry image context.drawImage(map, 0, 0, map.width, correctedHeight, 0, screeny - bumperfixed, screenx, screeny); } if (bumper >= screeny) { //reset to single image bumper = 0; roadMovement = 0; } }; // Draw frame draw(); // request new frame window.requestAnimationFrame(gameLoop); }Creo que tiene algo que ver con el cambio de relación de aspecto. Gracias de antemano.
Encontré la respuesta, mi cerebro finalmente se puso en marcha y me di cuenta de que la variable de parachoques se basaba en el tamaño del mapa, no en la pantalla, así que tuve que obtener algo de magia de relación de aspecto para resolverlo correctamente.
código de trabajo para mi yo futuro y cualquier persona que lo necesite...
let canvas; let context; let map = new Image(); let roadMovement = 0; let increment = 4; let fpsCheck = 0; let screenx = window.innerWidth; let screeny = window.innerHeight; let bumper = 0; let secondsPassed; let oldTimeStamp; let fps; window.onload = init; function init() { canvas = document.getElementById('gameCanvas'); context = canvas.getContext('2d'); //Set canvas size canvas.width = screenx; canvas.height = screeny; //Start game loop gameLoop(); } function draw() { map.src = "Map.png"; } function gameLoop(timeStamp) { // Calculate the number of seconds passed since the last frame secondsPassed = (timeStamp - oldTimeStamp) / 1000; oldTimeStamp = timeStamp; // Calculate fps fps = Math.round(1 / secondsPassed); // setup FPS to screen context.font = '25px Arial'; context.fillStyle = 'red'; context.fillText("FPS: " + fps, 120, 30); var aspectRat = window.innerWidth / window.innerHeight; var correctedHeight = map.width / aspectRat; roadMovement += increment; map.onload = function () { if (bumper < screeny) { //setup main BG image context.drawImage(map, 0, roadMovement, map.width, correctedHeight, 0, 0, screenx, screeny); } if (roadMovement >= map.height - correctedHeight) { var newIncrement = increment / correctedHeight; newIncrement = newIncrement * screeny; bumper += newIncrement; //setup secondry image context.drawImage(map, 0, 0, map.width, correctedHeight, 0, screeny - bumper, screenx, screeny); } if (bumper >= screeny) { //reset to single image bumper = 0; roadMovement = 0; } }; // Draw frame draw(); // request new frame window.requestAnimationFrame(gameLoop); }