El diseño y desarrollo de juegos es una industria emergente. Aunque hacer títulos AAA requerirá un conocimiento avanzado de los motores de juegos, DirectX, OpenGL, etc., los proyectos pequeños de videojuegos HTML5 son un buen lugar para comenzar.
HTML5 canvas y javascript se pueden usar para crear juegos pequeños mientras se aprenden los fundamentos del desarrollo de juegos, como detección de colisiones, grupos de objetos, etc.
Fondo de desplazamiento infinito
Un fondo que se desplaza infinitamente es una herramienta importante que es esencial cuando se crean juegos de arcade interminables como Flappy Bird o en un juego de plataformas normal donde no tienes el tiempo o los recursos para crear todo el nivel a mano.
La idea es dibujar la misma imagen dos veces seguidas y reemplazar la segunda imagen por la primera cuando ocupe toda la pantalla reiniciando efectivamente el proceso.
dibujar una imagen
La imagen debe ser tal que los marcos intermedios con partes de las 2 imágenes sean fondos adecuados y la línea de separación no debe ser visible. La misma lógica se puede aplicar para crear un fondo de desplazamiento lateral infinito.
Aquí usaremos esta imagen de fondo del espacio como ejemplo:
spacebg.png
Fue hecho usando MS Paint. Se puede utilizar cualquier otro software como Photoshop o Gimp.
Escribir el código
HTML:
<!DOCTYPE html> <html> <head> <title>Infinitely Scrolling Background</title> </head> <body style="background-color: black;"> <canvas id="canvas1" style="border: 1px solid black;"></canvas> </body> </html> <script src="main_javascript.js"></script>
JavaScript:
// inside main_javascript.js
var can = document.getElementById('canvas1');
// The 2D Context for the HTML canvas element. It
// provides objects, methods, and properties to draw and
// manipulate graphics on a canvas drawing surface.
var ctx = can.getContext('2d');
// canvas width and height
can.width = 600;
can.height = 600;
// create an image element
var img = new Image();
// specify the image source relative to the html or js file
// when the image is in the same directory as the file
// only the file name is required:
img.src = "spacebg.png";
// window.onload is an event that occurs when all the assets
// have been successfully loaded( in this case only the spacebg.png)
window.onload = function() {
// the initial image height
var imgHeight = 0;
// the scroll speed
// an important thing to ensure here is that can.height
// is divisible by scrollSpeed
var scrollSpeed = 10;
// this is the primary animation loop that is called 60 times
// per second
function loop()
{
// draw image 1
ctx.drawImage(img, 0, imgHeight);
// draw image 2
ctx.drawImage(img, 0, imgHeight - can.height);
// update image height
imgHeight += scrollSpeed;
//resetting the images when the first image entirely exits the screen
if (imgHeight == can.height)
imgHeight = 0;
// this function creates a 60fps animation by scheduling a
// loop function call before the
// next redraw every time it is called
window.requestAnimationFrame(loop);
}
// this initiates the animation by calling the loop function
// for the first time
loop();
}
Métodos y Eventos
- getContext(‘2d’) : la etiqueta de lienzo HTML5 se usa para dibujar gráficos a través de secuencias de comandos (generalmente JavaScript).
Sin embargo, el elemento de lienzo no tiene capacidades de dibujo propias (solo es un contenedor para gráficos); debe usar un script para dibujar los gráficos.
El método getContext() devuelve un objeto que proporciona métodos y propiedades para dibujar en el lienzo.
Sintaxis:varctx = document.getElementbyId("canvasid").getContext('2d');El objeto getContext(“2d”) se puede usar para dibujar texto, líneas, cuadros, círculos y más, en el lienzo.
- window.onload: el evento onload ocurre cuando se ha cargado un objeto. Se usa comúnmente en javascript para activar una función una vez que se ha cargado un activo.
Sintaxis:object.onload =function() {/*myScript*/};window.onload ocurre específicamente en la carga exitosa de todos los activos, por lo tanto, la mayoría de la animación javascript y el código de renderizado para juegos a menudo se escriben completamente dentro de una función activada por window.onload para evitar problemas como la llamada a la función drawImage() antes de la imagenha sido cargado.
(intente usar una imagen más pesada y llame a la función drawImage() fuera de window.onload=function(){..} )También se puede utilizar para comprobar el tipo de navegador y la versión del navegador del visitante, y cargar la versión adecuada de la página web en función de la información.
- window.requestAnimationFrame() : El método window.requestAnimationFrame() le dice al navegador que desea realizar una animación y solicita que el navegador llame a una función específica para actualizar una animación antes del siguiente repintado. El método toma una devolución de llamada como argumento para ser invocado antes del repintado.
Debe llamar a este método cuando esté listo para actualizar su animación en pantalla. Esto solicitará que se llame a su función de animación antes de que el navegador realice el siguiente repintado. La cantidad de devoluciones de llamada suele ser de 60 veces por segundo, pero generalmente coincidirá con la frecuencia de actualización de la pantalla en la mayoría de los navegadores web según la recomendación del W3C.
Sintaxis:window.requestAnimationFrame(callback_function);A la función callback_funtion se le pasa un único argumento, un DOMHighResTimeStamp, que indica la hora actual en que las devoluciones de llamada en cola de requestAnimationFrame() comienzan a activarse.
Nota: Su rutina de devolución de llamada debe llamar a requestAnimationFrame() si desea animar otro cuadro en el próximo repintado.
Animación
final La animación final del lienzo debería verse así cuando se abre el archivo html:
Publicación traducida automáticamente
Artículo escrito por narutouzumaki696 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA