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

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #60 en: 14 de Septiembre de 2011, 08:24:07 am »
Me encuentro entre la espalda y la pared.
Después de terminar de hacer el "Elevar Todo" me paso una duda algo intrigante que de por mala suerte, se hizo realidad.

Repasemos. En caso de que el mapa de 20x20 (El máximo, 400 baldosas en total) lo elevemos al nivel 10 (El máximo nivel de altura) por medio del panel elevar todo, Este realizara lo siguiente:

Creara un bucle de todas las baldosas, las elevamos y creamos un segundo bucle por dentro de este que crearía el "relleno" del vacío (El grosor), Si sacamos cuenta en eso, serian 4000 procesos.

Bajo la versión 1.6 de jQuery lo probé en el Chrome y este tira error de tiempo de espera (El error normal de chrome con la opción de "esperar" y "cerrar la pagina")
¿Alguna manera mas lógica para hacer esta acción?

Saludos.
Twitter: @JoakoM010



Comunidad PHPeros

Re:IsoMap - Engine de juegos en jQuery
« Respuesta #60 en: 14 de Septiembre de 2011, 08:24:07 am »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #61 en: 14 de Septiembre de 2011, 10:25:12 am »
Podrías reducir los bucles recorriendo solo la última baldosa, que es la que tiene la pared. Algo tipo:
for(i=0;i<mapa.length;i++) {
if(i == (mapa.length-1)) {
for(j=0;j<mapa.length;j++) {
...
}
} else {
var baldosa = mapa[mapa.length-1];
}
}

Es lo primero que se me ha ocurrido

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #62 en: 15 de Septiembre de 2011, 16:54:16 pm »
Podrías reducir los bucles recorriendo solo la última baldosa, que es la que tiene la pared. Algo tipo:
for(i=0;i<mapa.length;i++) {
if(i == (mapa.length-1)) {
for(j=0;j<mapa.length;j++) {
...
}
} else {
var baldosa = mapa[mapa.length-1];
}
}

Es lo primero que se me ha ocurrido

Lo había hecho de esta manera pero digamos que el Chrome le tiene manía xD

Código: [Seleccionar]
function subirTodo(){
var n = $('select#ssnivel').val();

 for(i=1;i<=baltotal;i++) {   
  calSubir = n*10;
  $('#'+i).css('top', '-='+calSubir);
   for(h=altbaldosa[i]+1;h<=n;h++){

    xsT = $('#'+i).attr('x');
    ysT = $('#'+i).attr('y');

    $("#piso").append('<div id="g-'+i+'-'+h+'"><img src="'+grosor+'"></div>');
    resultadoX = (xsT * (balW / 2)) - (ysT * (balW / 2)) + emX;
    resultadoY = (xsT * (balH / 2)) + (ysT * (balH / 2)) + emY - (h*10);

    $('#g-'+i+'-'+h).css({
     position: "absolute",
     zIndex: ($('#'+i).css('zIndex')-1),
     left: resultadoX,
     top: resultadoY
    });

   }
   altbaldosa[i] = n;
 }
}

Explico:
n > valor del nivel (1,2,3,...,10)
baltotal > Numero total de baldosas (Ultimo ID)
calSubir > Altura total a subir (10px cada nivel)
altbaldosa[index] > nivel de altura

Por ahora fue la manera mas optimizada que le he encontrado :S
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 #63 en: 17 de Septiembre de 2011, 21:08:30 pm »
Se ha actualizado el contenido del sitio web www.IsoMap.es colocando nuevas secciones e imágenes.

Se ha agregado:
  • Panel de Herramientas
  • Panel Elevar Todo (Beta)
  • Modalidad del editor (Avanzada [Activa efectos y opciones del editor] , Estable [Recomendado en caso de lag])
  • Habilitar/ Deshabilitar Desniveles
  • Activar/ Desactivar cuadricula en baldosas (Para vista Previa)
  • Nuevo modo de elevado (Das Click en la baldosa y aparece un menú desplegable para seleccionar el nivel de elevado comprendido entre 1 y 10)
  • Arreglado el error de objetos en elevados
  • Panel de Configuración del Mapa (Nombre, descripción, categoría)
  • Nueva coordenada Z en el panel de baldosas
  • Menú desplegable para paneles (Adiós a la consola de comandos)

Como ando desde la lapto, no he podido hacer otro vídeo para que lo puedan observar, pero desde el primer vídeo al que pronto saldrá la diferencia es muy notable.
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 #64 en: 25 de Septiembre de 2011, 21:19:18 pm »
Nuevo método de mapas en el build de IsoMap:
Código: [Seleccionar]
mapa =
[[[11,2,1],[11,2,1],[11,2,1],[11,2,1]],
 [[11,2,1],[11,2,0],[11,2,0],[11,2,0]],
 [[11,1,1],[11,1,0],[11,1,0],[11,1,0]],
 [[11,0,1],[11,0,0],[11,0,0],[11,0,0]],
 [[11,0,1],[0,0,0],[0,0,0],[11,0,0]],
 [[11,0,1],[0,0,0],[0,0,0],[11,0,0]],
 [[11,0,1],[0,0,0],[0,0,0],[11,0,0]],
 [[11,0,1],[0,0,0],[0,0,0],[11,0,0]],
 [[11,0,1],[0,0,0],[0,0,0],[11,0,0]],
 [[11,0,1],[11,0,0],[11,0,0],[11,0,0]]];

Explico las novedades en:
[11,2,1]
Antes tan solo se encontraba la id de la textura, ahora comprende 2 nuevos datos adicionales que son:
11 = ID de la textura de la baldosa (Si es 0 hay un vacío)
2 = Nivel de altura de la baldosa (Cada nivel es equivalente a 10px)
1 = ID del objeto que se encuentra en la baldosa (Si es 0 no hay objetos)

Saludos.
Twitter: @JoakoM010



Desconectado cibb

  • PHPerit@
  • *
  • Mensajes: 42
  • Karma: 0
  • Sexo: Masculino
  • el limite de la programación es tu imaginación!
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #65 en: 28 de Septiembre de 2011, 00:22:48 am »
Y si hay dos objetos? Como un tapete y una mesa sobre el tapete?
Necesitas ayuda? Yo también :P

No pienso poner el <?php ?> Que ponen muchos para que todos vean que conocen lo básico de php -.-!!

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #66 en: 28 de Septiembre de 2011, 18:08:42 pm »
Y si hay dos objetos? Como un tapete y una mesa sobre el tapete?

¿Quien dijo que existirán dos objetos?
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #67 en: 28 de Septiembre de 2011, 18:55:01 pm »
¿Quien dijo que existirán dos objetos?
Hombre, es una buena posibilidad, ¿no? algo como alfombras y tal...
Podría solucionarse creando un array para los objetos, es decir:
[altura, nivel, [id1, id2]]

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #68 en: 28 de Septiembre de 2011, 21:49:37 pm »
Hombre, es una buena posibilidad, ¿no? algo como alfombras y tal...
Podría solucionarse creando un array para los objetos, es decir:
[altura, nivel, [id1, id2]]

Lo decía por que aun no disponemos del soporte multi-baldosa de muebles y seria algo ilógico colocar un tapete de 1 solo espacio, no se si me entienden.

Ya he diseñado lo que serian los kekos, la interfaz y los diálogos predeterminados de los juegos (Considero que no me quedo nada mal el keko xD)

Cuando tengamos el soporte multi-baldosa para objetos se diseñaran no solo muebles, si no también estructuras como casas, edificios, etc.

Ya tengo mas o menos la idea de como seria pero existe un pequeño problema, la profundidad.

