El proyecto combina movimiento lateral, salto, enemigos, plataformas, m\u00fasica, fondos con efecto parallax, retos interactivos y pantallas narrativas. El jugador controla a Cyber<\/strong>, un personaje que debe avanzar por tres niveles, evitar drones enemigos e interactuar con terminales para resolver desaf\u00edos relacionados con phishing, contrase\u00f1as seguras y autenticaci\u00f3n en dos pasos.<\/p>\n\n\n\n Este art\u00edculo documenta el proceso de desarrollo como evidencia paso a paso, desde la creaci\u00f3n del proyecto en el entorno de desarrollo hasta la generaci\u00f3n del ejecutable final.<\/p>\n\n\n\n El objetivo principal fue construir un videojuego 2D educativo que permitiera explicar conceptos de ciberseguridad mediante una experiencia jugable.<\/p>\n\n\n\n El primer paso fue abrir el entorno de desarrollo. Para este proyecto se utiliz\u00f3 un entorno compatible con Python, como IntelliJ IDEA<\/strong> con soporte para Python o PyCharm<\/strong>.<\/p>\n\n\n\n Desde el IDE se abri\u00f3 el proyecto principal donde se trabajaron los archivos del videojuego. El proyecto se organiz\u00f3 en una carpeta base llamada Despu\u00e9s de abrir el proyecto, se organiz\u00f3 la estructura general de carpetas para separar correctamente el c\u00f3digo fuente, los recursos gr\u00e1ficos, la m\u00fasica y la documentaci\u00f3n.<\/p>\n\n\n\n La estructura base qued\u00f3 organizada de la siguiente manera:<\/p>\n\n\n\n Esta organizaci\u00f3n permiti\u00f3 trabajar de forma m\u00e1s clara. Cada archivo principal cumple una funci\u00f3n espec\u00edfica: Dentro del proyecto se cre\u00f3 una carpeta llamada La carpeta En En Esta separaci\u00f3n fue importante para que el c\u00f3digo pudiera cargar los recursos de manera ordenada y para evitar mezclar im\u00e1genes, m\u00fasica y scripts en una misma ubicaci\u00f3n.<\/p>\n\n\n\n Para darle identidad visual al juego se definieron varios personajes principales.<\/p>\n\n\n\n El protagonista es Cyber<\/strong>, un personaje con capucha, gafas oscuras y ojos en forma de X. Sus im\u00e1genes fueron organizadas como frames de animaci\u00f3n.<\/p>\n\n\n\n La carpeta del personaje Cyber qued\u00f3 compuesta por archivos similares a:<\/p>\n\n\n\n Tambi\u00e9n se utilizaron otros personajes dentro de la narrativa:<\/p>\n\n\n\n En el c\u00f3digo, los sprites de Cyber se cargan desde la carpeta correspondiente y se escalan para ser utilizados dentro del juego:<\/p>\n\n\n\n Esto permiti\u00f3 animar al personaje cambiando entre distintos frames durante el movimiento.<\/p>\n\n\n\n El juego utiliza diferentes fondos para el men\u00fa y para cada nivel. Estos fondos ayudan a reforzar la est\u00e9tica digital y cyber del proyecto.<\/p>\n\n\n\n La estructura de fondos qued\u00f3 organizada as\u00ed:<\/p>\n\n\n\n Para los niveles se utilizaron dos capas por escenario, lo cual permiti\u00f3 crear un efecto parallax. Este efecto genera sensaci\u00f3n de profundidad al mover las capas del fondo a velocidades diferentes.<\/p>\n\n\n\n La clase encargada de dibujar el fondo fue:<\/p>\n\n\n\n Gracias a esto, los niveles no se ven planos, sino que tienen una sensaci\u00f3n visual m\u00e1s din\u00e1mica.<\/p>\n\n\n\n La m\u00fasica fue organizada seg\u00fan la pantalla o nivel donde se reproduce.<\/p>\n\n\n\n Los archivos seleccionados fueron:<\/p>\n\n\n\n En cada nivel se carga la pista correspondiente usando El par\u00e1metro <\/p>\n\n\n\n La pantalla inicial se desarroll\u00f3 en el archivo:<\/p>\n\n\n\n Esta pantalla contiene el nombre del juego, el fondo principal, la m\u00fasica del men\u00fa y los botones de navegaci\u00f3n.<\/p>\n\n\n\n El t\u00edtulo visual definido fue:<\/p>\n\n\n\n La pantalla principal incluye los botones:<\/p>\n\n\n\n El fondo principal se carga desde:<\/p>\n\n\n\n El men\u00fa fue mejorado con un panel central transl\u00facido, botones estilo ne\u00f3n y una presentaci\u00f3n visual acorde con la tem\u00e1tica del juego.<\/p>\n\n\n\n La pantalla de controles permite al jugador conocer las teclas necesarias antes de iniciar la partida.<\/p>\n\n\n\n Los controles principales son:<\/p>\n\n\n\n Durante el desarrollo se detect\u00f3 que algunos caracteres de flechas se mostraban como cuadros. Para evitar ese problema, las flechas fueron dibujadas directamente con figuras geom\u00e9tricas en Pygame.<\/p>\n\n\n\n Esto permiti\u00f3 que la pantalla de controles se viera m\u00e1s limpia y compatible con diferentes equipos.<\/p>\n\n\n\n Aunque Pygame no maneja una jerarqu\u00eda visual como Unity, el proyecto se organiz\u00f3 mediante archivos separados para cada nivel.<\/p>\n\n\n\n Los archivos principales fueron:<\/p>\n\n\n\n Cada nivel contiene:<\/p>\n\n\n\n Esta separaci\u00f3n facilita la lectura del c\u00f3digo y permite modificar un nivel sin afectar directamente los dem\u00e1s.<\/p>\n\n\n\n El jugador se implement\u00f3 mediante una clase El movimiento se controla con el teclado:<\/p>\n\n\n\n La gravedad se aplica en cada actualizaci\u00f3n:<\/p>\n\n\n\n Gracias a esta l\u00f3gica, Cyber puede desplazarse, saltar y caer de forma natural sobre las plataformas.<\/p>\n\n\n\n Los niveles est\u00e1n construidos con plataformas. Cada plataforma se representa como un sprite con un rect\u00e1ngulo de colisi\u00f3n.<\/p>\n\n\n\n Las plataformas se agregan a un grupo:<\/p>\n\n\n\n El jugador detecta colisiones con las plataformas para no atravesarlas y para poder saltar correctamente.<\/p>\n\n\n\n Los enemigos del juego son drones que patrullan de un lado a otro. Si el jugador entra en contacto con un drone, pierde una vida.<\/p>\n\n\n\n Esta mec\u00e1nica agrega dificultad al juego y obliga al jugador a controlar mejor sus movimientos.<\/p>\n\n\n\n Inicialmente, la informaci\u00f3n del juego se mostraba con texto plano, como:<\/p>\n\n\n\n Despu\u00e9s se mejor\u00f3 el HUD para hacerlo m\u00e1s presentable. Se reemplaz\u00f3 el texto por paneles compactos y corazones para representar las vidas.<\/p>\n\n\n\n El HUD final muestra:<\/p>\n\n\n\n Los corazones se dibujaron con figuras de Pygame:<\/p>\n\n\n\n Esta mejora permiti\u00f3 que la interfaz del juego se viera m\u00e1s profesional y menos cargada.<\/p>\n\n\n\n Despu\u00e9s de completar el tercer nivel, se muestra la pantalla final del juego con Xenon. Esta pantalla representa el cierre de la historia y la culminaci\u00f3n del recorrido educativo.<\/p>\n\n\n\n El jugador puede finalizar el juego usando:<\/p>\n\n\n\n La pantalla final refuerza la narrativa del proyecto y muestra que Cyber logr\u00f3 superar las trampas de Xenon.<\/p>\n\n\n\n Para generar el ejecutable del juego se utiliz\u00f3 PyInstaller<\/strong>. Esta herramienta permite empaquetar el proyecto Python como una aplicaci\u00f3n ejecutable de Windows.<\/p>\n\n\n\n Primero se instal\u00f3 PyInstaller con:<\/p>\n\n\n\n Tambi\u00e9n puede instalarse usando:<\/p>\n\n\n\n Adem\u00e1s, el archivo Antes de generar el ejecutable, se prob\u00f3 el juego desde Python con:<\/p>\n\n\n\n Luego se ejecut\u00f3 el comando de PyInstaller:<\/p>\n\n\n\n Este comando genera la carpeta:<\/p>\n\n\n\n Dentro de esa carpeta se encuentra el archivo:<\/p>\n\n\n\n Para distribuir el juego, se recomienda comprimir toda la carpeta El resultado fue un videojuego 2D educativo llamado CyberGuardian:<\/strong> , desarrollado con Python y Pygame.<\/p>\n\n\n\n <\/p>\n\n\n\n CyberGuardian demuestra c\u00f3mo un videojuego puede convertirse en una herramienta educativa para reforzar conceptos de ciberseguridad de forma interactiva y visual.<\/p>\n\n\n\n <\/p>\n\n\n\n Repositorio de GITHUB https:\/\/github.com\/eduar277\/cyberguardian-pygame.git<\/p>\n\n\n\n <\/p>\n\n\n\n OpenAI. (2023). DALL\u00b7E 3<\/em>. https:\/\/openai.com\/index\/dall-e-3\/<\/a><\/p>\n\n\n\n OpenAI. (s. f.). DALL\u00b7E 3 model<\/em>. OpenAI API Documentation. https:\/\/developers.openai.com\/api\/docs\/models\/dall-e-3<\/a><\/p>\n\n\n\n Pygame Community. (s. f.). Getting started<\/em>. Pygame Wiki. https:\/\/www.pygame.org\/wiki\/GettingStarted<\/a><\/p>\n\n\n\n Pygame Community. (s. f.). pygame v2.6.0 documentation<\/em>. https:\/\/www.pygame.org\/docs\/<\/a><\/p>\n\n\n\n PyInstaller Development Team. (s. f.). PyInstaller manual<\/em>. https:\/\/www.pyinstaller.org\/<\/a><\/p>\n\n\n\n Python Software Foundation. (s. f.). Python 3.14.5 documentation<\/em>. https:\/\/docs.python.org\/3\/<\/a><\/p>\n\n\n\n
\n\n\n\n
\n\n\n\nApertura del proyecto en IntelliJ IDEA<\/h2>\n\n\n\n
pythonProject<\/code>.<\/p>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/1_resultado.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de la estructura de carpetas<\/h2>\n\n\n\n
pythonProject\/
\u2502
\u251c\u2500\u2500 main_menu.py
\u251c\u2500\u2500 nivel1.py
\u251c\u2500\u2500 nivel2.py
\u251c\u2500\u2500 nivel3.py
\u2502
\u251c\u2500\u2500 assets\/
\u2502 \u251c\u2500\u2500 Musica\/
\u2502 \u2514\u2500\u2500 sprites\/
\u2502 \u251c\u2500\u2500 Atlas\/
\u2502 \u251c\u2500\u2500 Cyber\/
\u2502 \u251c\u2500\u2500 Lana\/
\u2502 \u251c\u2500\u2500 Xenon\/
\u2502 \u2514\u2500\u2500 Fondos\/
\u2502
\u251c\u2500\u2500 requirements.txt
\u251c\u2500\u2500 README.md
\u2514\u2500\u2500 .gitignore<\/code><\/pre>\n\n\n\nmain_menu.py<\/code> controla la pantalla inicial, mientras que nivel1.py<\/code>, nivel2.py<\/code> y nivel3.py<\/code> contienen la l\u00f3gica de cada nivel.<\/p>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/2_resultado.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de carpetas para m\u00fasica, assets y componentes<\/h2>\n\n\n\n
assets<\/code>, destinada a almacenar todos los recursos utilizados por el juego.<\/p>\n\n\n\nassets<\/code> se dividi\u00f3 principalmente en:<\/p>\n\n\n\nassets\/
\u251c\u2500\u2500 Musica\/
\u2514\u2500\u2500 sprites\/<\/code><\/pre>\n\n\n\nMusica<\/code> se almacenaron los archivos de audio del men\u00fa y de los niveles:<\/p>\n\n\n\nassets\/Musica\/
\u251c\u2500\u2500 Manu.mp3
\u251c\u2500\u2500 Nivel1.mp3
\u251c\u2500\u2500 Nivel2.mp3
\u2514\u2500\u2500 Nivel3.mp3<\/code><\/pre>\n\n\n\nsprites<\/code> se almacenaron los personajes y fondos:<\/p>\n\n\n\nassets\/sprites\/
\u251c\u2500\u2500 Atlas\/
\u251c\u2500\u2500 Cyber\/
\u251c\u2500\u2500 Lana\/
\u251c\u2500\u2500 Xenon\/
\u2514\u2500\u2500 Fondos\/<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/3_resultado.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de los sprites de cada personaje<\/h2>\n\n\n\n
assets\/sprites\/Cyber\/
\u251c\u2500\u2500 frame_1.png
\u251c\u2500\u2500 frame_2.png
\u251c\u2500\u2500 frame_3.png
\u251c\u2500\u2500 frame_4.png
\u2514\u2500\u2500 ...<\/code><\/pre>\n\n\n\n\n
def load_frames(self, folder):
frames = []
image_names = [
img_name for img_name in os.listdir(folder)
if img_name.lower().endswith(\".png\")
]
image_names.sort()
for img_name in image_names:
path = os.path.join(folder, img_name)
img = pygame.image.load(path).convert_alpha()
img = pygame.transform.smoothscale(img, (64, 64))
frames.append(img)
return frames<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/4.1_resultado-1024x549.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de los fondos del juego<\/h2>\n\n\n\n
assets\/sprites\/Fondos\/
\u251c\u2500\u2500 menu1.png
\u251c\u2500\u2500 menu2.png
\u251c\u2500\u2500 Nivel1\/
\u2502 \u251c\u2500\u2500 CAPA1.png
\u2502 \u2514\u2500\u2500 CAPA2.png
\u251c\u2500\u2500 Nivel2\/
\u2502 \u251c\u2500\u2500 CAPA1.png
\u2502 \u2514\u2500\u2500 CAPA2.png
\u2514\u2500\u2500 Nivel3\/
\u251c\u2500\u2500 CAPA1.png
\u2514\u2500\u2500 CAPA2.png<\/code><\/pre>\n\n\n\nclass ParallaxBackground:
def __init__(self, capa1_path, capa2_path):
self.capa1 = pygame.image.load(capa1_path).convert_alpha()
self.capa2 = pygame.image.load(capa2_path).convert_alpha()
self.capa1 = pygame.transform.scale(self.capa1, (WIDTH, HEIGHT))
self.capa2 = pygame.transform.scale(self.capa2, (WIDTH, HEIGHT))
def draw(self, screen, player_y):
offset1 = int(player_y * 0.05)
offset2 = int(player_y * 0.15)
y1 = -offset1 % HEIGHT
y2 = -offset2 % HEIGHT
screen.blit(self.capa1, (0, y1 - HEIGHT))
screen.blit(self.capa1, (0, y1))
screen.blit(self.capa2, (0, y2 - HEIGHT))
screen.blit(self.capa2, (0, y2))<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/5.3_resultado.webp\")
<\/figure>\n\n\n\n
\n\n\n\nSelecci\u00f3n de m\u00fasica para cada nivel<\/h2>\n\n\n\n
Manu.mp3 \u2192 men\u00fa principal
Nivel1.mp3 \u2192 nivel 1
Nivel2.mp3 \u2192 nivel 2
Nivel3.mp3 \u2192 nivel 3<\/code><\/pre>\n\n\n\npygame.mixer.music<\/code>:<\/p>\n\n\n\npygame.mixer.music.load(\"assets\/Musica\/Nivel1.mp3\")
pygame.mixer.music.set_volume(0.5)
pygame.mixer.music.play(-1)<\/code><\/pre>\n\n\n\n-1<\/code> indica que la m\u00fasica se reproduce en bucle mientras el jugador permanece en esa pantalla o nivel.<\/p>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/6_resultado.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de la pantalla inicial<\/h2>\n\n\n\n
main_menu.py<\/code><\/pre>\n\n\n\nCyberGuardian: Amenaza Xenon<\/code><\/pre>\n\n\n\n\n
assets\/sprites\/Fondos\/menu1.png<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/8_resultado-1024x607.webp\")
<\/figure>\n\n\n\n
\n\n\n\nCreaci\u00f3n de la pantalla de controles<\/h2>\n\n\n\n
A \/ D Moverse
W \/ SPACE Saltar
E Interactuar con terminales
1 \/ 2 \/ 3 Responder retos
ESC Volver<\/code><\/pre>\n\n\n\ndef draw_arrow_key(surface, direction, x, y):
key_rect = pygame.Rect(x, y, 70, 55)
pygame.draw.rect(surface, (7, 32, 48), key_rect, border_radius=12)
pygame.draw.rect(surface, CYAN, key_rect, width=2, border_radius=12)
cx, cy = key_rect.center
if direction == \"left\":
points = [(cx + 14, cy - 15), (cx - 15, cy), (cx + 14, cy + 15)]
elif direction == \"right\":
points = [(cx - 14, cy - 15), (cx + 15, cy), (cx - 14, cy + 15)]
elif direction == \"up\":
points = [(cx, cy - 17), (cx - 16, cy + 12), (cx + 16, cy + 12)]
pygame.draw.polygon(surface, WHITE, points)<\/code><\/pre>\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/9_resultado-1024x593.webp\")
<\/figure>\n\n\n\n<\/h2>\n\n\n\n
Creaci\u00f3n de niveles en la jerarqu\u00eda del proyecto<\/h2>\n\n\n\n
nivel1.py
nivel2.py
nivel3.py<\/code><\/pre>\n\n\n\n\n
![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/3_resultado-1.webp\")
<\/figure>\n\n\n\n
\n\n\n\nImplementaci\u00f3n del jugador<\/h2>\n\n\n\n
Player<\/code>, encargada de controlar el movimiento, la gravedad, las colisiones, la animaci\u00f3n y el da\u00f1o recibido.<\/p>\n\n\n\ndef handle_input(self):
keys = pygame.key.get_pressed()
self.vel_x = 0
if keys[pygame.K_a] or keys[pygame.K_LEFT]:
self.vel_x = -self.speed
self.facing_right = False
if keys[pygame.K_d] or keys[pygame.K_RIGHT]:
self.vel_x = self.speed
self.facing_right = True
if (keys[pygame.K_w] or keys[pygame.K_SPACE] or keys[pygame.K_UP]) and self.on_ground:
self.vel_y = self.jump_power<\/code><\/pre>\n\n\n\ndef apply_gravity(self):
self.vel_y += 0.5
if self.vel_y > 12:
self.vel_y = 12<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/10_resultado-1-1024x556.webp\")
<\/figure>\n\n\n\n
\n\n\n\nImplementaci\u00f3n de plataformas y colisiones<\/h2>\n\n\n\n
class Platform(pygame.sprite.Sprite):
def __init__(self, x, y, w, h):
super().__init__()
self.image = pygame.Surface((w, h), pygame.SRCALPHA)
self.image.fill((25, 25, 38))
pygame.draw.rect(self.image, (0, 180, 255), (0, 0, w, 3))
self.rect = self.image.get_rect(topleft=(x, y))<\/code><\/pre>\n\n\n\nplats = pygame.sprite.Group()
plats.add(Platform(0, HEIGHT - 40, WIDTH, 40))<\/code><\/pre>\n\n\n\n
\n\n\n\nImplementaci\u00f3n de enemigos<\/h2>\n\n\n\n
class Drone(pygame.sprite.Sprite):
def __init__(self, x1, x2, y):
super().__init__()
self.x1, self.x2 = x1, x2
self.rect = self.image.get_rect(midbottom=(x1, y))
self.speed = 2
self.dir = 1
def update(self, player):
self.rect.x += self.speed * self.dir
if self.rect.x < self.x1:
self.rect.x = self.x1
self.dir = 1
if self.rect.x > self.x2:
self.rect.x = self.x2
self.dir = -1
if self.rect.colliderect(player.rect):
player.take_damage(1)<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/11_resultado-1024x592.webp\")
<\/figure>\n\n\n\n
\n\n\n\nMejora del HUD del juego<\/h2>\n\n\n\n
Vidas: 3
A\/D moverse | W\/SPACE saltar | E interactuar<\/code><\/pre>\n\n\n\n\n
def draw_heart(surface, x, y, size=8, filled=True):
color = RED if filled else (55, 60, 70)
r = size
pygame.draw.circle(surface, color, (x + r, y + r), r)
pygame.draw.circle(surface, color, (x + r * 3, y + r), r)
points = [
(x, y + r),
(x + r * 2, y + r * 4),
(x + r * 4, y + r),
]
pygame.draw.polygon(surface, color, points)<\/code><\/pre>\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/12_resultado-1024x575.webp\")
<\/figure>\n\n\n\n<\/h2>\n\n\n\n
\n\n\n\nFin del juego<\/h2>\n\n\n\n
ENTER
ESC
Bot\u00f3n Finalizar Juego<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/13_resultado-1024x607.webp\")
<\/figure>\n\n\n\n
\n\n\n\nInstalaci\u00f3n de PyInstaller<\/h2>\n\n\n\n
pip install pyinstaller<\/code><\/pre>\n\n\n\npython -m pip install pyinstaller<\/code><\/pre>\n\n\n\nrequirements.txt<\/code> puede incluir:<\/p>\n\n\n\npygame
pyinstaller<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/14_resultado-1024x348.webp\")
<\/figure>\n\n\n\n
\n\n\n\nGeneraci\u00f3n del ejecutable<\/h2>\n\n\n\n
python main_menu.py<\/code><\/pre>\n\n\n\npython -m PyInstaller --noconfirm --clean --windowed --name CyberGuardian --add-data \"assets;assets\" main_menu.py<\/code><\/pre>\n\n\n\ndist\/CyberGuardian\/<\/code><\/pre>\n\n\n\nCyberGuardian.exe<\/code><\/pre>\n\n\n\ndist\/CyberGuardian<\/code>, ya que el ejecutable necesita los archivos internos generados por PyInstaller.<\/p>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/05\/15_resultado-1024x88.webp\")
<\/figure>\n<\/figure>\n\n\n\n
\n\n\n\nResultado final<\/h2>\n\n\n\n
\n\n\n\nCr\u00e9ditos Finales<\/strong><\/h2>\n\n\n\n
\n
Referencias<\/h2>\n\n\n\n
<\/h2>\n\n\n\n