Registrarse

PokemonJS [Pokemon en JavaScript]

Estado
Cerrado para nuevas respuestas.

CreandoPKMN

RoomHakeando Habitaciones
Hola, vengo a traeros una cosa en la que he estado trabajando durante esta ultima semana. (algo que realmente, una persona con conocimientos hace en 40 minutos, pero yo no sabía nada al empezar esto xD).

Y bueno, lo que he hecho es una réplica de pokemon rojo fuego en html5 para que se pueda ejecutar en los navegadores, y también en dispositivos móviles en un futuro.

El sistema de batalla será completamente diferente, un poco a lo mundo misterioso, al matar pokémon dropearan items, ya sea oro, armas, armaduras etc, que te servirán para chetarte, aunque bueno todavía queda para eso haha.


Actualización 22/11/2016

Hola! actualizo el tema para enseñaros lo que he progresado durante estos últimos días, no es mucho pero estoy contento con el resultado, espero que os guste a vosotros también.

Bueno lo primero de todo, he actualizado la página en la que se encuentra el juego, para que sea más bonita ya que el fondo negro de antes quedaba muy mal, ahora me ha quedado tal que así:

Creo que se ve demasiado pequeño, pero de todas formas podeis entrar y comprobarlo por vosotros mismos dando click aquí: Juego HTML

Lo segundo: He añadido una intro o portada o como se diga antes de empezar el juego, y que al pulsar enter, ya te deje jugar. Sin embargo esto no va a quedar así ya que tengo planeado hacer un sistema en el que cada usuario pueda guardar su partida, que esta se almacene en una base de datos y que a la próxima vez que entre pueda continuar con su progreso.

Es una portada muy primitiva que hice en 5 minutos, si alguien quiere hacerme una mejor, adelante, lo pondré en los créditos. No hay límite de colores, puede ser incluso una portada animada si la separas por frames, eso si, tiene que tener un tamaño de 512x400, para que quede bonito.



Lo tercero es que he cambiado los tiles del juego por unos más bonitos, no voy a dar créditos todavía ya que el juego no es muy "jugable" aun.

Antes:


Despues:


Y ya por último he creado una capa que se superponga al sprite del personaje, esto lo que hace es que pueda pasar por debajo de árboles y casas y cualquier otro tile y que de una sensación de profundidad.




Y eso es todo, sé que no es mucho pero me ha costado lo suyo, lo próximo sería hacer el grid movement o movimiento por bloque como dijo @InmortalKaktus, pero es muy jodido y por mucho que lo intente no me sale, creo que le pagaré a alguien para que me lo haga y me explique detalladamente como lo ha hecho, a ver si así de una vez lo entiendo xD.

Me imagino que dentro de una semana actualizaré de nuevo, con cosas más guapas y eso, gracias por leer y recordad que podéis probar el juego desde Juego HTML
 
Última edición:

~4n1ma~

Baneado
Wow,se ve de pelos ,lo vi un momento :v y vi que no tienes demasiado hecho y bueno,aunque esta de pelos ponerlo en el ordenador,me gusta como te vas encaminando en esto,y si es cierto que esta en una version demasiado primitiva,ps si logras terminarlo
va a estar de lujo.

Saludos
 

Sarkoo

Profesional de WaH
Esta de maravillas We :D
Felicitaciones por crearlo... de verdad es muy molon ver
cosas asi de diferentes!!!
Te deseo suerte y animos para que lo logres terminar :p
Un salu2
 

CreandoPKMN

RoomHakeando Habitaciones
Pokemon Fire Red.io xd coño que ya falta que lo hagas online.

a que tienes planeado implementar eso?
Claro que lo he pensado pero no tengo a nadie que me ayude ni nadie que sepa del tema, entonces yo creo que podré lograrlo pero tardaré bastante, eso si de momento me centraré en hacerlo jugable y ya veremos después que hago xD
 

Kaktus

