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:
¿Te gusta la pagina?, socializame haciendole click a tu color preferido: