domingo, 23 de julio de 2017

Como hacer un juego en CSS puro

(No olvides suscribirte)

Como hacer juegos en CSS

    Es posible, haciendo uso de nuestra creatividad, hacer juegos en CSS puro y sin nada de javascript, hay que entender que este no es el propósito de CSS por lo que nos vamos a ver muy limitados. Básicamente podríamos afirmar que los juegos en CSS son una forma de arte, una forma de mostrar nuestros conocimientos o de aprender.
    CSS no es una alternativa a javascript, esto es importante aclararlo, hacer juegos en CSS no tiene ningún valor comercial directo, si quieres desarrollar juegos para la web lo mejor es utilizar javascript.
  En el video de arriba aprenderás a hacer un juego de tiro al blanco con patos en CSS

Descargas

  En esta sección podrás descargar el código fuente del tutorial y las imágenes:

domingo, 25 de junio de 2017

Mejorar el rendimiento de juegos HTML5

No olvides suscribirte

   Dependiendo de nuestro juego, el rendimiento puede llegar a ser un dolor de cabeza, y en general para el desarrollo de juegos es algo que casi siempre hay que tener presente, tanto en el video como en esta entrada voy a hablar de 3 técnicas para mejorar el rendimiento.

Pre-renderizar

  Por una razón que cuesta un poco entender, es mas eficiente dibujar en un canvas virtual y luego cargar todo al canvas principal, que directamente dibujar en un solo canvas. Esto es muy sencillo de lograr.
  Primero el canvas virtual lo hacemos así :
 var preRender = document.createElement("canvas");
 var vctx = preRende.getContext("2d");

  Todo el juego va a ser dibujado usando este contexto "virtual", y luego en el canvas "real" hacemos así:
ctx.drawImage(preRender, 0, 0);
  
Donde "ctx" es el contexto del canvas "real"

Extracción de propiedades

  Cuando limpiamos el canvas usando "clearRect" y en alguna otra circunstancia, aveces hacemos cosas como: "canvas.width" si esto se hace dentro de nuestro bucle de juego, en cada iteración se va a extraer la propiedad del objeto a través del DOM lo cual requiere mas trabajo que pasar el número directamente, o crear una variable que almacene el valor una sola vez:
   var anchoJ = canvas.width;
   var altoJ = canvas.height;
Luego en nuestro bucle de juego las usamos así:
  canvas.clearRect(0,0,anchoJ,altoJ);
 En lugar de "extraer" la propiedad en cada iteración 

Limpiar solo las diferencias y no to el canvas

  Para lograr la animación es necesario el uso de "clearRect", pero no siempre es necesario que se limpie todo el canvas, podemos limpiar solamente lo que necesitemos ahorrandonos una infinidad de recursos en el camino. Esto puede variar dependiento de cada juego, puedes ver un ejemplo en mi video, pero en general sería algo así :
  canvas.clearRect(prevX, prevY, ancho, alto);

  Donde las variables "prevX" y "prevY" son las últimas posiciones "X" e "Y" utilizadas, las variables "ancho" y "alto" van a depender también del área que queramos limpiar.  Una forma de tratar esto, como lo hago en mi video es que cada objeto en su función de movimiento, se limpie a si mismo, por lo que estas dos últimas variables sería en ancho y alto del objeto en cuestión.

Descargas

  Aquí puedes descargar el código fuente hecho en el video:

domingo, 4 de junio de 2017

Placeholder animados en CSS3


Para ver en Youtube clic aquí

Placeholder animados

  El placeholder es una porción de texto que se puede colocar para indicarle al usuario lo que debe rellenar en un formulario, existen formas de estilizarlo desde css3, para que no se convierta en un simple texto aburrido, estas sin embargo son experimentales y no funcionan de la misma manera en todos los navegadores. Aquí aprenderemos a usarlas y haremos efectos muy interesantes usando las transiciones.

Descargas


Ponte en contacto conmigo 


lunes, 22 de mayo de 2017

Como hacer un juego de Breakout en Javascript


Para ver en Youtube Click aquí
(No olvides suscribirte)


¿Que es eso de Breakout?

   Breakout es un videojuego arcade desarrollado por Atari, Inc. y lanzado al mercado el 13 de mayo de 1976.1 Fue creado por Nolan Bushnell y Steve Bristow, influenciados por el videojuego de 1972 Pong, también de Atari. En 1978 se distribuyó la versión para el Atari 26002 y en 1983 la versión para MSX.2 Posteriormente fue mejorado en videojuegos como el Super Breakout.

  En la parte inferior de la pantalla una rayita simulaba una raqueta de front-tenis que el jugador podía desplazar de izquierda a derecha. En la parte superior se situaba una banda conformada por rectángulos que simulaban ser ladrillos. Una pelotita descendía de la nada y el jugador debía golpearla con la raqueta, entonces la pelota ascendía hasta pegar en el muro, los ladrillos tocados por la pelota desaparecían. La pelota volvía a descender y así sucesivamente. El objetivo del juego era terminar con la pared de ladrillos.


