June2026Game/Readme.md

Week 4 - Environment

1. Create a second terrain for vegetation
Learn to use the tilemap layer to easily add vegetation to your level.
* Add a terrain to your terrain set zero
* Import and atlas your graphics (32x32)
* Paint terrain rules

2. Setting Display properties
Learn to set display properties to size the viewport and scale it.
Go to project settings:
	Display>Window
	Viewport Width 480
	Viewport Height 270
This makes the viewport small, but we can now scale it up to the size we want to play at
	Advanced settings: on
	Window width override: 960
	Window height override: 540
And finally how to handle the up-scaling
	Stretch>Mode: viewport
	aspect: keep
	scale: 1.0

At this point you can control the scaling.
The closer the viewport setting is to the scaled size, the more of the
scene will be revealed.
You should add a camera to the player so that the viewport will show the area around them.

3. Creating a background

Create a "sky"
	Create a color block the same size as your viewport (480x270)
	Create a parallax2D > Add a child Sprite2D to it
	Assign the graphic to be the sprite in Sprite2D
	Offset the graphic in Sprite2D, 1/2 width, 1/2 height
	In the parallax2D parent, set scroll scale to x:1.0 y:1.0
	Repeat Size: x:480 y:270
Create a "midground" parallax2D
	Scroll Scale x:1.05 y:1.0
	Repeat Size x:480 y:0
Create a "foreground"
	Scroll Scale x:1.1 y:1.0
	Repeat Size x:480 y:0
Optional - Create a "front" parallax2D

4. Custom Graphics
Set up GIMP for creating custom pixel art

Make a background
	Create a new document, set to the size of viewport (480x270)
Set up Canvas for Pixel Art
	View > Show Grid
	Image > Configure Grid
	Spacing > 1 horizontal 1 vertical (pixels) > set foreground colour
Set up Tool for Pixel Art
	Select "pencil" by click-hold on drawing tools
	In tool options:
		Size: 1.0
		Hardness: 100
The pencil tool creates the hard edges we want in pixel art.
Saving your file as .xcf file will save your grid settings, but will not
automatically show the grid when you open the file. You will still need to
go to View > Show Grid
	
Turning Images into Pixel Art

When you bring in a reference image there is a good chance it will need to
have work done. A good way to get used to using reference images is to use
a silhoette image.
	Get an image
	Paste it as a new single layer
	Scale it using the scaling tool
	Use the colour picker tool to select the black
	Make a new layer
	Use the paint bucket tool to fill the selection (can now delete reference)
With the selection painted it will snap the paint to whole pixels, but
you will likely see some fuzzy edges because some of the pixels around edges
will be partially transparent.
You can use the colour picker tool set to "select by alpha". Now when you select
a transparent pixel, it will add all pixels with the same transparency to the
selection.
You can now use the paint bucket to fill the selection with an appropriate colour.
When done you can paint bucket the main colour (no selection) to flood-fill any
remaining partially transparent pixels.

Editing Pixel Art

You might want to customize your character art! Conveniently, your sprite sheets
are designed so that each limb of the character is composed of a consistent 
colour in each frame.
This allows us to use the "colour selection" tool to select the limb in every frame.
And as above, the paint bucket can be used to fill the limb with an appropriate colour.

When complete, you can draw in anything else you like, though you will have to
do it for each cell. If you save it to your Godot project, it will overwrite
the graphics, and instantly show up in your game!

Scaling Pixel Art

Be aware that if you scale pixel art, there is a very high chance the edges will
become fuzzy and indistinct. This is because of "interpolation".
To avoid this problem, set the scaling tool to Interpolation - None.
Now when you scale your pixel art it will snap to the closes whole pixel,
maintaining the crisp edges.