Estoy continuando el proyecto de Xhelos. Esta vez con la ayuda de la herramienta Construct2 que me permite desarrollar de forma mas rápida la interfaz de Batalla.
Sera todo un gran tema de Desarrollo el de salir de hacer que la información sea persistente. Pero vamos a ir paso a paso.
Quizás use Laravel o quizás algún otro sistema sencillo de Almacenamiento de Información. Me acuerdo que hace 8 años desarrolle un minisistema MVC especial para el juego. Aprendí bastante pero como quiero desarrollarlo rápido, buscare alguna herramienta de WebService rapido para almacenamiento de esta información.
Pienso sacar un prototipo rápido para presentarlo en concursos y ganar fondos para su desarrollo.
Y bueno, como proyecto mascota esta bonito y entretenido de desarrollar.
En la Fanpage pondré actualizaciones mas rápidas pero de ves en cuando escribiré por aquí.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Yup lets make a game that's is going to make all the people loss their lives playing this game, because it fill them up with happiness. Yeah let's own'em and make this game the best game in earth, at least until somebody copy us.... but maybe, for a split of second, this game is going to be the most playable thing around here on planet Earth, my megalomaniacal friend.
We change our language from Spanish to English, why not change the game concept in general, iterate the game until we tap the subconscious thingy that make people play games and wake up to look for the perfect moment to attack. We have some games like Ikariam and Ogame that teaches us the way, but they didn't went all-retard (thank you Tropic Thunder movie) to the goal, they just vanished with they long play defects. We have learned from them, and we will not commit the same game design errors that plague those games. We wil start from fresh with a a new and Orphiastic design. This is our goal and this will be done.
Until then, expect more news.
Have the greatest day of your live.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Como van muchachos, en la anterior entrada conversamos acerca del posicionamiento con Floats. Me toca mostrarles un truco mas para que puedan continuar por sus propias manos.
Nos quedamos aquí haciendo el menú.
Estilizando el Menú Principal
Lo primero es decirle a nuestros tags li que se comporten . Quitaremos los redondos al lado de cada li y lo pondremos en linea, usando nuestro popular display:float
Añade este CSS al final de tu archivo index.css. Con el haremos que nuestros tags li osea nuestros items del menu, aparezcan de izquierda a derecha en lugar de arriba a abajo, que tengan un tamaño de fuente potente, le quitaremos los redondos que aparecen por defecto a cada tag li, y pondremos algunos paddings para que se vea bonito.
Pero que Dioses que somos
Ok pusimos el CSS y nos vamos acercando a nuestro objetivo, solo nos falta ponerle el bloque de fondo y añadir un par de margin y padding para separar bonito nuestro contenido. Poniendo el siguiente estilo:
Y actualizamos la pagina y....
No pasa absolutamente nada!. ¿Pero que caraxos? se preguntaran mientras ven homicidamente la pantalla de su computadora, si hemos puesto un estilo a nuestro ul que contiene a todos nuestros li, este no se pinta, ni siquiera el fondo que le pusimos!. Porque los dioses conspiran contra nuestras ganas de desarrollar juegos?
Con ustedes el hack de clearfix
Cuando empezaba a desarrollar paginas webs descubrí este problema. Los contenedores de elementos que han sido flotados no tienen un espacio por si mismos. Lo que es una pena realmente ya que fácilmente podríamos haber terminado el trabajo si el contenedor respetara los margins y paddings que tienen sus hijos. Felizmente nosotros tenemos un hack de CSS que hace precisamente esto, llamado clearfix.
Para aplicar clearfix a nuestro codigo tenemos que seguir dos pasos sencillos:
Colocar el codigo de clearfix
Colocar a nuestro contenedor la clase clearfix.
Aqui les paso el codigo, no es necesario que lo entiendan, de hecho yo no lo entiendo muy bien al 100% pero demonios que bien funciona!.
Una ves colocado el codigo al final de nuestro archivo, es hora de colocarle la clase clearfix a nuestro ul. Quedaria asi:
Ahora si, CTRL + F5 y veamos a este hack corriendo:
Hermoso!. ¿Ahora ven lo necesario de aplicar este hack? Creanme les sacara de muchos apuros cuando este maquetando.
Estilo Border Radius
Los que hayan chekado con detenimiento notaran que las esquinas de nuestro ul aparecen redondeadas. Esto es gracias al estilo border-radius, que como su nombre lo indica le da un borde redondo a cada una de las esquinas de nuestro contenedor. ¿Sabias que puedes darle un redondeo diferente a cada una de las esquinas? Solo necesitas especificarlas una por una. Aqui un esquema:
Desde arriba a la izquierda, vas en el sentido de las agujas del reloj.
Añadiendo la Fuente
Ok, en nuestro diseño usamos un tipo de fuente llamado A Bugs Life (descarguenla, it's an order) que obviamente no se refleja en nuestra pagina web. Para que funcione tenemos que descargar la fuente y configurarla con CSS. Una pequeña nota, el siguiente paso no es compatible con navegadores antiguos como IE6, pero si estas usando IE6 o IE7, no eres digno de mi confianza.
Pero gracias a Thor, en internet existen un monton de herramietas que nos pueden ayudar a colocar fuentes con un resultado optimo, una de estas es Font Squirrel Web Font Generator. Entren a la dirección, coloquenle la opcion de optimal,acepten el Agreement, y subanle la fuente que les pase.
Y donen muchachos, nunca cae mal una donación :D
Una ves hecho todo esto haganle click al boton DOWNLOAD YOUR KIT. Descargas el zip y lo descomprimes, encontraras toda una lista de archivos.
La carnecita por así decirlo esta en el archivo stylesheet.css. Copiate todos los archivos que estoy seleccionando en verde a la carpeta css de tu proyecto, estos son los archivos necesarios para que funcione. Despues renombra stylesheet.css como font.css
Y no nos olvidemos de añadir este nuevo archivo CSS a nuestro index.php, ponlo antes de definir nuestro index.css
Después de toda esta agotadora jornada, al fin podemos indicar donde queremos que se muestre esta fuente. Para eso abre font.css y añade este estilo de #mainMenuWrapper:
Ahora si, CTRL+F5 y veamos que tal esta quedando!
No hay duda, los estoy volviendo Tigres en Desarrollo Web, dense otro abrazo porque conocer el manejo de los floats y el añadir fuentes a una pagina web, es un level bien pro en diseño de paginas webs.
Y así es como se maqueta una Pagina Web
A partir de ahora creo que ya tienen los conocimientos básicos como para que puedan continuar por ustedes mismos. Por supuesto no duden en comentarme sobre sus dudas que tendrán, háganme caso esto es solo el comienzo, aunque uno muy auspicioso. Espero se hayan divertido tanto como yo.
En nuestros siguientes tutoriales vamos a ver ya temas de programación en servidor y cliente y también entrar al tema del manejo de base de datos. Traten con sus conocimientos actuales de terminar nuestra interfaz:
Nos vemos en el próximo episodio!
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
En los dos ultimos episodios por asi decirlo, creamos un div que iba a contener a todos los demas divs y asi atarlos en las tinieblas, al mejor estilo del señor de los añillos, y tambien le colocamos un fondo bonito, hell yeah.
Hora de mas lecciones de maquetacion de HTML5 para crear nuestro superjuego!.
Nociones Básicas para maquetar en HTML5
Hay un estilo en CSS llamado display que nos permite indicar si nuestro elemento sera mostrado como un bloque o como un elemento inline. Hay mas opciones pero estas dos son las principales. Para posicionar elementos tienen que ser del tipo block, ya que con block nos permite ponerle margenes, padding (padding es el espacio entre el borde de nuestro contenedor y su contenido) y border (la linea que rodea a nuestro contenedor). Por defecto todos los divs tienen display:block y son los elementos que usaremos para posicionar mejor el contenido. Para los curiosos encontre esta pagina que puede explicarles mejor este tema.
Los diferentes estilos de CSS que puedes aplicar a un display:block normalmente
Ahora normalmente los display block son colocados de arriba a abajo. Un item a la vez.
Sin Float
Osea normalmente no podemos colocar un tag con display:block al lado de otro, a menos que usemos el magico estilo float.
Con Float
Creando la estructura del Header con HTML
Una de mis premisas al hacer desarrollo es tratar de eliminar lo máximo en Tags que no nos sirvan, creanme eso nos va a ayudar de sobremanera. Lo primero es crear una ligera estructura de la parte superior de la pagina.
Haremos todo lo verdecito
Entonces empezamos con la estructura del HTML. Antes teniamos:
Pero ahora cambiaremos la estructura a lo siguiente:
Vamos por partes explicando este cambio. Como ven todo lo estamos agrupando dentro del tag header, en realidad podríamos agruparlo dentro de un tag div o si quieren un p y prácticamente renderizaria igual, pero para estar acorde a las nuevas tendencias en HTML5 usaremos este nuevo TAG header.
Después dividimos este header en 3 secciones:
Un primer div#trademarkWrapper conteniendo la imagen de nuestro logo (img) y el titulo (h1). Dicho sea de paso, este es el logo, descargatelo y ponlo dentro de tu carpeta img
Un segundo div#loginFormWrapper que contendrá nuestro formulario de ingreso con 3 campos, usuario, password y boton de submit. Noten que todos estos campos estan dentro de un tag form, esto es lo normal cuando tienes campos en tus formularios. En siguientes post nos enfocaremos en el manejo de forms, por ahora solo nos dedicaremos a maquetar nuestra web. El tag legend se usa siempre que quieran poner titulos dentro de un form, esto es un estandar ya que si desean podrían usar el tag span o lo que quieran, igual funcionaria, pero hagamoslo de la manera correcta y pongamos los elementos donde corresponden.
Una tercera seccion nav#mainMenuWrapper que tendra una lista de menus a nuestra disposicion. Un ul como explicamos se usa para crear listas sin orden (unordered list), en simples palabras, todos los li apareceran por defecto con un redondo en lugar de con numeros. Igual eliminaremos esto para darle a estos li un aspecto mas de menu.
Muy bien, añadiendo estos cambios la pagina nos quedaría esto:
Posiciones con Flotantes con CSS
Ok, pongamosle la magia del CSS y veamos como nos vamos a ir acercando a nuestro objetivo. Lo primero es colocar el CSS de posiciones:
Lo que estamos haciendo es ponerle posiciones al div#trademarkWrapper para que este a la izquierda y al div#loginFormWrapper para que aparezca a la derecha. Esto lo hacemos con elementos flotantes y muy importante le colocamos espacios de ancho (widths), sin esto los flotantes no funcionarian muy bien en diferentes navegadores.El clear:both lo aplicamos para liberar los estilos flotantes.
Y así tenemos una forma de posicionar elementos con CSS. Esta es una forma natural de posicionar cosas con CSS, existe otra usando los estilos position, top, left
Dudas con estos temas vean esta pagina web floatutorial, se los recomiendo tanto que ya lo recomende en una entrada anterior, serio chequeen ese tutorial si quieren aprender toda la magia de floats en CSS.
Bueno aprendimos a maquetar a punta de floats, y si lo han logrado, dense un abrazo porque el manejo de floats es una de las artes mas difíciles en la maquetación con HTML. Ah pero pequeños saltamontes, aun nos queda por conversar sobre los floats. Nos vemos en el proximo tutorial donde hablaremos algo mas de los elementos floats y crearemos el menu principal. Saludos!
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Bueno rompiendo un poco con la onda de los tutoriales, y para justificar en algo mi injustificada desaparición del blog, quería hablar un poco sobre la experiencia de estar en un GameJam en mi ciudad, Arequipa:
Fue el primer GameJam que hacemos en Arequipa. Logramos traer a 28 Hobbistas en el desarrollo de juegos, desde programadores hasta diseñadores, y entusiastas, que al final aprendieron a programar a la fuerza y en la madrugada :D.
Fueron 2 días que estuvimos entre mañana, tardes y madrugadas diseñando, dibujando y programando lo mas que podíamos. En nuestro caso, como organizadores del evento recién nos dimos tiempo de armar nuestra idea en la primera madrugada, y vaya que salieron las ideas
Porque lo pusimos en ingles? No tengo idea!
Pero lo importante son los 8 proyectos que sacamos los cuales te invito a visitar en la pagina del GameJam
El de nosotros se llama Blind, un Survival en 2D que lo puedes jugar online (en firefox de preferencia, escuche que con chrome se comporta raro) gracias a la magia del Construct2!!!.
Y para terminar, pues fácil saldrá otro GameJam el próximo año y sobretodo dejenme animarlos a que organicen uno en su ciudad. Se los recomiendo totalmente.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Holas holas castañolas, como diria Flanders, a quien quiero crucificar de tan solo escucharlo, upss lapsus mental, bueno continuamos con el tutorial, esta ves trabajaremos la maquetación de la pagina web, mi objetivo es que conozcan de que va el HTML y el CSS para que vayan preparandose para lo bueno.
Pero primero una ligera novedad, vamos a hacer unos cambios a nuestro diseño inicial. Con ustedes la nueva interfaz que vamos a desarrollar:
El antes y después, pueden lanzar la primera piedra, pero creo que esta mejor y mas directo
El Fondo, donde esta toda la magia
Empezamos colocando el fondo a nuestra pagina web, créanme al decirles que el fondo nos dará una muy buena base para hacer los diseños, para eso ustedes se preguntaran ¿y bueno como lo hacemos tío? Pues primero obtengamos una imagen de lo que seria el fondo de la pagina web:
Y así obtenemos una imagen que nos servirá como base para el fondo de tu pagina web
Ahora tenemos que trabajar con los bordes de esa imagen para que al repetirla a su lado calce correctamente como mosaicos:
La imagen obtenida colocada una al lado de la otra, ¿ven como quiere calzar?
Estoy seguro que van a sufrir un poco con esto, especialmente en la parte del pasto y la roca de abajo, el truco es usar imagenes prediseñadas que también se repita y un poquito de edición de fotos.
Ahora si coloquemos esa imagen de fondo en nuestra web, para eso coloquen esta imagen dentro de la carpeta css/img y añadan este CSS a su hoja de estilos index.css
Bien prueba ahora y mira lo que se ve:
Que genial, tenemos ya el fondo de la pagina web listo, pruebalo en diferentes navegadores y deleitate con tu creación, pero ve guardando fuerzas que mañana continuamos con lo bueno! Hasta pronto
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Otra nueva entrega del tutorial para crear tu juego web persistente, Retomemos lo que aprendimos en los ultimos capitulos. En el capitulo 5 aprendiendo un poco de HTML con CSS, en los siguientes capitulos, el capitulo 6 y capitulo 7 aprendimos como hacer el diseño de nuestras interfaces (en caso por supuesto de no tener un diseñador).
Ahora combinaremos estos conocimientos para crear la pagina inicial de nuestra web, también conocido como EL Front. Esta fase nos servirá entonces como traducir tus diseños a una pagina web, con todo y manejo de tu servidor Wamp.
Algunos puntos Previos
Para esta ocasión, prendan de nuevo su wamp y activen su netbeans con los archivos creados hasta el capitulo 5. Por supuesto nos servira bastante la imagen de insectoides que hemos desarrollado entre el capitulo 6 y 7. Ah no tienes los archivos anteriores? No os preocupeis estoy creando un repositorio en GitHub para manejar los branches, de paso aprendo a manejar GIT. Así que ya sabes, bajalo de ahi. Por si las dudas voy a crear un nuevo branch por cada Nuevo Capitulo. Si quieres empezar de cero usa el branch Episodio6, si quieres ver terminado lo que hayamos avanzado en este tutorial usa el branch Episodio8
Empecemos la Maquetación
Lo primero que aconsejo es tener una idea de donde poner los contenidos. Generalmente y una buena tendencia en desarrollo web en general, es mantener el contenido centrado y damos la impresión de que la pagina abarca toda la pantalla mediante el uso de un fondo continuo.
Un tamaño interesante a usar para el contenido son 960 pixeles de ancho. Salvo que queramos hacer una pagina web responsiva, nos atendremos a este tamaño que nos servirá perfectamente para nuestros maquiavelicos planes.
Manos a la obra. Lo primero es crear la estructura inicial que nos permitirá tener ese contenido centrado. Usaremos una técnica ancestral para centrar un div principal. Lo primero sera añadir un DIV de id wrapper que mantenga todo nuestro contenido, osea abre tu archivo index.php que creamos y reemplazalo con este codigo:
Y aumentamos lo siguiente en nuestra hoja de estilos index.css
Listo prueba el centrado, te debería de quedar una cosa así:
La explicación sencilla es que text-align:center de nuestro body hace que todo el contenido se centre, esto no influiría normalmente en un DIV, porque no es texto, pero si le ponemos margin:0 auto y width:960px esto funciona de maravilla!.
Por supuesto hay una explicación larga y tiene que ver con que los divs vienen por defecto con un display:block (no les afecta el text-align por defecto), mientras que otros tags que son de texto como el span usan el display:inline, no hemos visto nada de esto aun en nuestro código pero te recomiendo que leas sobre los display modes y tambien sobre el modelo de cajas en CSS
Muy bien aunque tenemos un largo camino por andar dejare este post aqui para que vayan haciendo sus pininos, si quieren encontrar el codigo completo de lo que hemos estado avanzando, entren a mi github y descarguen los avances :D
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Ahora que están de moda los juegos para smartphones (mi escala de tiempo es diferente a la de ustedes :D), me gustaría conversar sobre un juego para Android gratuito, que tiene sus pros y sus contras pero ejemplifica un tema que generara controversia, el poderoso condicionamiento operante aplicado a los juegos.
Con ustedes Zombie Survival
Zombie Survival es un juego de plataforma simple, donde tu objetivo es eliminar diferentes cantidades de ovnis con diferentes tipos de armas. Cada ves que el zombie te toca pierdes vida y si tu vida se acaba, ustedes ya se imaginaran. Manejas 5 diferentes tipos de misiones:
Mata una cierta cantidad de Zombies.
Corre hacia el lado derecho sin morir.
Sobrevive una cierta cantidad de tiempo.
Una combinación de matar zombies con tiempo o correr con tiempo.
Misión Especial de matar todos los zombies que puedas por dinero.
El juego se juega (así como lo leen) en días, cada día tiene entre 3 a 4 misiones, cuando terminas todas las misiones, excepto la misión especial, avanzas de día. Cada día que pases hace mas difícil el juego, yo diría absurdamente difícil. Hay diferentes tipos de zombies y van apareciendo nuevos cada ves que avances mas el juego.
Solo puedes moverte de izquierda a derecha y ademas puedes disparar tu arma y cambiar hasta 4 tipos de armas diferentes. Puedes configurar que armas elegir en la escena de elección de misiones.
Ahora cada ves que matas una cierta cantidad de zombies sin parar, ganas dinero del juego. Sin parar significa matar un zombie al menos cada 3 segundos. Mientras mas zombies elimines mas dinero ganas, ok sono redundante pero permiteme explicarlo, si matas 10 zombies ganas 50 monedas, si continuas con esa racha y matas digamos 20 zombies ganas 100 monedas, cuando llegas a los 100 zombies muertos ya son 500 monedas . La Misión especial es especial porque por cada zombie muerto ganas dinero, es la escena perfecta para el grinding.
Otras formas de ganar dinero es cumpliendo retos diarios (matar hasta 2000 zombies por dia) y Achievements como jugar por 10 horas el juego.
Tienes una variedad de armas a comprar, y powerups temporales como bolsas de vida, mas velocidad y por supuesto unos mechas invencibles pero temporales. Ademas puedes elegir a mas personajes, uno cada ves mas poderoso que el otro. Ademas de las armas, tienes que comprarles municiones, costosas municiones.
Esto da una idea de las armas que puedes usar en el juego. Aunque no he visto aun las granadas :D
Dimos un breve repaso al juego en si, vamos a lo bueno.
Condicionamiento Operante y la malévola forma de usarlo en el juego
Antes de conversar de condicionamiento operante, les dejo un vídeo que explica a grandes rasgos este fenómeno aplicado a los juegos por los chicos de Penny Arcade:
¿Viste el video? ¿No lo viste porque eres un lazy b@stard? No os preocupéis, lo explico para los perezosos, que somos todos :D. Condicionamiento Operante aplicado a juegos es darle premios a tus jugadores, dependiendo de las acciones que cumplas en el juego. Entrenas por así decirlo al jugador a meterse al juego y seguir jugandolo porque el jugador sabe que mientras mas juegue mas va a poder ganar. ¿No les suena esto a la forma como trabajan las maquinitas tragamonedas?.
Porque es malo preguntaran, si jugamos y ganamos premios, no hay pierde con la idea!. Es malo porque estas jugando, no para divertirte con el juego, si no para ganar premios.
Ahora hasta aquí no hay nada de malo porque ese sentido de completar las cosas es grandioso,y en fin el tiempo de uno lo usa como uno desee. Lo malo es que usan esa necesidad para sacarte dinero!, como las armas son costosas, y tienes la opción de comprar las armas con dinero real, y sobretodo estas entrenado a sentir esa sensación de comprar una nueva arma, hay muchas posibilidades de que uses tu dinero real para usarlo en el juego. Ahora los precios son caros, la mejor arma, el rayo laser cuesta entre 50$ a 100$, con ese dinero me compro un juego triple AAA que me va a dar muchas horas de diversión, pero en ese momento cuando tienes la necesidad de comprar el arma, no lo pensaras 2 veces, BAM 50 pavos en una pistola laser de un juego que es repetitivo al infinito. Aqui un truco: quieres malgastar dinero de verdad en dinero falso de un juego? Comparalo con el precio de un juego completo y ojala te nazca una desalentacion a malgastar el dinero.
Mezcla esto con la dificultad inherente de conseguir dinero en el juego y te darás cuenta que el juego es realmente un sistema para sacarte dinero de una forma abusiva diría yo. El juego se hace progresivamente mas difícil,pero la facilidad con la que consigues dinero no crece con el nivel de dificultad, ergo, buscas otra forma de ganar dinero. La dificultad y la diversión del juego no esta pensada para entretenerte, si no para desfalcarte tu bien ganado dinero.
Pero hay algo interesante también, esta necesidad de entrar al juego, hace que ellos también ganen por publicidad, que me parece una opción acertada. Si hubieran aplicado solo dinero por publicidad, la ambición de los desarrolladores no se hubiera mezclado demasiado con la mecánica del juego.
Tips y Trucos del Juego
Ok ok, sera una maquina para sacarte dinero pero hay formas de salir mas rápidamente de ese agujero de Batman 3 que es este juego . A continuación unos trucos para avanzar por el juego rápidamente.
Ahorra Municiones: Simple idea pero difícil en ejecución, una de las primeras armas que te da mas poder por tu dinero es la FN P90, la munición cuesta poco y mata a los zombies de mas bajo nivel tan bien como las armas mas caras. Cuidado con emocionarte con armas mas poderosas, cuestan mucho mas en recargar y generalmente te dan el mismo efecto. La FN P90 es la arma por excelencia para la misión de grinding.
Cámbiale la Fecha a tu Celular: Cada día real que pasa, el juego te da bonos diarios, si entras y sales del juego mientras adelantas en un dia tu cel, podrás tener este dinero de forma gratuita, si no fuera por el tiempo de espera para que cargue el juego esto seria una opción ideal. Al menos usa ese día para completar los objetivos diarios antes de pasar al siguiente día, vas a ganar rapidamente dinero, y perderas rapidamente tu tiempo tambien :D
Doble Shotgun: Va a llegar un momento donde el juego se vuelva imposible, ahi por el dia 15 masomenos, descubri un truco que puede ayudarte a pasar mas niveles: si compras las 2 shotguns, armate solo con ellas y dispara y cambia rapidamente entre ellas, por defecto las Shotguns tienen un tiempo de espera entre cada disparo, pero si cambias rapidamente de arma, el tiempo es cero. Lo bueno de las Shotguns es que hacen daño a mas de una unidad, solo que tienen un rango de acción muy pequeño.
Lanzallamas Tornado: Creo que esto lo pusieron a propósito los desarrolladores, cuando obtengas el lanzallamas, una de las mejores armas, gira rapidamente de izquierda a derecha varias veces mientras disparas, el lanzallamas se dispara cada ves que giras en lugar de esperar a que termine su cooldown. Muy util cuando te empiecen a llegar los dinozombies.
Los enemigos no te atacan si los atacas: Es por esto que las metralletas no son demasiado útiles. Las metralletas solo afectan a una unidad, las shotguns y el lanzallamas afectan a varias unidades al mismo tiempo. Aunque consigas mejores metralletas, van a haber niveles donde te aparezcan dos monstruos gigantes al mismo tiempo, la metralleta no te ayudara mucho.
Congela a los Zombies: El Arma congelante es buenaza, no solo congela a los enemigos también los elimina. Aunque es carisima de mantener, no la uses con los zombies simples, usalas para los zombies grandotes. El Arma congelante cuesta diamantes, asi que no uses tus diamantes en nada mas hasta que consigas el arma congelante, una excepcion a esto es la Spas-12 Shotgun que cuesta 100 diamantes.
Como lidiar con los zombies con escudo: Hay unos zombies que vienen con un escudo que los hace casi immortales. Para eliminarlos tienes que bajarles el escudo primero. La primera opción es esperar que venga un Zombie con dinamita, si lo destruyes su escudo vuela, la otra opción es usar la sierra electrica, la CheyTac M200 o cualquier arma explosiva de las mas caras. Ojo que hay 2 tipos de zombies y hasta ahora solo el primero es asesinable.
Comentarios Finales
El juego es enviciante, a pesar de que es lo mas repetitivo del mundo, podría decir que es la esencia destilada de todos los juegos que te hacen perder el tiempo haciendo lo mismo una y otra vez. Buenos somos humanos, criaturas de costumbre, solo nos queda jugarlo una vez mas :D
PD: No os preocupeis, el siguiente post sera si o si del tutorial de juegos webs!. Es solo que tenia que conversar de este juego.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Estimados les presento un juego que desarrolle con Construct2: Invasion. El juego trata de un ovni con el que puedes abducir humanos (y vacas, claro que si) para ganar puntos. Alguno de estos humanos pueden defenderse así que también tienes un cañon laser a tu disposición en caso las cosas se pongan difíciles.
El juego es mas bien un demo de las capacidades de Construct2 para desarrollar rápidamente juegos. La version gratuita de C2 me permite manejar hasta 100 eventos, los eventos es la parte programable de Construct2, así que alcanzo para hacer el primer nivel del juego.
Mooo!
Behaviors
Me encanto la facilidad con la que uno puede programar el movimiento del personaje principal. De hecho es tan fácil como agregarle algo conocido como Behaviour, digamos comportamientos preprogramados. Por ejemplo uno llamado 8 way me permite poder mover a un Sprite con el teclado sin necesidad de programar nada.
Planeo obtener la versión completa de Construct2 y terminar el juego. Aun falta mucho mas que manejar con el juego como powerups y compra de armamento y naves.
Espero lo disfruten y me encantaria conocer sus opiniones de la demo!
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Retomando un poco el desarrollo de videojuegos, y aprovechando lo aprendido en el GDG Arequipa DevFest, evento que ya les comentare en un proximo post, quiero presentarles una opción que no deben dejar de pasar al momento de pensar en desarrollar juegos. Pero primero lo primero...
¿Porque usar un Framework, si a mi me gusta hacerlo todo por mi sólito?
Supuse que dirían eso =). Es verdad que no hay nada como el sentimiento de hacer algo con nuestras propias manos, pero, y el gran pero, es el tiempo. Recuerden muchachos que su objetivo es hacer un juego, y cualquier opción que les permita mejorar la velocidad del mismo, no deberían de desaprovecharlo. Framework = Mas Tiempo para el Juego. Por supuesto tienen que usar un framework que les haga la vida mas fácil y eso me parece que depende de cada persona o equipo.
Cosas Geniales de Construct2
Construct2 es una muy interesante opción para los que recién se inician en el desarrollo de juegos. Virtualmente puedes crear un juego completo sin nada de código!. Probé sus tutoriales y me dejo impresionado. Construct2 "compila" el juego que desarrolles en Javascript, el lenguaje que usan las paginas web para hacer animaciones y demas cosas mágicas en tu navegador.
Básicamente empiezas haciendo drag&drop de las imágenes que quieras poner en el juego, estas se convierten automáticamente en un objeto del juego y empiezas a darles eventos a tus objetos, que es la forma de programar tu juego sin escribir nada de código.
Así es como se ven los eventos por si tenias curiosidad
¿Ahora podemos hacer juegos comunes y corrientes del tipo de la mayoría de juegos hechos en Flash, pero habría forma de hacer un juego web con un Backend para guardar datos? Pues parece que si, Construct2 es capaz de conectarse mediante Ajax a un WebService, pero no se hasta que punto podría ser útil como para construir por ejemplo el FrontEnd de Xhelos.
Otro beneficio interesante de Construct2 es la capacidad de que el juego pueda, al ser en si una pagina web,correr en diferentes plataformas como celulares y tablets con Androids, Firefox Os y hasta Iphones e Ipads, sin mencionar (o mencionando mejor dicho) que puedes volver tu juego ejecutable para ser usados en PCs, noten que he dicho la posibilidad, y no que se pueda por defecto, ahora les comento el porque de esto.
Lo mejor que tiene el Construct2, son sus tutoriales y documentación, muy bien hechos y visuales, realmente es todo un placer seguir sus tutoriales iniciales, a uno le dan ganas de seguir desarrollando los juegos hasta el final. Recomiendo que sigan el tutorial para crear un juego de plataforma y el tutorial para un juego que no sabria como describirlo.
Que no me gusto de Construct2
La versión gratuita, tiene limitaciones como buen software que quiere ser vendido. Una de estas limitaciones es la cantidad de efectos (100 efectos) y la cantidad de capas (4) que puedes hacer en tu juego, estas limitaciones desaparecen cuando usas las versiones pagadas.
Otra cosa que note al hacer mis pruebas rápidas es que por defecto aunque los juegos corren notablemente veloz en los navegadores, si lo pruebas en algun navegador para celular, los notaras lentos, aunque me comentaron que podías usar compiladores híbridos como PhoneGap para mejorar la velocidad en móviles. Particularmente el ejemplo parecido a AngryBirds me fue injugable en un celular tipo Samsung Duos y algo jugable en un AIRIS T400.
Hay otro punto que lo escuche a otros desarrolladores que probaron Construct2 y es el problema de que por defecto no tienes forma de programar y escribir código, obviamente no se exactamente si es un defecto o no, pero según la opinión de ellos, sentían que les quitaban el control de las manos, que lo notaban demasiado limitado para hacer lo que ellos tenían pensado. Leyendo e investigando un poco, descubrí que uno si puede programar como chango usando el Javascript JDK que viene con el Framework.
Veredicto de la Versión Gratuita
En lo poco que llego usando Construct2, lo estoy viendo como una herramienta que la usaría en ciertas ocasiones, al menos en su versión gratuita...
Para iniciarse en el desarrollo de videojuegos. Recomendadisimo
Desarrollo de Juegos netamente Web , como antiguos juegos de Flash. Aquí tienen un bonus ya que hay empresas de monetizacion que han creado plugins de integración con Construct2 como clay.io, una buena oportunidad de negocio.
Para prototipado rápido de alguna idea de juegos mas complejos o demos de paginas webs.
Aun me falta saber si es posible usar Construct2 para proyectos mas grandes, tengo una idea de probarlo para ver que tanto podría avanzar Xhelos si cambio la mayor parte del FrontEnd a Construct2, sobretodo para tratar de mejorar la usabilidad y velocidad de la interfaz.
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Continuando con la parte de diseño, en el anterior tutorial vimos como tomar inspiración de varios recursos para tener una idea del diseño del juego. Hicimos ya nuestra lluvia de ideas y tenemos algunos colores fuentes para trabajar, ademas de eso seleccionamos un tipo de estructura fusión de otros juegos webs, como dark orbit y goblin keeper. Aqui una idea de lo que se va a lograr (claro dentro de nuestro poder en diseño...)
Tareas a Finalizar
En el anterior tutorial nos quedamos en desarrollar la idea del juego y teniamos la siguiente lista, en negrita estan las que desarrollaremos ahora.
Lluvia de Ideas del diseño
Tomar Inspiracion de otras paginas
Ver que contenido tendrá la pagina
Armar la estructura del diseño
Colocarle un Fondo de Pantalla alucinante Ponerle sus Detalles
Continuemos entonces:
Ver que contenido tendrá la pagina
Facil, sabemos ya masomenos que queremos colocar gracias a las ideas obtenidas en las siguientes paginas, ademas por experiencia les puedo decir que necesitamos:
Barra de Login de Usuario (y selección de idioma en un futuro algo lejano, hay esperanzas :D)
Formulario de Registro, con los campos necesarios nomas, consideren también la opción de usar su usuario de facebook, aunque usaremos un login común y corriente.
Boton de Accion, sobretodo para registrar un usuario nuevo
Imagen de Fondo chevere!
Una Seccion de novedades, mantengan actualizada la pagina con buenas novedades!
Una Seccion de Fotos, pongan bastante fotos en el juego.
Listo, ahora continuemos con la estructura del diseño.
Armar la estructura del diseño
Dark Orbit + Dungeon Keeper + Colores de Insectos y naturaleza, si pongamos esas cosas!, bueno ya tenemos las necesidades de contenido y la inspiración, empezaremos por el maquetado de estructura:
Es simple y es en realidad una copia de la inspiracion que tenemos. Tenemos las siguientes secciones:
Cabecera: Donde va el logo del juego y un menu de navegacion Ademas contienen siempre en la parte de arriba una seccion de usuarios
Accion: Donde colocaremos un formulario de inscripcion con su boton de accion
Show: Colocaremos aqui un video o un slideshow mostrando rapidamente las bondades del juego
Infos: Secciones informativas de la pagina web
Pie de Pagina: Generalmente va el copyright o copyleft, junto con informacion de contacto. Tambien si el sitio web de la pagina contiene varias secciones, se puede colocar un Mapa del Sitio por aqui.
Muy bien ahora que ya tenemos la estructura el siguiente paso es colorearla y darle sus cosillas extras. Como les comentaba es bueno tener un amigo diseñador pero nosotros podemos hacer algo bonito.
Primero que nada, estoy usando Fireworks para trabajar, es mi herramienta favorita, pero ustedes pueden usar cualquier herramienta que les permita importar imagenes del tipo jpg o png.
Ponerle los Detalles
Para el diseño, yo lo trabajo por iteraciones,me proyecto a una idea general de lo que quiero y voy probando texturas y colores que quizas pueda funcionar. Mi idea ahora es que como va a ser un juego de insectos, pienso armar una vista del suelo teniendo en cuenta parte del cielo y cavando hacia la profundidad, o si nos encanta cavar:
Iteracion 1: Colores Iniciales
Mi objetivo aqui es generar la primera idea de cielo y empiezo a jugar con los colores de las paletas que hemos elegido. ¿Notan la aparicion de un cielo y un prospecto de menu?
Se acuerdan de Design Seeds?, bueno yo corto estas imagenes y las uso como base para los colores
Iteracion 2: Logos y fuentes
Va tomando forma nuestra maqueta, asi que se me ocurrio ponerle algun par de fuentes que tengan que ver con insectos y encontre A Bugs Life. Las fuentes son algo importante para el juego, definiran de cierta manera su sentido. Con esta fuente logramos que se sienta mas casual el juego. Sobre el logo pues aunque no me lo crean, es la parte mas importante, un logo debe de ser simple y facil de recordar, puedes hacerlo superestilizado, pero si no es facil de recordar, es malo!. El logo lo saque buscando la palabra insectoides y encontre algo sobre aliens insectos, pero bueno servira para nuestros propositos
Iteracion 3: Relleno de las Secciones
Y bueno hemos avanzado alguito, pero aun la interfaz se ve simple (simple es bueno :P), pero tranquilos pronto llegaremos al final. Por ahora rellenamos los bloques de la pagina con algunas cosa extras y cambiare los colores de algunas cosas. ¿Que color elegir? pues jugando con nuestra paleta podremos hacer algunas cosas interesantes:
Iteracion 4: Usando algunas Tiles
Como ven ya tenemos armado la estructura basica, pero como que falta algo, algo que indique que esto es un juego. Asi que una rapida busqueda en google de las palabras vertical grass tiles, y encontramos un tileset genial que vamos a usar!
Uno puede seguir y seguir refinando la interface, pero para efectos del tutorial voy a mostrarles un truco mas que les servira hasta que consigan a su diseñador. Se trata de colocar texturas a tus diseños y este truco lo aprendi desarrollando algunas interfaces para mi juego Xhelos.com.
Bien se trata de lo siguiente, busquen una imagen con alguna textura interesante, apliquenle una transparencia y ponganlo encima de algun contenido solido, por ejemplo nuestro terreno:
Obtienes una textura y despues le añades transparencia. Magico!
Otras ideas a tener en cuenta son los bordes redondeados. Piensen en un rectangulo, sus esquinas son medias puntiagudas, es lo normal y generalmente demuestran seriedad. En un juego necesitamos lo contrario, necesitamos usar border redondos.
Aplicando la transparencia y los bordes redondos, obtenemos lo siguiente:
Toda una labor titanica para llegar hasta esta interfaz! Espero lo disfruten. Con esto ya finalizamos nuestro tuto acerca de diseño y nos enfocaremos ahora en programacion de HTML5.
Enjoy!
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Retomando el blog señores. Gracias por sus comentarios, sobretodo del tutorial de desarrollos de juegos PBBG que aun falta terminar. Bueno para comentarles los siguientes planes en la agenda:
Acerca de Xhelos:
Como saben, también estoy desarrollando un juego que quiero que sea genial. Este ultimo año lo he avanzado bastante y ya tengo el camino definido para finalizar el juego. Aunque no tengo fechas calculo que me demorare unos 6 meses mas en dejar el juego en Beta, pero quisiera aumentar la velocidad de desarrollo, no se si contratando desarrolladores o haciendo el juego open source para que gente con interés me ayude.
Mas bien, no puedo creer que vaya ya mas de 6 años desarrollando el juego, pero puedo decir concientemente que este año es el año donde he avanzado mas, ya sea porque agarre mas experiencia o porque se me hace mas fácil programar mis ideas que al comienzo.
Acerca del Tutorial:
Bueno he recibido varios comentarios para continuar el tutorial, lo deje, debo de ser sincero, a medio camino para enfocarme en Xhelos y en actividades del mundo real, y ademas de Lol, muchas dosis de Lol, ese juego es un vicio pero aprendí a balancear las horas de juego. Voy a continuar algunos capítulos mas del tutorial para no dejarlos colgados, sobretodo finalizar la parte de diseño. Su feedback es muy importante ya que nos guiara hacia donde deberiamos de trabajar el juego.
Acerca de Tauren Create:
Continuare posteando algo mas seguido, aparte de los tutoriales y otras cosas, aqui en mi pais se esta dando inicio a una movida de desarrollo de videojuegos de todo tipo, asi que hay buen material para continuar desarrollando, tengo en la mente algunas ideas de nuevos post interesantes, asi que a continuar :D
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
Este es un pequeño post que haré para hablar de un tema algo interesante pero que tienes que tener en cuenta al momento de pensar en crear un juego web.
Ahhhh Spam
Como sabrán recién hace 1 mes aproximadamente continué con el desarrollo de Xhelos, que debo decir lo deje abandonado por algo de un año. En todo ese año entraba de vez en cuando para ver como crecían la cantidad de jugadores ( buee... crecer es un termino bien relativo hehe) y me daba con la sorpresa de que la cantidad de usuarios crecía cada mes.
Yo feliz de la vida diciendo que chevere, no actualizo el game pero aun asi siguen creciendo los jugadores!. Ahh hazte fama y échate a la cama como dicen. El problema fue que curioseando un poco en los nombres de los jugadores me di cuenta de que tenian nombres curiosos como "Buy Viagra super extra frikitamente Cheap" o nombres como xyz123yourmominmybedyeah.
Oh dios me invadieron los spammers!. Y debo decir que fue leve ya que eran unos 50 usuarios falsos al mes masomenos, conozco casos especialmente de foros online donde los spammers van por 1000 al dia. Y bueno acciones tenian que ser tomadas
¿Como diablos controlo a los spammers?
Bueno debo decir que tengo algo a favor, Drupal, que me permite instalar modulos para controlar spammers. Asi que lo primero que probe fue colocar un Captcha al juego. Como saben Captcha es un plugin que instalas en tu web ( no solo drupal) que hace esas preguntas de escribe lo que dice aqui, en estas letras tan horriblemente deformadas o no entras.
Este Captcha siquiera ayuda a digitalizar libros, pero hay verdaderas troleadas que nos juegan estos plugins
No funciono.
Es decir al comienzo bajo un poco el control de los spammers pero al mes siguiente vinieron con fuerza, redoblaron esfuerzos y se comieron al captcha en el desayuno. No me lo creeran pero la tecnología de reconocimiento de caracteres es maravillosa y creo que los spammers apoyan bastante este tipo de tecnologias. En fin, busque muchas maneras en Drupal de controlar el spam, desde inputs ocultos hasta captchas matematicos.
Pero encontré mi piedra filosofal en control antispam, se llama spambot y quiere ser tu amigo.
Como hace su magia el Modulo Spambot?
Bueno antes que nada, a pesar de que es un modulo para drupal, no dudes que te puede servir usando php puro. Spambot es un modulo que se conecta con la base de datos del foro www.stopforumspam.com. Cada ves que un usuario es creado, Drupal chekea que el mail, el ip y el nombre no estén registrados en ese foro. Si esta registrado entonces impide que el usuario Drupal se cree, impidiendo también la creación del usuario en Xhelos!
Ahora ustedes que estan programando PHP puro, JAVA o con ayuda de algún framework, no os preocupeis ya que stopforumspam cuenta con un API en protocolo REST, osea pueden usarlo desde cualquier tipo de lenguaje con soporte web.
Daños Colaterales
Bueno esta batalla contra los spammers fue ganada pero supongo que la guerra continua. He estado creando ademas un administrador que me ayude a descubrir usuarios huerfanos, usuarios que existen en Xhelos pero que no existen en Drupal, ya que por un momento se crearon un monton de este tipo de jugadores debido a que en mi codigo creaba a los usuarios antes de que Spambot impidiera la creación del usuario en Drupal. Aunque claro ya esta arreglado.
Mientras tanto, ¿Que voy a hacer con tantos planetas vacios?
Cantidades navegables de planetas vacíos
¿Te gusta la pagina?, socializame haciendole click a tu color preferido:
¿Te gusta la pagina?, socializame haciendole click a tu color preferido: