#+title: Section 04 - Lesson 01 | Project Setup & Aspect
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../_share/media/css/godot.css" />

* Links
- [[../../toc.org][TOC - Godot Notes]]
- [[https://www.udemy.com/course/jumpstart-to-2d-game-development-godot-4-for-beginners/learn/lecture/45069795#overview][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://

#+attr_html: :width 300px
  [[./../../_share/media/img/albert/section04/lesson-01/fig01.png]]

** 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

#+attr_html: :width 500px
[[./../../_share/media/img/albert/section04/lesson-01/fig02.png]]

#+attr_html: :width 500px
[[./../../_share/media/img/albert/section04/lesson-01/fig03.png]]

** 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

        #+attr_html: :width 700px
        [[./../../_share/media/img/albert/section04/lesson-01/fig04.png]]

** 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
   #+attr_html: :width 600px
   [[./../../_share/media/img/albert/section04/lesson-01/fig05.png]]

** 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
4. scroll down to "Window Width Override" and "Window Height Override"
5. you can perform calculation sin the textboxes