Saludos
Twitter: @JoakoM010



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 #69 en: 28 de Septiembre de 2011, 23:03:19 pm »
Lo decía por que aun no disponemos del soporte multi-baldosa de muebles y seria algo ilógico colocar un tapete de 1 solo espacio, no se si me entienden.

Ya he diseñado lo que serian los kekos, la interfaz y los diálogos predeterminados de los juegos (Considero que no me quedo nada mal el keko xD)

Cuando tengamos el soporte multi-baldosa para objetos se diseñaran no solo muebles, si no también estructuras como casas, edificios, etc.

Ya tengo mas o menos la idea de como seria pero existe un pequeño problema, la profundidad.

Saludos

Te avisé jaja Con el método que usas no podrás implementarlo, o al menos no fácilmente.
Eso de en las coordenadas tener 3 datos (tile, altura y objeto) aparte de limitar tu número de objetos, te limita implementar el tema de la profundidad.
Lo que te dije del método de las diferentes capas es lo que se suele usar en esta clase de proyectos. El tutorial sobre ese método lo leí en una comunidad de desarrollo de videojuegos... y cuyo nombre desgraciadamente no recuerdo, pero dado que es muy famosa, seguro que alguno la conocéis.

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

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #70 en: 29 de Septiembre de 2011, 02:40:49 am »
Te avisé jaja Con el método que usas no podrás implementarlo, o al menos no fácilmente.
Eso de en las coordenadas tener 3 datos (tile, altura y objeto) aparte de limitar tu número de objetos, te limita implementar el tema de la profundidad.
Lo que te dije del método de las diferentes capas es lo que se suele usar en esta clase de proyectos. El tutorial sobre ese método lo leí en una comunidad de desarrollo de videojuegos... y cuyo nombre desgraciadamente no recuerdo, pero dado que es muy famosa, seguro que alguno la conocéis.

Saludos!

xD cada quien tiene su manera de implementarlo...
Lo de las profundidades como tal lo tengo resuelto para objetos de 1 sola baldosa, no de 2, 4, 6, ...
Lo de west me termino convenciendo con respecto a los objetos pero a su vez le tendría que añadir nuevos parámetros en el editor ya sea que el primer objeto acepte o no otros encima de el.

Y con lo que me decías antes carlos, créeme que prefiero continuar así del método que lo tengo ya que de lo contrario utilizaría 2 imágenes para cada objeto, eso sin mencionar que si es multi-baldosa serian mas...

Recuerdame subirte una previa mas adelante.
Después de corregir estos fallos como tal, se tendría que crear una función similar a la creada para el build del cliente para cargar los mapas a partir de un array y otra para guardar cada dato del editor (De la manera que mostré en mensajes anteriores)

Considero que ya lo mas difícil esta hecho, solo es cuestión de ir adaptando y modificar los archivos una vez que se tenga el servidor. Es apenas una primera versión, no pidan mucho xD
Twitter: @JoakoM010



Desconectado cibb

  • PHPerit@
  • *
  • Mensajes: 42
  • Karma: 0
  • Sexo: Masculino
  • el limite de la programación es tu imaginación!
    • Ver Perfil
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #71 en: 29 de Septiembre de 2011, 14:13:56 pm »
¿Quien dijo que existirán dos objetos?