Miembro insignia
Miembro insignia
Lo más necesario que veo ahora mismo es que pongas movimientos por bloques, es decir, que no se pueda quedar parado en cada pixel, si no que al igual que en Pokémon, vaya de bloque en bloque. Después, yo de ti me animaría a añadir capas con propiedades. Si está en la primera, el usuario pasa por debajo, si está en la segunda, lo mismo, y en la tercera, el prota lo atraviesa, básicamente, como RPG Maker, con eso tendrás ya prácticamente la movilidad acabada sin contar los permisos de movimiento. Otro detallito más de menor importancia es que si caminas hacia la izquierda, se quede mirando hacia la izquierda cuando lo sueltes, y no se quede con su posición inicial.

¡¡Suerte, que se nota que tiene futuro!!
 

CreandoPKMN

RoomHakeando Habitaciones
Lo más necesario que veo ahora mismo es que pongas movimientos por bloques, es decir, que no se pueda quedar parado en cada pixel, si no que al igual que en Pokémon, vaya de bloque en bloque. Después, yo de ti me animaría a añadir capas con propiedades. Si está en la primera, el usuario pasa por debajo, si está en la segunda, lo mismo, y en la tercera, el prota lo atraviesa, básicamente, como RPG Maker, con eso tendrás ya prácticamente la movilidad acabada sin contar los permisos de movimiento. Otro detallito más de menor importancia es que si caminas hacia la izquierda, se quede mirando hacia la izquierda cuando lo sueltes, y no se quede con su posición inicial.

¡¡Suerte, que se nota que tiene futuro!!
Es lo que estoy intentando hacer ahora mismo, se llama grid movement, pero es un poco complicado y no lo entiendo del todo, pero es algo que obviamente voy a hacer, si no la movilidad del personaje va a ser una mierda. Y lo de las capas ya está hecho, la hierba y el césped pertenecen a la capa 1, los arboles a la capa 2, y los edificios a la capa 3. De momento solo tienen colisiones, y estoy mirando lo de la superposición u overlap.

Para que veas que no te miento xD
Código:
    layer1 = map.createLayer('Capa1');
    layer2 = map.createLayer('Capa2');
    layer3 = map.createLayer('Capa3');
    layer1.resizeWorld();
Creo que para la próxima semana podré tener todo lo que tu me dices, y gracias por darme suerte, la necesito xD
 

Xabier2012

Usuario mítico
Si estás trabajando en el grid movement perfecto. Yo sé poco de javascript y no tengo tiempo sino me ofrecería para ayudarte. De todas formas te ánimo a seguir perfeccionando el sistema y a ver que nos traes en un futuro.
 

Inferno

Miembro insignia
Miembro insignia
Me está gustando como va yendo este proyecto, estaré muy atento a próximas actualizaciones, sigue así, tiene muy buena pinta :D
 

Laquin

Usuario mítico
Antes los movimientos permitidos del CP estaban mal, pero ahora está peor xD
Además, es bastante difícil salir del pueblo ese, las colisiones no son para nada buenas.

También he visto que no te puedes quedar mirando para arriba, para la derecha o para la izquierda.

En fin, tiene bastantes cosas que mejorar, pero bueno, suerte con tu proyecto.

¡Saludos!
 

CreandoPKMN

RoomHakeando Habitaciones
Sé que los movimientos del centro pokémon están mal, y lo puedo arreglar en 1 minuto, pero no lo he hecho porque voy a cambiar el tile del centro pokemon por uno nuevo, que posiblemente sea de un tamaño diferente, así que lo he dejado así.

Antes los movimientos permitidos del CP estaban mal, pero ahora está peor xD
Además, es bastante difícil salir del pueblo ese, las colisiones no son para nada buenas.

También he visto que no te puedes quedar mirando para arriba, para la derecha o para la izquierda.

En fin, tiene bastantes cosas que mejorar, pero bueno, suerte con tu proyecto.

