Autor Tema: IsoMap - Engine de juegos en jQuery  (Leído 14170 veces)

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #45 en: 08 de Septiembre de 2011, 15:31:26 pm »
Me recuerdas a mi hace un par de años con papel y lapiz haciendo cálculos isométricos jajaja :)

Lo que comentas tiene lógica según veo. Pero hay un problema: el personaje (segun intuyo) tiene z-index 0 (o el más bajo de las tiles). El problema viene cuando el personaje alomejor esta en la casilla con z-index 3, y ocupa 2 casillas de alto. En este caso las piernas se van a ver bien, pero la cabeza va a ser ocultada por el objeto que supuestamente está detrás, y no delante. ¿Entiendes lo que quiero decirte?

Con el método de las capas que te comenté solucionas eso :) Porque las bases están en una capa por debajo de las cosas flotantes.

Saludos!
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Comunidad PHPeros

Re:IsoMap - Engine de juegos en jQuery
« Respuesta #45 en: 08 de Septiembre de 2011, 15:31:26 pm »

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #46 en: 08 de Septiembre de 2011, 20:19:51 pm »
Me recuerdas a mi hace un par de años con papel y lapiz haciendo cálculos isométricos jajaja :)

Lo que comentas tiene lógica según veo. Pero hay un problema: el personaje (segun intuyo) tiene z-index 0 (o el más bajo de las tiles). El problema viene cuando el personaje alomejor esta en la casilla con z-index 3, y ocupa 2 casillas de alto. En este caso las piernas se van a ver bien, pero la cabeza va a ser ocultada por el objeto que supuestamente está detrás, y no delante. ¿Entiendes lo que quiero decirte?

Con el método de las capas que te comenté solucionas eso :) Porque las bases están en una capa por debajo de las cosas flotantes.

Saludos!

Jaja, gracias.
Referente a lo del z-index del personaje, aun no he jugado con eso. Tan solo en los objetos.

y descuida que por cada problema hay un millón de soluciones, el problema es buscar dichas soluciones xD
Lo que si me interesa solucionar ahora es pasar las baldosas de divs a maps isométricos, a ver explico:

Los divs son cuadrados de por si, hagas lo que hagas siempre el "link" saldrá cuadrado. si sale cuadrado interfiere a la baldosa de atrás por lo tanto no me favorece en mucho usar divs ya que la movilidad seria algo no pésima si no un poco molesta.

Estuve investigando ya de eso y se pueden usar maps según coordenadas, pero tengo que cambiar el calculo de baldosas, ya por suerte, tengo un amigo que anda con la misma tranca que yo. Javipilo xD

Saludos.
Twitter: @JoakoM010



Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #47 en: 09 de Septiembre de 2011, 09:32:09 am »
3 de la mañana y al fin acabo de solucionar uno de los tantos dolores de cabeza que me han traído isomap.
¿Cual?
Acabo de solucionar el problema del div "cuadrado" en un documento aparte, mañana lo monto en el editor.

¿Que me queda?
Es saber por que ya no puedo colocar objetos en la pos 0,0 cuando no he editado absolutamente nada referente a eso.

¿Que mas esta disponible ahora?
El recoger objetos.

¿Que me gustaría hacer?
Poder girar objetos.

En fin, como ya sabrán, me voy a dormir.
Saludos.
Twitter: @JoakoM010



Desconectado javipilo

  • PHPero Experto
  • *****
  • Mensajes: 975
  • Karma: 31
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #48 en: 09 de Septiembre de 2011, 12:03:59 pm »
3 de la mañana y al fin acabo de solucionar uno de los tantos dolores de cabeza que me han traído isomap.
¿Cual?
Acabo de solucionar el problema del div "cuadrado" en un documento aparte, mañana lo monto en el editor.

¿Que me queda?
Es saber por que ya no puedo colocar objetos en la pos 0,0 cuando no he editado absolutamente nada referente a eso.

¿Que mas esta disponible ahora?
El recoger objetos.

¿Que me gustaría hacer?
Poder girar objetos.

En fin, como ya sabrán, me voy a dormir.
Saludos.

¿Hiciste lo que yo te dije? si no es así postealo y lo veo...

Saludos

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #49 en: 09 de Septiembre de 2011, 19:55:41 pm »
¿Hiciste lo que yo te dije? si no es así postealo y lo veo...

Saludos

Si hubiera hecho lo que me habías dicho me hubiera sacado como 6 lineas solo en eso xddd

Solución mas lógica:
<map name="baldosa">
  <area shape="poly" coords="0,16,33,0,66,16,33,33" onClick="alert('prueba');"/>
</map>

Listo :S
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #50 en: 10 de Septiembre de 2011, 00:02:59 am »
Si hubiera hecho lo que me habías dicho me hubiera sacado como 6 lineas solo en eso xddd

