Index | A | A.153.3 # Splash Screen and Hit Boxes

So far in our tutorial we have managed to run an avatar in a blank environment. But all in all there are still many construction sites where we have to be. In the .gif animation above you can see a pixelated logo. Nowadays every indie game developer has his own logo. Most of the time they are created by strange coincidences. waves Wieherbuh. Whatever. UGLY ARTIST is my project name. We will replace it with the default Godot Robot Screen. To do this, we go to Project Settings > Application > Boot Slpash > Image > load image and load our own image from the hard disk. I have set the background to #000000 (black). A.119 In the second step we go to our project folder. In this folder is a file called icon.png. It will be displayed in our window when we start the game in window mode. If we start the game in fullscreen mode we will not see the icon. This icon is 64 x 64 pixel and can be changed by us. Since I want to create a pixel game demo, I took Dio my cat as icon. Unfortunately I had to scale it a little bit, but also for me it means at the moment that I only learn things and pay less attention to the execution. I can do that later on a real game. If we changed the icon in a graphics program it will be updated automatically by the game engine.

The most important step now is to create a new scene in which our avatar can run. We create a new node and call it "Main". This node is a TextureReck. We have to assign a texture to this node. I have created a mockup which contains all elements of the game. Each element (table, chair, bed etc.) was created on its own level. Since I only need the background now, I can export it from my mockup and implement it here as a .png file. The background should have the same size as your window where the game is displayed. Since the scene does not change or the avatar can move to another room, the scene remains static. That means that nothing moves. We load the texture back into the Inspector, whose window we find in default on the other side of the workspace. There we can also make other settings like flip, expand or stretch the background. Since the game engine is quite powerful we have a lot of settings there which I won't explain at the moment. Now we only have to connect our avatar (player) to the main scene. To do this we go to the FileSystem window and drag the file Player.tscn into the Scene window on the Main Node. Everything will be linked automatically. You can certainly make it cleaner by scripting it by hand, but this is just the basics at the moment. In the game programming you test a lot and you have to get used to the idea to discard ideas, concepts or characters if they don't fit into the whole game. If we now select the Main.tscn and start the game with F6, our splash screen A.107.4 is displayed first and then the game. We can not move our avatar in the environment. Unfortunately there are no items and hit boxes yet. But we will take care of that as well.

To understand the Problem in more detail, we need to deal with Game Design and perspective. Why does it look so wrong when our player moves in the room and he can walk up the wall. There are different camera angles, but today we will only deal with two. The first image is a side-scrolling (side-view) camera angle. The player can only go right and left and with the game world scrolls. The player cannot go below the Pink Line. An example game is Super Mario World.

To get more depth into the games, game designers have started to move the collision line. A very good example is the computer game Streets of Rage from 1991. The Protagonist runs along, in a side scroller a street and have to compete against different fighters. The lower part of the street is the floor and the rear part is the house wall, first glance, this does not matter much, but with complex graphics you can use it to represent a perspective space. the game is still 2D, but it looks like 2.5 D or something. If you then have parallax scrolling built into the game, that was already an outstanding gaming experience. The human eye and brain are not as good as we like to talk ourselves into, and you can cheat perception with a lot of simple Tricks.

So what doesn't look consistent in the gif Animation is the absence of a collision line. For this purpose, the so-called Hit boxes are used in Game Programming. Almost everything in a game world has hit boxes. The player, items or certain opponents. Also terrain has Hit boxes. We as players can not go through a world unless we play a ghost. The wall then belongs to the terrain and has a Hitbox. However, this can be broken if we install a door, hole or window. This is interactive terrain and you can break through the Hitbox. A game world doesn't have to be realistic per se, it just has to be self-contained and consistent. It's ok to be able to fly through a wall as a ghost. But it becomes more exciting when in some places magical symbols prevent breaking through the hit box. However, if the player finds a role for a counter spell and applies that role to the magic Symbol, this magic barrier can be removed. And so you already have the first puzzle, which makes your idea to a computer game.

What makes the whole thing difficult in a room is if we do not have orientation points. What is the ground? What is the wall? In Streets of Rage many elements have been incorporated into the scenes. Cars, road signs and lamps are at the front. The character runs after it. Posters, neon signs and lights hang on the wall of the House. The char runs in front of it. This is not only beautiful elements, but also important points for the human brain. When players run against a garbage can, they will also try to see if they can interact with the trash bin. Sometimes you can also throw the garbage can at an opponent. So these are the next two points we have to work with. We need hit boxes and elements in the room.