Archivo del sitio
Drop: un nuevo entretenimiento del creador de Minecraft | Microsiervos (Juegos y Diversión)
Drop: un nuevo entretenimiento del creador de Minecraft | Microsiervos (Juegos y Diversión).
Es tan simple que probablemente Notch se lo ha programado de una sentada. Se llama Drop y es uno de esos juegos que tanto nos gustan por aquí: aparecen letras y hay que teclearlas tan rápido como sea posible. Un pequeño entretenimiento que te puede dejar enganchado a la pantalla un buen rato.
De la misma familia y que alguna vez hemos comentado por aquí:
Share this:
Uplink: El videojuego hacker | Hack Story Blog
Uplink: El videojuego hacker | Hack Story Blog.
Uplink: El videojuego hacker
Uplink es un videojuego de simulación de hacking creado por la empresa independiente inglesa Introversion Software cuya primera versión salió en 2001.
Hace ya mucho tiempo que llevan funcionando los videojuegos de hacking. Puedo recordar videojuegos como Streethacker, un simulador de hacking que te muestra un escritorio similar al de Linux y en el que realizas tu actividad hacker como si fuera en uno real.
Sin embargo Uplink es otro mundo dentro de este tipo de simulación. Es puro hacking. Tiene un funcionamiento que se asemeja mucho al hacking real. Han salido clones de Uplink como “Hacker Evolution” de Exosyphen Studios, tras el éxito del videojuego en todo el mundo.
Empieza la aventura
Todo comienza cuando, después de haber oído rumores y haber buscado en Internet, descubres el servidor de Uplink Corporation. De modo que te registras en su sistema. La primera vez que juegas, creas una cuenta en el sistema de Uplink y accedes a él.
En Uplink eres un hacker freelance que trabaja para Uplink Corporation, la mayor corporación de hackers a sueldo.
Una vez dentro, una interfaz con estética cyberpunk, te permite realizar todo tipo trabajos de hacking de una forma anónima y segura, si eres un buen hacker. El videojuego te permite navegar por diferentes servicios públicos, similares a los reales, para obtener información sobre tus objetivos.
La idea es que te conectas desde tu ordenador personal a un gateway de Uplink Corporation, desde el cual debes “hackear” sistemas de forma realista. El gateway no es otra cosa que un ordenador en las instalaciones de Uplink, al que te conectas para encubrirte y disponer de los recursos de la corporación.
Desde la propia interfaz del juego, recibes correo electrónico de Uplink Corporation donde te van asignado misiones que puedes organizarte como quieras.
Variedad de misiones
Las misiones incluyen desde robar o borrar un archivo de un servidor, cometer fraudes de identidad, reventar mainframes, hacer transferencias secretas de capital entre bancos e incluso en niveles más altos, introducirte en LANs de alta seguridad, “hackear” con la ayuda de complejos diagramas de red e inculpar a otras personas de tus acciones.
Todo ello evitando que localicen tu ubicación real y eliminando (o modificando) los logs de las máquinas que atacas.
En un principio tu gateway es un ordenador modesto, con el que sólo puedes realizar las misiones básicas.
Desarrollo de la historia
Pero en Uplink, como en la vida real, el hardware es actualizable. De modo que según vas superando misiones, puedes comprar gateways más potentes.
Lo que cambia en cada uno es el número de CPUs, la memoria máxima, la seguridad máxima y el ancho de banda máximo. Estos son los ordenadores a los que puedes optar (de menor a mayor potencia):
- Gateway Alpha (el inicial)
- Gateway Alpha ICPU
- Gateway Alpha IMEMORY
- VIRTUANET R-Access
- KRONOS Corp 80-860
- ZION-780 Series Workstation
- UNITY High-Security Platform
- AM-CORE File Server
- OMEGA Super Computer
- TRINITY-1686a
También cabe destacar que puedes optar por comprar muchos tipos de software para ir realizando las misiones. Estos programas de hacking y administración de información tienen a su vez versiones mejores y peores. Son estos:
- Decrypter
- Decypher
- Dictionary Hacker
- File Copier
- File Deleter
- Defrag
- Firewall Bypass
- Firewall Disable
- HUD ConnectionAnalysis
- HUD IRC Client
- HUD MapShowTrace
- HUD LAN View
- IP Lookup
- IP Probe
- LAN Probe
- LAN Scan
- LAN Spoof
- LAN Force
- Log Deleter
- Log Modifier
- Log UnDeleter
- Monitor Bypass
- Password Breaker
- Proxy Bypass
- Proxy Disable
- Trace Tracker
- Voice Analyser
Posteriormente, puedes elegir qué camino seguir, el de Andromeda Research Corporation (que quiere destruir Internet) o el de Arunmor (que quiere detener a ARC). Son dos caminos opuestos y puedes recorrer los dos, cada uno con sus propias misiones.
Extras
Un aspecto muy original de este videojuego, es que los creadores, Introversion Software, han hecho disponibles un CD-ROM de desarrollo (para poder modificar el juego a tu antojo), los libros de notas de programación del juego (llamadas gamebibles), la banda sonora y más elementos que jamás verían la luz de no tratarse de un juego Independiente. Esto ha creado una fuerte comunidad de fans y modificadores.
Uplink contiene muchos guiños al mundo cyberpunk y al hacker: Desde el gateway Trinity, el sistema de puntuación “Neuromancer” hasta la aparición del servidor de Steve Jackson Games o el de Protovision en el transcurso del juego.
El juego ha ido evolucionando y muchas versiones han visto la luz, mientras el juego se portaba a Linux y Mac OSx (vía Ambrosia Software). Hoy en día es completamente multiplataforma y en agosto de 2006 fue lanzado en la importante plataforma de compra de videojuegos Steam. Desde 2011 también se puede adquirir la versión para Linux desde el “Ubuntu Software Center”.
Este año, imparables, sacarán una versión para Android.
Recomendado para pequeños hackers y para grandes, con ganas de disfrutar horas y horas (e incluso llegar a soñar) con un juego impecable.
Fansites:
http://www.introversion.co.uk/uplink/othersites_fansites.html
Mods:
Extras:
http://www.lastyearsgamers.com/extra/blog/images/uplink
Share this:
Crear Juegos con RPG JS: Your online RPG on your browser
RPG JS: Your online RPG on your browser.
Share this:
rur-ple – an environment designed to help you learn computer programming using the language Python – Google Project Hosting
Aprender a programar es divertido RUR-PLE en Python
an environment designed to help you learn computer programming using the language Python
Share this:
Handmade Kids How-To: Fabric Nesting Dolls :: Etsy Blog
Handmade Kids How-To: Fabric Nesting Dolls
vía Handmade Kids How-To: Fabric Nesting Dolls :: Etsy Blog.
Share this:
Crear criptogramas
http://puzzlemaker.discoveryeducation.com/cryptogramSetupForm.aspComputadora
Share this:
Opciones para crear tus propios juegos sin saber programar
Opciones para crear tus propios juegos sin saber programar
Playcrafter
Una aplicación web que con la técnica de arrastrar y soltar (Drag&Drop) podremos crear unos juegos interesantes de plataformas. Podemos añadir objetos y establecer su comportamiento en el juego.
Simscarnival
Tiene un wizard para crear juegos online con protagonistas mostrando nuestras fotografías en lugar de rostros.
Scratch
Muy sencillo y en varios idiomas, permite crear juegos, historias y animaciones.
Yoyogames
Para hacer cosas más sofisticadas. Permite bajar un programa llamado GameMaker (en su versión 7.0) para crear juegos de varios tipos.
Alice
Para hacer juegos y animaciones 3D. En realidad se trata de una plataforma que ayuda a los profesores a enseñar programación a base de crear juegos tridimensionales. Una verdadera joya gratuita.
Share this:
Unbelievable 9 Cubes Paper Toy ….. From Crazy Toys…….. – Video
Juegos de papel
Unbelievable 9 Cubes Paper Toy ….. From Crazy Toys……..
Unbelievable 9 Cubes Paper Toy ….. From Crazy Toys…….. – Video
Share this:
How to Make origami kirigami paper toy transformer easy try papier folding falten craft art – Instructables search Instructables – Page 3
Marshall Alexander – Paper Engineer
Modelos de criaturas de papel
Marshall Alexander – Paper Engineer
Share this:
Paper Critters: Online Paper Toy Creator
Creador de criaturas de papel online
Paper Critters: Online Paper Toy Creator
Share this:
Juegos de acertijos online – Online Riddles Round-up « Digital World
Online Riddles Round-up « Digital World
“Welcome to my riddle. This is my personal hompage to Notpron which, whilst it cannot compete with the original, is I hope of sufficient quality and interest to keep people amused. Although there is some use of wordplay I have tried to make it as fair as possible to people who don’t speak English too well by hiding plenty of eggs. Go find them! There are also hints for the first 8 levels…just click the Nog!“
“CWoT is unique because we do not expect you to know how to play this type of game before you start. We enjoy teaching you the skills you will need in later, more difficult levels, so we start you out fairly easy and provide a lot of skilled help through our forum.
Although CWoT is considered an adult site because of the complex riddles, many kids play the game well and enjoy the challenge it presents. You don’t have to be a computer whiz to solve these riddles, but by the time you complete the trail you will be!
After the completion of each 100 level section of riddles, side games and quests become available. There is a lot to do on this site. There are even more side games and quests available to our forum members, but joining the forum is not a requirement to browse it for hints and help.“
Looks interesting.
“BADPRON is openly inspired by notpr0n. It does not pretend to be better or harder. In the idea, this is about riddles with solutions that are fun to find, yet not as hard as notpr0n can get. This isn’t meant to keep you sleepless for weeks over a single level (you know how it can get). This doesn’t make BADPRON an easy game, and people who are new to this are likely to be challenged.”
This riddle is unique in a way that you have to sign up their forum and find your way to the following levels within there.
“This is a collection of puzzles of historic (and not so historic) events of the 20th century. Each year will have it’s own teaser, soon. There is no particular order required to solve the problems.”
Yet another truly unique online riddler. You don’t have to be hardcore programmer to solve the riddles.
“Python Challenge is a game in which each level can be solved by a bit of (Python) programming. All levels can be solved by straight forward and very short scripts. Python Challenge welcomes programmers of all languages. You will be able to solve most riddles in any programming language, but some of them will require Python.”
A Notpron inspired online riddle. Looks good (good=difficult).
I liked this one, too.
The levels look interesting.
“This web-based puzzle will test your powers of deduction, reasoning, logic, creativity, research, ability to see connections between apparently unrelated things, and your ability to think outside the box in general.“
Philpepe’s Really Freakin Hard Puzzle
Only 50 levels (for now) but looks good.
This one looks unique. It doesn’t have any source code hints (as almost all others do).
Looks decent.
“Notpron is very similar to this game but I’ve tried to overcome most of the anoying things in notpron. First of all, this game has something like a “story”. It’s not just a lot of riddles one by one without any sense. Of course the story isn’t that outstanding, but it makes more fun if there is something that keeps all the riddles together. Soulmanager is more a kind of adventure with a lot of riddles in it.
Many people might say, this game is just another clone of notpron, but I guess if you take a deeper look into it you will see, that there are only little similarities. In both cases you have to find either a password or the name of the next page, but the riddles itself are in many cases completely different.“
“Put simply, Not Pron Revolutions is a riddle. Better yet, Not Pron Revolutions is a continuation of the ‘Not Pron” style internet riddle. Solving these riddles gave me some ideas of my own, so I decided to continue the riddle.”
As far as I’ve come this is a text based online riddle.
Has some quite difficult levels.
Brrrrr!!
“You need to find some sort of tactic to get the next level. I’ll tell you one thing, some levels you will go through like nothing because those particular levels may had something you did before in another riddle. All the rest of the levels…Don’t forget, this is the 3rd hardest riddle.“
I haven’t checked it out throughly.
The name says it all.
This one does look unique. But you need to register first.
This one looks cool. Give it a try
Looks fantastic. You definitely owe a visit.
Absolutely unique online riddle. Need I say more?
Amazing Web Race
Another really cool online riddle. The second race has started now. I urge you to visit.
This is the first race. This is the second race.
Text based online riddle
Has some thoughtful levels
Absolutely crazy flash based online riddle.
I love this one. Everything. The design, the friendly atmosphere. Unique style. What are you waiting for?
Online riddle with excellent unique levels
I liked this online riddle.
This online riddle also stands out in the crowd. Puzzles in the levels are in the form of various cryptos and similar things. If you like to solves cryptos then you can test yourself here.
A short (20 levels) crypto-based online riddle similar to Cryptos.
“No single soul will be able to solve this puzzle all by himself“… Hmmm, sounds challenging?
I liked this one. Some levels are really tricky.
Doesn’t look too original. Text based riddles.
An online riddle with “dark” themes.
A short (15 levels for now) but good online riddle.
This one looks different. All levels are somehow linked.
“On exploring the D’ni cavern and removing a pile of fallen rocks you find a linking BookUru D’ni adventure under the debris. It looks old. It is dangerous to use, anyway, you take the risk and link… You arrive safely but not without problems: something has happened with your Relto bookUru D’ni adventure. It doesn’t work, you have find out what to do before linking home. The ages are quite big and not without dead ends… “
“There are three types of puzzles on the BizFantast website, feel free to play any of them.
BizFantast Main Puzzle — The longest running and also most well-known puzzle of the site.The story takes place as you, as a programmer, came home from a late night of work only to find out that your computer has been hacked. As you continued to solve the mystery puzzles left behind by the hacker, you find yourself being involved in a big plot… BizFantast’s Main Puzzle has ended at level 79.
The Three Of A Kind Puzzle (3OAK) — 3OAK can be regarded as a prelude of the BizFantast Main Puzzle, it is specially designed for a team of 3 players. However, single players can take part in this puzzle with no problems at all (you just need to assume the role of 3 persons). 3OAK describes how the three main character: Hyde, Cobe, and Jane met and how did they end up falling in love with puzzles and riddles. It has ended at 8 levels (for each of the 3 characters, so that sums up to 24 levels) of formal puzzles and 5 levels of members-created-puzzles (yes, our players actually are very good riddles as well, so watch out.
BizFantast Treasure Hunt (TH) — TH is the latest puzzle to be added to the BizFantast family, as compared to its two predecessors, TH appears to be more open-ended — Storylines are kept at minimal and players can freely explore the island for puzzles and hidden sites. Hidden sites can be reached based on clues and traces left behind by the island’s discoverer, none other than the legendary trio of Hyde, Cobe and Jane. This puzzle has yet to end, it currently has about 25 puzzles, with more than half being hidden.“
I like BizFantast.
Another good one.
This one is excellent. Beware, even going through the first few levels is difficult.
This one is really good.
“Will you be able to rescue the old professor from his secret underground laboratory? Will you be able to find the stolen jewels that have been hidden somewhere inside the old Murdock Mansion? Will you be able to escape from the castle of the evil Baron Von Laden? If so, then you might even be able to complete at least the first seven episodes of Cybertrek and discover the true identity of the mysterious “Woman in Black!” (The first person to do so was David Barnett of Ann Arbor, MI. And he won: $500 in Cash!)“
Don’t forget to check out the other riddles (from the very same source) provided through the bottom of the page.
This one is in English and German at the same time. Graphics are sweet and there’s a story going along with the puzzles.
A good online riddle with many levels (about 130 and probably still expanding).
Not difficult but decent. Ideal if you don’t have much time and quickly solve a few levels.
Another good one. 100 levels with logical answers.
This is different. There’s no source code reading and all that stuff. Just point and click.
Like Odyssee, this is also point and click type with really really good graphics.
This one does look difficult. Couldn’t pass more than a few levels.
“Magic can only be achieved by daring your mind to exceed common knowledge. Therefore, only those who manage to survive my little test will be awarded as my apprentice. This task is made by riddles you must solve by typing the answer in the space provided. Pay attention to the title of the page and to the door. Use your reasoning and any tools you might think useful. May intelligence be with you…”
“This is not a “one-level-one-picture” game (some level doesn’t have any picture and some has more than one), and never needs any username/password to reach the next level. All you need is to find out the URL for next level (same as usual). CREATIVE is the keyword of this game. You must be more and more creative to go deep inside this game.“
“Your old friend Professor Adam Whitehead says he needs to see you. Urgently. There’s just one problem: when you get to his house, he has vanished. All you can find is an old puzzle box and some cryptic manuscripts.The challenge is clear. Can you reveal the sinister trail that leads to the professor? You’ll have to solve riddles and open the puzzle box to find him and crack the conspiracy. At your disposal is Windows Live Search, which will prove invaluable as you probe more deeply into the mystery.You’ll need to be smart. You’ll need to be cunning. Have you got the wits to penetrate to the heart of Conspiracy?”You need to register first.
Looks quite interesting.
Looks like another Notpron clone with quite difficult levels.
This one is really cool.
I’m ashamed to report that I just couldn’t pass the first level. Don’t forget to visit “The Second Door” (from the above link), too.
This is another difficult one.
Not too many levels.
Not much info about the side, just the puzzles.
Doesn’t look too original.
Inspired from Pirates of the Caribbean: Dead Man’s Chest, Volvo has made an online puzzle with the big prize being Volvo XC90. The contest has ended but you can still play it and see if you could finish it in time!
“You walk into a room and see a picture of a dog sitting by a tree with a plane flying overhead. You wonder, “What does this mean?”. Then it dawns on you, and you have yet another clue.
This is Challus, and the winner could take home $1,000,000 Dollars.
Challus is an internet adventure game which will take all of your knowledge, problem-solving ability and worldly experience to conquer. It is a twisting maze of puzzles, clues and spiraling paradigms that will leave you guessing every step of the way. Your goal is to solve the mystery set before you by means of finding clues and using them to discover the hidden literary phrase. By doing so, you could win $1,000,000 (US).
Somewhere in the world is a book, and in this book is a phrase written in one language that translates to another. You will search throughout the internet and gather information that will help lead you to your answer; but beware! Some pieces of information are false and are designed only to misguide you. If you pay close attention, you will be able to figure out which are real and which should be ignored.“
It’s clear that the people who made the Challus Riddled spend lots of time and on the levels and the story. A must-check-out. By the way, the $1,000,000 award is for US citizens only. Oh well, if I solve it I’ll apply for green card.
This one looks good. Beware, first you need to crack the first puzzle to login
This one is one of my favorite. Includes a challenge on programming also.
This one is completely about deciphering.
Well, you are probably wondering whether this list will ever finish, hope it will. Anyhow, there are some really difficult challenge type riddles. To solve those challenges you should be good at various programming languages (especially Java), a good knowledge of Assembly, exploiting, reverse engineering, security hacking, network hacking, in short you should be a at least so so hacker. So, you want to test your skills, here are a few of my selections:
That’s all folks. Wow, I’ve been writing this post for the last 12 hours. Having finished about 30 cups of coffee I should be wide awake but I’m still going to bed. C ya!
Share this:
Conceptos Básicos para el Desarrollo de Videojuegos 2D [Losersjuegos]
Conceptos Básicos para el Desarrollo de Videojuegos 2D [Losersjuegos]
Conceptos Básicos para el Desarrollo de Videojuegos 2D
Créditos
-
Autor: Roberto Albornoz Figueroa (RCAF)
-
Fecha: 10 de Enero del 2007
Introducción
Una de las razones para comenzar a desarrollar primero videojuegos 2D, es que los conceptos involucrados son mucho más simples y fáciles de asimilar.
Además lo más probable es que varios de estos conceptos ya sean conocidos por quienes lleven un tiempo programando o trabajando con computadores.
Otra ventaja, es que obtendremos resultados más rápidos, a diferencia del desarrollo de videojuegos 3D, que involucra conocer tópicos más avanzados de matemáticas y de programación. Pero tampoco hay que asustarse, si queremos luego dar el próximo paso a las 3D, ya que hay que recordar siempre que todo lo podemos estudiar y aprender, nada es imposible.
En las próximas páginas conoceremos la terminología básica, que nos hará comprender de mejor forma los conceptos gráficos involucrados en un videojuego.
Conceptos básicos
Partiremos hablando del dispositivo externo más común y que todos ya conocemos, el Monitor. Este dispositivo de salida es uno de los más importantes que posee nuestro computador, ya que nos permite visualizar la información con la que estamos trabajando.
El monitor se conecta al computador a través de una Tarjeta de video. Esta tarjeta es un circuito integrado que nos permite transformar las señales digitales con las que trabaja, en señales análogas para que puedan ser visualizadas en el monitor. Este proceso es realizado a través de un conversor analógico-digital que toma la información que se encuentra en la memoria de video y luego la lleva al monitor. Este conversor se conoce como RAMDAC (Random Access Memory Digital Analog Converter).
La superficie de la pantalla de un monitor es fluorescente y esta compuesta por líneas horizontales. El hardware del monitor actualiza de arriba hacia abajo cada una de estas líneas. Para dibujar una imagen completa el monitor lo hace a una cierta velocidad, a esto se le conoce como Frecuencia de refrescado y se mide en Hz. Los valores frecuentes son de 60/70 Hz, incluso frecuencias mayores. Es preferible que supere los 70 Hz para que la vista no se canse tanto y no aparezcan los molestos parpadeos (flickering). El valor de la frecuencia depende de la resolución usada.
El tiempo que existe entre dos refrescos de pantalla se conoce como Vertical retrace, y corresponde al momento en que el haz de electrones del monitor regresa a la parte superior de la pantalla.
El concepto más básico usado en la programación gráfica es el de Pixel, significa Picture Element, es decir, un elemento de una imagen que corresponde a la unidad mínima que esta puede contener. También lo podríamos definir como un simple punto que es parte de una imagen determinada, que podemos mostrar en pantalla y que tiene asociado un color.
Esta imagen que está formada por un arreglo ordenado de pixeles en forma de grilla o cuadricula, se conoce con el nombre de Bitmap. Un bitmap posee dimensiones: ancho y alto (que se miden en número de pixeles) y además tiene asociado un formato, que puede ser alguno de los ya conocidos: bmp, png, jpg, gif, etc.
La diferencia entre formatos gráficos, viene dada por algunos parámetros que esperamos tener, como la calidad o tamaño del archivo. Por ejemplo si queremos mantener un equilibrio en tamaño/calidad, un formato que se ajusta a estos parámetros son los formatos jpg o png, no así el formato bmp, que casi no posee ningún tipo de compresión.
Una imagen tiene otras características, aparte de sus dimensiones, una de estas es la Profundidad de color. Esto corresponde al número de bits necesarios para poder representar un color, es conocido por las siglas BPP (Bits Per Pixel).
El número de bits que podemos utilizar es de 1, 8, 16, 24 o 32. Con este dato podemos saber cual será el número máximo de colores que puede representar una imagen en pantalla. El número de combinaciones se calcula mediante la siguiente fórmula:
Cantidad de Colores = 2bpp
Ahora podemos resumir en una tabla cada una de estas combinaciones:
| Número de bits | Cantidad de colores | Nombre |
|---|---|---|
| 1 | 2 | Monocromo |
| 8 | 256 | Indexado |
| 16 | 65.536 | Color de alta densidad (High Color) |
| 24 | 16.777.216 | Color real (True Color) |
| 32 | 4.294.967.296 | Color real (True Color) |
El color se representa en pantalla utilizando el Modelo RGB (Red, Green, Blue), es decir, para formar un color necesitamos conocer la intensidad de estos colores primarios. Cada una de estas intensidades corresponde a un número que se encuentra en el rango: 0 a 255.
Cuando se utilizan 8 bits para mostrar un pixel, como ya sabemos, tenemos como máximo 256 colores, pero no se representan directamente utilizando las intensidades RGB, sino que se mantiene una Paleta o Colormap (un arreglo de tamaño igual a 256 bytes), donde cada posición apunta a un color con las 3 componentes (Rojo, Verde, Azul). Esta paleta puede ser modificada para implementar algunos efectos, ya que si cambiamos por ejemplo las componentes de un color, se verán modificados inmediatamente todos los pixeles que hagan referencia a dicho color. El modo de 8 bits, se conoce también como Modo indexado y ofrece un alto rendimiento, pero como ya sabemos con la desventaja de tener pocos colores disponibles.
Para profundidades más altas, esta paleta ya no existe, y esto nos permite tener un abanico más grande de colores. En la actualidad ya no usamos modos de video a 8 bits, normalmente usaremos 16 o 32, siendo el modo de 32 bits el más eficiente, ya que los procesadores de 32 bits trabajan con datos empaquetados en bloques de 4 bytes.
Todas las componentes que forman un color se empaquetan en un entero, donde se asigna una cantidad fija de bits para cada una de ellas.
El orden en que se empaquetan las componentes de un color, depende de la arquitectura en la que se esté trabajando, podemos usar el formato RGB (Big Endian) o BGR (Little Endian).
En arquitecturas x86 (Windows, Linux) se usa el formato Little Endian (el byte de menor peso se almacena en la dirección más baja de memoria y el byte de mayor peso en la más alta) y en PowerPC (Mac), Big Endian (el byte de mayor peso se almacena en la dirección más baja de memoria y el byte de menor peso en la dirección más alta).
La cantidad de bits usada para cada componente de un pixel, la podemos ver resumida en la siguiente tabla:
| 8 bits | 16 bits | 24 bits | 32 bits |
|---|---|---|---|
| 1:5:5:5 | 8:8:8 | 8:8:8:8 | |
| Se utiliza una paleta, donde cada posición apunta a un color que posee las intensidades RGB. | El primer bit indica la transparencia, si es 0, la transparencia será total, si es 1 habrá opacidad total. | 8 bits para cada corresponde al canal componente RGB | El primer byte 8 bits para cada corresponde al canal componente RGB alpha (componente que almacena el grado de transparencia). Los últimos 3 bytes son las componentes RGB del color. |
| 5:6:5 | |||
| 5 bits para componente Red, 6 bits para componente Green, 5 bits para componente Blue | |||
Anteriormente mencionamos que una imagen tiene dimensiones y a esta dimensión (ancho y alto) también se le conoce como Resolución. La resolución nos permite conocer cuanto detalle existe en una imagen, esto quiere decir que a mayor resolución obtendremos mayor calidad. La resolución no solo se aplica a una imagen, sino que también a la pantalla o monitor. Existen algunas resoluciones estándar:
-
320×200
-
320×240
-
640×480
-
800×600
-
1024×768
-
1152×864
-
1280×720
-
Etc.
El Modo de video es la unión de la resolución con la profundidad de color y se denota como AnchoxAltoxBpp.
Por ejemplo podríamos trabajar con los siguientes modos de video:
-
640x480x8 (640 pixeles de ancho x 480 pixeles de alto a 8 bits por pixel)
-
640x480x16 (640 pixeles de ancho x 480 pixeles de alto a 16 bits por pixel)
-
800x600x32 (800 pixeles de ancho x 600 pixeles de alto a 32 bits por pixel)
-
Etc.
La elección de un modo de video u otro, es un factor importante a la hora de comenzar a desarrollar un videojuego, ya que con estos datos sabremos cual será el flujo de información (medido en bytes) que existirá. Además las imágenes que se muestren en pantalla deberán tener algún tamaño determinado, que debe ajustarse a la resolución elegida.
Por ejemplo supongamos que estamos trabajando con el siguiente modo de video, 800x600x32 y queremos conocer cuando memoria ocupa una imagen con las mismas dimensiones que la resolución seleccionada, entonces el tamaño que ocupará será de:
Tamaño = 800 x 600 x 4 = 1.920.000 bytes = 1.83 Mb
Multiplicamos por 4, ya que 32/8 = 4 bytes, es decir para mostrar un solo color en pantalla o píxel necesitamos 4 bytes.
El resultado anterior no es un tamaño despreciable, imaginemos el tamaño que podríamos obtener a resoluciones mayores.
En los primeros juegos que aparecieron para PC, se utilizaban resoluciones muy bajas como 320×200 (también conocido como modo 13h) o 320×240 (modo x) y a 8 bits por píxel, o sea como ya sabemos disponíamos de un máximo de 256 colores.
A medida que pasaron los años se empezaron a utilizar resoluciones de 640×480 o 800×600 y a profundidades de color más altas, de 16 o 32 bits, todo esto gracias a que aumentaron las capacidades de las tarjetas de video.
Hoy en día, en la mayoría de los juegos tenemos la posibilidad de elegir el modo de video que mejor se adapte a nuestro equipo. Existen algunos casos típicos, como cuando queremos tener el mejor rendimiento en nuestro videojuego, bajamos la resolución al mínimo o a una resolución intermedia. Al contrario, cuando disponemos de un buen equipo y una buena tarjeta de video, lo más probable es que seleccionemos un modo de video más alto, para disfrutar de unos gráficos de mejor calidad.
Otro concepto importantísimo es el de Video RAM, básicamente es la memoria o buffer que se encuentra en la tarjeta de video. Toda tarjeta de video tiene como mínimo una memoria, un microprocesador, una caché y un bus de datos, que normalmente es AGP.
En la Video RAM se almacenan los datos que serán mostrados posteriormente en la pantalla, estos datos pueden ser texturas, vértices, etc.
Para el desarrollo de videojuegos 2D, esto se simplifica ya que solo tendremos en la memoria cada uno de los píxeles que forman la imagen.
En el caso de juegos 3D, en la memoria se pueden almacenar algunas rutinas o procedimientos que ejecutan algunas instrucciones para generar normalmente algún efecto, a estas rutinas se les conoce como Shaders.
Además, el microprocesador también conocido como GPU (Graphics Processing Unit), se comunica con la memoria a través de un bus interno, ejecuta instrucciones y actualiza el caché de instrucciones, de texturas y geometría. El proceso de llenar la memoria de video con datos se hace posible a la existencia de la GPU, el cual lo hace a través de un bus de puerto acelerado, conocido como AGP. Después el monitor lee periódicamente desde el buffer de video (Video RAM) los datos y refresca la pantalla, lo que nos permite ver una imagen en el monitor. No importa la velocidad con que se modifiquen los datos del buffer, el monitor no actualizará nada hasta el próximo refresco.
Técnicas 2D
Ahora continuaremos viendo otros conceptos, que llamaremos técnicas 2D. Estos términos son aplicados básicamente al desarrollo de aplicaciones 2D y algunos son la base para las 3D.
Sprites
Un sprite es cualquier objeto que aparece en nuestro videojuego. Normalmente tiene asociado algunos atributos, siendo los más básicos una imagen y una posición.
Los sprites pueden ser estáticos o dinámicos. Al hablar de sprite estático, nos referimos a un objeto que no cambiará su posición durante el videojuego, por ejemplo la imagen de una llama, piedra, etc. En cambio un sprite dinámico, es aquel que tendrá algún tipo de movimiento, el cual puede ser realizado por el usuario o por el computador, por ejemplo el sprite de un jugador o de los enemigos.
Representar un sprite en memoria puede ser realizado de muchísimas formas, y puede depender mucho del gusto del programador y su experiencia. Normalmente se almacenan sus atributos en una estructura o clase.
Animación de Sprites
Esto es bastante simple, aquí aparece el concepto de frame o cuadro, que corresponde a una de las imágenes que forman la animación completa de un sprite. Podemos pensar en una secuencia de imágenes que son dibujadas rápidamente, que engañan al ojo humano dando el efecto de un movimiento fluido. Es el mismo método que se utiliza para los dibujos animados.
El número de frames dibujados en un periodo de tiempo se conoce como frame rate (tasa de frames), siendo un aspecto muy importante en la animación, ya que de esto depende la calidad de animación que obtendremos. Si cada uno de los frames se muestra muy rápido o muy lento, la ilusión del movimiento se perderá y el usuario verá cada uno de los frames como una imagen separada.
Una animación muy común puede ser la de un personaje caminando, saltando, o realizando cualquier otra acción.
Esto también debe ser representado de alguna forma inteligente en nuestro videojuego, utilizando algún tipo de estructura de datos adecuada, como un vector o lista.
Normalmente el sprite tendrá como atributo una lista de animaciones (las acciones del personaje, enemigo, etc.), donde cada animación corresponderá a otra lista con cada uno de los frames.
La totalidad de los frames que forman un personaje, suele almacenarse en un solo archivo de imagen, a esto se le llama sprite sheet, es decir, una imagen donde tenemos secuencias de frames para las diferentes acciones que puede realizar un personaje en un videojuego. La siguiente imagen lo ilustra claramente.
Transparencias: Color Keys
Cuando mostramos una imagen en pantalla, esta siempre se verá como un cuadrado o rectángulo, pero sabemos que dentro tiene la representación de un objeto, personaje, enemigo, ítem, etc. Al dibujar esta imagen queremos ver solo la forma que representa, para esto debemos elegir algún color transparente, pintar con ese color las zonas que no queremos que aparezcan y luego dibujar la imagen ignorando dicho color.
Normalmente se utiliza el color magenta (255, 0, 255), como color de transparencia, ya que es poco probable que se encuentre en una imagen.
Dependiendo de la API gráfica que utilicemos para desarrollar nuestro videojuego, tendremos una función que realice esta tarea, la de descartar un color determinado al dibujar la imagen.
Pero no solo usar un color como el magenta es la solución para no ver una imagen en su forma original, también podemos hacer uso de las propiedades del formato gráfico PNG (Portable Network Graphics), ya que este formato guarda un canal alpha con las partes transparentes de la imagen.
Transparencias: Máscara
Existe otro método para ignorar un color en una imagen, el uso de una máscara que se antepone al bitmap original, es decir, debemos tener otro bitmap que indica cuales son los pixeles transparentes. El color que indica la transparencia es el negro, y el color blanco la figura que queremos mostrar. Por lo tanto, al dibujar la imagen, recorreremos cada pixel de la máscara, y si este color es blanco, mostraremos el pixel del bitmap original que se encuentra en esa posición.
Transformaciones
Cuando dibujamos un sprite en pantalla, tenemos la posibilidad de aplicar algunas transformaciones, las más usadas son las siguientes:
Transformaciones: Translation
Esta es la transformación más simple, corresponde a cambiar la posición del sprite para luego dibujarla en otro lugar de la pantalla, dando el efecto de movimiento, sin duda lo más usado en cualquier videojuego. Y se resume en asignar una nueva posición a las coordenadas (x, y) del sprite.
Por ejemplo si las variables x e y son las coordenadas de la esquina superior izquierda del sprite, y vx, vy las velocidades en cada eje, con una simple suma en cada componente cambiaremos la posición del sprite.
x = x + vx; y = y + vy;
Transformaciones: Rotation
Otra transformación típica, que consiste en girar el sprite un número determinado de grados. Se usa para mostrar objetos vistos desde otro ángulo, por ejemplo en el videojuego Micro Machines, cuando doblamos cambiamos el ángulo del auto y luego este cambio lo vemos reflejado en la pantalla gracias a la rotación.
También lo podríamos usar para realizar efectos para una presentación, efectos durante el videojuego, etc. Además al rotar una imagen debemos saber con respecto a que punto lo haremos (pivote), por ejemplo en la siguiente imagen realizamos unas rotaciones con respecto al centro de la imagen.
Transformaciones: Scaling
Otra transformación muy usada en algunos videojuegos, consiste en escalar una imagen, es decir, cambiar su tamaño (normalmente de forma proporcional), ya sea un aumento o una disminución. Se puede usar para dar un efecto de profundidad, es decir, si el objeto está más alejado de nosotros lo dibujaremos más pequeño, en cambio si está muy cerca de nosotros, lo dibujaremos de un tamaño más grande.
Suele usarse también en conjunto con la rotación para realizar algunos efectos.
Al utilizar esta transformación, hablamos de scale factor, es decir, un valor que indica el porcentaje de escalado, donde el valor 1 corresponde al tamaño normal.
En la imagen anterior nos damos cuenta que al aumentar su tamaño, se produce un efecto no deseado en los bordes de la imagen, conocido como aliasing, es decir, las líneas o curvas que forman los bordes de la imagen se ven discontinuas (en forma de escalera). Para esto existe una solución, el antialiasing, una técnica que permite suavizar todos los bordes y así disminuir el efecto de escalera. En toda API gráfica encontraremos una función que realice esta tarea.
Transformaciones: Flipping
El flipping es un tipo de transformación especial para realizar algunos efectos.
Básicamente existen dos tipos, Vertical Flip que corresponde al efecto que se produce cuando se refleja un objeto en el agua y Horizontal Flip que corresponde al reflejo de un objeto en un espejo. Con la siguiente imagen quedará mucho más claro.
Alpha blending
Alpha blending o mezclado alpha es una técnica para crear transparencias en una imagen con respecto al fondo. Para lograr esto se agrega un cuarto canal a un color, llamado canal alpha.
Ahora los colores de una imagen se representarán como RGBA. Cada valor alfa de un pixel representa su grado de opacidad, donde un valor cero indica un 100% de transparencia, y a medida que aumentamos su valor se irá haciendo más opaco. El rango va desde 0 a 255.
Para crear un canal alpha en una imagen, tenemos dos opciones, una es almacenar esta información con algún software de edición de imágenes (Photoshop) y en un formato apropiado. (PNG, Portable Network Graphics), o hacerlo posteriormente en el mismo videojuego, utilizando alguna función de la API que nos permita setear un grado de transparencia para la imagen.
El funcionamiento de esta técnica es relativamente simple, ya que se realiza una media ponderada de cada pixel que forma la imagen y los pixeles que conforman el fondo.
Por ejemplo supongamos que tenemos un color de una imagen, el (100, 40, 50) con un valor alfa de 90, y dibujaremos este pixel sobre otro con el valor (70, 100, 80). Con estos datos el pixel resultante tomara un 35% del primer color y un 65% del segundo.
Entonces, multiplicaremos cada componente del pixel por el porcentaje que le corresponde y luego sumaremos cada unas de las componentes, obteniendo así el pixel resultante.
-
Pixel1: (100, 40, 50) / *0.35
-
Pixel2: (70, 100, 80) / *0.65
-
Pixel resultante: (100*0.35+70*0.65, 40*0.35+100*0.65, 50*0.35+80*0.65) = (81, 79, 70)
El cálculo anterior se debe hacer para cada pixel que forma la imagen, lo cual afecta al rendimiento, pero hoy en día todas las tarjetas de video realizan este tipo de operaciones vía hardware.
Esta técnica se puede aplicar a un bitmap completo o solo a un grupo de pixeles de la imagen. Es utilizado para hacer una variedad de efectos en videojuegos, por ejemplo puede usarse para dar un carácter de fantasma a cierto personaje, para hacer un menú transparente, escribir texto sobre un rectángulo transparente, etc.
Screen Buffer
El screen buffer es simplemente un área de la memoria de video, donde podemos dibujar algo que se mostrará en la pantalla. Si queremos mostrar un pixel, debemos tener un puntero a la dirección de memoria de video y calcular la posición (offset, desplazamiento) donde queremos dibujar el pixel y luego en esa posición copiar el byte o los bytes que representan el color.
Supongamos que estamos trabajando en el siguiente modo de video: 640x480x24, es decir, tenemos 640 pixeles de ancho, 480 pixeles de alto, y cada pixel ocupa 3 bytes, entonces:
int color; // Aca almacenamos el color del pixel int * buffer; // Screen buffer int x, y; // Coordenadas del punto // Calculamos el desplazamiento int desp = y * 640 + x * 3; // Colocamos un pixel en la posicion (x, y) buffer[desp] = color;
En el ejemplo anterior no mostramos como se calcula el valor numérico del color, para hacerlo hay que hacer uso de operaciones a nivel de bits y desplazamientos, y esto depende de la profundidad de bits que se este usando. Supongamos que el color tiene la siguientes componentes (200, 150, 60) y estamos trabajando a 24 bits. Si recordamos la tabla de componentes RGB, para 24 bits tenemos que cada componente ocupa 8 bits, así que el cálculo es el siguiente:
int r = 200; int g = 150; int b = 60; Color = (r << 16) | (g << 8) | b;
Es decir, gracias a los desplazamientos colocamos la componente en su posición correcta y luego sumamos todos estos valores con el operador OR a nivel de bits.
Para calcular la posición de memoria donde debe colocarse el pixel, la posición “y” es multiplicada por el ancho en pixeles de la resolución elegida, es decir, con esto nos movemos “y” líneas por la pantalla, luego en esa posición debemos movernos unos ciertos bytes hasta llegar a la posición “x” que buscamos. Para eso sumamos la posición de la coordenada “x” multiplicada por el tamaño del pixel en bytes, en este caso como estamos usando una profundidad de color de 24 bits, se debe multiplicar por 3. Luego asignamos el color al buffer justo en la posición que calculamos anteriormente.
En general esta es la forma elemental para dibujar un pixel en pantalla. Para dibujar una imagen completa debemos recorrer cada punto de la imagen, calcular la posición y asignar el color a dicha posición. Para nuestra suerte, todas las APIs gráficas traen funciones para crear un color, como lo hicimos anteriormente, y funciones para dibujar una imagen completa en pantalla.
Surface
Este término es la base de la programación 2D. Básicamente es una zona de memoria que puede estar en la RAM o Video RAM y es usada para almacenar un bitmap. Si queremos ver esto en el ámbito de la programación, una Surface es una estructura o clase que tiene como mínimo las misma propiedades de un archivo de imagen, es decir, tendrá un arreglo lineal de datos que contiene cada uno de los pixeles que forma la imagen y además el ancho y alto del bitmap. Dependiendo de la biblioteca gráfica que se use, pueden existir más atributos.
Una Surface se podría confundir con el concepto de Sprite, pero en general un Sprite tiene como atributo al menos una Surface.
Blitting
El blitting es una operación para transferir un bloque de bytes (surface) de un sector de la memoria a otra. Viene del termino Blit (Block Image Transfer, Transferencia de Imagen por Bloque) y es una forma de renderizar (dibujar) sprites con o sin transparencias sobre un fondo. Esta técnica puede ser acelerada por hardware, lo cual ayuda a incrementar bastante el rendimiento, de hecho esta operación es una de las más críticas en cualquier videojuego y es la que más usaremos.
Gracias al blitting podemos armar una escena en un videojuego, por ejemplo en la siguiente imagen vemos que a partir de dos superficies, una con los sprites de los personajes y otra con un fondo, armamos a través de blits una tercera superficie que contiene la escena final.
En una operación de blitting, podemos especificar en que posición de la superficie destino queremos copiar la superficie origen, incluso que parte de la superficie origen queremos copiar. De esta forma podemos colocar en cualquier posición, superficies dentro de otras. La forma de especificar las superficies origen/destino y sus posiciones, depende de la API gráfica que se esté utilizando. Siempre se nos proveerá de una función de blitting, ya que todas las bibliotecas disponen de al menos una.
Double Buffering
Para entender esta técnica, antes que todo debemos saber que el monitor ya sea CRT (Tubo de rayos catódicos) o LCD (Pantalla de cristal líquido), no dibuja la imagen en la pantalla instantáneamente, sino que lo hace pixel a pixel, partiendo desde la esquina superior izquierda hasta la esquina inferior derecha. Esto se realiza a una velocidad bastante rápida que el ojo humano no percibe, y a este tiempo, como vimos al principio, se le conoce como frecuencia de refrescado.
Cuando queremos mostrar una imagen en la pantalla, como ya sabemos colocamos los pixeles de la imagen en la memoria de video y durante el tiempo de refrescado el monitor leerá la información que hay en la Video RAM y la mostrará en la pantalla.
Ahora imaginemos que queremos mover un objeto por la pantalla, los pasos son simples, primero dibujamos la imagen en una posición, luego la borramos, y la dibujamos en la nueva posición, pero aquí aparecen algunos problemas, si a la mitad del refrescado cambiamos la imagen en la memoria de video, el monitor ahora obtendrá otra información de la imagen y probablemente la parte superior e inferior de la imagen no correspondan, es decir, veremos imágenes superpuestas y además un molesto parpadeo. Una posible solución a esto, es esperar a que el monitor termine de refrescar la pantalla, para luego escribir en la Video RAM la nueva imagen. La mayoría de las APIs gráficas disponen de alguna función que espera el refrescado del monitor, evitando así el parpadeo y la superposición de imágenes, pero no del todo.
Para evitar totalmente el parpadeo, usamos esta técnica llamada Double Buffering, que consiste en tener dos áreas de memoria en la RAM (o Video RAM). Una de estas zonas se conoce como front-buffer, y corresponde a la que se muestra actualmente en pantalla y también tenemos el back-buffer, que es donde dibujamos los objetos que formarán la escena final. Estas áreas de memoria deben tener las mismas dimensiones del modo de video seleccionado.
Ahora tenemos dos opciones para esta técnica. Si el back-buffer se encuentre en la RAM, deberemos copiar todo el contenido al front-buffer, es decir, a la memoria de video para que veamos los cambios en el monitor. Para esto realizaremos un proceso de blitting, que dependiendo del modo de video usado, puede ser un poco costoso.
La otra posibilidad es que el back-buffer también se encuentre en la Video RAM, de ser así, no tendremos que realizar un blitting, sino que haremos algo más simple, intercambiaremos estas dos zonas de memoria, lo cual tiene un costo bastante bajo. A este proceso de intercambio del back-buffer con el front-buffer, se le conoce con el nombre de Page Flipping, y es lo que se suele usar hoy en día, ya que disponemos de más RAM en las tarjetas de video. Además la función de Page Flipping, está implementada en todas las APIs gráficas, así que solo deberemos llamarla en el momento adecuado.
Dirty Rectangles
Esta técnica es una forma de optimizar la anterior. Con Double Buffering constantemente estamos volcando el contenido completo de una zona de memoria a otra, pero puede haber ocasiones donde no este sucediendo ningún cambio en pantalla, o tal vez solo haya cambiado una pequeña parte de esta. Es aquí donde aparece la técnica, Dirty Rectangles (rectángulos sucios) y su funcionamiento es bastante simple. Copiaremos a la Video RAM solo las áreas de la pantalla que han cambiado, por lo tanto, cada vez que algún sprite cambie su posición, copiaremos a la memoria de video el área de un rectángulo que rodee al sprite (incluyendo el área donde se encontraba antes) y la colocaremos justo en las mismas coordenadas en la Video RAM. Pero no siempre es recomendable utilizar esta técnica, ya que podemos tener demasiados sprites moviéndose por la pantalla, y ya no sería óptimo estar copiando cada rectángulo a la Video RAM, ya que sería lo mismo que copiar la pantalla completa, en un caso así conviene solo usar la técnica Double Buffering.
Clipping
El clipping es un técnica bien sencilla, consiste en definir una área de recorte para la pantalla, es decir, todo lo que se dibuje fuera de esta área será ignorado y no se mostrará en pantalla. Normalmente esta área de recorte coincide con la resolución elegida para el videojuego, pero puede ser cualquier otra.
Sistema de coordenadas 2D
Es importante saber que cuando dibujamos algo en pantalla, siempre tendremos que informar la posición en la cual dibujaremos el objeto. Por defecto la posición de un objeto se encuentra en la esquina superior izquierda, pero algunos prefieren usar como punto de anclaje el centro, y en general puede ser cualquier otro punto. Calcular el centro del punto es tan simple como sumar a la posición x, la mitad del ancho del objeto y a la posición y, la mitad de la altura del objeto.
Nosotros estamos acostumbrados a trabajar en el cuadrante I del plano cartesiano, donde las coordenadas del eje “x” crecen hacia la derecha y las coordenadas del eje “y” crecen hacia arriba, pero al trabajar con gráficos en el computador, esto es relativamente distinto, ya que el eje y se invierte, es decir, ahora el mundo está al revés, las coordenadas en el eje “y” crecerán hacia abajo.
En la siguiente imagen podemos ver el plano cartesiano en su forma normal versus el plano cartesiano utilizado en la programación gráfica.
Sincronización en los videojuegos
Lo ideal en cualquier videojuego, es que todos los objetos se muevan a la misma velocidad, independiente de la velocidad del computador donde se ejecute. Si no nos preocupamos por esto, y ejecutamos nuestro videojuego en un computador antiguo, por ejemplo, en un Pentium de 100 Mhz, probablemente el videojuego se vea muy lento, en cambio si lo ejecutamos en un computador con un procesador de última generación, un Pentium IV a 2.4 Ghz, se verá tan rápido que será imposible jugar.
Para solucionar este problema, disponemos de dos métodos.
Sincronización por Framerate
El primer método, consiste en sincronizar el framerate, también conocido como FPS o Frames per Second (Frames por segundo). Al hablar de FPS, nos referimos a la frecuencia con que se ejecuta el ciclo principal de un videojuego en un segundo. A mayor cantidad de FPS obtendremos una mayor fluidez en las animaciones.
En el cine se considera que una velocidad de 24 FPS es suficiente para que el ojo humano perciba una animación fluida, pero en los videojuegos esta cantidad es demasiado baja. Valores adecuados son sobre 60 o 100 FPS.
El método es bastante sencillo, y lo primero que debemos hacer cuando comienza el ciclo del videojuego, es obtener el tiempo transcurrido hasta ese momento, que normalmente se mide en milisegundos. Luego procesamos lo relacionado al videojuego, ya sea entrada, IA, lógica del juego, detección de colisiones, dibujo de gráficos, etc. y antes de terminar el ciclo, creamos otro loop en el cual vamos obteniendo el tiempo transcurrido hasta ese momento, calculamos la diferencia de tiempo y verificamos si es menor a los FPS que buscamos. De esta forma cada vez que ejecutemos el programa en una máquina diferente, el programa esperará el tiempo adecuado para obtener los FPS.
Utilizando este método, en computadores más rápidos se verá más fluido, pero si lo ejecutamos en una máquina con un procesador mucho más antiguo del que usamos para desarrollarlo, lo más probable es que se vea bastante lento.
Claro, no todo podía ser perfecto, pero es por eso que los videojuegos piden algunos requerimientos mínimos.
Ahora veamos el código para este método de sincronización:
int t1, t2; // Almacena los tiempos inicial y final int fps = 100; while (! salir) { t1 = GetTime(); // Obtenemos tiempo inicial // Hacemos algo ... do { t2 = GetTime(); // Obtenemos tiempo final } while ((t2 - t1) <= 1000/fps); // Si llegamos a este punto es porque ya paso el tiempo de espera // para que se cumpla el tiempo esperado }
Sincronización por Tiempo
El segundo método consiste en sincronizar en base al tiempo. En este método no importa el framerate que posea el videojuego, pero aun así los objetos se moverán a la misma velocidad en todas las máquinas.
Básicamente, lo que debemos hacer es calcular la posición de un objeto de una forma distinta, en el método anterior si queríamos mover un objeto 5 pixeles por frame haríamos lo siguiente:
x = x + 5;
Y para mantener siempre la misma velocidad en varios equipos, esperaríamos un tiempo determinado al final del ciclo del videojuego.
Lo que haremos ahora será obtener el tiempo que ha transcurrido hasta el momento de calcular la nueva posición del objeto, y multiplicar ese tiempo por la velocidad. Es decir:
x = x + vx*dt;
Ahora la variable vx, que almacena la velocidad, no será entera (int) sino que un numero flotante (float), ya que ahora lo multiplicaremos por un delta t de tiempo.
Imaginemos ahora que vx tiene el valor 0.005, y el ciclo demora 1 segundo en ejecutarse, el nuevo incremento será de:
x = x + 0.005*1000 x=x+5
Ahora el incremento es menor, claro, debe ser así porque en tan solo 10 milisegundos se mueve 0.05 pixeles, entonces cuando pase 1 segundo se habrá movido:
(1000/10)*0.05 = 100*0.05 = 5 pixeles
Justamente lo que esperábamos, ahora no importan los FPS que existan en el videojuego, basándonos en el tiempo, los objetos se moverán a la misma velocidad en cualquier equipo.
Veamos esto en un simple código:
int t_new, t_old; // Almacena los tiempos actual y anterior int dt; // Diferencia de tiempos t_new = GetTime(); // Tiempo actual while(!salir) { t_old = t_new; // El tiempo anterior // Hacemos algo ... t_new = GetTime(); // Obtenemos el tiempo actual dt = t_new - t_old // Calculamos la diferencia de tiempos x = x + vx*dt // Calculamos la nueva posicion // Dibujamos objetos ... }
Este método se usa bastante en videojuegos 3D, ya que el framerate varía mucho en cada ciclo, dependiendo de la cantidad de objetos que se deban renderizar.
Pero este método también tiene su desventaja, a pesar de que los objetos se mueven siempre a la misma velocidad, en un computador más lento, el desplazamiento no se verá fluidamente. Esto se aprecia en el ejemplo que ya vimos, en el caso extremo de demorarse 1 segundo cada ciclo, cada vez que se deba mover un objeto, este aparecerá 5 pixeles más a la derecha, produciéndose un salto muy notorio. En computadores aun más lentos, se comenzará a ver un parpadeo en el desplazamiento de los objetos.
Pero como ya dijimos nuestro videojuego siempre tendrá unos requerimientos mínimos y tendremos que seleccionar el método que más nos acomode. Pero claramente el primer método, sincronización por framerate, es el más simple y el más extendido.
Resumen
Hemos aprendido o repasado varios conceptos, que nos ayudarán a comprender mejor la programación gráfica que se usa en los videojuegos 2D.
Todos estos conceptos se pueden aplicar a cualquier biblioteca gráfica, muchas de las cosas que vimos ya vienen implementadas, como por ejemplo setear un modo de video, obtener un color, realizar operaciones de blitting, efectos de alpha blending, usar transparencias por color keys, transformaciones como rotación, escalado, traslación, page flipping, etc., por lo tanto no será necesario que escribamos código para esto, pero conviene conocer su funcionamiento.
Share this:
Pygame: Introducción a Pygame de Python [Losersjuegos]
Pygame: Introducción a Pygame de Python [Losersjuegos]
Pygame: Introducción a Pygame de Python
Créditos
-
Autor: Pete Shinners
-
Traducido por: Daniela López Seco
-
Fecha: Sábado 20 de Enero del 2007
Introducción
Este artículo es una introducción a la biblioteca Pygame para programadores Python. La versión original apareció en PyZine, volumen 1 tercera edición. Esta versión contiene revisiones menores, para crear un mejor artículo. Pygame es una biblioteca de extensión de Python que encapsula la funcionalidad de la biblioteca SDL y sus ayudantes.
Historia
Pygame comenzó en el verano del 2000. Siendo un programador C por muchos años, descubrí Python y SDL casi al mismo tiempo. Usted ya está familiarizado con Python, que estaba en su versión 1.5.2, por lo tanto podría necesitar una introducción a SDL, que significa Simple Directmedia Layer. Creada por Sam Lantinga, es una biblioteca multiplataforma para controlar multimedia, comparable a DirectX. A sido usada para cientos de juegos comerciales y de código abierto.
Estaba impresionado por lo nítidos y directos que eran ambos proyectos y no pasó mucho tiempo antes que me diera cuenta que mezclar Python y SDL era una propuesta interesante.
Descubrí un pequeño proyecto ya en curso con exactamente la misma idea, PySDL. Creada por Mark Baker, PySDL era una implementación directa de SDL como una extensión de Python. La interfase era mas limpia que una envoltura genérica SWIG, pero forzaba un “estilo C” al código. La muerte repentina de PySDL se incito a empezar un nuevo proyecto por mi cuenta.
Quería generar un proyecto que realmente tomara ventaja de Python. Mi meta era hacer muy simple realizar las cosas sencillas, y directo para hacer las cosas difíciles. Pygame empezó en Octubre del 2000. Seis meses mas tarde la versión 1.0 de Pygame fue lanzado.
Gusto
Creo que la mejor forma de entender una nueva biblioteca es ir directamente a un ejemplo. En las etapas tempranas de Pygame desarrollé una animación de una pelota que rebotaba con 7 lineas de código. Miremos una versión mas amigable de la misma cosa.
Debería ser lo suficientemente simple para seguirlo:
Código fuente: ball.py
1. import sys, pygame 2. pygame.init() 3. 4. size = width, height = 320, 240 5. speed = [2, 2] 6. black = 0, 0, 0 7. 8. screen = pygame.display.set_mode(size) 9. 10. ball = pygame.image.load("ball.png") 11. ballrect = ball.get_rect() 12. 13. while 1: 14. 15. for event in pygame.event.get(): 16. 17. if event.type == pygame.QUIT: 18. sys.exit() 19. 20. ballrect = ballrect.move(speed) 21. 22. if ballrect.left < 0 or ballrect.right > width: 23. speed[0] = -speed[0] 24. 25. if ballrect.top < 0 or ballrect.bottom > height: 26. speed[1] = -speed[1] 27. 28. screen.fill(black) 29. screen.blit(ball, ballrect) 30. pygame.display.flip()
Para probar este programa simplemente baje los archivos ball.py y ball.png a su computadora y ejecute python ball.py 
Esta es la manera mas simple de hacer una animación de una pelota que rebota. Primero vemos que importar e inicializar Pygame no es algo digno de prestarle atención. El “import pygame” incorpora el paquete con todos los módulos Pygame disponibles.
La llamada a “pygame.init()” inicializa cada uno de estos módulos.
En la linea 8 creamos una ventana gráfica con la llamada a “pygame.display.set_mode()”. Pygame y SDL hacen esto simple predeterminando los mejores modos gráficos para el hardware del equipo. Puedes anular el modo y SDL compensará todo lo que el hardware no puede hacer.
Pygame representa a las imágenes como objetos Surface. La función “display.set_mode()” crea un nuevo objeto Surface que referencia a la representación actual de pantalla. Cualquier dibujo que se haga sobre este objeto Surface se hace visible en el monitor.
En la linea 10 cargamos nuestra imagen de la pelota. Pygame soporta una gran variedad de formatos de imágenes a través de la biblioteca SDL_image, incluyendo JPG, PNG, TGA, y GIF. La función “pygame.image.load()” nos devuelve un objeto Surface con los datos de la pelota. La Surface mantendrá cualquier color o transparencia Alpha del archivo. Después de cargar la imagen de la pelota creamos una variable llamada ballrect.
Pygame incluye un tipo de objeto de utilidad conveniente llamado Rect, que representa un área rectangular. Mas tarde, en la parte de animación del código, veremos que se puede hacer con Rect.
En este punto, la linea 13, nuestro programa está inicializado y listo para ejecutarse. Dentro de un ciclo infinito verificamos las entradas de datos del usuario, movemos la pelota, y después dibujamos la pelota.
Si está familiarizado con la programación GUI, tiene experiencia con eventos y ciclos de eventos. En Pygame no hay diferencia, verificamos si un evento QUIT ha llegado. Si es así, simplemente cerramos el programa, Pygame se asegura que todo se cierra limpiamente.
Es tiempo de actualizar la posición de la pelota. Las lineas 17 a 21 mueven la variable ballrect a la velocidad actual. Si la pelota se ha movido afuera de la pantalla, revertimos la velocidad en esa dirección. No es exactamente física Newtoniana, pero es todo lo que necesitamos.
En la linea 23 borramos la pantalla rellenándola con un color negro RGB. Si nunca ha trabajado con animaciones esto le será extraño. Se estará preguntando “¿por que hay necesidad de borrar todo, por que no movemos directamente la pelota en la pantalla?”; Así no es exactamente como trabajan las animaciones en computadora. Las animaciones no son mas que una serie de imágenes individuales, que desplegadas en secuencia engañan fácilmente al ojo humano para que vea movimiento. La pantalla es simplemente una imagen individual que el usuario ve. Si no nos tomamos un tiempo para borrar la pelota de la pantalla, veremos en realidad un “rastro” del movimiento mientras dibujamos continuamente la pelota en nuevas posiciones.
En la linea 24 dibujamos la imagen de la pelota en la pantalla. El dibujo de imágenes es manejado por el método “Surface.blit()”. Un blit básicamente significa copiar píxeles de color de una imagen a otra. Le pasamos al método blit un Surface fuente para que copie de él, y una posición para poner la fuente sobre el destino.
La ultima cosa que necesitamos hacer es actualizar la pantalla. Pygame maneja la pantalla con Double Buffer. Cuando terminamos de dibujar llamamos al método “pygame.display.flip()”. Esto hace que todo lo que dibujamos en la pantalla se haga visible. Este almacenamiento intermedio se asegura que solo veamos pantallas completamente dibujadas en la pantalla. De otra forma, el usuario vería partes a la mitad de la pantalla mientras estas son creadas.
Así concluye esta corta introducción a Pygame. Pygame también contiene un módulo para hacer cosas como manejo de entradas para el teclado, mouse y joystick. Puede mezclar audio y reproducir música. Con los objetos Surface puede dibujar formas simples, rotar y escalar una imagen. Incluso puede manipular los píxeles de una imagen en tiempo real como un arreglo Numeric de Python. Hay soporte para reproducir video MPEG y CDs de audio. Pygame también tiene la habilidad de funcionar como una capa de visualización multiplataforma para PyOpenGL.
La mayoría de los módulos de Pygame están escritos en lenguaje C, pocos actualmente están realizados con Python.
El sitio web de Pygame tiene una documentación de referencia completa para toda función de Pygame y tutoriales para usuarios de todos los niveles. El código fuente de Pygame viene con varios ejemplos de cosas como “monkey punching” y “UFO shooting”.
Python y los juegos
¿Es Python conveniente para juegos? La respuesta es, “Depende del juego”. Python es realmente bastante capaz de correr juegos. Probablemente hasta lo sorprenda cuanto se puede hacer en menos de 30 milisegundos. Aún así, no es difícil llegar al techo una vez que su juego se haga mas complejo. Cualquier juego ejecutándose en tiempo real hará uso completo de la computadora.
Durante los últimos años ha existido una tendencia interesante en el desarrollo de juegos, que se acerca a lenguajes de mas alto nivel. Usualmente un juegos se divide en 2 grandes partes. El motor del juego, el cual tiene que ser lo mas rápido posible, y la lógica del juego, que le indica al motor que debe realizar. No hace mucho tiempo que el motor de un juego se escribía en Assembler, con porciones escritas en lenguaje C. Hoy en día, C se ha trasladado al motor del juego, mientras que el juego mismo es escrito en un lenguaje de Scripts de mas alto nivel. Juegos como Quake 3 y Unreal ejecutan estos Scripts como código binario portable.
Al comienzo del 2001, el desarrollador Rebel Act Studios terminó su juego, Severance: Blade of Darkness. Usado su propio motor de 3D a medida, el resto del juego está escrito en Python. El juego es en tercera persona de acción sangrienta. Usted controla a guerreros medievales en intrincadas combinaciones de ataques “decapitantes” mientras explora calabozos y castillos. Puede descargar agregados creados por terceras partes para este juego, y encontrar que no son nada mas que archivos fuente de Python.
Recientemente, Python ha sido usado por una variedad de juegos como Freedom Force, y Humungous’ Backyard Sports Series.
Pygame y SDL sirven como excelentes motores C para juegos 2D. Los juegos igualmente pasarán la mayor parte del tiempo de ejecución dentro de SDL manejando sus gráficos. SDL puede tomar ventaja de la aceleración de hardware de gráficos. Habilitando esto, se puede elevar el rendimiento de un juego que corre aproximadamente a 40 cuadros por segundo hasta 200 cuadros por segundos. Cuando se ve a un juego de Python ejecutando a 200 cuadros por segundos, se puede ver que Python y los juegos pueden funcionar juntos.
Es impresionante cuan bien funcionan Python y SDL en múltiples plataformas. Por ejemplo, en Mayo del 2001 lance mi propio proyecto Pygame completo, SolarWolf, un juego de acción del estilo Arcade.
Una cosa que me ha sorprendido es que un año mas tarde, no ha existido la necesidad de parches, arreglo de Bugs, o actualizaciones. El juego fue desarrollado enteramente en Windows, pero corre en Linux, Mac OSX y muchos Unix sin la necesidad de trabajo extra por mi lado.
Aún así, hay limitaciones muy claras. La mejor manera de manejar gráficos de aceleradoras de video no es siempre la forma de obtener resultados rápidos del Software que procesa gráficos. El soporte de hardware no está disponible en todas las plataformas. Cuando un juego se hace mas complejo, usualmente se tiene que comprometer con uno u otro. SDL tiene otras limitaciones de diseño, cosas como los desplazamientos de pantalla completa pueden llevar rápidamente a su juego a velocidades injugables.
Mientras SDL no es conveniente para todo tipo de juegos, recuerde que compañías como Loki usaron SDL para ejecutar una gran variedad de títulos de calidad de ventas por menor.
Pygame es de bajo nivel cuando se trata de escribir juegos. Se encontrará rápidamente en la necesidad de envolver funciones comunes en su propio ambiente de juego. La gran ventaja de esto es que no hay nada en Pygame que le impida seguir su camino. Su programa está en total control de todo. El efecto colateral de esto es que se encontrará pidiendo prestado mucho código para realizar un marco de trabajo mas avanzado. Necesitará un mejor entendimiento de lo que está haciendo.
Cierre
Desarrollar juegos es muy gratificante, existe algo muy excitante en ser capaz de ver e interactuar con el código que uno escribió. Pygame está actualmente siendo usado por casi 30 proyectos. Varios de ellos están listos para jugar ahora. Puede que le sorprenda visitar el sitio web de Pygame, y ver lo que otros usuarios han podido hacer con Python.
Algo que me ha llamado la atención es la cantidad de personas que han accedido a Pyhon por primera vez para probar el desarrollo de juegos. Veo por que los juegos son atractivos para los nuevos programadores, pero puede ser difícil porque crear juegos requiere un gran conocimiento del lenguaje. He intentado dar mi apoyo a este grupo de usuarios creando muchos ejemplos y tutoriales de Pygame para personas novatas en estos conceptos.
Al final de cuentas, mi consejo en mantener las cosas simples. Si está planeando crear su primer juego, hay mucho para aprender. Hasta un juego muy simple desafiará sus diseños, y los juegos complejos no necesariamente son juegos divertidos. Cuando entienda Python, puede usar Pygame para crear un juego simple en solo una o dos semanas. Desde ahí, necesitará una sorpresiva cantidad de tiempo para agregar el terminado que lo convertirá en un juego presentable completo.
Resumen de módulos Pygame
-
cdrom: administra los dispositivos CDROM y la reproducción de CDs de audio.
-
cursors: carga imágenes de cursor, incluyendo los cursores por defecto.
-
display: controla la ventana principal o pantalla.
-
draw: dibuja figuras simples sobre objetos Surface.
-
event: administra eventos y la cola de eventos.
-
font: genera e imprime fuentes tipográficas Truetype.
-
image: lee y graba imágenes.
-
joystick: administra dispositivos de joystick.
-
key: administra el teclado.
-
mouse: permite controlar el mouse
-
movie: reproduce películas en formato MPEG.
-
sndarray: manipula sonidos con Numeric.
-
surfarray: manipula imágenes con Numeric.
-
time: controlador de tiempo.
-
transform: puede escalar, rotar e invertir imágenes.
Share this:
Tutorial: Escribiendo juegos en Python I | Manzana Mecánica
Tutorial: Escribiendo juegos en Python I | Manzana Mecánica
Muchos de nosotros gozamos a diario jugando videojuegos. Y somos muchos los que siempre hemos querido hacer nuestro propio juego. Cuando yo era chico programé infinidad de juegos en mi Atari. Pero programar un juego no es cosa sencilla, y aprender el lenguaje C no es para cualquiera.
Existe una plataforma de código libre para escribir juegos de manera sencilla, en un lenguaje poderoso. Esta es la primera parte de una serie de artículos que escribiré para enseñar a utilizar las librerías pygame para hacer videojuegos. Estas librerías son open-source y están disponibles para las plataformas tradicionales (Linux, MacOSX y Windows).
¿Qué es pygame?
Pygame es un conjunto de librerías para el lenguaje Python que facilitan el escribir juegos. Hacen fáciles tareas complicadas como cargar imágenes, desplegarlas en la pantalla, almacenar y tocar sonidos/música; también te permiten abstraerte de problemas como qué tipo de hardware tienen los usuarios.
Para aprender a usar pygame sólo necesitas tener conocimientos de Python. Como el enfoque de este tutorial no es aprender Python, les dejo la página oficial con tutoriales sobre cómo aprender este lenguaje.
Instalar pygame
La manera más sencilla de instalar Pygame es hacerlo en Linux :D, con un simple comando en el terminal. En Ubuntu la instalación es así:
-
sudo apt-get install python-pygame
Se siguen las instrucciones y listo. En la página de Pygame pueden encontrar instrucciones para instalarlo en Windows y MacOSX
Manos a la obra
Lo primero que haremos será crear un archivo de texto llamado «demo1.py», y copiar estas líneas en él. Luego les explicaré qué significan.
-
import pygame
-
from pygame.locals import *
-
SCREEN_WIDTH = 800
-
SCREEN_HEIGHT = 600
-
def game():
-
pygame.init()
-
screen = pygame.display.set_mode( (SCREEN_WIDTH,SCREEN_HEIGHT) )
-
pygame.display.set_caption( «demo1» )
-
-
while True:
-
keyinput = pygame.key.get_pressed()
-
if keyinput[K_ESCAPE] or pygame.event.peek(QUIT):
-
raise SystemExit
-
if __name__ == ‘__main__’:
-
game()
Vamos por partes. Con las siguientes líneas lo que hacemos es decir que usaremos las librerías:
-
import pygame
-
from pygame.locals import *
Luego definimos un par de constantes, como la resolución de pantalla que usaremos para nuestro juego:
-
SCREEN_WIDTH = 800
-
SCREEN_HEIGHT = 600
Así, nuestro juego correrá en 800×600. Luego escribimos una función llamada «Game». Veamos el cuerpo de la función. Lo primero que hacemos es inicializar los sistemas de pygame:
-
pygame.init()
Después le decimos a pygame la resolución que usaremos y el nombre de nuestro juego. Como lo corremos (por ahora) dentro de una ventana, este nombre es el que se desplegará en el título de la ventana.
-
screen = pygame.display.set_mode( (SCREEN_WIDTH,SCREEN_HEIGHT) )
-
pygame.display.set_caption( «demo1» )
Finalmente, entramos a lo que es el ciclo principal del juego. Este ciclo tomará todo el tiempo de juego. Es en este juego en que sucede la inteligencia de los personajes, se calculan las nuevas posiciones, se dibujan los gráficos y se toca la música. Demos un vistazo.
Comenzamos el ciclo:
-
while True:
Ahora le pedimos a Pygame que nos dé un arreglo con todas las teclas que están siendo presionadas en este instante. Y luego vemos si la tecla ESCAPE está presionada. Si esto es así, procedemos a terminar el juego. Para terminar, basta con salir del ciclo principal.
-
keyinput = pygame.key.get_pressed()
-
if keyinput[K_ESCAPE] or pygame.event.peek(QUIT):
-
raise SystemExit
Y por último, estas líneas sirven para que el juego comience. Son líneas típicas de los programas en Python, así que no las explicaremos.
-
if __name__ == ‘__main__’:
-
game()
Corriendo nuestro juego
Ha llegado la hora correr el juego. Para eso, simplemente ejecuta este comando en un terminal abierto en la misma carpeta de tu juego:
-
python demo1.py
¿Y qué veremos? Pues muy poco hasta aquí. Simplemente veremos una ventana en negro con el título de nuestro juego. Si presionas la tecla ESCAPE la ventana se cerrará.
No podemos decir que nuestro juego es muy interesante hasta ahora, pero es la base de todos los programas que podrás escribir de ahora en adelante.
Agregando una imagen de fondo
Vamos un poco más allá de lo básico. Agregar una imagen de fondo a nuestro juego es muy sencillo. Primero debemos crear una función que es la que usaremos para leer imágenes desde el disco duro.
-
def load_image(filename, transparent = False):
-
try: image = pygame.image.load(filename)
-
except pygame.error, message:
-
raise SystemExit, message
-
image = image.convert()
-
if transparent:
-
color = image.get_at((0,0))
-
image.set_colorkey(color, RLEACCEL)
-
return image
Esta función es bastante simple. Lo que hace es leer la imagen desde el disco duro y almacenarla en una variable temporal. Si el segundo parámetro es verdadero, entonces la función get_at se usa para obtener el color del pixel en la posición (0,0). Esto lo haremos cuando trabajemos con personajes. Por ahora puedes ignorarlo.
Luego, descarga esta imagen y ponla en la misma carpeta que el juego.
Ahora, los últimos toques al código. Haremos algunas modificaciones al método principal. Antes del ciclo while agregaremos las siguientes líneas:
-
screen = pygame.display.set_mode( (SCREEN_WIDTH,SCREEN_HEIGHT) )
-
background_image = load_image(‘back.jpg’);
Lo que hicimos aquí fue crear una superficie. Las superficies son los objetos gráficos de Pygame. Pero esta superficie en particular es la que representa a la ventana principal del juego. Lo que dibujemos en ésta saldrá dibujado en nuestro juego. Luego cargamos la imagen «back.jpg» en memoria y la almacenamos en la variable background_image.
Ahora agregamos bajo el ciclo while estas otras líneas:
-
screen.blit(background_image, (0,0) )
-
pygame.display.flip()
Estas últimas dos líneas hacen que por cada ciclo la imagen de fondo se dibuje sobre la superficie de la pantalla. Los parámetros (0, 0) son para indicarle al intérprete que la esquina superior izquierda de la imagen se dibuje sobre la esquina superior izquierda de la pantalla. En otras palabras, es la posición en la pantalla.
Resultado final
El código final de esta segunda versión sólo es un poco más largo. Veamos:
-
import pygame
-
from pygame.locals import *
-
SCREEN_WIDTH = 800
-
SCREEN_HEIGHT = 600
-
def load_image(filename, transparent = False):
-
try: image = pygame.image.load(filename)
-
except pygame.error, message:
-
raise SystemExit, message
-
image = image.convert()
-
if transparent:
-
color = image.get_at((0,0))
-
image.set_colorkey(color, RLEACCEL)
-
return image
-
def game():
-
pygame.init()
-
screen = pygame.display.set_mode( (SCREEN_WIDTH,SCREEN_HEIGHT) )
-
pygame.display.set_caption( «demo1» )
-
background_image = load_image(‘back.jpg’);
-
while True:
-
screen.blit(background_image, (0,0) )
-
pygame.display.flip()
-
keyinput = pygame.key.get_pressed()
-
keyinput = pygame.key.get_pressed()
-
if keyinput[K_ESCAPE] or pygame.event.peek(QUIT):
-
raise SystemExit
-
-
-
if __name__ == ‘__main__’:
-
game()
Si lo hiciste todo bien, tipeando «python demo1.py» deberías ver algo como esto:
Bueno, con esto terminamos la primera parte. En la segunda veremos cómo hacer personajes y lograr que éstos se muevan por la pantalla. ¡Nos vemos!
Bueno, ha pasado un poco más de un mes, pero lo prometido es deuda. Les dejo aquí la segunda parte de nuestro tutorial de juegos en Python y pygame. Si te perdiste la primera parte, no te preocupes, sigue este enlace.
En esta segunda parte comenzaremos a implementar uno de los juegos más clásicos de la historia de los videojuegos: Arkanoid.
Después de esto, sabrás como hacer que un objeto se mueva por tu pantalla y una manera simple de agregar sonidos a tus juegos. Si ya estás ansioso de empezar a programar, entonces sigue leyendo
La clase Ball
En la parte anterior del tutorial dejamos el código listo para empezar lo más entretenido. Lo que llevamos hasta ahora inicializa el sistema y luego muestra el fondo que utilizaremos.
Ahora vamos a empezar definiendo la clase Ball que sera la que se encargue de representar a la bola del juego. Esta primera versión de la bola rebotará indistintamente en las cuatro murallas de nuestra pantalla. Veamos primero el constructor de la clase
-
class Ball(pygame.sprite.Sprite):
-
def __init__(self):
-
pygame.sprite.Sprite.__init__(self)
-
self.image = load_image(‘ball.gif’, True)
-
self.rect = self.image.get_rect()
-
print self.rect
-
self.rect.centerx = SCREEN_WIDTH / 2
-
self.rect.centery = SCREEN_HEIGHT / 2
-
self.speed = [0.5, –0.5]
Veamos ahora el código línea por línea. Lo primero que notamos es que nuestra clase hereda de la clase Sprite de pygame. Esta clase representa los objetos gráficos que se moverán por nuestra pantalla. En la siguiente línea llamamos al constructor de la clase Sprite. Esto es MUY IMPORTANTE, pues si no lo haces, al ejecutar el programa saldrán errores muy raros y difíciles de entender si no sabes qué es lo que pasa.
Luego incializaremos algunas variables. Primero cargamos al imagen de la bola desde el archivo ball.gif (puedes descargarlo desde aquí). Para ello usamos nuestra función load_image que definimos en el tutorial anterior. Toda imagen leída con pygame tiene una referencia a un rectángulo. Este rectángulo es del ancho y alto de la imagen y lo utilizaremos para posicionarlo en el mundo del juego. Así pues, lo primero que hacemos es guardar una referencia a ese rectángulo usando el método get_rect de la clase Image. Por definición los rectángulos de las imágenes aparecen con su esquina inferior derecha en la coordenada (0,0). Lo primero que hacemos es trasladarlo al centro de la pantalla modificando el punto del centro (siguientes dos líneas). El centro delrectángulo puede ser modificado usando la propiedad center (un punto) o a través de las coordenadas del centro, centerx y centery.
Vale la pena aquí hacer ver lo versátil de la clase Rect (los rectángulos). Cada vez que modificas una de sus propiedades, el resto cambiará para adaptarse. Por ejemplo, si el lado izquierdo de unrectángulo es 50 y el derecho es 100 (un rectángulo de 50 pixeles de ancho) al hacer rect.centerx = 100 entonces ahora el lado izquierdo valdrá 75 y el derecho valdrá 125 (lo trasladamos 25 pixeles a la derecha). Esto es lo que usaremos para mover nuestros objetos por la pantalla.
Y en la última línea inicializaremos la velocidad de la pelota. La velocidad la manejaremos de manera separada para cada coordenada X e Y. Esto simplificará mucho nuestros cálculos.
Bien, veamos ahora el siguiente método de Ball.
-
def update(self, time):
-
self.rect.centerx += self.speed[0] * time;
-
self.rect.centery += self.speed[1] * time;
-
if self.rect.left <= 0 or self.rect.right >= SCREEN_WIDTH:
-
self.speed[0] = –self.speed[0]
-
self.rect.centerx += self.speed[0] * time;
-
if self.rect.top <= 0 or self.rect.bottom >= SCREEN_HEIGHT:
-
self.speed[1] = –self.speed[1]
-
self.rect.centery += self.speed[1] * time;
El método update será llamado en cada ciclo del juego. Su misión es actualizar las variables internas de la bola. Aquí es donde le asignamos «inteligencia» a nuestra pelota. El parámetro time representa el tiempo (en milisegundos) que ha pasado en nuestro juego desde la última vez que esta función fue ejecutada.
Lo primero es actualizar la posición de la bola. Como nos enseñaron en el colegio, si multiplicas la velocidad de un objeto por el tiempo que lleva moviéndose, obtendrás la posición del objeto después de ese tiempo. Así, lo primero será actualizar la coordenada x del centro aumentándola en su velocidad (self.speed[0]) multiplicada por el tiempo que ha pasado (time). Esto dejará esa coordenada donde debería encontrarse luego de viajar time milisegundos a self.speed[0] unidades. Luego hacemos lo mismo para la coordenada y.
Si dejáramos este método hasta aquí, nuestra pelota comenzaría a moverse pero muy pronto saldría de nuestra pantalla. Para evitar esto las siguientes líneas hacen el truco. Si luego de actualizar nuestra posición nos damos cuenta de que nos hemos pasado fuera de la pantalla entonces lo que hacemos es cambiar el sentido de la velocidad en esa coordenada y luego volver a sumarlo al centro (esto hace que nos «devolvamos» un poco).
SI YA HAZ LEÍDO HASTA AQUÍ, NO DESESPERES!!! FALTA POCO
Bien, ya solo nos falta utilizar todo lo que hemos escrito. Lo que haremos ahora es crear una bola y hacer que esta se mueva por la pantalla. Para esto, usaremos la clase Group de pygame. Un group es un «grupo» de sprites. Es muy parecido a las listas de de python pero tiene un par de «gracias» que los hacen muy útiles para nuestros propósitos. La idea de los groups es agrupar objetos gráficos parecidos en propiedades para manipularlos de manera conjunta. Veamos ahora el caso mas sencillo, un grupo con un solo objeto. En nuestro programa principal escribiremos
-
balls = pygame.sprite.Group()
-
ballSprite = Ball()
-
balls.add(ballSprite)
Con esto hemos creado el grupo balls y le hemos agregado una nueva bola. Podríamos agregar cuantas bolas quisieramos, pero como todas aparecen en el centro, se superpondrian y no veríamos diferencias. Un buen ejercicio es modificar el constructor de Ball para que reciba las coordenadas de inicio y luego agregar más de una bola al grupo.
Ahora introduciremos otra clase muy útil y sencilla de usar: Clock. Esto es todo lo que nos faltará para animar nuestra bola. Un clock es un «reloj», osea, un objeto que nos sirve para medir intervalos de tiempo. Cada vez que invocamos su método tick() este nos dirá cuanto tiempo ha pasado desde la vez anterior a la invocación. Así, lo primero que haremos en cada ciclo del programa principal es llamar a tick para ver cuánto tiempo ha pasado.
El último párrafo se resume en estas 3 líneas
-
clock = pygame.time.Clock()
-
while True:
-
time = clock.tick()
Inmediatamente después de esto, es el momento de que nuestros objetos se actualisen, es decir, que «usen su inteligencia». Para hacerlo más fácil, hacemos lo siguiente.
-
balls.update(time)
El método update de Group recorre a todos los sprites del grupo y ejecutará el método update del sprite correspondiente pasándole como parámetro time que es el tiempo desde la actualización anterior.
Y finalmente, dibujaremos todos nuestros objetos, es decir, el fondo y la bola. Primero el fondo, pues si lo hiciéramos al revés entonces el fondo pisaría a la bola.
-
screen.blit(background_image, (0,0) )
-
balls.draw(screen);
La primera línea la conocemos de la primera parte del tutorial y en la segunda hay un poco de truco. Draw es otro de esos métodos que recorren los sprites del grupo. Pero esta vez no ejecutamos un método del sprite, sino que tomamos la imagen de este y la dibujaremos usando como referencia su rectángulo. Es por esta razón que todo objeto que hereda de Sprite debe tener siempre llenas las variables rect e image pues el método draw espera que estos tengan valores correctos.
Y listo!!! Corriendo el juego
Ahora ya estamos listos para correr nuestra primera versión del juego con movimiento. Para que no tengan que escribir todo lo anterior, les dejo aquí el código completo.
-
import pygame
-
from pygame.locals import *
-
-
SCREEN_WIDTH = 800
-
SCREEN_HEIGHT = 600
-
-
-
class Ball(pygame.sprite.Sprite):
-
def __init__(self):
-
pygame.sprite.Sprite.__init__(self)
-
self.image = load_image(‘ball.gif’, True)
-
self.rect = self.image.get_rect()
-
self.rect.centerx = SCREEN_WIDTH / 2
-
self.rect.centery = SCREEN_HEIGHT / 2
-
self.speed = [0.5, –0.5]
-
-
def update(self, time):
-
self.rect.centerx += self.speed[0] * time;
-
self.rect.centery += self.speed[1] * time;
-
if self.rect.left <= 0 or self.rect.right >= SCREEN_WIDTH:
-
self.speed[0] = –self.speed[0]
-
self.rect.centerx += self.speed[0] * time;
-
if self.rect.top <= 0 or self.rect.bottom >= SCREEN_HEIGHT:
-
self.speed[1] = –self.speed[1]
-
self.rect.centery += self.speed[1] * time;
-
-
-
-
def load_image(filename, transparent = False):
-
try: image = pygame.image.load(filename)
-
except pygame.error, message:
-
raise SystemExit, message
-
image = image.convert()
-
if transparent:
-
color = image.get_at((0,0))
-
image.set_colorkey(color, RLEACCEL)
-
return image
-
def game():
-
pygame.init()
-
screen = pygame.display.set_mode( (SCREEN_WIDTH,SCREEN_HEIGHT) )
-
pygame.display.set_caption( «demo1» )
-
background_image = load_image(‘back.jpg’);
-
-
balls = pygame.sprite.Group()
-
ballSprite = Ball()
-
balls.add(ballSprite)
-
clock = pygame.time.Clock()
-
while True:
-
time = clock.tick()
-
balls.update(time)
-
if __name__ == ‘__main__’:
-
game()
Si todo salió correctamente entonces deberías ver una pelota rebotando contra los bordes de la pantalla.
Un bonus: Agregando sonidos
Vamos a adelantarnos en nuestros tutoriales y aprender la manera más básica de agregar sonidos a nuestro juego. Para eso, pueden descargar este archivo de sonido y ponerlo en el directorio del juego. Luego, en el constructor de la clase bola de la siguiente manera.
-
self.ping = pygame.mixer.Sound(‘ping.wav’)
Esto carga el sonido en memoria y guarda una referencia para ser usada luego. Ahora, en el método update, busquen en donde se cambia la dirección de la velocidad. Este es el momento en que la bola choca y por lo tanto el momento de hacer que el sonido suene. Agreguen las siguientes lineas
-
self.ping.play()
Y cuando la pelota golpee contra los muros el sonido se escuchará.
Y después de esto… que más
Bueno, pues viene mucho más. No hemos hecho más que empezar. En la siguiente parte aprenderemos como mover objetos usando el mouse y como detectar coliciones entre objetos. Esto es más complicado así que merece un capítulo aparte.
Los espero en la siguiente parte del tutorial
HiperEidon 
