Tutorial: Editor de pantallas "sin tiles", como el de los juegos Aquaria o Braid

[Loover]

TERMINADO

http://gametuto.com/in-game-c-map-editor-tutorial-with-indielib-engine-that-dosent-use-tiles-but-pieced-images-like-in-braid-or-aquaria-games/

VÍDEO: http://vimeo.com/2769377

[EDITADO]

Buenas, he terminado un nuevo tutorial para http://gametuto.com. Esta vez va a tratar de un editor de pantallas al estilo del que usan juegos como Braid o Aquaria en C++ y usando IndieLib. A diferencia de los usuales motores / editores de tiles, estos juegos usan un sistema en el que el fondo se va creando a partir de instancias a imágenes sueltas cuyos atributos pueden ser modificados (posición, rotación, escalado, espejado, transparencia, entintado, efectos de morphing). Para captar la idea lo mejor es que le echeis un vistazo al vídeo. 

De momento llevo unas 9 horas con él usando IndieLib. Calculo que me quedarán otras 5 o 6 horas más para terminar el editor Sin contar que luego hay que escribir todo el tutorial. (En total me ha llevado 40 horas).

Esto de haber empezado a usar Slimtimer para ir contando el tiempo que voy empleando en cada cosa desmoraliza un poco, parece que ha sido incluso más tiempo, jaja.

Si os ha sido de utilidad el tutorial y os ha gustado, por favor, votad en los contadores de digg, reddit o dzone. Y si encima ya poneis un link desde vuetro blog os invito a unas cañas. Que me vicia ver las visitas en el Google Analytics :)

Capturas:

[[EX3]]

Mola! :) Algo asi intente en el ultimo desarrollo del TLSA sobre VB6 y dx_lib32 hara ya 2 o 3 años, diseñar con imagenes sueltas los niveles, aunque yo defini una rejilla configurable/escalable para ayudar un poco a la hora de colocar tiles, imagenes u objetos, que si no como quieras cuadrar o alinear varias imagenes, como fue mi caso, te las ves y te las deseas.

Imagino que la idea de este tipo editores es simiplicar la modificacion de los atributos de las entidades como escala o rotacion mediante el raton, usando la rueda por ejemplo, no? Evitar listas de propiedades o controles especificos para la edicion.

Salu2...

[Loover]

Me alegro que te mole :)

Imagino que la idea de este tipo editores es simiplicar la modificacion de los atributos de las entidades como escala o rotacion mediante el raton, usando la rueda por ejemplo, no? Evitar listas de propiedades o controles especificos para la edicion.

La idea es simplemente tener una lista de entidades (en este caso las entidades de IndieLib me vienen al pelo) que tienen una instancia a un gráfico y cuyos atributos pueden ser modificados (posición, rotación, escalado).

En el tutorial lo manejo todo mediante teclado y ratón, para no complicar la lectura del tutorial entrando en temas de guis / botones, etc. Usando las colisiones de IndieLib puedo chequear cuando existe colisión entre el gráfico del ratón y una entidad (aunque esté escalada y rotada).

[swapd0]

Es justo lo que estaba pensando en programar... le echare un vistazo para coger ideas

[Loover]

Ok, ya sólo queda lo más fácil (cargar / guardar)

Y lo más tocapelotas: escribir el tutorial :)

BackDrops
(x) Translation
(x) Rotation
(x) Scaling
(x) Transparency
(x) Mirroring
(x) Tiling
(x) Layers
(x) Z ordering inside each layer
(x) Parallax scrolling
(x) Tinting
Camera
(x) Zoom
(x) Movements
IO
Export XML
Import XML

[tamat]

El problema es que sin GUI no podras añadirle un sistema para custom properties, y sin eso es dificil que la gente lo use para sus juegos donde seguramente quiera poder añadir info de logica.
soportará jerarquía de objetos? eso es algo tambien bastante importante.
cambio de la posicion del pivote?

