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.