Tamaño de fuente en el Canvas

    Para cambiar el tamaño de la fuente del texto en nuestro canvas podemos utilizar la propiedad "font" de la siguiente manera : ctx.font = "30px Arial", primero definimos el tamaño y luego la familia de la fuente, mas información aquí :  HTML canvas font Property

Archivos del Tutorial

 Código fuente final completo


Redes sociales:

domingo, 9 de abril de 2017

Animaciones para juegos HTML5


Para ver en youtube clic aquí (No olvides suscribirte)


Las Animaciones

   Un juego es prácticamente una animación controlada, así que las mismas son uno de los ejes centrales a la hora de desarrollar juegos en cualquier lenguaje, si ya viste la clase a continuación, una descripción detallada de cada una de las funciones usadas en los ejemplos y al final los enlaces de descarga para los ejemplos desarrollados

Funciones de animación

  • setTimeout() : Posee dos parámetros el primero es la función a llamar y el segundo es el tiempo en mili-segundos que la función va a esperar antes de llamar a la función del primer parámetro
  • setInterval() : Al igual que la anterior posee dos parámetros, el primero la función y el segundo el tiempo, igual que el anterior, la diferencia es que la función se va a estar llamando continuamente, separada por el espacio de tiempo definido en el segundo parámetro que al igual está en mili-segundos
  • requestAnimationFrame() : Simplemente intenta llamar a la función que representa nuestro cuadro de animación, asegurándose primero de que existan los recursos disponibles para ejecutar dicho cuadro, para poder usarla en animaciones hay que hacer llamadas recursivas, mas información en este video: https://www.youtube.com/watch?v=zlclLs_m0mI

Explicando las funciones de dibujo

  • fillRect(x,y,w,h) : Nos dibuja un rectángulo, el primer parámetro (x) representa la coordenada x del mismo,  el segundo (y) la coordenada y, el tercero (w) el ancho y por último el cuarto (w) el alto
  • clearRect(xy,w,h) : Definimos un rectángulo con los mismos parámetros de la función anterior, todo lo que esté en el área de efecto de este rectángulo se borrará
  • fillStyle : No es una función sino una propiedad, aquí definimos el color que llevará el canvas

Descargas de códigos fuente


Enlaces útiles


Enlaces sociales



domingo, 2 de abril de 2017

SVG vs Canvas vs Divs Gráficos para juegos HTML5


Para ver en youtube clic aquí


Gráficos para juegos

  Tenía desde el pasado diciembre la promesa de subir un curso dedicado a juegos, el día de hoy comparto con ustedes la primera clase, aprenderemos aquí cual es la mejor opción para los gráficos y la razón detrás de esto, veremos también algunos ejemplos que nos serán de mucha utilidad, si el video te gusta y te es útil por favor no se te olvide hacer clic en el pulgar arriba y suscribirte al canal

Links útiles

sábado, 4 de febrero de 2017

Como crear instaladores para Inno Setup





Un tutorial en dos partes

   Para que el video no resultara muy largo, decidí dividirlo en dos partes, en la primera haremos el instalador básico y la pantalla personalizada que nos permitirá agregar los datos de conexión a nuestra base de datos, en la segunda parte verificaremos la instalación de Java y haremos la asociación a la extensión .MP.
  Los dos videos serán publicados aquí mismo, en esta misma entrada cuando esten disponibles.


Tipos de objeto usados


  •    TInputQueryWizardPage: Tipo de clase que denota, exclusivamente páginas para ingresar información, hay otros tipos de página como por ejemplo: TInputOptionWizardPage, TInputDirWizardPage, TInputFileWizardPage, que respectivamente son para páginas de, opciones, selección de carpetas y selección de archivos.
  • TSetupStep: Estado o "paso" en el cual se encuentra la instalación, tenemos: ssInstall que ocurre justo antes de que la instalación comience, ssPostInstall justo después de que la instalación termina, ssDone cuando nuestro programa setup finaliza luego de una instalación exitosa. Este tipo de objeto lo usamos en la función CurStepChanged