Solución mas lógica:
<map name="baldosa">
  <area shape="poly" coords="0,16,33,0,66,16,33,33" onClick="alert('prueba');"/>
</map>

Listo :S

En vez de crear un mapa para cada baldosa, se puede crear un único mapa y usar la propiedad usemap, asaí ahorrarias código.

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #51 en: 10 de Septiembre de 2011, 00:16:42 am »
En vez de crear un mapa para cada baldosa, se puede crear un único mapa y usar la propiedad usemap, asaí ahorrarias código.

Exactamente eso es lo que pensaba hacer pero al ponerme ver las cosas como son...
¿Que pasaría con los eventos?, si uso por ejemplo:
onClick="marcar(id,x,y);"
Los parámetros son distintos por cada  baldosa y entonces no sabría hacerlo.

Otra cosa que tengo en contra es que tendrían que ser 5 áreas. Verán, ya resolví uno de los dos problemas "cuadrados", como sabrán, la imagen también es cuadrada aunque tenga el fondo transparente (Javipilo weon, ya vi a que te referías), por lo tanto, esas esquinas me ocupan un espacio de las baldosas de los lados.

Por lo tanto cada baldosa de por si, tendrá que tener las 4 baldosas de sus lados en las esquinas de su imagen.
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #52 en: 10 de Septiembre de 2011, 02:28:51 am »
Exactamente eso es lo que pensaba hacer pero al ponerme ver las cosas como son...
¿Que pasaría con los eventos?, si uso por ejemplo:
onClick="marcar(id,x,y);"
Los parámetros son distintos por cada  baldosa y entonces no sabría hacerlo.

Otra cosa que tengo en contra es que tendrían que ser 5 áreas. Verán, ya resolví uno de los dos problemas "cuadrados", como sabrán, la imagen también es cuadrada aunque tenga el fondo transparente (Javipilo weon, ya vi a que te referías), por lo tanto, esas esquinas me ocupan un espacio de las baldosas de los lados.

Por lo tanto cada baldosa de por si, tendrá que tener las 4 baldosas de sus lados en las esquinas de su imagen.
Con usemap se recorta y no ocupa espacio en las otras baldosas por lo que sé. ¿Y que problema hay con los eventos? El x y el y se puede calcular mediante un bucle a la hora de mostrarlo.

Desconectado javipilo

  • PHPero Experto
  • *****
  • Mensajes: 975
  • Karma: 31
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #53 en: 10 de Septiembre de 2011, 12:42:23 pm »
Pero westwest no llevas razón, te explico:
Si usas un único mapa como sabes cual es la baldosa clickeada...

Yo SoyJoaquin hecho ahora otro método, es un único mapa gigante que ocupa todo el mapa. Al dar click, capturo la posición del ratón y con un for saco la posición donde se hizo click, por ejemplo 32,32 = 1,1      -      64,32 = 2,1

Saludos

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #54 en: 10 de Septiembre de 2011, 14:57:38 pm »
Pero westwest no llevas razón, te explico:
Si usas un único mapa como sabes cual es la baldosa clickeada...

Yo SoyJoaquin hecho ahora otro método, es un único mapa gigante que ocupa todo el mapa. Al dar click, capturo la posición del ratón y con un for saco la posición donde se hizo click, por ejemplo 32,32 = 1,1      -      64,32 = 2,1

Saludos
Usando una ID, usando la posición del elemento, añadiendo la posicion x,y cuando se muestra el mapa... Anda que no hay mil y una maneras.
tomando el mapa que usa IsoMap:
Código: [Seleccionar]
var mapa = [[1,1,1,1],[1,1,1,1]];
var suelo = '';
for(x=0;<mapa.length;x++) {
for(y=0;y<mapa[x].length;y++) {
suelo += '<img usemap... data-x="'+x+'" data-y="'+y+'" />';
}
}
$('img.baldosa').click(function() {
alert('Estas son mis coordenadas: x-> '+$(this).data('x')+', y-> '+$(this).data('y'));
});
No me parece algo tan dificil.

Desconectado RamFu

  • Moderadores Flash
  • PHPero Experto
  • ****
  • Mensajes: 778
  • Karma: 72
  • Sexo: Masculino
  • Programador y desarollador Actionscript y PHP
    • Ver Perfil
    • Google
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #55 en: 12 de Septiembre de 2011, 23:06:30 pm »
Si tuviera que elegir un "IsoMap" en JS, me quedo con éste: http://mmoccforum.com/Thread-JS-jsWalkAround

Es muy completo, para los que quieran comenzar en MMO's, les puede ser muy útil!

Desconectado -Pituko-

  • PHPero Experto
  • *****
  • Mensajes: 954
  • Karma: 20
  • Sexo: Masculino
  • ¡Hala Madrid!
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #56 en: 13 de Septiembre de 2011, 01:00:29 am »
Si tuviera que elegir un "IsoMap" en JS, me quedo con éste: http://mmoccforum.com/Thread-JS-jsWalkAround