¡Saludos!
Sobre lo del centro pokémon te digo lo mismo que a C!ro, voy a cambiarlo por uno nuevo.

Y las colisiones están perfectas, lo que está mal es el personaje, al que le falta añadir los movimientos por tile, que es lo más dificil de hacer ahora mismo.

Y lo de quedarte mirando solo hacia una posición lo he hecho a propósito porque me hace gracia xD, así estoy de buen humor cuando programo, pero vamos que eso en 2 minutitos está solucionado también.

En fin ya vereís dentro de unas semanas cómo irá quedando esto, que a ver que yo se que tiene algunos fallos, pero soy consciente de ello y lo voy solucionando poco a poco.

Y eso que gracias a todos por el apoyo, mi meta es hacer de esto un juego jugable, y lo voy a hacer.
 

~Zane~

Let's Roll Arceus
Yo lo probe (lo vi por tu canal en youtube) se que le falta bastante porque ni siquiera te dan el inicial xd pero tambien se que tiene futuro, animo con ese juego! lo quiero jugar cuando este completo

Saludos :cool:
 

Mariofan

Usuario mítico
Se ve interesantísima la cuestión. Puedo preguntarte como estás tratando las colisiones?, ¿Acaso estas delimitando coordenadas para impedir que el jugador se mueva al llegar a ciertas posiciones especificas?

De hecho, ¿Como estas integrando el mapa en el juego?, ya que lo ideal sería tener un archivo que funge como tileset mientras que en el código se tiene un arreglo que asigna un valor especifico a cada bloque 16x16 de dicho tileset (el tamaño es a gusto del creador, digo 16x16 por ser el estándar de pokémon en GBA), de tal forma que por ejemplo, el valor "1" representa un tile, el valor "2" representa otro (Para esto yo designaba las posiciones x/y en pixeles de dicho tile en el tileset, pero tal vez existan otras formas más actuales, lo desconozco).

Una vez se tiene el tileset y dicho arreglo, lo que se hace es crear una función que lea una cadena de texto y que por cada caracter imprima un tile en especifico en la pantalla, de tal manera que lo único que tienes que hacer para mostrar el mapa sería pasarle una cadena de texto (Posiblemente sacada de un archivo .txt o similar) en la cual cada carácter vendría a ser el valor de un tile especificado en el arreglo anteriormente nombrado. Ojo, los valores del arreglo pueden ser de más de 1 carácter, pero eso debe ser tomado en cuenta al crear la función. Por último, la función almacena cada valor en una matriz bidimensional con el cual se tiene la clave para el movimiento por bloque y las colisiones.

Hecho así, solo debes colocar que el prota inicia en una posición x/y especifica (Alineada con los bloques, ojo) a la par que se inicializa un variable conteniendo la posición X/Y del prota en la matriz nombrada, equivalente al bloque x/y. Lo demás es hacer que al pulsar los botones, el prota se mueva tanta distancia en la dirección pulsada a la par que coincida con otro bloque, al mismo tiempo, que guarde la nueva posición del prota en la matriz. Conseguido eso, tus nuevas posiciones x/y pasarían a ser las posiciones de la matriz y no las de la pantalla, por lo que podrás crear toda clase de condiciones en función de los valores que tenga cada posición de la matriz (Por ejemplo, tomando el caso de GBA, si el prota tiene un bloque 1 al costado, no le permitirá moverse a dicho costado, así se crean las colisiones)

No se si todo esto sea entendible, util o inútil ya que desconozco tu nivel de conocimiento en programación en general a la par que desconozco tambien las librerías Javascript que utilizas o si directamente no usas ninguna, pero aún así, he querido comentarlo ya que la cuestión me parece bastante interesante. :)
 

CreandoPKMN

RoomHakeando Habitaciones
Se ve interesantísima la cuestión. Puedo preguntarte como estás tratando las colisiones?, ¿Acaso estas delimitando coordenadas para impedir que el jugador se mueva al llegar a ciertas posiciones especificas?

