Autor Tema: [Aporte] Código de chat por diálogos auto-ajustables - By SoyJoaquin.  (Leído 694 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Hola chic@s, como ya sabrán, este sistema lo cree para un juego que estaba creando llamado "CityRooms" en VB6. El cual trata de dividir un dialogo en imágenes.
Por ejemplo:

[inicio nick] [Contenedor nick] [Entre nick-mensaje] [contenedor mensaje] [final mensaje]
Este sistema lo poseen juegos actuales como lo son ilDom, Urbaloca, Kekocity, Habbo Hotel, Bittybay, Lasumi, Kynto, etc.

Por ejemplo: Si conoces alguno de los juegos de navegador mencionados anteriormente, sabrás que su sistema de chat por diálogos en "burbuja" esta dividido de la manera que describí en el ejemplo anterior.

A continuación te mostrare una imagen para que lo veas mas claro:

Para calcular esto es realmente sencillo. Empezamos.
1-Creas una imagen de como quieres que sea tu dialogo.
2-Divides esa imagen en "espacios" (Como si la fueras a codear con html para después unirlas con divs)
3-Creamos tantos clips de película como los que necesitaremos (Puedes también trabajar con gráficos), En la ilustración anterior, tenemos 5 espacios, si es así, dividimos el dialogo creado en 5 espacios y los convertimos en clips de película o gráficos. El punto de registro de referencia de esa instancia lo ponemos hacia el centro-izquierdo, Cosa que cojemos sus coordenadas y se sumamos el ancho del mismo para sacar la coordenada del siguiente campo.

4-Una ves dividido, Tendremos que emplear las matemáticas básicas. Por ejemplo:

El clip de película que sera el "contenedor" (Es un decir, mas no que lo sea) del nick tiene que ajustarse de acuerdo al tamaño del "label" (Campo de texto dinámico), Como también el "label" se tiene que ajustar (en ancho) a la cantidad de texto que posee. Para eso usamos las etiquetas _width y textWidth respectivamente.

El textWidth representa al ancho de caracteres total que posee un "label" (No el ancho del campo), Es decir, el ancho del "label" tendrá que ser igual a su ancho de caracteres que posee para así hacerlo auto ajustable como a su vez el ancho del clip de pelicula "contenedor" del nick tiene que ser igual al ancho del label del nick.
De la misma manera pasa con el campo "mensaje".

5-Una vez dividido tendremos que emplear el código, Para eso usaremos lógica. Veras:
Los clips de película o gráficos tiene su punto de referencia de coordenadas en su centro-izquierdo, Por lo tanto al sumarle su ancho debería de dar el punto de coordenada "x" del siguiente clip de película o gráfico, mientras que el punto "y" es el mismo del primer clip de película.

Ejemplo:
Código: [Seleccionar]
clip1._x = 0;
clip1._y = 0;
clip2._x = clip1._x+clip1._width;
clip2._y = clip1._y;

6-Una vez hecho esto tendremos nuestro dialogo auto-ajustable.
---
En caso de que no entendieras este manual, te voy a dejar un código simple de tres campos (inicio, contenedor, final).

Código: [Seleccionar]
clip1._x = 0; // Punto "x" de inicio.
clip1._y = 0; // Punto "y" de inicio.
clip2._x = clip1._x+clip1._width; // Calculamos la posicion "x" sumando la "x" del clip inicial con su respectivo ancho.
clip2._y = clip1._y; // La posición "y" es la misma.
clip2._width = msj.textWidth+5; // Aumento 5 al ancho ya que por lo general se corta por la mitad el ultimo caracter.
msj._x = clip2._x; // La posición "x" del "label" es igual a la de su contenedor.
msj._width = clip2._width; // Ajustamos el ancho del "label" a la de su contenedor.
clip3._x = clip1._x+clip1._width; // Calculamos la posicion "x" del ultimo clip.
clip3._y = clip1._y; // La "y" es la misma.

---
¿El resultado?
Un simple dialogo de un solo "contenedor", pero editando cosas básicas que se obtienen por la lógica del código, podrás obtener un dialogo de dos contenedores (nick y msj)

Saludos.
Twitter: @JoakoM010



Comunidad PHPeros