2024-12-28 23:40:05 +02:00
|
|
|
#+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
|
2025-01-07 19:46:30 +02:00
|
|
|
|
|
|
|
|
** 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]]
|
2025-01-07 20:02:43 +02:00
|
|
|
|
|
|
|
|
** 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]]
|
2025-01-09 06:46:14 +02:00
|
|
|
|
|
|
|
|
** 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]]
|
2025-01-09 19:32:45 +02:00
|
|
|
|
|
|
|
|
** 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
|