yo hace un tiempo empecé el mio para mi framework pero me di cuenta de que hacer uno decente lleva más tiempo de lo que pensaba.

suerte

[yens]

Está quedando muy chulo, tengo ganas de probarlo y echarle un vistazo al código aunque sólo sea por curiosidad :)

@tamat: Creo que al ser un mero tutorial la gui puede esperar, y hacer un tuto sobre guis aparte.

[Loover]

El problema es que sin GUI no podras añadirle un sistema para custom properties, y sin eso es dificil que la gente lo use para sus juegos donde seguramente quiera poder añadir info de logica.
soportará jerarquía de objetos? eso es algo tambien bastante importante.
cambio de la posicion del pivote?

yo hace un tiempo empecé el mio para mi framework pero me di cuenta de que hacer uno decente lleva más tiempo de lo que pensaba.

suerte

No es mi intención hacer un gigante con pies de barro. Sino algo que pueda tener hecho, explicado, con código limpio y funcionando en unas 15 horas. El caso es terminar cosas, pasar un rato divertido y compartir conocimientos con la comunidad, que ya tengo bastantes proyectos que parecen inacabables como para ponerme a hacer "el mejor (lo que sea) del mundo".

Lógicamente no voy a hacer el mejor editor del mundo. Voy a hacer uno sencillo y funcional. Y el que quiera extenderlo, que lo haga. Para eso está el tutorial :). No es una herramienta que vaya a vender o que vaya a utilizar para un juego mio concreto. Respondiéndote:

- No soportará gerarquía de objetos ni tengo intención de meterselo en el futuro. De meter eso, lo metería directamente en IndieLib. Y si lo metiera en IndieLib, aprovecharía para sacar el render en un plugin y hacer un scene-node-graph decente. Es más, si metiera eso, aprovecharía para hacer un editor de animaciones con objetos jerárquizados, etc, al estilo de las animaciones del Aquaria. Todo eso es harina de otro costal. Descartadísimo por el curro que lleva.
- No sé que es un sistema "custom properties".
- Cambio de la posición del pivote sólo tendría sentido si fuera a meter entidades futuras del juego que quieran ser rotadas con un pivote concreto (por ejemplo un puente levadizo). Esos detalles, junto con las colisiones, etc y un juego de prueba, para otro tutorial, no para este que básicamente es para dibujar los fondos. En este editor, cuando giras una imagen, el pivote está puesto por defecto en el centro, es más que suficiente  para ir colocando las fichas.

Vamos, que ningúna de las 3 :) Aunque la tercera está pensanda para el siguiente tuto (colisiones y min-juego de ejemplo).

[tamat]

perdona, te entendí mal, pensé que hablabas de hacer un editor para indielib y explicarlo en un tutorial

[Loover]

Nada que perdonar. Me ha venido bien que me recuerdes lo del pivote.

¿Qué son las custom properties de una gui de las que hablabas?

[[EX3]]

¿Qué son las custom properties de una gui de las que hablabas?

El cuadro de lista de propiedades personalizadas de la entidad, en plan esto:



Salu2...

[tamat]

como dice EX3 suelen ser campos personalizables que puedes añadirle a las entidades para su uso más adelante.
Por ejemplo un sprite podría tener el flag "colisionable" que aunque no afecte al render afectará a la logica del juego.

Como los editores no pueden soportar todas las features pues dejas abierta la posibilidad para añadir campos extra en cada entidad. Luego eso al exportar a XML lo guardas y ya se apañará el juego de interpretarlo.

Suerte

[Loover]

Gracias!

[Loover]

El editor está acabado. Ahora voy a empezar a escribir el tutorial.  ^_^'

Gráficos de lostgarden.com

[Loover]

El siguiente post será el tutorial, a ver si en 2 días...

¿A que queda bonito? Me ha prestado los gráficos Derek Yu :)