De hecho, ¿Como estas integrando el mapa en el juego?, ya que lo ideal sería tener un archivo que funge como tileset mientras que en el código se tiene un arreglo que asigna un valor especifico a cada bloque 16x16 de dicho tileset (el tamaño es a gusto del creador, digo 16x16 por ser el estándar de pokémon en GBA), de tal forma que por ejemplo, el valor "1" representa un tile, el valor "2" representa otro (Para esto yo designaba las posiciones x/y en pixeles de dicho tile en el tileset, pero tal vez existan otras formas más actuales, lo desconozco).

Una vez se tiene el tileset y dicho arreglo, lo que se hace es crear una función que lea una cadena de texto y que por cada caracter imprima un tile en especifico en la pantalla, de tal manera que lo único que tienes que hacer para mostrar el mapa sería pasarle una cadena de texto (Posiblemente sacada de un archivo .txt o similar) en la cual cada carácter vendría a ser el valor de un tile especificado en el arreglo anteriormente nombrado. Ojo, los valores del arreglo pueden ser de más de 1 carácter, pero eso debe ser tomado en cuenta al crear la función. Por último, la función almacena cada valor en una matriz bidimensional con el cual se tiene la clave para el movimiento por bloque y las colisiones.

Hecho así, solo debes colocar que el prota inicia en una posición x/y especifica (Alineada con los bloques, ojo) a la par que se inicializa un variable conteniendo la posición X/Y del prota en la matriz nombrada, equivalente al bloque x/y. Lo demás es hacer que al pulsar los botones, el prota se mueva tanta distancia en la dirección pulsada a la par que coincida con otro bloque, al mismo tiempo, que guarde la nueva posición del prota en la matriz. Conseguido eso, tus nuevas posiciones x/y pasarían a ser las posiciones de la matriz y no las de la pantalla, por lo que podrás crear toda clase de condiciones en función de los valores que tenga cada posición de la matriz (Por ejemplo, tomando el caso de GBA, si el prota tiene un bloque 1 al costado, no le permitirá moverse a dicho costado, así se crean las colisiones)
Hola, para tratar las colisiones o mas bien para crear el mapa entero, utilizo un programa llamado Tiled, el cual te permite insertar tu propio tileset, y luego trabajar con el, hacer mapeados y etc, a diferencia del advance map este funciona por capas, como rpg maker, pero rpg maker solo tiene 3, este tiene infinitas capas entonces está muy bien para mapear. Y luego permite exportar el mapa en formato .csv o .json, pues bien, yo antes de empezar a crear el juego, busqué una librería que soporte estos formatos y que sea fácil implementarlos dentro del juego, entonces encontré Phaser.io, que la verdad me facilita mucho el trabajo.
Volviendo al primer punto, para tratar las colisiones primero hay que implementar el mapa en el canvas, y después definir las capas que anteriormente se han creado en el tiled, y también definir el tileset que estás usando, ya que puedes utilizar varios tilesets, como en rpg maker. Después de hacer eso es tan facil como poner esto:

Código:
    //Pokemon Center
    map.setCollisionBetween(27, 31, true, layer3);
    map.setCollisionBetween(48, 52, true, layer3);
    map.setCollisionBetween(48, 52, true, layer3);
    map.setCollisionBetween(69, 73, true, layer3);
    map.setCollisionBetween(90, 91, true, layer3);
    map.setCollisionBetween(93, 94, true, layer3);
"map" es la variable que almacena el mapa, "setCollisionBetween" es un comando ya definido que viene con la librería, que establece una colisión entre los números que hay entre el paréntesis, que son los ID de los tiles en el tileset, true es por si quieres que el jugador se pare al chocar con el tile, porque puedes hacer que colisione, pero que pase algo al colisionar, no necesariamente que no se pueda pasar, y "layer3" es la capa en la que está creado el centro pokémon. Y así con todos los tiles, como si estuvieras definiendo los comportamientos de los bytes en advance map.

