¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Continuando con lo anterior: http://www.habbos.es/forum/?topic=65097.0
En este apartado vamos a empezar hacer nuestra base, si requieren de algún ejemplo en funcionamiento, es la explicación del Build de Baldosas Isométricas publicado hace unas semanas.
v1.0: http://www.habbos.es/forum/?topic=64732.0
v2.0: http://www.habbos.es/forum/?topic=64733.0
v3.0: http://www.habbos.es/forum/?topic=64734.0
v4.0: http://www.habbos.es/forum/?topic=64735.0
v5.0: http://www.habbos.es/forum/?topic=64736.0
v5.1: http://www.habbos.es/forum/?topic=64737.0
Empecemos.
Tenemos nuestra baldosa ya diseñada y es la siguiente.
Ejemplo:
http://i44.tinypic.com/azcm0.png
Lo que haremos es repetir esta misma imagen una y otra vez tantas veces queramos hasta tener una base isométrica para nuestro proyecto. Para ello usaremos bucles.
En este caso, trabajaré usando Javascript, aunque el método se puede adaptar a otros lenguajes.
Usaré el bucle for ya que es el que encuentro mas apropiado para este trabajo.
Sintaxis simple:
$$CODE0$$
Si te encuentras leyendo este tema es por que posees conocimientos previos en programación por lo que me ahorrare la explicación de este código y pasaré a lo que realmente importa.
Tenemos dos coordenadas, la coordenada X y la coordenada Y, por lo tanto, necesitaremos generar ambos lados a la vez, ¿Como hacerlo?, dos bucles for simultáneos, uno de ellos hijo.
Generaremos primero una coordenada que sería el elemento Hijo, cuando Hijo termine su trabajo, Padre se volverá a activar e Hijo repetirá su previa acción hasta que la condición se cumpla, esta condición sería el tope de baldosas generadas del lado X y Y.
Ejemplo de sintaxis:
$$CODE1$$
La acción se repetirá de la siguiente manera.
// Inicio...
-Padre 0
---Hijo 1
---Hijo 2
-Padre 1
---Hijo 1
---Hijo 2
-Padre 2
---Hijo 1
---Hijo 2
// Fin...
Ya con esto es la base fundamental de todo. Continuamos...
Lo que haremos a continuación es crear nuestra baldosa, esta parte la dejaré en el aire ya que esto depende del lenguaje de programación que estemos usando. Si llegaran a trabajar con Javascript les recomendaría el uso de la librería jQuery por el simple hecho de que nos recortará muchas lineas de código si es que deciden llevar esto a algo grande.
En el caso de jQuery, podemos crearla usando .append(). En ella crearemos un elemento que contenga la imagen de baldosa. Les recomiendo crear un identificador para estos elementos ya que nos será de utilidad para las llamadas mas adelante.
Una vez que tengamos ya nuestro elemento de baldosa creado, necesitaremos moverla a la ubicación adecuada, para ello usaremos una formula que desarrolle y es la BASE fundamental de IsoMap.
$$CODE2$$
Un ejemplo básico, una baldosa de 20x10px
-Padre 0
---Hijo 0:
-----X 0:
-----finalX = 20/2 = 10*0=0 - 20/2 = 10*0=0
-----finalX = 0-0=0
-----finalX = 0
-----Y 0:
-----finalY = 10/2 = 5*0=0 + 10/2 = 5*0=0
-----finalY = 0+0=0
-----finalY = 0
// Después...
---Hijo 1:
-----X 0:
-----finalX = 20/2 = 10*0=0 - 20/2 = 10*1=10
-----finalX = 0-10=-10
-----finalX = -10
-----Y 1:
-----finalY = 10/2 = 5*0=0 + 10/2 = 5*1=5
-----finalY = 0+5=5
-----finalY = 5
Una vez que ya saben el funcionamiento de la formula, procederemos a insertar esos valores en el elemento creado. En el caso de jQuery, podemos usar .css() con un selector dedicado a la baldosa que acabamos de crear.
Una vez que tengamos esto listo, nos dará como resultado ya nuestra base. Recomiendo ver ejemplo básico en Build de Baldosas v1.
Continuaré con esto mas tarde.
Saludos.
En este apartado vamos a empezar hacer nuestra base, si requieren de algún ejemplo en funcionamiento, es la explicación del Build de Baldosas Isométricas publicado hace unas semanas.
v1.0: http://www.habbos.es/forum/?topic=64732.0
v2.0: http://www.habbos.es/forum/?topic=64733.0
v3.0: http://www.habbos.es/forum/?topic=64734.0
v4.0: http://www.habbos.es/forum/?topic=64735.0
v5.0: http://www.habbos.es/forum/?topic=64736.0
v5.1: http://www.habbos.es/forum/?topic=64737.0
Empecemos.
Tenemos nuestra baldosa ya diseñada y es la siguiente.
Ejemplo:
http://i44.tinypic.com/azcm0.png
Lo que haremos es repetir esta misma imagen una y otra vez tantas veces queramos hasta tener una base isométrica para nuestro proyecto. Para ello usaremos bucles.
En este caso, trabajaré usando Javascript, aunque el método se puede adaptar a otros lenguajes.
Usaré el bucle for ya que es el que encuentro mas apropiado para este trabajo.
Sintaxis simple:
$$CODE0$$
Si te encuentras leyendo este tema es por que posees conocimientos previos en programación por lo que me ahorrare la explicación de este código y pasaré a lo que realmente importa.
Tenemos dos coordenadas, la coordenada X y la coordenada Y, por lo tanto, necesitaremos generar ambos lados a la vez, ¿Como hacerlo?, dos bucles for simultáneos, uno de ellos hijo.
Generaremos primero una coordenada que sería el elemento Hijo, cuando Hijo termine su trabajo, Padre se volverá a activar e Hijo repetirá su previa acción hasta que la condición se cumpla, esta condición sería el tope de baldosas generadas del lado X y Y.
Ejemplo de sintaxis:
$$CODE1$$
La acción se repetirá de la siguiente manera.
// Inicio...
-Padre 0
---Hijo 1
---Hijo 2
-Padre 1
---Hijo 1
---Hijo 2
-Padre 2
---Hijo 1
---Hijo 2
// Fin...
Ya con esto es la base fundamental de todo. Continuamos...
Lo que haremos a continuación es crear nuestra baldosa, esta parte la dejaré en el aire ya que esto depende del lenguaje de programación que estemos usando. Si llegaran a trabajar con Javascript les recomendaría el uso de la librería jQuery por el simple hecho de que nos recortará muchas lineas de código si es que deciden llevar esto a algo grande.
En el caso de jQuery, podemos crearla usando .append(). En ella crearemos un elemento que contenga la imagen de baldosa. Les recomiendo crear un identificador para estos elementos ya que nos será de utilidad para las llamadas mas adelante.
Una vez que tengamos ya nuestro elemento de baldosa creado, necesitaremos moverla a la ubicación adecuada, para ello usaremos una formula que desarrolle y es la BASE fundamental de IsoMap.
$$CODE2$$
Un ejemplo básico, una baldosa de 20x10px
-Padre 0
---Hijo 0:
-----X 0:
-----finalX = 20/2 = 10*0=0 - 20/2 = 10*0=0
-----finalX = 0-0=0
-----finalX = 0
-----Y 0:
-----finalY = 10/2 = 5*0=0 + 10/2 = 5*0=0
-----finalY = 0+0=0
-----finalY = 0
// Después...
---Hijo 1:
-----X 0:
-----finalX = 20/2 = 10*0=0 - 20/2 = 10*1=10
-----finalX = 0-10=-10
-----finalX = -10
-----Y 1:
-----finalY = 10/2 = 5*0=0 + 10/2 = 5*1=5
-----finalY = 0+5=5
-----finalY = 5
Una vez que ya saben el funcionamiento de la formula, procederemos a insertar esos valores en el elemento creado. En el caso de jQuery, podemos usar .css() con un selector dedicado a la baldosa que acabamos de crear.
Una vez que tengamos esto listo, nos dará como resultado ya nuestra base. Recomiendo ver ejemplo básico en Build de Baldosas v1.
Continuaré con esto mas tarde.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21