compsci_godot_albert/_subsections/sec04/lesson-01.org

Section 04 - Lesson 01 | Project Setup & Aspect

• Links
• Notes
  • setting up
  • making the background
  • set the current default run scene
  • set up aspect ratio
    • set the values
    • viewport changes
  • stretching the viewport
    • Stretch -> Mode
      • there are two types of stretch modes
      • convas_items
      • viewport
    • Stretch -> Aspect
      • there are a bunch of aspect types
      • keep
    • how to deal with black bars
  • window size
    • go to

Links

• TOC - Godot Notes
• S04:L45.01 - Project Setup & Aspect Ratios

Notes

setting up

• root node: plain Node2D
• add as Sprite2D for background

• change aspect ration to 480*854 Portrait

  • this is the recommended ratio for mobile
• copy assets to the FileSystem pane under res://

making the background

• you add a Sprite2D node to the Node2D
• drag the image you want from res:// to the texture property in the Sprite2D inspector

set the current default run scene

there are two ways to do this

1. hit "run" and select the current scene

2. via Project Settings

   1. go to Project->Project Settings
   2. go to Application->Run->Main Scene

   3. pick the scene you want to put in there

      

set up aspect ratio

set the values

• Project->Project Settings
• Display->Window

• In 'Size'

  • set width 480
  • set height to 854

viewport changes

• the white line representing the viewport changes shape

• move the background image appropriately with the view tool

  

stretching the viewport

• used if the window needs to be resized or sized differently for a differnt device (ie tablet vs iphone vs iphone11 vs android, etc)
• disabled by default
• go to Project->Project Settings->Display->Window->Stretch

Stretch -> Mode

there are two types of stretch modes

1. canvas_items
2. viewport

convas_items

• albert prefers this
• renders game initially at set resolution
• stretches that onto the window
• can cause blurring with pixel art
• higher performance (hence faster)

viewport

• looks at actual resolution
• builds graphics to fit that resolution
• slower but crisp with pixel art

Stretch -> Aspect

set aspect to keep

there are a bunch of aspect types

• ignore
• keep
• keep width
• keep height

keep

• keeps the full aspect ration
• extra space will be filled with black

how to deal with black bars

• make artwork that accounts for it
• e.g. put a fence around the boundary

window size

• if the ratios set for viewport are too small you can directly set the window size

go to

1. Click on 'Advanced Settings'
2. Project->Project Settings->Display->Window->Size
3. scroll down to "Window Width Override" and "Window Height Override"
4. you can perform calculation sin the textboxes