No se si todo esto sea entendible, util o inútil ya que desconozco tu nivel de conocimiento en programación en general a la par que desconozco tambien las librerías Javascript que utilizas o si directamente no usas ninguna, pero aún así, he querido comentarlo ya que la cuestión me parece bastante interesante. :)
Si, lo he entendido todo :D, no llevo mucho programando pero le dedico muchas horas al día.Y si, es así como tu has explicado que se debe de hacer, pero eso es cuando no utilizas ninguna librería, yo he decidido usar una básicamente por esto, porque no quería hacer todo lo que tu antes has mencionado, así que la librería lo hace por mi xD
 

michael

Baneado
creo que es un bug pero lo dire igual en la habitacion inicial
al intentar bajar por las escaleras no me deja
 

Katherine

Omnipresente
Miembro de honor
Dime que esto sigue vivo @CreandoPKMN

Me encanta que intentes recrear un juego de pokémon en js, aunque esté bastante verde y le queden las cosas generales como el combate y el menú y yatusabe sé que puede salir algo bastante interesante de ésto.

Por cierto, no sé si ésto se deberá a una actualización que has realizado recientemente, pero donde empiezas es muy difícil salir de la habitación porque te impide pasar (es posible salir, pero solo te deja pasar en un lugar muy especifico). Lo que más me preocupa ahora son las colisiones que no funcionan muy bien. Ya te lo han planteado y yo te lo recuerdo: ¿has pensado en probar de hacer el movimiento con cuadrícula como los juegos originales? Te evitaría muchos problemas jugables con los tiles y se asemejaría más a un juego de pokémon.

Seguiré ésto de cerca, au revoir~.
 

MyriamBregman

Cuando las cosas van b
¡Muy interesante!, yo también hago JS y la verdad no se me había ocurrido crear algo así, ni algún juego en JS!, felicidades por el trabajo y espero ver las actualizaciones, seguiré este proyecto de cerca! :)
 

CreandoPKMN

RoomHakeando Habitaciones
Aarón ツ;377594 dijo:
Dime que esto sigue vivo @CreandoPKMN

Me encanta que intentes recrear un juego de pokémon en js, aunque esté bastante verde y le queden las cosas generales como el combate y el menú y yatusabe sé que puede salir algo bastante interesante de ésto.

Por cierto, no sé si ésto se deberá a una actualización que has realizado recientemente, pero donde empiezas es muy difícil salir de la habitación porque te impide pasar (es posible salir, pero solo te deja pasar en un lugar muy especifico). Lo que más me preocupa ahora son las colisiones que no funcionan muy bien. Ya te lo han planteado y yo te lo recuerdo: ¿has pensado en probar de hacer el movimiento con cuadrícula como los juegos originales? Te evitaría muchos problemas jugables con los tiles y se asemejaría más a un juego de pokémon.

Seguiré ésto de cerca, au revoir~.
Hola, la verdad es que hace mucho que no lo toco, y si quisiera retomarlo tendría que programarlo todo desde cero, porque miro el código y eso parecen espaguetis de lo desordenado que está xD.

Soy consciente de que es muy difícil salir de la habitación, y que los movimientos del jugador están mal, (las colisiones no, esas están bien), si el jugador caminara en una cuadrícula como tu dices, que es algo que desde el principio he querido hacer pero no sabía cómo, todo funcionaría bien.

Estoy seguro al 100% de que volveré a programar algo parecido a esto, ya que me gusta la programación, y me gusta pokémon, osea estoy segurísimo xD, pero este proyecto lo voy a dejar así como está. Ya te avisaré si me pongo con algo más chulo, y a ver si me enseñan un poco de programación en clase, que no hacemos mas que dar cosas aburridas desfasadas que se usaban hace 10 años tt
 
Estado
Cerrado para nuevas respuestas.
Arriba