Aplicación de escritorio
Diseño de juego FPS insular
Entra en Harbor Skirmish, donde una llamativa pantalla de título insular conduce a una experiencia en primera persona con paneles de estado enmarcados y controles de armas numerados.
LLM Arena sep. 2026
Notas del caso- Modelo
- DeepSeek V4.1 Flash
- Tarea de diseño
- Crea Harbor Skirmish, una aventura insular jugable con movimiento y combate por oleadas.
- Resultado
- Aplicación de escritorio
Diseñado para
- Prototipos FPS para navegadorPresenta un mundo jugable pequeño y sus estados de combate.
- Diseño de HUD de combateMantén separadas y legibles la salud, la munición y la información de las oleadas.
- Incorporación mediante tecladoExplica los atajos de movimiento antes y durante la partida local.
Aspectos destacados
- Pantalla de título con estilo de pósterLas letras de gran peso visual y los botones de bordes marcados reflejan la isla de formas geométricas.
- Paneles de estado enmarcadosLos fondos crema separan la información de combate del paisaje cambiante.
- Alternativa explícita para controlar la vistaLa interfaz ofrece arrastre cuando el bloqueo del puntero no está disponible.
Explora el juego FPS
1 / 4Un diseño de juego FPS insular con letras de estilo póster
Esta versión de Harbor Skirmish utiliza letras muy compactas y contorneadas sobre una vista aérea de la isla. El título, el botón amarillo Let’s Play y la pequeña franja Welcome to Seabreeze forman una composición vertical sólida a la izquierda. Una torre del reloj, un faro, casas multicolores y escaleras ocupan la derecha. Los gráficos de bordes marcados encajan con la arquitectura deliberadamente geométrica.
La primera pantalla ya nombra cuatro tipos de entrada: movimiento con WASD, apuntado y disparo con el ratón, doble salto y gancho. La sección desplegable How to play puede contener la explicación más extensa sin convertir la apertura en un manual de página completa. Los controles de sonido y pantalla completa se mantienen en pequeños botones cuadrados alejados de la acción principal.
Un título con su propio fondo
Los rellenos de las letras en crema y amarillo, los contornos oscuros y las sombras desplazadas separan el título del agua texturizada. El tratamiento es contundente, pero cumple una función práctica: las palabras siguen siendo reconocibles sobre una escena en movimiento sin colocar toda la columna izquierda sobre un panel sólido.
La arquitectura como invitación
Las escaleras, las líneas de los tejados y la alta torre central convierten el movimiento vertical en parte de la imagen inicial. La línea cercana Streets below. Rooftops above. señala esa misma relación. Una captura puede mostrar esa invitación; verificar que cada tejado sea un destino jugable requiere una comprobación de recorrido independiente.
Controles antes de empezar
La fila breve de entradas se sitúa justo debajo del botón de jugar. Ofrece a quien usa el teclado una idea inmediata de la interacción esperada antes de entrar en la escena. Una adaptación táctil necesitaría una explicación diferente del control principal, en lugar de limitarse a reducir esa fila.
Lectura de la salud, la munición y el estado de las oleadas en paneles enmarcados
La interfaz de juego distribuye la información por el perímetro. Los paneles crema con bordes oscuros contienen la puntuación, el estado de la oleada, la salud y la munición. Una etiqueta de ubicación centrada se sitúa sobre la vista. A diferencia del texto dibujado directamente sobre el mundo, estas cajas conservan su propio fondo cuando una pared o una nube pasa detrás de ellas.
El coste es un marco más pronunciado alrededor del juego. El tamaño y la posición en las esquinas de los paneles importan porque cada caja resta parte del área visible de la escena. La fila de armas numeradas se mantiene cerca del centro inferior, dejando una zona relativamente despejada por encima para apuntar y leer el entorno.
| Elemento | Relación observada | Consecuencia de diseño |
|---|---|---|
| Ubicación y velocidad | La ubicación cambió de Seabreeze Streets a Market Square durante la comprobación de entrada. | Nombrar una zona aporta una orientación que un número de velocidad no puede proporcionar. |
| Arma y munición | La pantalla inicial de Ink Rifle mostraba 24 / 168; al seleccionar Scattergun cambió a 6 / 30. | La selección afecta tanto al nombre de la herramienta como a su contexto de munición. |
| Salud y dash | Hay barras separadas para la salud y la acción de dash con Q. | La supervivencia y la disponibilidad de movimiento no deberían compartir una barra de progreso cuyo significado no se explique. |
Gestión de la entrada de teclado, los controles de vista y la pausa
La fuente anticipa un problema específico del navegador: el bloqueo del puntero puede no estar disponible. En el navegador inspeccionado, la interfaz mostraba una alternativa basada en hacer clic y arrastrar. Esta es una distinción concreta entre que la página se haya cargado y que el jugador pueda mirar alrededor. La indicación debe estar junto a la escena activa, no únicamente en un panel de ayuda oculto.
Entra en la escena con una ruta de control utilizable
Let’s Play sustituye la pantalla de título aérea por una cámara a nivel de calle y un HUD. Un aviso breve de oleada introduce la partida. Si aparece al mismo tiempo un aviso sobre el control de la vista, hay que cuidar su posición y duración para que dos mensajes útiles no se oculten entre sí.
Mantén la selección visible en dos lugares
Las teclas numéricas seleccionan el rifle, la escopeta o la hoja. La fila resalta la ranura activa, mientras el panel de munición repite el nombre del arma seleccionada. Esa repetición es intencionada: el grupo de atajos explica cómo cambiar de herramienta, mientras el panel de la esquina explica cuál está lista en ese momento.
Usa la pausa para explicar el movimiento avanzado
La pantalla de pausa enumera correr, doble salto, dash, deslizamiento, gancho, apuntar y recargar junto con sus teclas. Resume es el botón principal, con una acción más pequeña para volver a la isla. Colocar aquí la lista ampliada de teclas da al jugador un lugar donde leerla sin tener que seguir navegando por la escena.
El alcance de este ejemplo de FPS para navegador
Se inspeccionaron el inicio del juego local, el envío de entradas de movimiento, el cambio de armas y la apertura de la pausa. Los números mostrados son valores temporales de la sesión, no resultados de referencia. Esta revisión no establece la accesibilidad completa de los niveles, el equilibrio del combate ni el rendimiento en distintos dispositivos. No se verificó ningún sistema multijugador ni de cuentas persistentes; el identificador del modelo de evaluación procede del nombre de archivo proporcionado.
Cómo crear un diseño de juego FPS insular en OpenDesign
Especifica el mundo y el marco de información
Describe una isla compacta con lugares reconocibles y, después, define el HUD por separado. Decide qué valores necesitan fondos de panel estables y cuáles pueden permanecer directamente sobre la escena. Esto evita que el estilo de póster inicial domine todas las etiquetas de combate.
Prompt sugeridoCrea el diseño de un juego FPS insular para un juego de navegador local ficticio llamado Harbor Skirmish. Usa una localidad costera colorida de estética low-poly, con una torre del reloj, un faro, escaleras y líneas de tejados conectadas. Construye una pantalla de inicio aérea con letras de contorno amarillo y crema de gran peso visual, un botón de jugar amarillo y sugerencias de teclado compactas. Durante la partida en primera persona, coloca la información de puntuación y oleada en paneles separados en las esquinas superiores, la salud y el estado del dash en la parte inferior izquierda, y el arma actual con la munición del cargador y la munición de reserva en la parte inferior derecha. Usa tres ranuras de armas numeradas a lo largo de la zona inferior central. Añade una pantalla de pausa con una referencia de teclado legible, Resume y una acción separada para volver al inicio. Proporciona indicaciones claras si el bloqueo del puntero no está disponible. Mantén las puntuaciones limitadas a la sesión y no inventes funciones multijugador ni de cuenta.
Verifica los valores relacionados como un único estado
Cambia del rifle a la escopeta e inspecciona conjuntamente el resaltado, el nombre del arma y la munición. Muévete entre dos zonas con nombre y comprueba la etiqueta de ubicación. Mantén separadas las observaciones directas de la prueba y las suposiciones sobre el mapa completo o el sistema de combate.
Reserva un espacio propio para los avisos temporales
Prueba la primera entrada con y sin bloqueo del puntero. Un anuncio de oleada y una alternativa de controles no deberían superponerse. Después, abre la pausa y verifica que sus instrucciones más largas sean legibles en la ventana de escritorio compatible más pequeña.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de juego de aventuras isleñas
Explora Harbor Skirmish, una pequeña isla costera con rutas por los tejados, tres ranuras de armas y una interfaz en primera persona de tono desenfadado.
Aplicación de escritorio
Diseño de planificador de excursiones
Planifica seis paradas programadas en la ciudad ficticia de Solara Bay, con un mapa ilustrado, estimaciones de trayectos a pie y advertencias útiles sobre la ruta.
Aplicación de escritorio
Diseño de explicación interactiva de producto
Explora las capas separadas de un teléfono conceptual con vistas de cámara predefinidas, un deslizador y un panel de ocho grupos de ensamblaje.
Aplicación de escritorio
Diseño de Panel Personal
Life System coloca una puntuación semanal, métricas de mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio. Explora el diseño en detalle.
Aplicación de escritorio