1

🐔🚗🚙
Godot Engine - Tutorial Freeway

💻
● Conteúdo:

🐔
○ Configuração do projeto

🏁
○ Criar a cena do Player

🎮
○ Criar a cena da Linha de Chegada

🚗🚙
○ Criar a cena do jogo principal

🏷️ 🔲
○ Criar a cena dos Carros
○ Criar a cena da HUD

● Configuração do projeto 💻

O Project Manager é a primeira janela que irá aparecer quando você abrir o Godot.
Nesta janela você pode ver uma lista de seus projetos. Você pode escolher um
projeto e clicar em “Run” para jogar um jogo já existente ou clicar em “Edit” para
trabalhar nele na Godot.

Como você provavelmente ainda não tem nenhum projeto, então:

● Clique no botão “New Project”. Irá aparecer a janela de criação de projeto;

● Clique no botão “Browse” para alterar o diretório do seu computador onde
deseja armazenar o projeto;
● Digite “Freeway” (nome do jogo) em “Project Name” e, em seguida, e clique
em “Create Folder” para criar a pasta do jogo;
● Mantenha selecionado “OpenGL ES 3.0”;
● Clique no botão “Create & Edit”.
 2

Para configurar o tamanho da janela, vá em “Project” > “Project Settings” > “Display”
> “Window”. Em “Size”, altere “Width” para 1280 e “Height” para 720. Em “Stretch”,
coloque “Mode” para 2d e “Aspect” para keep.

Para importar os assets (imagens e sons), abra a pasta no gerenciador de arquivos

