You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
13 Hrs
30 Min
2 Seg

Diseño responsivo

27/30
Resources

What is responsive design?

Responsive design is essential in modern game development. This concept refers to the ability to automatically adjust images and other visual elements to different screen sizes, such as those of different iPhone models. Adopting a responsive design approach allows games to adapt harmoniously to both an iPhone 5 and an iPhone 10, which have significantly different screen dimensions.

How do responsive design benchmarks work?

A key component of responsive design is landmarks. These points act as anchors that anchor visual elements to the screen, helping to make the design adaptive.

  • Width and height: The design requires defining specific dimensions for each element.
  • Anchors: These are the arrows that are established around an element, which determine its position with respect to the screen.

How to create containers in responsive design?

Containers are a crucial element for handling responsive design. They are used to group elements and ensure their correct adaptation to different screen sizes.

.container { width: 100%; height: auto; background-color: #f0f0f0;}

Steps to configure containers:

  1. Hide unneeded elements temporarily.
  2. Create a container for each group of elements.
  3. Assign specific dimensions and temporary colors for display.
  4. Adjust the anchors for each container according to the needs of the design.

How to test different aspect ratios?

Testing how your design looks in different aspect ratios helps you to get a more universal design. Although the initial design may be created in a specific resolution such as 16:9, it is crucial to check how it behaves in other configurations such as 4:3.

Steps to test aspect ratios:

  1. Change the aspect ratio in the display preferences.
  2. Adjust where necessary the positions and sizes of elements.
  3. Verify that the anchors keep the elements in the desired positions.

How to optimize icons and elements inside containers?

Once the containers behave correctly, it is time to adjust the internal elements. Make sure that all icons and texts inside are positioned properly.

Adjustments for internal elements:

  • Icons: Position the anchor of the icons based on the edges of the container.
  • Texts: Make sure that texts are correctly referenced within their assigned area.

Final considerations for a fully responsive design:

  • Simplify visually while working: use colors to better visualize the elements before putting the final images.
  • Verify the functionality of anchors: Make sure anchors are aligned so that elements maintain their proportion and position.
  • Continuous testing: Test constantly to ensure that the game looks good in all configurations.

With a well-implemented responsive design, you will ensure that your games deliver an optimal user experience, no matter what device they are played on. Always keep exploring and experimenting to achieve excellence in your designs.

Contributions 9

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

Muy útiles los anchors!

Elementos UI en escena ![](

Eso es genial por fin una manera para adaptar a diferentes tipos de pantalla 😄

Muy buenos tips, me hubiesen servido de mucho cuando estaba creando mi primer juego

Responsivo = Imagen que se adapta a cualquier pantalla.

Bien que enseñansa tan buena

porfin me quedo claro, siempre usando plugins y cosas asi para lograr esto y tu lo haces por defecto, muy util!GRACIAS ❤️

Seria mucho mas intuitivo si para hacer paginas web se utilizara una interfaz mas como el estilo de unity en vez de mero código HTML, CSS y Java script

El diseño responsivo se refiere a que toda la UI que tenemos se ajuste automáticamente a cualquier pantalla.

Para ello, usamos contenedores que contendrán a cada elemento de la UI.