Skip to content

Commit 3574054

Browse files
avivaceavivace
committed
part3: image styling improvements
1 parent 23807b7 commit 3574054

5 files changed

Lines changed: 34 additions & 16 deletions

File tree

‎css/custom.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,12 @@ pre > code.linenos > .line::before {
5555
.console-line::before {
5656
content: "$ ";
5757
}
58+
59+
60+
.pixelated {
61+
image-rendering: pixelated;
62+
}
63+
64+
.sprites {
65+
margin: 10px;
66+
}

‎src/part3/getting-started.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
# Introducing Galactic Armada
44

5-
6-
![Untitled](../assets/part3/img/rgbds-shmup-gameplay2.gif)
5+
<img class="pixelated" src="../assets/part3/img/rgbds-shmup-gameplay2.gif">
76

87
This guide will help you create a classic shoot-em-up in RGBDS. This guide builds on knowledge from the previous tutorials, so some basic (or previously explained) concepts will not be explained.
98

‎src/part3/project-structure.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,24 @@ The following backgrounds and sprites are used in Galactic Armada:
4444
- Player Ship
4545
- Bullet
4646

47-
![star-field.png](../assets/part3/img/star-field.png)
47+
<img class="pixelated" src="../assets/part3/img/star-field.png">
4848

49-
![text-font.png](../assets/part3/img/text-font.png)
49+
<img class="pixelated" src="../assets/part3/img/title-screen.png">
5050

51-
![title-screen.png](../assets/part3/img/title-screen.png)
51+
<br>
5252

53-
![player-ship.png](../assets/part3/img/player-ship.png)
53+
<img class="pixelated" src="../assets/part3/img/text-font.png" height="48px">
5454

55-
![enemy-ship.png](../assets/part3/img/enemy-ship.png)
55+
<br>
5656

57-
![bullet.png](../assets/part3/img/bullet.png)
57+
<img class="pixelated sprites" src="../assets/part3/img/player-ship.png" height="48px">
5858

59-
These images were originally created in Aseprite. The original templates are also included in the repository. They were exported as a PNG **with a specific color palette**. Ater being exported as a PNG, when you run `make`, they are converted into .2bpp and .tilemap files via the RGBDS tool: RGBGFX.
59+
<img class="pixelated sprites" src="../assets/part3/img/enemy-ship.png" height="48px">
60+
61+
<img class="pixelated sprites" src="../assets/part3/img/bullet.png" height="48x">
62+
63+
64+
These images were originally created in Aseprite. The original templates are also included in the repository. They were exported as a PNG **with a specific color palette**. Ater being exported as a PNG, when you run `make`, they are converted into `.2bpp` and `.tilemap` files via the RGBDS tool: RGBGFX.
6065

6166
> The **`rgbgfx`** program converts PNG images into data suitable for display on the Game Boy and Game Boy Color, or vice-versa.
6267
>

‎src/part3/story-screen.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,27 @@
22

33
The story screen shows a basic story on 2 pages. Afterwards, it sends the player to the gameplay game state.
44

5-
![GalacticArmada-1.png](../assets/part3/img/GalacticArmada-1.png)
6-
![GalacticArmada-2.png](../assets/part3/img/GalacticArmada-2.png)
5+
<img src="../assets/part3/img/GalacticArmada-1.png" class="pixelated" height="288px">
6+
7+
<img src="../assets/part3/img/GalacticArmada-2.png" class="pixelated" height="288px">
78

89
## Initiating up the Story Screen
910

10-
In the "InitStoryState" we'll just going to turn on the LCD. Most of the game state's logic will occur in its update function.
11+
In the `InitStoryState` we'll just going to turn on the LCD. Most of the game state's logic will occur in its update function.
12+
13+
::: tip
14+
15+
The text macros file is included so our story text has the proper character maps.
1116

12-
> **NOTE:** The text macros file is included so our story text has the proper character maps.
17+
:::
1318

1419
```rgbasm,linenos,start={{#line_no_of "" ../../galactic-armada/src/main/states/story/story-state.asm:init-story-state}}
1520
{{#include ../../galactic-armada/src/main/states/story/story-state.asm:init-story-state}}
1621
```
1722

1823
## Updating the Story Screen
1924

20-
Here's the data for our story screen. We have this defined just above our "UpdateStoryState" function:
25+
Here's the data for our story screen. We have this defined just above our `UpdateStoryState` function:
2126

2227
```rgbasm,linenos,start={{#line_no_of "" ../../galactic-armada/src/main/states/story/story-state.asm:story-screen-data}}
2328
{{#include ../../galactic-armada/src/main/states/story/story-state.asm:story-screen-data}}

‎src/part3/title-screen.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
The title screen shows a basic title image using the background and draws text asking the player to press A. Once the user presses A, it will go to the story screen.
44

5-
![Untitled](../assets/part3/img/title-screen-large.png)
5+
<img src="../assets/part3/img/title-screen-large.png" class="pixelated">
66

77
Our title screen has 3 pieces of data:
88

@@ -62,4 +62,4 @@ Our "WaitForKeyFunction" is defined in "src/main/utils/input-utils.asm". We'll p
6262
{{#include ../../galactic-armada/src/main/utils/input-utils.asm:input-utils}}
6363
```
6464

65-
That's it for our title screen. Next up is our story screen.
65+
That's it for our title screen. Next up is our story screen.

0 commit comments

Comments
 (0)