Actualmente tenemos muchisimas opciones de tecnologias webs que nos pueden ayudar a crear un juego web. Pero siendo esto un tutorial, les dire la receta secreta para hacer un juego, rapido, facil y lo mejor con muchas posibilidades para crecer.
Nota Importante: Al final explicare una forma sencilla de instalar todas estas tecnologias en casi un solo click, asi que no te preocupes por ahora si no sabes mucho de que esta tratando la cosa.
Lenguaje Principal de Programacion: PHP
Osea el lenguaje con que programaremos la mayor parte de la logica de nuestro super juego. Fuera de gustos personales, PHP nos da los siguientes beneficios
- Es gratuito y lo consigues facilmente
- Es muy, muy , muy facil de aprender.
- Es orientado a objetos, err nos da un mejor chance de tener nuestro codigo ordenadito y mantenible a futuro.
- Es mucho mas facil ponerlo Online que otros lenguajes. (Que servicio de hosting no maneja PHP?)
La Persistencia de tu Informacion: Mysql
Necesitamos alguna forma de trabajar con los datos del juego. Cada ataque, cada personaje, cada mapa del juego tiene informacion, y esta informacion es cambiante. Ya existen tecnologias que nos permiten guardar, mostrar, eliminar y actualizar informacion, se llaman Bases de Datos.
La que usaremos, Mysql, es simple de usar y tienes un mogollon de tutoriales en internet. Mi base de datos favorita es otra, Postgres, el problema es que no es tan facil de instalar y no hay muchos servicios de hosting que usen Postgres, pero si el hosting es un problema, por amor a todo lo que es bueno y puro en este mundo, Usen Postgres!.
No se preocupen por ahora si no saben de que va la cosa hasta ahora, una ves que entremos a programar esto se entendera mucho mas facilmente.
La interfaz del Juego: HTML
Piensen en HTML como la parte visual de nuestra aplicacion, si Mysql me devuelve cuanto de daño hace mi espada y cuantos puntos de vida tiene mi enemigo, PHP cogera estos 2 datos y calculara cuanto de daño recibe mi enemigo, el problema es como le muestro a mi usuario visualmente que mi enemigo esta muerto, aqui entra a tallar HTML
Una idea basica de como funciona esto, PHP es el eje de todo, el le pide a Mysql los datos, el mismo PHP los procesa, crea el HTML necesario y lo envia.
HTML es un lenguaje de etiquetas, basicamente una etiqueta es cualquier cosa que este entre el signo <>, ahora HTML define sus propias etiquetas como div e img, que sirven para mostrar informacion en la pagina web.
OJO: Si buscan tutoriales de HTML pueden confundirse facilmente entre lo que es HTML4, HTML5 , tambien hay un XHTML, osea nos hacen la vida mas dificil. Je les aconsejo que busquen tutoriales sobre XHTML, con esto sera suficiente.
Colores y Sabores: Javascript, HTML y CSS
Bueno ya tenemos todo lo basico y necesario para crear un juego persistente. Lo unico que faltaria quizas sea mejorar la interfaz de nuestro programa, hacerla mas amigable al usuario.
- Css se encargara de maquillar nuesto HTML, le podnra colores, tamaño del texto, largos, anchos a nuestros sectores de la pagina y un largo etcetera.
- Javascript se encargara de la funcionalidad de la interfaz, si hago click en un sitio entonces se realiza una accion, esto lo hago con Javascript
- O mucho mejor, usen Jquery, se van a ahorrar un monton de problemas con jquery. Jquery es una libreria de Javascript que te permite realizar muchas cosas que hace javascrit pero de una forma mas sencilla.
Muy bueno y ahora que hago?
Ya sabiendo las tecnologias que vamos a usar te enseñare una forma sencilla de instalar todo esto si estas usando Windows, en el caso de que uses linux ubuntu entonces puedes ver este tutorial en español. Si usas otro Linux dudo mucho que necesites algun manual, de hecho ya deberias de haber creado uno.
En fin les presento a WAMP. Wamp es un programa que te instala todo lo necesario para poder empezar a trabajar con PHP y Mysql en Windows Xp, Vista y 7. Simplemente descargatelo (tienes de 32 y 64 bits, sugiero usar la de 32 por mas que tengas un procesador de 64), instalalo (solo te preguntara que navegador utilizar) y ejecutalo.
Una ves instalado, y ejecutado te aparecera un icono en la parte de abajo donde podremos administrar nuestro WAMP, ese velocimetro aparecera en amarillo si todavia esta cargando, en rojo si tiene problemas, en blanco cuando esta en su estado normal para desarrollo, y en verde si es que lo haces publico para internet (pero no te preocupes siempre aparecera en blanco)
Una ves que ya este en blanco el velocimetro, entra a tu navegador favorito y andate a la direccion http://localhost, asi como lo ves sin www ni nada de eso, simplemente escribe http://localhost y listo, te debe de aparecer una pagina como la que sigue:
Esto es lo que aparece en la direccion http://localhost
Una ves que ya este en blanco el velocimetro, entra a tu navegador favorito y andate a la direccion http://localhost, asi como lo ves sin www ni nada de eso, simplemente escribe http://localhost y listo, te debe de aparecer una pagina como la que sigue:
Esto es lo que aparece en la direccion http://localhostAlgo acerca de Paginas y Servidores Web
En realidad, cuando llamas a la direccion web localhost, estas llamando a un programa que se instala en tu PC con Wamp que se llama Apache Server. El Apache Server que te viene en Wamp te "crea" una direccion web llamada localhost que solo funcionara en tu maquina.
Enteder como funciona esto es algo ligeramente complejo pero que no nos sera de gran ayuda por ahora, lo importante es solo saber que existe un Servidor Apache en tu maquina y que te permite acceder a la direccion localhost cuando tu wamp esta activo.
Otra cosa, esta version de Apache Server viene con soporte para manejar el lenguaje PHP por defecto, genial asi no tendremos que configurar nada.
Probando el PHP
Y ya para finalizar probaremos algo de codigo PHP, para ver que tal anda el funcionamiento de tu servidor web. Sigue estas instrucciones para maximo placer:
- Entra a la carpeta www dentro de la directorio donde instalaste wamp. Por defecto lo instala en c:/wamp, pero puedes haber elegido otra direccion, quien sabe. Esta carpeta es importante ya que aqui es donde pondras todos los archivos de tu juego.
- Crea con el block de notas o lo que desees un archivo llamado probando.php Es importantisimo que el archivo termine en .php y no .txt, ojo con eso guardalo con la extension .php y no con .txt, si no lo haces entonces no funcionara, el block de notas por defecto te lo guardara con .txt aunque le pongas .php si no seleccionas en Tipo: Todos los archivos
Primero le pones que termine con .php, despues le cambias a Tipo: Todos los archivos, y si te aparece la opcion de codificacion lo mejor es que uses UTF-8 Siempre.
- Ponle el siguiente texto a tu archivo recien creado:
Esta imagen te cambiara la vida!- Entra a tu navegador y tipea http://localhost/probando.php, si te aparece algo como esto felicitaciones, eres el feliz dueño de un servidor web local con PHP.
Puedes ser feliz si ves estoY listo, ya tenemos todo lo basico para poder empezar a programar nuestro juego. Si eres nuevo en la programacion web estoy seguro que este tutorial te servira de ayuda. Si no no desesperes, el proximo tutorial hablare algo acerca de herramientas que nos hagan la vida mas facil para programar. En fin el siguiente tuto se viene la proxima semana! Hasta pronto
muy bien me estoy leyendo los tutoriales, sigue haci amigo es un buen aporte para aquellos que no tenemos idea de como hacerlo
Hola gracias por el comentario, yo estoy calculando que regreso a los tutos en Junio, se va a venir uno muy bueno, apenas termine la ultima versión mayor del juego, ( que seria la 0.3.4 ) le dedicare mas time al blog :)
la verdad espero que llegues al final puesto que quiero hacer un juego y otra cosa deveria recomendar el uso del notepad++ para la edicion/creacion de codigo ya que pone las cosas coloreadas y es mas llevadero que verlo todo negro y blanco,
Un saludo
Notepad es una muy buena herramientas, a mi me gusta por la rapidez al abrir archivos, pero la que mas uso es NetBeans porque en proyectos grandes me permite ir a donde declare funciones con ctrl+click entre otras cosas, pero en general recomendaria usar la que mas conozcan!. Gracias por los comentarios
No me abre el wamp... Empezamos bien :(
Durante el proceso de instalación de Wamp me sale un cuadro de dialogo diciendo:
"El programa no puede iniciarse porque falta VCRUNTIME140.dll en el equipo. Intente reinstalar el programa para corregir este problema."
Pues bien, he reinstalado dos veces y sigue apareciéndome ese mensaje. Como puedo solucionarlo?
Gracias por el tutorial, es bueno y claro de entender