como hago este menu!!! :C

Consulte acerca de programas, técnicas, algoritmos etc.

como hago este menu!!! :C

Notapor shackra » Mar Ago 03, 2010 2:17 am

hola a todos! :D
estaba desarrollado un juego, poco original digo yo, pero divertido. El caso es que queria comenzar hacindo los menus, pero en lugar de hacerlos como lo explica hugo en su articulo de menus que esta en la wiki queria hacerlo que fueran como botones presionables con el puntero del mouse!.

la cosa es que me puse a hacer una clase para los menus, lo probe, pero no funcionan como deberia :(. por el momento al tener el mouse encima deberia de cambiarle el color a las letras (uno muy feo, pero luego le cambio el color).

el codigo del framework:
Código: Seleccionar todo
#*******************************************************************************
# framework.py: marco de trabajo para el juego ClickMania.
#               contiene metodos para menus, escenas, tiempo.
#*******************************************************************************

import pygame
from pygame.locals import *

import os
import pytweener

def centerxsurf(rect):
    sizexsurf = rect.w
    posx = pygame.display.get_surface().get_size()[0] / 2 - sizexsurf / 2
    return posx

def putysurf(rect, porcent):
    ycenter = rect.h / 2
    screenysize = pygame.display.get_surface().get_size()[1]
    porcent = int(porcent)
    ypos = porcent * screenysize / 100
    return ypos + ycenter

def putxsurf(rect, porcent):
    xcenter = rect.w / 2
    screenxsize = pygame.display.get_surface().get_size()[0]
    porcent = int(porcent)
    xpos = porcent * screenxsize / 100
    return xpos - xcenter

class scenes:
    def __init__(self, records = ""):
        # colores      r    g    b
        self.red   = (255,   0,   0)
        self.green = (0,   255,   0)
        self.blue  = (0,     0, 255)
        self.white = (255, 255, 255)
        self.black = (0,     0,   0)
        self.scene = 0
        self.background = self.blue

        #cargamos las tipografias.
        pygame.font.init()
        self.head  = pygame.font.Font("res/fonts/vtks.ttf", 90)
        self.menu  = pygame.font.Font("res/fonts/Junkyard.ttf", 25)
        self.other = pygame.font.Font("res/fonts/RadisSans-medium.ttf", 19)

    def menus(self):
        """ Dibuja un menu segun la escena idicada por Scene.
        """
        # primero dibujamos el menu principal
        if self.scene == 0:
            # limpiamos la pantalla.
            pygame.display.get_surface().fill(self.background)
            # preparamos los "carteles" que apareceran en el menu.
            nombre_juego    = self.head.render("ClickMania", True, self.white)
            menu_jugar      = self.menu.render("Jugar partida", True, self.white)
            menu_halloffame = self.menu.render("Salon de la fama", True, self.white)
            menu_opciones   = self.menu.render("Opciones", True, self.white)
            menu_salir      = self.menu.render("Salir del juego", True, self.white)
            # obtenemos los rects de los carteles.
            rect_juego      = nombre_juego.get_rect()
            rect_jugar      = menu_jugar.get_rect()
            rect_halloffame = menu_halloffame.get_rect()
            rect_opciones   = menu_opciones.get_rect()
            rect_salir      = menu_salir.get_rect()
            # calculamos las posiciones de cada cartel en la pantalla
            nombre_juego_pos       = (centerxsurf(rect_juego), putysurf(rect_juego, 20))
            menu_jugar_pos         = centerxsurf(rect_jugar), putysurf(rect_jugar, 40)
            menu_halloffame_pos    = centerxsurf(rect_halloffame), putysurf(rect_halloffame, 45)
            menu_opciones_pos      = centerxsurf(rect_opciones), putysurf(rect_opciones, 50)
            menu_salir_pos         = centerxsurf(rect_salir), putysurf(rect_salir, 55)
            # mostramos en la pantalla.
            #--
            blitstack = []
            lastblit  = None
            #--
            screen = pygame.display.get_surface()
            #--
            if rect_jugar.collidepoint(pygame.mouse.get_pos()):
                menu_jugar = self.menu.render("Jugar partida", True, self.red, self.white)
            if rect_halloffame.collidepoint(pygame.mouse.get_pos()):
                menu_halloffame = self.menu.render("Salon de la fama", True, self.red, self.white)
            if rect_opciones.collidepoint(pygame.mouse.get_pos()):
                menu_opciones = self.menu.render("Opciones", True, self.red, self.white)
            if rect_salir.collidepoint(pygame.mouse.get_pos()):
                menu_salir = self.menu.render("Salir del juego", True, self.red, self.white)
            #---
            screen.blit(nombre_juego, nombre_juego_pos)
            screen.blit(menu_jugar, menu_jugar_pos)
            screen.blit(menu_halloffame, menu_halloffame_pos)
            screen.blit(menu_opciones, menu_opciones_pos)
            screen.blit(menu_salir, menu_salir_pos)

def main():
    import pygame
    pygame.init()
    pygame.display.set_mode((800, 600))
    miescena = scenes()

    tiempo = pygame.time.Clock()
    salir = False

    while not salir:
        tiempo.tick_busy_loop(60)

        for evento in pygame.event.get():
            if evento.type == pygame.QUIT:
                salir = True
        miescena.menus()
        pygame.display.flip()

if __name__ == "__main__": main()


aqui todo el trabajo, para que sea 100% corrible: Clickmania! (src).

Otra duda que me surge es el flujo de ejecucion, en otras palabras, cuando tal boton es seleccionado; por ejemplo, opciones, como podriamos manejar la visualizacion de tal escenario. Ya que en pygame los escenario como tal no existen!
(me dare una vuelta por el codigo del juego de Ceferino, creado por Losersjuegos, para ver que aprendo! :p)
Avatar de Usuario
shackra
 
Mensajes: 308
Registrado: Lun Jun 15, 2009 4:10 pm
Ubicación: Costa Rica

Re: como hago este menu!!! :C

Notapor adrigm77 » Mar Ago 03, 2010 5:25 am

Mirate el juego del tetris que han desarrollado aquí en Loserjuegos, el concepto de escena que utilizan con un director que maneja en loop me ha parecido muy bueno, en cuando al menu con el raton, es simple busca sobre mouse mapping. Si no encuentras avisa.
Razón Artificial - La ciencia y el arte de crear videojuegos.
Avatar de Usuario
adrigm77
 
Mensajes: 43
Registrado: Dom Jul 25, 2010 8:03 pm
Ubicación: Las Palmas de Gran Canaria, España

Re: como hago este menu!!! :C

Notapor carlostex » Mar Ago 03, 2010 6:23 am

Código: Seleccionar todo
def menus(self):
        """ Dibuja un menu segun la escena idicada por Scene.
        """
        # primero dibujamos el menu principal
        if self.scene == 0:
            # limpiamos la pantalla.
            pygame.display.get_surface().fill(self.background)
            # preparamos los "carteles" que apareceran en el menu.
            nombre_juego    = self.head.render("ClickMania", True, self.white)
            menu_jugar      = self.menu.render("Jugar partida", True, self.white)
            menu_halloffame = self.menu.render("Salon de la fama", True, self.white)
            menu_opciones   = self.menu.render("Opciones", True, self.white)
            menu_salir      = self.menu.render("Salir del juego", True, self.white)
            # obtenemos los rects de los carteles.
            rect_juego      = nombre_juego.get_rect()
            rect_jugar      = menu_jugar.get_rect()
            rect_halloffame = menu_halloffame.get_rect()
            rect_opciones   = menu_opciones.get_rect()
            rect_salir      = menu_salir.get_rect()
            # calculamos las posiciones de cada cartel en la pantalla
            rect_juego.x, rect_juego.y       = centerxsurf(rect_juego),putysurf(rect_juego, 20)
            rect_jugar.x,rect_jugar.y         = centerxsurf(rect_jugar), putysurf(rect_jugar, 40)
            rect_halloffame.x,rect_halloffame.y    = centerxsurf(rect_halloffame), putysurf(rect_halloffame, 45)
            rect_opciones.x,rect_opciones.y      = centerxsurf(rect_opciones), putysurf(rect_opciones, 50)
            rect_salir.x, rect_salir.y         = centerxsurf(rect_salir), putysurf(rect_salir, 55)
            # mostramos en la pantalla.
            #--
            blitstack = []
            lastblit  = None
            #--
            screen = pygame.display.get_surface()
            #--
            if rect_jugar.collidepoint(pygame.mouse.get_pos()):
                menu_jugar = self.menu.render("Jugar partida", True, self.red, self.white)
            if rect_halloffame.collidepoint(pygame.mouse.get_pos()):
                menu_halloffame = self.menu.render("Salon de la fama", True, self.red, self.white)
            if rect_opciones.collidepoint(pygame.mouse.get_pos()):
                menu_opciones = self.menu.render("Opciones", True, self.red, self.white)
            if rect_salir.collidepoint(pygame.mouse.get_pos()):
                menu_salir = self.menu.render("Salir del juego", True, self.red, self.white)
            #---
            screen.blit(nombre_juego, rect_juego)
            screen.blit(menu_jugar, rect_jugar)
            screen.blit(menu_halloffame, rect_halloffame)
            screen.blit(menu_opciones, rect_opciones)
            screen.blit(menu_salir, rect_salir)


Que tal, el codigo de arriba pertenece a tu función menus, fue lo unico que cambié, el problema estaba en las lineas de codigo que faltan.Pues declarabas unas variables que son las que contenian la ubicacion de las imagenes y como en esa posicion las dibujabas parecia todo estar bien, pero cuando compruebas la colicion entre el mouse y las imagenes lo hacias con los rect originales, es decir los que estan cituados en las parte superior izquierda de la pantalla, asi que elimine esas variables y use las mismas de rect, sobreescribiendo las ubicaciones en X e Y.

Con respecto a la pregunta de los esenarios: Pues he visto que se suele usar lo que se llama los estados del juego, te haces una clase para el menu opciones, y pones hay todo lo que quieras que se dibuje, y lo mismo con las otras. Luego te haces una clase que controle los estados, las funciones para tal clase serian algo como: Iniciar, pausa, terminar, cambiar de estado.
Cuando llames a un estado solo le pasas la superficie y llamas a su metodo update y draw, o como lo dispongas, pero esa es la idea.

Saludos.
El conocimiento de unos es conocimiento de todos.
Avatar de Usuario
carlostex
 
Mensajes: 249
Registrado: Mar Jul 14, 2009 4:13 am
Ubicación: mexico

Re: como hago este menu!!! :C

Notapor shackra » Mar Ago 03, 2010 7:28 pm

Carlostex, gracias hombre :), no me habia pasado eso por la cabeza, eso me pasa por programar a altas horas de la noche xD, el metodo Rect1.collidepoint necesita RECTs!!!, jajaja que despistado yo :p. cuando llegue a casa de la capital (vengo de estudiar en la U) hago los cambios e investigo mas sobre lo que me comentabas :)

Gracias chicos!, ire a probar ;)

[EDIT]
joder, funciona bien! :), gracias!!, seguire con el desarrollo! :p
Avatar de Usuario
shackra
 
Mensajes: 308
Registrado: Lun Jun 15, 2009 4:10 pm
Ubicación: Costa Rica


Volver a General

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado