sep 16 2011
Este es un pequeño tutorial que hice para los que estamos empezando a programar en AppEngine usando Netbeans (sobre todo para los que estamos llevando Negocios Electrónicos en la Upa0). Contiene algunos conceptos básicos que en realidad son genéricos para trabajar con servlets y jsp, en un siguiente tutorial espero poder hablar un poco más en sí de Google AppEngine. Espero les sea de utilidad.
ene 25 2011
Los videojuegos son algo común en nuestra vida, ya sea que uno juegue en minijuegos.com, winning eleven, Dungeons & Dragons Online, Dota, buscaminas o counter. Algo que me parece interesante es intentar hacer juegos, para lo cual no se necesita más que alguna idea, conocer un poco de programación y comenzar a probar a ver qué sale; soy de la idea que un juego no necesita ser una maravilla en gráficos o tener 100 maneras de volarle la cabeza al enemigo, lo principal es que la mecánica del juego sea atractiva y retadora para el jugador (si es adictivo mucho mejor); por ejemplo estos dos juegos: Helicopter Game y Bloons, una idea sencilla + gráficos sencillos pero bonitos = WIN.
Para hacer juegos se puede usar prácticamente cualquier lenguaje de programación (si puedes ingresar datos, procesarlos y mostrar un resultado ya puedes hacer un juego, por ejemplo “guess the number”). Ahora, hay lenguajes que se prestan para hacer juegos, mi favorito es ActionScript que es el que se usa para hacer juegos en Flash aunque también se pueden hacer juegos muy interesantes en Java como el buscaminas que hizo Ali y luego migró a javascript, el gunbound que hizo Clayder o un juego de gohan destruyendo autos también de Clayder.
Flash es una plataforma muy utilizada para hacer juegos y publicarlos en la web, probablemente la mayoría de juegos en Internet estén en Flash, por lo que es una buena opción si uno desea hacer juegos. Personalmente he probado hacer algunos juegos sencillos con Flash y en este post quisiera escribir sobre algunas cosas que he aprendido y algunos conceptos básicos para empezar a hacer juegos en Flash.
Para empezar tenemos el ActionScript, el lenguaje de programación usado para Flash. Actualmente se trabaja con la versión 3.0, la cual presenta ciertas ventajas y cambios en comparación con la versión 2.0 como un enfoque más orientado a objetos (lo que lo hace bastante fácil para alguien con conocimientos en POO), la forma de manejar eventos, manejo de expresiones regulares, mejoras para tareas como pintar figuras mediante código, etc; podemos decir que programar en AS3 es más ordenado y permite tener más control. Encontré una comparación muy interesante que queda mejor sin traducir:
Aquí hay unas líneas en as3 en las que se puede ver un poco su sintaxis:
package {
public class Clase1{
//definición de una variable privada numérica
private var n:Number=3;
//Constructor
public function Clase1() {
//trace permite imprimir en consola
trace("Hola mundo");
}
//Un método
public function saluda():void{
//Instanciación de un arreglo
var ar:Array=new Array();
ar.push("Uno");
ar.push("Dos");
ar.push("Tres");
//Recorrido con un for
for(var i:Number=0;i<ar.length;i++){
trace("Valor: "+ar[i]);
}
}
}
}
Como se puede ver no es muy diferente a java, c++ o .net.
Cuando se trabaja en flash (refiriéndonos al programa de Adobe) tenemos por un lado la parte gráfica, que es la zona en la que uno agrega sus dibujos y hace interpolaciones trabajando con fotogramas y por otro lado tenemos la parte de código, a la que podemos acceder pulsando F9; esta es una característica muy importante ya que podemos por un lado dibujar una pelota y por el otro realizar la programación para que la pelota baje por la pantalla y luego rebote simulando gravedad. No sólo eso, además podemos tener aparte de nuestro archivo .fla (formato de Flash) varios archivos .as siendo cada archivo una clase en actionscript, de manera que tenemos clases reutilizables o podemos utilizar algún framework con código que otras personas ya hicieron. Podemos ligar símbolos en Flash con una clase específica en AS3 de manera que cuando jalamos un símbolo al escenario se esté ejecutando el constructor de la clase en AS3 automáticamente, adquiriendo el símbolo todas las propiedades y comportamientos definidos en la clase, o incluso podemos aplicar herencia en los símbolos.
A los proyectos en Flash se les puede agregar una clase en actionscript principal, que viene a ser la clase del escenario y que se instancia al iniciar la película, a esta se le denomina Document Class y se le puede poner el nombre que uno quiera, yo suelo llamarla Engine.as
Dos conceptos muy importantes para conocer son el MovieClip y el Sprite. Los dos son una especie de contenedores o lienzos sobre los que se puede trabajar. Imaginemos que tenemos un tablero en blanco, que es el escenario de Flash y un conjunto de papelitos sueltos, en papelito dibujamos un árbol y lo ponemos en el escenario, en otro papelito más grande pintamos un grass y lo ponemos en la parte inferior del escenario y luego cogemos un conjunto de papelitos unidos (como los post it o las hojas de un cuaderno pequeño), en cada hoja dibujamos una persona (tipo stick figure) con algunas diferencias como en la posición de las manos o pies, de manera que al pasarlos rápidamente da la impresión de movimiento, bueno, cogemos ese cuadernillo o lo que sea y lo agregamos también a nuestro pintoresco escenario. Los Sprites son como los papelitos simples donde dibujamos el árbol y el grass, es un sólo lienzo en el que uno puede dibujar, insertar imágenes, videos, incluso otros Sprites o MovieClips. Los Movieclips son similares a los Sprites sólo que tienen línea de tiempo o mejor dicho son como un conjunto de sprites en secuencia, como los frames de una película, uno puede agregarles un cuadrado en un fotograma y moverlo un poco a la derecha en cada fotograma subsiguiente para dar la impresión de movimiento continuo, al igual que los Sprites permite que se le agreguen a su vez más MovieClips o Sprites.
Los eventos son otra cosa a tomar en cuenta al programar un juego, por ejemplo hay eventos para detectar que el usuario ha hecho click en un símbolo, se ha entrado en un frame (viene a ser cada refrescada de pantalla, lo cual se puede configurar, por ejemplo se puede trabajar a 20 fotogramas por segundo o a 32fps si se busca mayor suavidad en la animación). Hay eventos para cuando el jugador presiona una tecla, cuando se terminó de cargar un archivo, cuando terminó un sonido, etc. Para usar estos eventos se necesita agregar un listener que escuche a determinado evento y una función que sea invocada cuando se detecta el evento. Por ejemplo, este código mueve un cuadrado a la derecha cada vez que el usuario hace click en el:
//la clase cuadrado está ligada a un símbolo con un ... cuadrado
var cuad:Cuadrado=new Cuadrado();
//agregamos el cuadrado al escenario
addChild(cuad);
//agregamos el listener para escuchar cuando se le hace click
addEventListener(MouseEvent.Click, miFuncion);
//función que se va a invocar cuando se detecte el click
function miFuncion(e:Event){
//movemos el cuadrado a la derecha
cuad.x=cuad.x+10;
}
Para detectar colisiones as3 brinda el método hitTestObject, con el cual podemos ver si dos Sprites/Movieclips colisionan o el método hitTestPoint para ver si un Sprite/Movieclip colisiona con un punto específico. Por ejemplo:
var hayColision:Boolean=persona.hitTestObject(bala);
if (hayColision){
trace("Recibiste una bala");
}else{
trace("No moriste");
}
Ahora la parte interesante, vamos a pensar (no programar porque este post ya de por sí está largo) cómo juntamos lo anterior para hacer un juego de pingpong:
Eso sería todo con este post que espero no haya sido muy desordenado y haya cumplido con lo que quería que es dar algunas ideas de cómo usar flash para crear juegos. Aquí les dejo un juego que hice y espero que les guste, se llama pixerpiente y consiste en mover el mouse evitando obstáculos que van apareciendo y no dejar que el rastro que vas dejando te alcance ya que empieza a consumirse.
dic 30 2010
Este un jueguillo que se me ocurrió hacer en flash, consiste en pintar el 60% de las figuras de cada nivel, teniendo una penalización por salirse de la figura (esto debería estar en la opción instrucciones, creo que debería hacer esa pantalla). Aún no está terminado, falta agregar niveles, algunos detalles y funcionalidades, etc etc. Espero lo encuentren divertido y si es posible adictivo =D. El juego también está en FACEBOOK
sep 20 2010
Este es el primer post de un mini tutorial que quise hacer sobre como crear un pequeño juego tipo puzzle de piezas deslizantes (tremendo nombre, pero no tengo idea de si hay otra forma de llamarlo, a pesar de que creo que todos hemos jugado esto alguna vez). En fin, el objetivo es llegar a tener algo como esto:
Para llegar a esto se partirá de un código básico y se le irá agregando cosas a cada paso; he tratado de comentar casi todo para que sea totalmente entendible, tal vez hay algunos comentarios que pueden ser muy obvios pero espero sean útiles.
Definitivamente no es la forma más orientada a objetos de hacer este jueguito, pero creo que así es más fácil de entender, además que es más práctico para mí. Espero que les guste =D
Bueno, manos al teclado:
sep 19 2010
Hoy mientras buscaba en la web algún juego interesante que pueda hacerle a las características pc encontré una página llamada “can you run it?”, la cual hace algo muy sencillo pero muy útil, analiza tu pc y la compara con los requerimientos de algún juego que hayas elegido, indicando si cumple con los requerimientos mínimos para correr dicho juego o si cumple con las características recomendadas para una mejor experiencia de juego. Una herramienta útil para todos los gamers.
Pueden probar esta herramienta AQUI.
Creo que necesito otra pc…
ago 23 2010
Esta es una pequeña aplicación en Java que hice en unos ratos libres después de acabar el ciclo anterior pensando en que podría facilitar el proceso tedioso de armar lo horarios por el cual tenemos que pasar cada ciclo los alumnos de la UPAO. Lo que se intenta es presentar las carreras, los cursos y los horarios disponibles de manera que haciendo click en determinados horarios se vea cómo va quedando el horario del alumno, permitiendo ver si hay cursos que se cruzan, o cuales turnos convienen más pensando en que no se quiere tener demasiadas horas libres entre clase y clase o no se quiere estudiar hasta muy tarde. Así lo único que quedará por hacer es ingresar los códigos generados en la aplicación a la intranet de la universidad.
Para los que quieran probar APHU pueden descargarlo desde este link: DESCARGAR APHU
Esta no es para nada una versión final, todavía hay muchas cosas que deseo mejorar para lo cual estoy teniendo en cuanta todos los comentarios que me han hecho, como mejorar el orden de los cursos, avisar si falta elegir turnos de algún curso (por si alguien olvido marcar algún laboratorio), mostrar la si el salón esta cerrado o ya se está llenando, etc etc.
may 30 2010
Un palíndromo es una palabra, número o frase que se lee igual de izquierda a derecha o de derecha a izquierda. Un ejemplo clásico es “Dábale arroz a la zorra el abad”, o como dijeron en los Simpson “Anita lava la tina”. También palabras como “ala” o números como “2002″.
Lo que este código hace es leer una línea y ver si ordenándola de alguna manera se puede generar un palíndromo, por ejemplo “Yoga hoy yo hago” NO es un palíndromo, pero si lo ordenamos de esta forma “Yo hago yoga hoy” obtenemos una frase que SI es un palíndromo. Para hacer esto me resultó útil parte del código que publiqué en el post “Anagramas en Java” ya que lo que hago es probar todas las conjugaciones que se pueden hacer con las palabras de la frase ingresada y luego ver si alguna(s) de ellas es un palíndromo.
Es una solución que usa fuerza bruta y se puede mejorar fácilmente, por ejemplo detectando si para la primera palabra de una conjugación hay otra palabra que acabe con la misma letra (“Sx xxxx xx xx xx xxs”) y no hacer conjugaciones en vano, pero esa es otra historia.
Este código lee un número n de casos y luego imprime los parónimos que se pueden obtener ordenando las palabras de alguna manera. Para evitar palíndromos repetidos (por ejemplo si ponemos “a a b” podríamos tener 2 veces “a b a” – “a b a”) seguí la recomendación de Pedro en “Anagramas en Java” y almacené todos los palídromos en un Set y así evitamos los repetidos =D. Si no hay ningún palíndromo posible se muestra el mensaje “imposible”.
PD: El código no funciona con tildes (bienvenido el que quiera agregar los replace() ).
import java.io.*;
import java.util.HashSet;
public class Palindromos {
public static void main(String[] args) throws IOException {
BufferedReader br=new BufferedReader(new
InputStreamReader(System.in));
System.out.println("Ingrese el numero de lineas:");
int nro= Integer.parseInt(br.readLine());
for (int i=0;i<nro;i++){
String cadena=br.readLine();
//Pasamos todas las letras a mayuscula para no hacer distincion
cadena=cadena.toUpperCase();
//Un arreglo con cada palabra
String[] palabras=cadena.split(" ");
//Una variable de control para el método recursivo
//que se va a usar
int veces=0;
//Un arreglo de cadenas que se usará para
//hacer conjugaciones
String[] conjugacion= new String[palabras.length];
//Un Set donde se almacenarán las conjugaciones
//y permitirá identificar repetidos
HashSet<String> palindromos=new HashSet<String>();
//El méttodo recursivo
conjugar(palabras, veces,conjugacion,palindromos);
//Output
if (palindromos.isEmpty()){
System.out.println("imposible");
}else{
System.out.println("Palindromos encontrados: ");
for(String pal:palindromos){
System.out.println("- "+pal);
}
}
}
}
public static void conjugar(String[] palabras, int veces,
String[] conjugacion, HashSet<String> palindromos){
//Si la conjugacion está completa, probamos si es palíndromo
if (veces==palabras.length){
probarPalindromo(conjugacion,palindromos);
return;
}
//Desde aquí es casi idéntico que el código del anagrama
veces++;
for (int i=0; i<=palabras.length-1;i++){
if (palabras[i].compareTo("@")==0){
continue;
}else{
String palabraAuxiliar=palabras[i];
conjugacion[veces-1]=palabraAuxiliar;
palabras[i]="@";
conjugar(palabras,veces,conjugacion,palindromos);
palabras[i]=palabraAuxiliar;
}
}
}
public static void probarPalindromo(String[] conjugacion,
HashSet<String> palindromos){
//Armamos una cadena en base al arreglo de Strings
//La cadena no tendrá espacios entre letras,
//ya que para ser palíndromo
//estas no se toman en cuenta
String cadena1="";
for (String s:conjugacion){
cadena1=cadena1+s;
}
int veces;
//Luego lo pasamos a un arreglo de caracteres
//para hacer las comparaciones
//Esto se puede hacer de varias maneras
char[] carac=cadena1.toCharArray();
int longitud=carac.length;
if (longitud % 2==0){
veces=longitud/2;
}else{
veces=(longitud-1)/2;
}
//Una bandera que indica que no es palindromo
boolean flagNoPalindromo=false;
for(int i=0;i<=veces;i++){
//La idea es comparar el primer caracter con el último
//Luego el segundo con el penúltimo, etc etc
if (carac[i]==carac[longitud-i-1]){
}else{
flagNoPalindromo=true;
}
}
if (flagNoPalindromo==true){
return;
}
//Armamos otra cadena, ahora los espacios entre letras
String cadenaSalida="";
for (String s:conjugacion){
cadenaSalida=cadenaSalida+s+" ";
}
//Finalmente le damos un poco de formato y lo agregamos al Set
String cadenaFormateada=cadenaSalida.substring(0,1)+
cadenaSalida.substring(1,
cadenaSalida.length()-1).toLowerCase();
cadenaFormateada="\""+ cadenaFormateada+"\"";
palindromos.add(cadenaFormateada);
}
}
may 2 2010
Un anagrama es una palabra que resulta de la transposición de las letras de otra palabra. Por ejemplo con ifx podemos obtener ifx,ixf,fix,fxi,xif,xfi (saber cuales de estas son palabras reales es un asunto totalmente distinto …). Hacer un programa en java para obtener todas estas posibles conjugaciones no es difícil, pero es interesante porque se requiere usar un método recursivo y esta clase de métodos tiende a seguir el patrón pocas líneas de código bastante dolor de cabeza. Esta es sólo una manera de solucionar un anagrama, debe de haber varias más.
import java.util.ArrayList;
public class Anagrama {
private ArrayList<String> soluciones=new ArrayList<String>();
public Anagrama(){ }
public static void main(String args[]){
Anagrama a=new Anagrama();
String palabra="ifx";
a.resolver(palabra);
System.out.println(a.getSoluciones());
}
public void resolver(String palabra){
palabra=palabra.toLowerCase();
char[] letras=palabra.toCharArray();
int tamanioPalabra=letras.length;
int numeroIteraciones=0;
char[] cadenaActual=new char[letras.length];
resolver(letras,cadenaActual,tamanioPalabra,numeroIteraciones);
}
private void resolver(char[] letras,char[] cadenaActual,
int tamanioPalabra,int numeroIteraciones){
if (numeroIteraciones==tamanioPalabra){
getSoluciones().add(new String(cadenaActual));
}
numeroIteraciones++;
for(int i=0;i<tamanioPalabra;i++){
if (letras[i]=='A'){
//Como se paso todas las letras a minúscula, se usa "A"
//para indicar que la letra en esa posición ya se utilizó,
//de ser así sólo paso a la siguiente letra
}else{
char valorEliminado=letras[i];
//valorEliminado es la letra que ya use y no
//se debe seguir usando
cadenaActual[numeroIteraciones-1]=valorEliminado;
letras[i]='A';
//Un valor q le doy para mostrar que ya lo elimine
resolver(letras,cadenaActual,tamanioPalabra,numeroIteraciones);
letras[i]=valorEliminado;
}
}
}
public ArrayList<String> getSoluciones() {
return soluciones;
}
public void setSoluciones(ArrayList<String> soluciones) {
this.soluciones = soluciones;
}
}
mar 31 2010
Elegir colores para el diseño de una página web no me parece un trabajo sencillo, al menos a mí me toma bastante elegir qué colores combinan (mis elecciones son más que debatibles) y no terminar cogiendo los del primer cartel de propaganda de los hermanos yaipen. Este ciclo estoy llevando un curso de ingeniería web en la universidad y nos dejaron como trabajo hacer el diseño que tendrá nuestro proyecto de laboratorio, así que el lector entenderá mi desesperación por hacer que los colores combinen.
Afortunadamente existe una pequeña (pero realmente útil) aplicación llamada Kuler que me sacó del apuro. Kuler pertenece a Adobe y nos permite crear esquemas de colores, es decir, juegos de colores que se complementan, son análogos entre sí, o simplemente “se ven bonito juntos”.Para llegar a esos esquemas hay que jugar con la rueda de colores, que viene a ser la paleta de Miguel Angel; podemos usar reglas como triada (3 colores distribuidos equitativamente en la rueda), colores complementarios, colores análogos, etc. Podemos elegir el color base directamente de la rueda o ingresar el código (hay varios códigos pero solo conozco el hexadecimal) y después ir modificándolo de acuerdo a nuestras preferencias. Es necesario tener flash instalado para usar la aplicación.
Esta herramienta es gratuita y no es necesario registrarse para comenzar a usarla, sólo hace falta entrar al siguiente link para empezar a formar tus propios esquemas: http://kuler.adobe.com
feb 10 2010
Este es un producto nuevo de Google que se presenta diciendo “Mucho más que mensajes de estado. Comparte tus novedades, fotos y vídeos con tus amigos. Inicia conversaciones sobre los temas que te interesan”.
Buzz tiene un gran parecido con Twitter y Facebook en cuanto a las funcionalidades que brinda, como es el manejo de estado y compartición de fotos, aunque hay que decir que es más limpio que facebook en cuanto a su interfaz. Con este nuevo servicio Google busca sacar provecho a toda esa red social que está bajo Gmail.
Algo que me pareció interesante fue que al querer poner una imagen en mi mensaje de estado aparte de la opción de subir imágenes desde mi PC me aparecieron todas las imágenes que he usado en algún post en mi blog de blogger. Una vez que las fotos han sido publicadas las demás personas pueden verlas haciendo click en ellas, para lo cual se oscurece la pantalla enfocándose dicha foto.
Buzz está incluido dentro de la bandeja de Gmail por lo que será más fácil que la gente experimente con él, a diferencia de Google Wave que es un servicio separado. Permite integrar elementos de Google Reader, Twitter, Flickr, Picasa, Youtube, etc. Además cuenta con un sistema de filtrado para que llegue lo más relevante al usuario.
Aquí dejo el video de presentación de Google Buzz, más divertido que leer todo lo que he escrito:
Últimos comentarios