The folder structure
With time you will find that the
Assets folder will become a mess, so I suggest to organize it in a way that makes sense to you. I've used the following structure:
│ └─ 🖼️
│ └─ 🖼️
│ └─ 🎹
│ └─ 💥
│ ├─ Effects
│ ├─ Enemies
│ ├─ Particles
│ ├─ Paths
│ ├─ Projectiles
│ └─ Waves
│ └─ 🎬
│ └─ xxx.ts
I had a lot of issues with system fonts so I've finally used a bitmap one. I've used bmGlyph, which is a great app that does plenty of things like gradient and other effects.
Save your time and just use
mp3 files for music and sound effects,
ogg files are not supported in some browsers.
First thing first, the game is composed of 4 scenes. The
Preload scene is where the game starts it loads immediatly the
MainMenu scene that is the first scene that is shown to the player when the game is launched. The
Game scene is the main scene, where the game is played. The
GameOver scene is shown when the player loses.
You set the game starting scene not in preferences but during the build phase so that you can, for instance, start with a different scene according to the target platform.
Preload scene is used to instantiate two singletons. One is for managing levels and the other to play the game music. Singletons are used to share data between scenes. This tecnique is also used in Unity.
LevelManager singleton is used to manage the the scenes, the
AudioManager singleton is used to play the game music.
GameOver scenes are very similar. They both have some
Buttons that are used to navigate between the scenes. Buttons have click events connected to
LevelManager script that loads the scene. The
GameOver scene also has a
Label that shows the player's high score.
The game scene is very simple, there's a
Player node of course, scrolling
Foreground nodes and
Enemies prefabs that are instantiated that move towards the player. The player can shoot
Projectiles that destroy enemies. The game is over when the player's health is over. The UI is composed of a
ProgressBar and a
Score. There is also a
GameManager node that hosts the script that manages the game as the
EnemyFactory and the
ScoreKeeper. We will see how these work in the next sections. You will also notice a parent node for the
Player which is
ShipBoundaries. It's used to limit the player's movement inside the canvas and it uses the
Widget component to stick to the canvas (even if the game is not responsive).
│ ├─ Stars
│ └─ Clouds
│ └─ Player
│ ├─ Engine
│ └─ Ship
│ └─ Clouds
│ ├─ ProgressBar
│ │ └─ Bar
│ └─ Score
The camera node is a child of the
Canvas node, it's used to follow the player. The script attached to the camera is
CameraShake.ts and it does exactly what it says, it shakes the camera. It's used when the player is hit by an enemy. The script is very simple, it just moves the camera in a random direction for a given amount of time. The camera is moved by changing the
position and the
rotation property of the node.
These two nodes are placeholder for textures, the
Background node has
Clouds textures, those nodes are just sprites with a script attached. The script is
Scroller.ts and it does just one thing, it scrolls the texture. How ? It clones the node so that it can scroll infinitely. The two nodes forms a column that begin to scroll at a given speed, when the bottom one reaches the end of the canvas (and it is out of sight) it moves at the top of the other and the process repeats. This is how the scrolling effect is achieved.
Player node is the most complex node in the game, it has a lot of scripts attached to it, so it deserves a section of its own.