martes, 28 de abril de 2009

Iniciando la interfaz gráfica (Parte 1)



Ya tenemos una parte del motor interno de nuestro juego. Ahora, debemos presentar nuestro juego dentro de una ventana propia con todos los elementos necesarios visibles. Las ventanas además de presentar información, son el tablero de control de nuestro juego.
Como eso de usar ventanas, botones y menus es tan común, los programadores no tenemos que hacer todo el trabajo. Existen muchas herramientas libres (y que además pueden usarse desde de Python) para esto. Sugar en particular usa la biblioteca GTK, así que empezaremos a construir nuestra interfaz gráfica con ella. Para esto es necesario importar en python el módulo gtk:

import gtk

Además voy a usar Pango, que se encarga del formato y dibujo del texto. Por ahora solo lo usaré para cambiar de tamaño mis letras. Debo cargar el módulo pango con:

import pango

Antes de empezar a escribir código, he hecho un simple boceto de lo que quiero tener:
En este dibujo se ve la cuadrícula de los dados en la izquierda y una línea de entrada de texto debajo de ésta. En la derecha de la interfaz gráfica, tendremos el tiempo de juego, las palabras entradas por los jugadores (cuando logremos llegar a compartir la actividad), y abajo un panel para mostrar la definición de la palabra seleccionada (posiblemente traída de internet para no tener que empacar un diccionario completo con nuestro juego).
Además, en la barra superior habrá dos pestañas, una de "Actividad", que permite iniciar el juego, y determinar el tiempo de juego, y otra pestaña que permite ver los puntajes.
En esta entrada simplemente vamos a crear la cuadrícula de los dados.
Para hacer esta cuadrícula, voy a crear una clase que hereda la clase gtk.Table. Es decir es una tabla, con algunas características adicionales.
En cada una de las 16 casillas coloco (con la función attach) un gtk.Label que mostrará la letra (por ahora solo una "A"), y los guardaré en una lista (dice_labels) para poder manipuarlos después.


# GTK es la librería gráfica usada por Sugar
import gtk

# Pango es una librería para el dibujo de texto internacional
import pango

class wordhuntgrid(gtk.Table):
def __init__(self):
self.size = 4
gtk.Table.__init__(self, self.size, self.size)
self.dice_labels = []
for row in range(self.size):
dice_row = []
for column in range(self.size):
new_label = gtk.Label("A")
new_label.modify_font(pango.FontDescription("sans 32"))
new_label.show()
self.attach(new_label, \
row, row + 1, column, column + 1,
gtk.EXPAND, gtk.EXPAND)
dice_row += [new_label]
self.dice_labels += [dice_row]


Hemos creado aquí una clase que puede mostrarse, pero hasta que no la instanciemos, es un cascarón vacío...
Lo que haremos es crear una ventana (mainwindow) y luego agregamos nuestra cuadrícula (guardada en la variable grid)

mainwindow = gtk.Window(gtk.WINDOW_TOPLEVEL)
grid = wordhuntgrid()
mainwindow.add(grid)
grid.set_size_request(250, 250)
grid.show()
mainwindow.show()
mainwindow.connect("delete_event", gtk.main_quit)
gtk.main()


Esta parte eventualmente cambiará radicalmente, pero por ahora es útil para ver cómo funciona nuestra cuadrícula.
En Sugar todas las ventanas ocupan la pantalla completa y no tienen borde por defecto, por eso para cerrar el programa, es necesario usar las teclas "Alt"+ "Esc" al mismo tiempo (el "Esc" en una máquina XO es la X en la esquina superior izquierda).
Y ahora como siempre al final el código:

# GTK es la librería gráfica usada por Sugar
import gtk

# Pango es una librería para el dibujo de texto internacional
import pango

class wordhuntgrid(gtk.Table):
def __init__(self):
self.size = 4
gtk.Table.__init__(self, self.size, self.size)
self.dice_labels = []
for row in range(self.size):
dice_row = []
for column in range(self.size):
new_label = gtk.Label("A")
new_label.modify_font(pango.FontDescription("sans 32"))
new_label.show()
self.attach(new_label, \
row, row + 1, column, column + 1,
gtk.EXPAND, gtk.EXPAND)
dice_row += [new_label]
self.dice_labels += [dice_row]

mainwindow = gtk.Window(gtk.WINDOW_TOPLEVEL)
grid = wordhuntgrid()
mainwindow.add(grid)
grid.set_size_request(250, 250)
grid.show()
mainwindow.show()
mainwindow.connect("delete_event", gtk.main_quit)
gtk.main()


Enlaces

Imágenes

No hay comentarios:

Publicar un comentario en la entrada