do seu Sistema Operacional e copie os materiais do jogo para dentro da pasta do
seu projeto. Uma forma mais fácil de abrir a pasta do projeto é clicando com botão
direito na pasta raiz (“res://”) e em “Open in File Manager”. Você encontrará os
assets do jogo no AVA.

● Criar a cena do Player 🐔

A primeira cena a ser criada será o Player. Para adicionar o
nó raiz da cena, clique no botão "Other Node" e adicione
um nó Area2D à cena. Com Area2D podemos detectar
objetos que se sobrepõem ou se chocam com o Player.

Agora que definimos o nó raiz da cena, podemos adicionar

nós adicionais para fornecer mais funcionalidade. Adicione
os seguintes nós AnimatedSprite, CollisionShape2D e
AudioStreamPlayer2D como filhos do nó Area2D.
 3

Renomeie os nós: Area2D para Player,

AnimatedSprite para Animacao;
CollisionShape2D para Colisao e
AudioStreamPlayer2D para Audio. O Godot
exibirá um ícone de aviso (em amarelo) ao lado do
nó na árvore de cena. Iremos alterar as
propriedades dos nós para que estes avisos sejam
removidos.

Clique no nó Animacao (AnimetedSprite) e vá em

“Frames” > “New SpriteFrames”. Aparecerá uma
bandeja na parte inferior para configurar a
animação dos Sprites. Clicando em “New
Animation”, adicione duas animações: cima e
baixo.

Em cada uma das animações, arraste as Sprites

(de dentro da pasta “assets/galinha/cima” e
“assets/galinha/baixo” no gerenciador de arquivos)
para a área de “Animation Frame”. Altere “Speed”
para 8 e diminua o tamanho dos Sprites, alterando
“Scale” para 0.3 em x e em y.
 4

Clique no nó Colisao (CollisionShape2D) e vá em “Shape” > “New CircleShape2D”.

Altere o tamanho do círculo de colisão criado de forma que cubra todo Sprite da
galinha. Clique no nó Audio (AudioStreamPlayer2D) e arraste o áudio que toca o
som de colisão (“assets/sons/colide.wav”) para a propriedade “Stream”.

Para criar um script na cena do Player, clique com o botão direito no nó raiz
(Player) e clique em “Attach Script”. Escreva o código do Player, como no trecho de
código abaixo.

extends Area2D

export var speed = 100

var screen_size
var posicao_inicial = Vector2(640, 690)

signal pontua

func _ready():
screen_size = get_viewport_rect().size

func _process(delta):

var velocity = Vector2()

if Input.is_action_pressed("ui_up"):
velocity.y -= 1
if Input.is_action_pressed("ui_down"):
velocity.y += 1
 5

velocity = velocity.normalized() * speed

if velocity.length() > 0:
$Animacao.play()
else:
$Animacao.stop()

if velocity.y > 0:
$Animacao.animation = "baixo"
else:
$Animacao.animation = "cima"

position += velocity * delta

position.y = clamp(position.y, 0, screen_size.y)

func _on_Player_body_entered(body):

if body.name == "LinhaChegada":
emit_signal("pontua")
else:
$Audio.play()

position = posicao_inicial

OBS: Para conectar o sinal “body_entered” no script do Player, clique no Player,

vá “Node” > “body_entered” > “Connect” > “Player” > “Connect”. A a declaração da
função será criada sozinha (não digite, conecte). Mas para testar a função
“_on_Player_body_entered” será necessário criar primeiro a cena da Linha de
Chegada. Save a cena.

● Criar a cena da Linha de Chegada 🏁

Crie uma nova cena (“Add a new scene”) e insira um
nó RigidBody2D como pai da cena. Renomeie-o para
LinhaChegada e adicione como dois filhos: um Sprite
e um CollisionShape2D.

Em Sprite da LinhaChegada, arraste da imagem

“assets/ganha.png” para “Texture” da Sprite. Em
CollisionShape2D de LinhaChegada, vá em “Shape”
> “New RectangleShape2D” e ajuste o shape de
colisão na imagem da Sprite.

Agora já é possível perceber a função

“_on_Player_body_entered” detectando a colisão
quando a galinha cruza a linha de chegada.
 6

Clique em LinhaChegada (RigidBody2D) e vá em “Gravity Scale” e altere para 0.

Salve a cena.

● Criar a cena do jogo principal 🎮

Crie uma nova cena com um Node como raiz. Para isso, clique em “Add a new
scene” > “Other Node” > “Node”. Renomeie o Node para Main. Insira como filho de
Main um Sprite e chame-o de Pista. Carregue a imagem, arrastando
“assets/wallpaperfreeway.png” para a propriedade “Texture” de Pista. Essa imagem
representa o background do jogo e possui várias pistas.

Adicione a cena Player como outro filho de Main. Para isso clique em “Instance
Child Scene” > “cenas/Player.tscn” > “Open”. Faça o mesmo processo para inserir a
cena LinhaChegada como filho de Main.

Clique no nó Pista (Sprite) e desmarque a opção “Offset” > “Centered”, na dock do

inspetor, isso deixará a Sprite alinhada com a tela do jogo.

Clique no nó Player (filho da Main) e em “Transform” > “Position”, altere o valor de

x e y para 640 e 690, respectivamente. Isso irá posicionar corretamente a galinha no
mapa. Save a cena.
 7

● Criar a cena dos Carros 🚗🚙

Adicione uma nova cena para representar
todos os carros. Para isso, clique em
“Add a new scene” > “Other Node” e
insira um RigidBody2D como raiz da
árvore de cenas dos carros. Como filhos,
adicione na árvore: um AnimatedSprite,
um CollisionShape2D e um
VisibilityNotifier2D. A figura ao lado
mostra como ficará a árvore de cena dos
carros, depois de ter renomeado os nós.

Clique em Carros (RigidBody2D) e vá em

“Gravity Scale” e altere para 0.

Clique em Animacao (AnimatedSprite) e vá em

“Frames” > selecione “New SpriteFrames” >
clique em “SpriteFrames” e uma bandeja de
animação será aberta (esse processo é o mesmo
feito na cena do Player). Na pasta
“assets/carros” existem 14 sprites diferentes de
carros. Crie uma animação para cada uma das
sprites de carro.

Para cada uma das 14 sprites de

carros, crie uma nova animação.
Clique em “New animation” e renomeie
a primeira animação para carros01.
Faça isso para todos os outros carros,
obtendo 14 animações nomeadas
como: carro01, carro02, carros03,
…, carros14.

Ainda com o nó Animacao

(AnimatedSprite) selecionado vá em
“Transform” > “Rotation Degree” e
altere para 90 e em “Transform” >
“Scale” e altere para 0.2, tanto em x
quanto em y.

Clique no nó Colisao
(CollisionShape2D) e vá em “Shape” >
 8

“New RectangleShape2D” e cubra o sprite do carro com o retângulo de colisão.

Save a cena.

Anexe um script na cena Carros. Para isso, clique com o botão direito em Carros e
clique em “Attach Script”. Escreva o código da cena, como no trecho de código
abaixo.

extends RigidBody2D

func _ready():
var tipos_carros = $Animacao.frames.get_animation_names()
var carro = tipos_carros[randi() % tipos_carros.size()]
$Animacao.animation = carro

func _on_Notificador_screen_exited():
queue_free()

● Criar a cena da HUD 🏷️🔲

Adicione uma nova cena para representar a
HUD do jogo. Clique em “Add a new scene” >
“Other Node” e insira um CanvasLayers como
raiz e adicione como filhos os seguintes nós:
dois nós do tipo Label, um nó do tipo Button.
Renomeie o CanvasLayer para HUD, um Label
para Placar e outro Label para Mensagem.
 9

Clique no nó Placar e altera a propriedades:

○ “Text” para 0
○ “Align” para center e “Valign” para center
○ “Rect” > “Size” > “x” para 100 e “y” para 60.
○ “Layout” > “Center Top”;
○ Para alterar a fonte vá em “Themes Override” > “Fonts” > “Font” (que
está Empty) > “New DynamicFont” > “Font” > “Font Data” > “Load” >
Selecione a fonte “assets/PressStart2P-Regular.ttf”;
○ “Themes Override” > “Fonts” > “Font” > “Settings” > “Size” altera o
tamanho da fonte para 32.

Clique no nó Mensagem e altera a propriedades:

○ “Text” para “Player Ganhou!”;

○ “Align” para center e “Valign” para center;
○ “Rect” > “Position” > “x” para 390 e “y” para 170;
○ “Rect” > “Size” > “x” para 500 e “y” para 100.
○ Para alterar a fonte, vá em “Themes Override” > “Fonts” > “Font” (que
está empty) > “New DynamicFont” > “Font” > “Font Data” > “Load” >
Selecione a fonte “assets/PressStart2P-Regular.ttf”;
○ “Themes Override” > “Fonts” > “Font” > “Settings” > “Size” altera o
tamanho da fonte para 32.
 10

Clique no nó Button e altera a propriedades:

○ “Text” para “Reiniciar”;
○ “Align” para center;
○ “Rect” > “Size” > “x” para 400 e “y” para 120
○ “Layout” para “Center”;
○ Para alterar a fonte, vá em “Themes Override” > “Fonts” > “Font” (que
está empty) > “New DynamicFont” > “Font” > “Font Data” > “Load” >
Selecione a fonte “assets/PressStart2P-Regular.ttf”;
○ “Themes Override” > “Fonts” > “Font” > “Settings” > “Size” altera o
tamanho da fonte para 32.

Clique com o botão direito no nó HUD > “Attach Script” e copie o seguinte trecho de
código abaixo. Atenção: Lembre-se que a declaração da função
“_on_Button_pressed” não é digitada e sim conectada.

extends CanvasLayer

signal reinicia

func _on_Button_pressed():
emit_signal("reinicia")

● Criar a cena do jogo principal (continuação) 🎮

Adicione mais dois nós do tipo Timer na cena da
Main. Para isso, clique em “Add Child Node” >
“Timer”. O primeiro timer renomeie para
TimerCarrosRapido e o segundo timer para
TimerCarrosLento.

Clique em TimerCarrosRapidos e altere “Wait

Time” para 0.3 e ative a opção “Autostart”.
Clique em TimerCarrosLentos e altere “Wait
Time” para 0.5 e ative a opção “Autostart”. Com
o TimerCarrosRapido selecionado, clique em
“Node” (na dock do Inspector) > “timeout()” >
“Connect” > “Main” > “Connect”. Faça o mesmo
para o TimerCarrosLento.
 11

Clique “Add Child Node” > “AudioStreamPlayer” > “Create” e adicione 3 nós do tipo
e “AudioStreamPlayer” como filho de Main. Renomeie os nós para: AudioTema,
AudioPonto e AudioVitoria. Clique em AudioTema > “Stream” > “Load” >
“tema.wav”. Clique em AudioPonto > “Stream” > “Load” > “ponto.wav”. Clique em
AudioVitoria > “Stream” > “Load” > “ganhou.wav”.

Anexe um script na cena Main. Para isso, clique com o botão direito em Main e
clique em “Attach Script”.

Na cena Main, clique em Player > “Node” (na dock inspector) > “pontual()” >
“Connect” > “Main” > “Connect”. Isso conectará o sinal “pontua” que foi criado na
cena do Player.
 12

Na cena Main, clique em HUD > “Node” (na dock inspector) > “reinicia()” > “Connect”
> “Main” > “Connect”. Isso conectará o sinal “reinicia” que foi criado na cena da HUD.

Copie o código da cena, como no trecho de código abaixo. OBS: Este código ainda
será incrementado.

extends Node

const CENA_CARROS = preload("res://cenas/Carros.tscn")

var pistas_rapidas = [104, 272, 488]

var pistas_lentas = [160, 216, 324, 384, 438, 544, 600]

var score = 0

func _ready():
$AudioTema.play()
$HUD/Mensagem.text = ""
$HUD/Button.hide()
randomize()

func _on_TimerCarrosRapido_timeout():

var novo_carro = CENA_CARROS.instance()

add_child(novo_carro)

var pista = pistas_rapidas[randi() % pistas_rapidas.size()]

novo_carro.position = Vector2(-10, pista)

novo_carro.linear_velocity.x = rand_range(700, 710)
novo_carro.linear_damp = -1

func _on_TimerCarrosLento_timeout():

var novo_carro = CENA_CARROS.instance()

add_child(novo_carro)

var pista = pistas_lentas[randi() % pistas_lentas.size()]

 13

novo_carro.position = Vector2(-10, pista)

novo_carro.linear_velocity.x = rand_range(300, 310)
novo_carro.linear_damp = -1

func _on_Player_pontua():
score += 1

if score >= 10:

$AudioTema.stop()
$AudioVitoria.play()
$TimerCarrosRapido.stop()
$TimerCarrosLento.stop()
$HUD/Mensagem.text = "Player Ganhou!"
$HUD/Button.show()
else:
$HUD/Placar.text = str(score)
$AudioPonto.play()

func _on_HUD_reinicia():
score = 0

$Player.position = $Player.posicao_inicial
$AudioTema.play()

$TimerCarrosRapido.start()
$TimerCarrosLento.start()

$HUD/Mensagem.text = ""
$HUD/Placar.text = "0"
$HUD/Button.hide()

OBS: Lembre-se que as declarações das funções que começam com “_on_…”
devem ser conectadas.