Es muy completo, para los que quieran comenzar en MMO's, les puede ser muy útil!
Muchas gracias RamFu, me servirá un poquito.
PD: ¿Porque no te pasas mas seguido por aquí?

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #57 en: 13 de Septiembre de 2011, 07:34:58 am »
Chicos, se me jodió la pc desde que la deje con mi primo 2 horas, tiene un problema grave con la resolución (Muy, muy elevada para lo que soporta el monitor, se me ha llegado a poner en blanco minutos después de encenderla, se tiene que apagar y volver a encender el monitor para que vuelva a reaccionar) y un problema fatal con los procesos de windows y mas aun en el menú inicio. Le pase el antivirus y no detecta nada pero si llego a ver que faltan aplicaciones y quisiera saber como hacer para saber las aplicaciones o archivos borrados x día.

No se preocupen con los archivos por que ya le hice respaldo en 1 pendrive y en mis 2 teléfonos, cosa que el proyecto lo seguiré en la lapto y en el smartphone después del jueves que me voy de ruta por el país.

Lo que ya he adelantado en la lapto es:
-Desniveles (Javipilo, ya encontré como hacerlo)
-Problemas con vacíos resueltos (Ahora hay solo una opción de vacío, Te dije que tarde o temprano lo resolvería west xD)
-Grosor en editor
-+20 Texturas
-+10 Objetos

Y en lo que me encuentro trabajando ahora es:
-Nivel del agua (Novedad)
-Montura de objetos sobre otros.
-Girar objeto

---
@westwest:
De esa forma la hice pero lo que digo es que la imagen también tiene esquinas, esquinas que tapan las baldosas de atrás.

@RamFu:
IsoMap es un engine de juegos Online, puedes crear tu propio juego sin necesidad de utilizar programación en absolutamente nada y solamente incluyendo 3 lineas en un documento html (2 de ellas librerías), Todo en un completo editor que se llama "IsoMap".

@javipilo:
La idea de los clicks no la veo muy buena por la sencilla razón de que si tengo un objeto alto, este cambiaría las dimensiones, por lo tanto también cambiaría la coordenada de click.

Saludos!


Edito:
Imágenes:






Edito 2: Primera beta de desniveles (Sin soporte en objetos)


Tratare de hacer mas adelante el relleno del desnivel para que no se vea el "vacío" y el soporte de objetos.
PD: Aparte del desnivel superior como pudieron ver en la imagen anterior, también se podrá "excavar" en el mapa.
« Última modificación: 13 de Septiembre de 2011, 09:43:01 am por SoyJoaquin. »
Twitter: @JoakoM010



Desconectado RamFu

  • Moderadores Flash
  • PHPero Experto
  • ****
  • Mensajes: 778
  • Karma: 72
  • Sexo: Masculino
  • Programador y desarollador Actionscript y PHP
    • Ver Perfil
    • Google
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #58 en: 14 de Septiembre de 2011, 01:08:41 am »
@SoyJoaquín
Es un aporte que quizás ayude al desarollo de vuestro engine, quizás comprobando el code podéis solucionar algo, y también sirve de aporte para los que quieran empezar con una base.

@Javipilo
No se porqué no me paso más a menudo, sinceramente, entro cuando me acuerdo jaja pero sigo en desarollo con cositas Open-Source :)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #59 en: 14 de Septiembre de 2011, 01:43:33 am »
Por problemas de espacio para paneles en el diseño se ha decidido dividir los nuevos paneles en "ventanas", ¿Como así?

Por ejemplo: Los nuevos paneles serán llamados a través de comandos o quizás en un futuro, por un menú desplegable. Al accionar "x" comando con el teclado, este mostrara el panel del comando llamado (No en nueva ventana, si no que mostrara un div absoluto con opción de arrastrarlo por el diseño). De esta manera estará mas organizado el editor de mapas.

Referente a lo nuevo:
  • Nueva Opción "Rellenar Todo" (Solo texturas).
  • Nuevo panel "Nivelar" (Mueve todas las baldosas a un nivel seleccionado.
  • Nueva altura máxima de niveles: 10 niveles que miden 10px cada uno dando un total de altura máxima de 100px solamente en el terreno.

Futuros errores a reparar:
  • Sigue pendiente lo de la baldosa 0,0 con las texturas.
  • Cambiar posición del objeto al subir/ bajar su baldosa contenedora.
  • Grosor de nivel (Para evitar que se vea el vacío)

Saludos.

Edito:
  • Finalizado correctamente el grosor en alturas (Desniveles)

Imágenes:




Saludos.
« Última modificación: 14 de Septiembre de 2011, 04:53:39 am por SoyJoaquin. »
Twitter: @JoakoM010