Ok! Solo preguntaba =(

Haha! Aunque sea un primer lanzamiento todos estamos ansiosos por ver los resultados. Sabemos que nos vas a sorprender.

Pd- YoutTube (o google, como le quieran decir) Me esta censurando el video sobre IsoMap http://www.youtube.com/watch?v=2U-ItGmVXpQ por Copyright.... Sin comentarios..
Necesitas ayuda? Yo también :P

No pienso poner el <?php ?> Que ponen muchos para que todos vean que conocen lo básico de php -.-!!

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 #72 en: 29 de Septiembre de 2011, 16:52:55 pm »
xD cada quien tiene su manera de implementarlo...
Lo de las profundidades como tal lo tengo resuelto para objetos de 1 sola baldosa, no de 2, 4, 6, ...
Lo de west me termino convenciendo con respecto a los objetos pero a su vez le tendría que añadir nuevos parámetros en el editor ya sea que el primer objeto acepte o no otros encima de el.

Y con lo que me decías antes carlos, créeme que prefiero continuar así del método que lo tengo ya que de lo contrario utilizaría 2 imágenes para cada objeto, eso sin mencionar que si es multi-baldosa serian mas...

Recuerdame subirte una previa mas adelante.
Después de corregir estos fallos como tal, se tendría que crear una función similar a la creada para el build del cliente para cargar los mapas a partir de un array y otra para guardar cada dato del editor (De la manera que mostré en mensajes anteriores)

Considero que ya lo mas difícil esta hecho, solo es cuestión de ir adaptando y modificar los archivos una vez que se tenga el servidor. Es apenas una primera versión, no pidan mucho xD

No utilizas dos imagenes por cada objeto. La imagen es siempre la misma. Lo que tendrías en este caso sería dos divs, uno con una parte de la imagen y otro con otra parte de la imagen, y diferentes z-index cada div. Pero sigue siendo una misma imagen solo. De hecho, lo mejor es tener una única imagen con todos los tiles, objetos y tal en una única imagen, y utilizar el método de los sprites (ese de colocar un buen background-image para utilizar solo una parte de la imagen) para mostrar uno u otro gráfico.

En fin, que es una idea nada mas. Si prefieres usar tu propio método lo respeto completamente :)

Un saludo
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

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:IsoMap - Engine de juegos en jQuery
« Respuesta #73 en: 29 de Septiembre de 2011, 20:47:32 pm »
No utilizas dos imagenes por cada objeto. La imagen es siempre la misma. Lo que tendrías en este caso sería dos divs, uno con una parte de la imagen y otro con otra parte de la imagen, y diferentes z-index cada div. Pero sigue siendo una misma imagen solo. De hecho, lo mejor es tener una única imagen con todos los tiles, objetos y tal en una única imagen, y utilizar el método de los sprites (ese de colocar un buen background-image para utilizar solo una parte de la imagen) para mostrar uno u otro gráfico.

En fin, que es una idea nada mas. Si prefieres usar tu propio método lo respeto completamente :)

Un saludo

Ahh vale, el método de sprite solo lo utilizaría en el keko ya que las baldosas son muchas, son mas de 100 texturas y cargarlo todo en una imagen, prefiero cargarlo por separado para ir cargando poco a poco, lo mismo pasa con los objetos.

Gracias por todo.
---

Ok! Solo preguntaba =(

Haha! Aunque sea un primer lanzamiento todos estamos ansiosos por ver los resultados. Sabemos que nos vas a sorprender.

Pd- YoutTube (o google, como le quieran decir) Me esta censurando el video sobre IsoMap http://www.youtube.com/watch?v=2U-ItGmVXpQ por Copyright.... Sin comentarios..
Perdona, no quería ser arrogante. es que cuando se tiene trabajo en la cabeza no puedo pensar en tener mas. Prefiero salir de lo que tengo ahora para ir después a versiones mas estables.

Saludos.
Twitter: @JoakoM010



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 #74 en: 29 de Septiembre de 2011, 21:16:47 pm »
Ahh vale, el método de sprite solo lo utilizaría en el keko ya que las baldosas son muchas, son mas de 100 texturas y cargarlo todo en una imagen, prefiero cargarlo por separado para ir cargando poco a poco, lo mismo pasa con los objetos.

Gracias por todo.

Es mejor cargar un archivo grande con todas las baldosa (uno, o varios, por ejemplo uno o dos de baldosas, otros dos de objetos, y otro de personajes) que ir cargando archivos progresivamente. Acuérdate de que cada archivo es una petición al servidor y de que tienes la memoria caché para guardas los archivos sin cambios. Pero bueno, lo dejo a tu elección, como todo jeje :)

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