Constantes que denotan las páginas de nuestro setup

  En las funciones para crear nuestras pantallas personalizadas, el primer parámetro es una constante que denota la página después de la cual va a estar ubicada nuestra pantalla personalizada, a continuación cada una de esas constantes:
  • wpWelcome: La página de bienvenida, no usada en el tutorial
  • wpLicense: Donde aparece el contrato de licencia, la primera página del setup que creamos en el tutorial
  • wpPassword: Si nuestro instalador solicita contraseña para instalar esta será la página, no usada en el tutorial
  • wpInfoBefore: Información que deseemos mostrar antes de instalar, no usada en el tutorial
  • wpUserInfo: Información del usuario
  • wpSelecDir: Página donde se selecciona la carpeta de instalación, la usamos en el tutorial para indicar que después de esta página va nuestra página personalizada
  • wpSelectComponents: Seleccionar los componentes de la aplicación que se deseen instalar, no usada en el tutorial
  • wpSelectTask: Donde aparecen ciertas tareas adicionales, como por ejemplo crear el acceso directo a escritorio
  • wpReady: Donde nos muestra el resumen de lo que se va a instalar
  • wpPreparing, wpInstalling: Respectivamente, donde se empieza a preparar la instalación y donde comienza la instalación propiamente
  • wpInfoAfter: Información que deseemos mostrar al finalizar la instalación
  • wpFinished: Página final de nuestro setup

MsgBox y sus valores

  Como vimos en el video, la función MsgBox toma tres valores, el texto a mostrar, icono y el número de botones. Estos dos últimos se denotan con constantes que les voy a mostrar a continuación:

Primero los iconos
  • mbInformation 
  • mbConfirmation 
  • mbError 
  • mbCriticalError 
   Ahora los botones
Estos son nemotécnicos así que no los voy a describir: MB_OK, MB_OKCANCEL, MB_ABORTRETRYIGNORE, MB_YESNOCANCEL, MB_YESNO, MB_RETRYCANCEL

Las funciones de evento

  Si nos vamos a esta página en la documentación de Inno Setup, podremos ver que la cantidad de funciones de evento es enorme, así que aquí me voy a limitar a hablar de las funciones utilizadas en el tutorial:
  • NextButtonClick: Aquí estamos reaccionando a los clics en el botón de "Siguiente", esta función se declara con "function" ya que devuelve valores, y tiene un parámetro de tipo entero que denota el "ID" de la página, si en esa página nuestra función devuelve "False" el instalador no avanzará de esa página. Para obtener el "ID" simplemente hacemos: nombreDePagina.ID
  • CurStepChanged: Aquí estamos reaccionando cada vez que alcancemos un paso diferente en nuestra instalación, se declara con "procedure" ya que no devuelve valores, se le pasa un parámetro del tipo TSetupStep, en esta misma entrada en la sección "Tips de objeto usados" puedes ver las constantes usadas para esos pasos

Valores de espera y visualización para Exec y ShellExec


    Como se mostraran las ventanas:
  • SW_SHOW y SW_SHOWNORMAL: Son esencialmente lo mismo muestran la ventana de forma predeterminada
  • SW_SHOWMAXIMIZED: Muestra la ventana totalmente maximizada
  • SW_SHOWMINIMIZED: Muestra la ventana minimizada
  • SW_SHOWMINNOACTIVE: Ventana no activa, va a quedar atrás en el foco 
  • SW_HIDE: No se va a mostrar la ventana, la aplicación que ejecutemos va a quedar en segundo plano
  Valores de espera, esto significa si vamos a esperar a que termine de ejecutarse antes de continuar
  • ewNoWait: No se va a esperar a que termine la ejecución de la aplicación llamada
  • ewWaitUntilTerminated: El instalador va a esperar a que la aplicación llamada se cierre totalmente antes de continuar
  • ewWaitUntilIlde: El instalador va a esperar a que la aplicación llamada quede inactiva, pero esta va a seguir ejecutandose

Aclaratoria

  En el video, se me olvidó explicar algo, cuando seleccionamos los archivos y carpetas que va a copiar nuestro instalador:


  En el botón de "Add folder" podemos seleccionar una carpeta entera para que nuestro instalador copie su contenido, en el tutorial seleccionamos la carpeta "lib" que contiene el conector de MySQL, esto en nuestro script nos genera la siguiente linea en la sección de "[Files]" :

Source: "C:\Users\satur\Documents\Proyectos innoSetup\Tutorial\lib\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

  La sección "DestDir" indica la carpeta de destino, que como sabemos usando la constante "{app}" se refiere a la carpeta de instalación de nuestro programa.  Pero en este caso solo nos copiará los archivos dentro de la carpeta, mas no la carpeta como tal, si queremos que nos copie la carpeta completa debemos hacer lo siguiente:

DestDir : "{app}/nombreDeCarpeta"

Descargas



Mantente en contacto conmigo: