Haciendo juegos con Monogame: moviendo sprites

En este video muestro la forma en que podemos mover un sprite por la ventana, incluyendo que rebote cuando pegue contra las orillas.

Éste es el video:

Aquí está el código de las declaraciones de variables y objetos de la clase. Nótese que agregué el Vector2 para guardar la velocidad, constantes para el ancho y alto de la ventana y un objeto para generar números pseudoaleatorios.

Aquí está el constructor. Solo usé las constantes que declaré:

Aquí está el método LoadContent donde inicializo las velocidades y le asigno una posición aleatoria al rectángulo:

Y finalmente aquí está el Update donde actualizo la posición de acuerdo a la velocidad y hago que rebote si toca una orilla:

Y les recuerdo que éste libro está buenísimo como introducción a la programación en general y lo hace usando Monogame:

Haciendo juegos con Monogame: dibujando sprites

En este video, cambio el tamaño de la ventana y despliego un sprite en la pantalla. También voy explicando algunos conceptos y hablo de algunos objetos y clases.

Aquí está la explicación en video:

Y aquí está el código (por si no lo pudiste parar o quieres verlo con más calma). En esta parte se pueden ver las variables de la clase que declaré (texThanos y rectDibuja), así como el código del constructor.

Y aquí está la parte donde cargo el sprite al objeto Texture2D e inicializo el rectángulo.

Y finalmente aquí está la función qu dibuja a Thanos en la pantalla.

Y, como dije en mi post anterior, éste libro es muy bueno para aprender a programar. Y se enfoca a crear juegos en Monogame:

Haciendo juegos con Monogame: Introducción

Esta es la primera entrada de una serie que explica las bases para crear juegos usando Visual C# con Monogame. En este video explico lo que es Monogame, el ciclo que se realiza en un videojuego y muestro donde insertar nuestro código para hacer diferentes cosas en un proyecto de Monogame.

Aquí está la liga de la página de Monogame para que puedan instalarlo y ver también la documentación, tutoriales, etc.

Y un excelente libro que leí sobre el tema (allí aprendí todo lo que sé de Monogame y C#), es éste:

Dreamweaver CC: Uso de Templates

En este video te explico como crear un template en Dreamweaver desde cero. No solo trato de crear y usar templates, sino también trato de explica todo el CSS que usé para darle formato.

Si te es de utilidad, aquí está el sitio que hice en el ejemplo para que puedas tener el código. ¡Saludos!

Programando con MySQL desde Visual Basic usando XAMPP

Este es el primer post de una serie donde quiero compartir una manera de trabajar desde Visual Basic usando tablas en una base de datos que está administrada por MySQL funcionando sobre XAMPP. Me parece una solución que es mucho más robusta que usar Access (como he explicado en este blog con anterioridad) y creo que vale la pena.

En este primer video muestro el software que necesitas y como usar XAMPP y MySQL (dar de alta una base de datos, tablas, insertar datos a las tablas).

Éstas son las ligas que se necesitan para la instalación (mencionadas en el video):

• XAMPP
• MySQL Connector/Net

Una vez con esto, aquí muestro como se puede crear la conexión a la base de datos:

Estos son los objetos globales que declaro en el módulo:

Y éste es el código del Form1_Load que hace la conexión:

Y finalmente aquí está la tercera parte donde se leen datos desde una tabla para acomodarlos en un ListBox.

Y aquí está el código que hace toda la consulta. El código que pongo aquí es el terminado (o sea que también llena el ListBox de lugares) porque en el video solo menciono que lo voy a terminar.

Y en este video muestro la forma de insertar datos, idea que puede ser usado para cualquier comendo que no sea un SELECT.

Y aquí está el código que se encarga de dar de alta:

Aunque hay muchas cosas faltantes para una aplicación terminada, creo que ya abarqué los conceptos principales. Si desean bajar el proyecto aquí está la liga de descarga. Espero que les haya sido de mucha utilidad. ¡Hasta la próxima!

P.D. Quisiera agradecer a mis exalumnos Rosita Aguirre y Sebastián Cervera que me apoyaron en realizar este ejemplo :)

Android Studio: Actividades e Intents

En esta ocasión, hice una app usando Android Studio que usa más de una actividad.  Para abrir otra actividad de la aplicación, uso un objeto Intent.

Dividí la creación/programación de la app en dos videos.  En el primero creo la interfaz y creo el código que hace un objeto Intent que abra la otra actividad (que aún está en blanco).

En este segundo video paso datos adicionales a la segunda actividad, quien las recibe y despliega.

Si deseas ver el código de esta app, aquí les dejo el código de la primera clase (CreaMensaje.java) y de la segunda clase (RecibeMensaje.java).  Haz click sobre las imágenes para ver el código en tamaño decente.

   

Ya después vi que sería fácil alterar esta app para que, en lugar de mandar datos a otra actividad de la misma app, mandarlo a cualquier otra app que tenga instalado.  Pero eso será en otra ocasión.  ¡Saludos!

La idea de este ejemplo fue adaptado de este libro:

Android Studio: App con Spinner, Button e ImageView

En estos videos, creo una app que tiene un spinner que tiene una lista de pélículas.  Al seleccionar una, se presiona un botón y aparece el poster de la película.  Es algo sencillo, pero demuestra varias cosas de Android Studio que tal vez desconocías.

Aquí está el primer video donde creo la interface.  Abordo como crear un Spinner y llenarlo de elementos.

En este video importo imágenes PNG y los subo a mi proyecto convertidos en diferentes resoluciones de pantallas.  También incluyo el ImageView.

En este último video, hago toda la parte de programación.  Muestro una forma de programar el botón diferente al que hicimos en videos anteriores (para que puedas elegir la que más te guste) y de alterar la imagen en el ImageView.

Este es el código de la actividad por si no la pudiste ver completo en el último video (haz clic sobre la imagen para verlo más grande).

Espero que esto haya sido de utilidad.  ¡Hasta la próxima!

***ACTUALIZACIÓN Mayo del 2022***

Parece que ahora el Android Drawable Importer (que uso en el 2do video) ya no es parte de Android Studio. Pero aquí pueden descargar la versión para el Android Studio Bumbebee (el que estoy usando en este momento). Descargas el archivo ZIP y desde los plugins de Android Studio (se ve en el video: File > Settings > Plugins) le dan click al engrane y ponen Install from Disk. Eligen el ZIP que descargaron y ya. Lo demás debería ser igual.

Android Studio: imágenes y botones

En un video anterior, tuve problemas con un ImageButton y dije que lo iba a cubrir en otro tutorial.  En este video muestro como agregar una imagen (en este caso un PNG) a una app y ponerlo en in ImageButton:

Otra forma más eficiente de usar imágenes, es haciendo uso de imagenes vectorizados en lugar de mapas de bits.  Uno de los formatos más populares es el SVG.  Aquí, en este video, se muestra como importar imágenes SVG a un proyecto y cómo hacerque un botón cambie de imagen cuando se presiona o se le da "focus".

Aquí pongo el código XML del archivo estados_boton.xml por si no se ve claro en el video.

Espero que les haya sido útil.  ¡Nos vemos en la próxima!

Android Studio: programando interfaz y botones

Con anterioridad ya mostré como crear una app sencilla (básicamente un "Hola mundo").  En esta ocasión quiero mostrar como trabajar un poco con la interfaz de una actividad.  Voy a seguir añadiendo cosas al ejemplo que hice.

Aquí muestro como quitar el "Action Bar" (la barra que está hasta arriba de la actividad) y pongo algunos elementos en la pantalla.  Lo único que me falló fue incorporar algunos elementos gráficos, pero eso lo arreglaré en un video más adelante.

Después, aquí vamos a dejar una interfaz más simple, pero con botones.  Y programamos los botones para que despliegue un mensaje usando el objeto Toast, que mande algo al Log y que cambie el contenido de un TextView. Para hacer más sencilla la edición, lo hice en 3 videos.

En este video programo el botón para que muestre un mensaje usando el Toast:

Aquí muestro como programar un botón para escribir un mensaje en el Log:

Y finalmente en este video cambio el texto de una etiqueta (TextView) cuando dan clic a un botón:

Por si se perdieron de algún detalle en el código de Java, les dejo aquí todo lo que tiene el archivo MainActivity.java (si quieren hagan clic sobre la imagen para verlo en tamaño normal).

Espero que esto les haya sido útil.  Voy a seguir haciendo ejemplos con Android Studio, así que no te pierdas los posts que siguen.  ¡Hasta la próxima!

Android Studio: empezando con un ejemplo

Desde hace un tiempo he estado jugando con Android Studio y creo que ya hace falta compartir un poco de lo que he hecho por si les puede ser de utilidad.  En estaq ocasión voy a arrancar haciendo una app simple, el equivalente a un Hola Mundo (cosa que generalmente me choca porque TODOS los libros y cursos comienzan con este ejemplo, pero en fin), que cubra algunos de los puntos que ayuden a entender, a nivel muy simple, como crear una app.  Tengo el propósito de ir escribiendo un poco más para profundizar un poco, así que este será nuestro punto de partida.

¿Qué es Android Studio?

Antes de que existiera Android Studio, los desarrolladores estaban condenados a usar Eclipse con un SDK para trabajar.  No me malinterpreten, me encanta usar Eclipse, pero eso con el SDK no era un ambiente todo integrado.  Así que, desde hace ya varios ayeres, Google sacó Android Studio que integra una ambiente de desarrollo, emuladores (AVD), los SDKs y muchas otras cosas que necesitas para trabajar.

Ciertamente no es una herramienta perfecta: es enorme, usa muchísimos recursos de tu computadora, suele presentar fallas y algunas otras anomalías, pero dentro de todo es un ambiente genial para programar apps para Android.  En otros posts he hablado de AppInventor, la herramienta ideal para principiantes, Android Studio te da mayor control sobre todos los aspectos de desarrollo de apps.

Descargando Android Studio

Para empezar, hay que descargar e instalar Android Studio.  Vayan a la página de descarga para descargarlo.  En esta primera etapa, instalen el programa con las opciones default (en este momento la versión para Windows 64 bits pesa 948 Mb) y al rato vamos a instalar otras partes que hacen falta.  Van a ver que durante la instalación todavía descarga más archivos (en mi caso como 1 Gb), así que tengan una conexión a internet activa y tengan paciencia.

Después de instalar el ambiente de desarrollo, tenemos que ver que tengamos los SDKs necesarios para trabajar y los AVD (emuladores de teléfonos con Android).  Para hacer este paso, les dejo este video breve que muestra como administrar (incluyendo instalar) lo que hace falta:

Empezando a crear la app

Ahora todo está listo para comenzar a hacer nuestra primera app.  Vamos a seguir un asistente para hacerlo e iré explicando lo que sucede conforme avancemos.  Para que fuera más sencillo, lo explico en estos videos:

Espero que estos videos hayan sido útiles.  En el futuro tendré otros videos para apps un poco más avanzadas, así que dénse una vuelta a mi blog más adelante y/o a mi canal de YouTube para que no se lo pierdan.

Material adicional

Muchas de las ideas que están aquí (y en los videos agregados) fueron tomados de este libro (que me ayudó mucho para aprender).  He visto varios, pero éste es uno de los mejorcitos.  Les dejo la liga por si quieren profundizar.

Air Hockey para Android

¿Alguna vez has jugado Air Hockey?  Apuesto que nunca lo has hecho con tu celular.

En esta ocasión hice una app, usando AppInventor, que simula este juego popular (o por lo menos un juego que a mí me encanta).  Es un tutorial básico y espero que lo disfruten.

Para iniciar, aquí puedes descargar una plantilla de inicio para seguir el video de forma más sencilla.

La primera parte de la app se explica en éste video:

Y terminamos la app en éste video:

Si deseas descargar el archivo AIA de AppInventor con todos los bloques, lo puedes hacer aquí.

La imagen del jugador de Air Hockey que está al principio de este artículo, fue tomado de la página de Air Hockey Place.

Aplicación Android que muestra dónde estoy

Ya tengo un rato jugando con AppInventor al enseñar programación y la verdad se me hace una herramienta excelente ya que es sencillo de programar y generas una app para Android,

Aquí les comparto un ejemplo que hice para mis alumnos.  No es un ejemplo de principiantes, pero tampoco es complicado.  Esta aplicación se encarga de mostrar un mapa del lugar donde está el usuario usando su localización del GPS y haciendo interfaz con el API de Google Static Maps.

En este primer video se crea la interfaz de la app:

En el segundo, explico como funciona la localización del celular y una explicación muy breve sobre GPS:

En el último video integro lo que aprendí sobre el API de Google Static Maps y el sensor de localización para terminar la app:

Espero que hayan encontrado esta aplicación de utilidad.  Si quieren bajar el archivo AIA (para ver los bloques en AppInventor) para revisarlo lo pueden descargar aquí.  ¡Se divierten!

Características del lenguaje C

Es muy común que mis alumnos me preguntan si el lenguaje C todavía sirve o es usado para algo.  No solo porque es el "padre" de casi todos los lenguajes de programación modernos, sigue siendo de muchísima utilidad.

Hoy encontré éste artículo de makeuseof que detalla las características del lenguaje C, incluyendo una breve historia (más breve que la que escribí aquí) y algunas de las características que la hacen un lenguaje sumamente útil.

Aquí les dejo la liga: http://www.makeuseof.com/tag/characteristics-of-c-programming/

P.D. La imagen del lenguaje C usando en este post es cortesía de la página C Online Test.

Poster retro de GameBoy

Éste es un tutorial sencillo e interesante para crear un póster, estilo "retro", de un Game Boy en Photoshop.  Lo encontré en el sitio de Tutorial9, un buen sitio para encontrar tutoriales de Photoshop.

Solo para asegurar si en el futuro ya no existe esta página, aquí les dejo una liga para descargar un PDF con las instrucciones y los archivos fuentes.  ¡Saludos!

Nike de Fuego

Hace tiempo me topé con este tutorial en el sitio de Abduzeedo (que tiene tutoriales excelentes para aprender y mejorar tus habilidades en Photoshop) que hace un anuncio de Nike de una forma interesante y se los quiero compartir.  En caso que la liga ya no funcione en el futuro, aquí pueden descargar los archivos: un PDF con las instrucciones y los archivos que usa en el tutorial.

Si te gustan los efectos de fuego, no dejes de ver el tutorial de una mujer caliente en Photoshop.

Nota: no recibo regalías de Nike por el tutorial, jejeje.

¡Saludos!