Razón Artificial

La ciencia y el arte de crear videojuegos

Arkanoid III – Diseñando la pantalla de juego

Escrito por adrigm el 29 de septiembre de 2010 en Desarrollo Videojuegos, Noticias, Programación | 3 Comentarios.

Un videojuego como bien sabemos no es solo programación, sino que conlleva diseño, gráficos, música, sonidos, etc. En esta parte del tutorial vamos a hablar sobre el diseño de nuestro juego y las partes que va a tener antes de empezar a programar a lo loco.

La pantalla de juego

La pantalla más importante de nuestro juego va a ser la del juego en sí, otras como los menús, puntaciones y demás son pantallas del juego, pero no son tan importantes ya que el jugador se pasará la mayor parte del tiempo en la pantalla de juego. Es por eso que es la primera que vamos a diseñar.

En un principio vamos a diseñar algo básico que marque la ubicación y estructura de los elementos, más adelante se puede cambiar por gráficos más elaborados. Bueno abrimos nuestro programa de diseño gráfico ya sea GIMP, Photoshop o el que queráis.

Mi idea del juego es que tenga una resolución de 640x 480 con una barra lateral donde poner datos como la puntuación, el nivel, las vidas y más información útil.

Como vemos nada del otro mundo, pero que nos ayudará a tener claro a la hora de programar donde esta definida el área de juego, los puntos, los bloques, la pala, etcétera. Luego ya nos curraremos una estadísticas mejores y unos gráficos molones.

La estrategia que vamos a seguir es conseguir un juego funcional y luego poco a poco ir añadiendole extras. Me explico, en principio el objetivo es conseguir con la pala destruir todos los ladrillos, pero más adelante podremos hacer que ciertos ladrillos dejen caer ciertas bonificaciones al romperse o extras como hacer crecer y encoger la pala o darte más vidas.

Vamos a desglosar esta imagen que tenemos como referencia, para usarlas en nuestro juego. Cogemos es el fondo y lo guardamos en formato png en la carpeta de menús ya que todos los elementos de la interfaz irán a esta carpeta.

Luego la pala, los ladrillos, la pelota y demás elementos interactivos irán a la carpeta sprites, pues son los que van a poseer propiedades físicas o de movimiento.

El archivo graphics.py

Antes de seguir vamos a crear un archivo auxiliar con algunas funciones útiles como load_image o text que ya vimos en el tutorial del Pong y sirven para cargar imágenes y texto. A este archivo lo llamaremos graphics.py y en el colocaremos funciones que se encarguen de manipular y crear gráficos.

# -*- coding: utf-8 -*-

"""Módulo para implementar el manejo de gráficos y superficies"""

# Módulos
import pygame

# Carga una imagen transparencia y color tranasparente opcionales.
def load_image(filename, transparent=False, pixel=(0,0)):
    "Carga una imagen al formato interno de pygame"
    try: image = pygame.image.load(filename)
    except pygame.error, message:
            raise SystemExit, message
    image = image.convert()
    if transparent:
            color = image.get_at(pixel)
            image.set_colorkey(color, pygame.RLEACCEL)
    return image

def text(texto, posx, posy, color=(0, 0, 0), tam=25):
    "Crea una imagen con texto pasado y su rect"
    fuente = pygame.font.Font("../images/DroidSans.ttf", tam)
    salida = pygame.font.Font.render(fuente, texto, 1, color)
    salida_rect = salida.get_rect()
    salida_rect.centerx = posx
    salida_rect.centery = posy
    return salida, salida_rect

Si no entiendes estas funciones revisa el tutorial del Pong básico.

Colocando el fondo

Ya podemos colocar el fondo de nuestro SceneGame ya que este no variará y será lo primero que se dibuje siempre.

Cargamos la imagen en el constructor de la escena.

self.back = graphics.load_image(config.menus+"back_game.png")

Previamente debemos hacer los imports tanto de config como de graphics para usar las funciones que contienen. Podéis ver como config.menus en realidad equivale a “data/graphics/menus/” por lo que si algún día decidimos cambiar la ruta solo con cambiar esta variable bastará.

Una vez carga solo debemos hacer que se dibuje en método on_draw de la escena con la siguiente línea.

screen.blit(self.back, (0,0))

Debe ser siempre la primera cosa a dibujar ya que es el fondo que va debajo y todo lo demás tiene que dibujarse encima si queremos que sea visible. Por si os habéis perdido dejo el archivo scene_home.py completo.

# -*- encoding: utf-8 -*-

import scene
import config
import graphics

class SceneGame(scene.Scene):
    """Escena inicial del juego, esta es la primera que se carga cuando inicia"""

    def __init__(self, director):
        scene.Scene.__init__(self, director)
        self.back = graphics.load_image(config.menus+"back_game.png")


    def on_update(self):
        pass

    def on_event(self):
        pass

    def on_draw(self, screen):
        screen.blit(self.back, (0,0))

Por favor dejad vuestra opinión sobre si está bien explicado o no, si debería dar mas detalles o cualquier sugerencia para futuras entregas.

3 Comentarios en "Arkanoid III – Diseñando la pantalla de juego"

  1. Debianitram dice:

    Muy bueno los tutos que escribís. Seguí adelante que lo hacés muy bien! Te felicito!

  2. nico dice:

    muy interesante trabajo
    saludos

  3. Excelente! Muchas gracias por tu trabajo :)

Deja un comentario