76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
"use strict";
|
|
|
|
const ImageBackground = (function(){
|
|
|
|
const ImageBackground = function(xgravity){
|
|
|
|
const self = this;
|
|
let image = null,
|
|
is_loaded = false,
|
|
offset_x = 0,
|
|
offset_y = 0;
|
|
|
|
const constructor = () => {
|
|
if(xgravity.values.bg_image_url){
|
|
|
|
image = new Image();
|
|
|
|
image.onload = () => {
|
|
is_loaded = true;
|
|
};
|
|
image.onerror = event => {
|
|
console.error("[XGravity] Error al cargar bg_image_url:", xgravity.values.bg_image_url, event);
|
|
};
|
|
|
|
image.src = xgravity.values.bg_image_url;
|
|
if(image.complete && image.naturalWidth > 0)
|
|
is_loaded = true;
|
|
|
|
};
|
|
};
|
|
|
|
this.resize = (width, height) => {};
|
|
|
|
this.render = (context, width, height, delta_time) => {
|
|
if(!is_loaded || !image || !image.naturalWidth){
|
|
context.fillStyle = "#020408";
|
|
context.fillRect(0, 0, width, height);
|
|
return;
|
|
};
|
|
|
|
// Relación de aspecto cover
|
|
const canvas_ratio = width / height,
|
|
image_ratio = image.naturalWidth / image.naturalHeight;
|
|
let draw_width, draw_height;
|
|
|
|
if(canvas_ratio > image_ratio){
|
|
draw_width = width;
|
|
draw_height = width / image_ratio;
|
|
}else{
|
|
draw_height = height;
|
|
draw_width = height * image_ratio;
|
|
};
|
|
|
|
// Si es completamente estática (como en el juego original)
|
|
if(xgravity.values.bg_image_pan_x === 0 && xgravity.values.bg_image_pan_y === 0){
|
|
context.drawImage(image, (width - draw_width) / 2, (height - draw_height) / 2, draw_width, draw_height);
|
|
return;
|
|
};
|
|
|
|
// Si tiene movimiento
|
|
const start_x = ((width - draw_width) / 2) + (offset_x = (offset_x + xgravity.values.bg_image_pan_x * delta_time) % draw_width),
|
|
start_y = ((height - draw_height) / 2) + (offset_y = (offset_y + xgravity.values.bg_image_pan_y * delta_time) % draw_height);
|
|
|
|
// Dibujar la cuadrícula de repetición necesaria para cubrir cualquier espacio
|
|
for(let x = start_x - draw_width; x < width; x += draw_width)
|
|
for(let y = start_y - draw_height; y < height; y += draw_height)
|
|
context.drawImage(image, x, y, draw_width, draw_height);
|
|
|
|
};
|
|
|
|
constructor();
|
|
|
|
};
|
|
|
|
return ImageBackground;
|
|
})(); |