{"id":57,"date":"2024-06-07T09:22:48","date_gmt":"2024-06-07T09:22:48","guid":{"rendered":"http:\/\/pplay.local\/?page_id=57"},"modified":"2026-09-15T00:11:00","modified_gmt":"2026-09-15T03:11:00","slug":"tutoriais","status":"publish","type":"page","link":"http:\/\/www2.ic.uff.br\/pplay\/tutoriais\/","title":{"rendered":"Tutoriais"},"content":{"rendered":"\n
\n\n
\n Power PPlay 2.1 \u00b7 Cap\u00edtulo 3 do manual<\/span>\n

Tutoriais<\/h1>\n <\/div>\n\n

\n Este roteiro constr\u00f3i, do zero e sem pular etapas, um jogo de plataforma\n completo<\/strong>: personagem animado que anda e pula com f\u00edsica de verdade, cen\u00e1rio\n desenhado em arquivo de texto, c\u00e2mera que acompanha, fundo com profundidade, moedas\n colecion\u00e1veis, inimigo com intelig\u00eancia, efeitos de impacto, interface e telas de menu\n e fim de jogo.\n <\/p>\n\n

\n Ao terminar, voc\u00ea ter\u00e1 usado a maior parte da engine \u2014 e entendido o papel de cada pe\u00e7a.\n Reserve entre 60 e 90 minutos<\/strong>.\n <\/p>\n\n

\n
\ud83d\udca1 Dica do S\u00eanior: como acompanhar<\/div>\n

\n Digite o c\u00f3digo, n\u00e3o copie.<\/strong> Rode a cada passo. Quando algo n\u00e3o\n funcionar, compare a sua tela com a ilustra\u00e7\u00e3o do passo: quase sempre a diferen\u00e7a\n aponta direto para a linha errada.\n <\/p>\n <\/div>\n\n

\n

Antes de come\u00e7ar<\/h2>\n

\n Voc\u00ea precisa da engine instalada e de uma janela abrindo. Se ainda n\u00e3o chegou l\u00e1,\n passe primeiro pela p\u00e1gina de download e instala\u00e7\u00e3o<\/a> \u2014 s\u00e3o dois\n comandos e uma pasta.\n <\/p>\n

A estrutura do projeto deste tutorial:<\/p>\n

plataforma\/\n|– PPlay\/ <- a engine\n|– assets\/ <- imagens, sons e mapas (crie a pasta vazia)\n|– gerar_assets.py <- so para este tutorial\n+– main.py <- o jogo<\/div>\n

\n O gerar_assets.py<\/code> desenha sozinho todas as imagens necess\u00e1rias \u2014 her\u00f3i,\n tiles, moeda, zumbi e as camadas de fundo. Rode uma \u00fanica vez e esque\u00e7a que existe:\n assim voc\u00ea n\u00e3o precisa saber desenhar para seguir o tutorial.\n <\/p>\n <\/div>\n\n

\n

Os passos<\/h2>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Passo<\/th>O que voc\u00ea constr\u00f3i<\/th>Pe\u00e7as da engine<\/th><\/tr>\n <\/thead>\n
0<\/strong><\/td>\n A pasta e os desenhos \u2014 gera a arte e o arquivo do mapa fase1.txt<\/code><\/td>\n \u2014<\/td>\n <\/tr>\n
1<\/strong><\/td>\n A janela: 640\u00d7360 l\u00f3gicos, azul-noite, fecha no X e alterna tela cheia no F11<\/td>\n Window<\/code><\/td>\n <\/tr>\n
2<\/strong><\/td>\n O her\u00f3i aparece e anda com as setas \u2014 mas ainda flutua<\/td>\n Sprite<\/code><\/td>\n <\/tr>\n
3<\/strong><\/td>\n Gravidade, ch\u00e3o e pulo. Ele cai, colide, anda com in\u00e9rcia e pula com coyote time<\/em><\/td>\n Physics<\/code><\/td>\n <\/tr>\n
4<\/strong><\/td>\n O cen\u00e1rio vem do arquivo de texto \u2014 mude o .txt<\/code> e o mundo muda<\/td>\n TileMap<\/code><\/td>\n <\/tr>\n
5<\/strong><\/td>\n A c\u00e2mera acompanha o her\u00f3i com suaviza\u00e7\u00e3o e para nas bordas do mapa<\/td>\n Camera<\/code><\/td>\n <\/tr>\n
6<\/strong><\/td>\n Profundidade com parallax: tr\u00eas camadas em velocidades diferentes<\/td>\n ParallaxSystem<\/code><\/td>\n <\/tr>\n
7<\/strong><\/td>\n Moedas: sua primeira classe pr\u00f3pria, herdando de Sprite<\/code><\/td>\n ObjectGroup<\/code><\/td>\n <\/tr>\n
8<\/strong><\/td>\n Suco: part\u00edculas, tremor de tela e som ao coletar<\/td>\n ParticleEmitter<\/code> \u00b7 ScreenEffects<\/code><\/td>\n <\/tr>\n
9<\/strong><\/td>\n Um inimigo que enxerga o jogador e reage<\/td>\n Navega\u00e7\u00e3o \u00b7 A*<\/code><\/td>\n <\/tr>\n
10<\/strong><\/td>\n Interface: vidas, pontua\u00e7\u00e3o e HUD<\/td>\n m\u00f3dulo ui<\/code><\/td>\n <\/tr>\n
11<\/strong><\/td>\n Menu e fim de jogo como cenas separadas<\/td>\n Scene<\/code> \u00b7 SceneManager<\/code><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n
\n

Passo 1 \u2014 a janela<\/h2>\n\n
from PPlay.window import Window\n\njanela = Window(640, 360, “Plataforma”, pixel_art=True)\n\nwhile True:\n janela.set_background_color((22, 32, 58))\n janela.update()<\/div>\n\n

\n A resolu\u00e7\u00e3o l\u00f3gica 640\u00d7360<\/code> \u00e9 16:9 e escala para 1080p em m\u00faltiplo exato\n de 3, o que mant\u00e9m a arte n\u00edtida. O pixel_art=True<\/code> garante o escalonamento\n por vizinho mais pr\u00f3ximo \u2014 sem borrar os pixels.\n <\/p>\n <\/div>\n\n

\n

Passo 2 \u2014 o her\u00f3i aparece e anda<\/h2>\n\n
from PPlay.window import Window\nfrom PPlay.sprite import Sprite\n\njanela = Window(640, 360, “Plataforma”, pixel_art=True)\n\nheroi = Sprite(“assets\/heroi.png”, 4) # 4 quadros na tira\nheroi.set_total_duration(500) # meio segundo por ciclo\nheroi.set_position(80, 200)\n\nwhile True:\n janela.set_background_color((22, 32, 58))\n heroi.move_key_x(220) # setas, ja com delta time\n heroi.draw()\n janela.update()<\/div>\n\n
\n
\u26a0\ufe0f Aten\u00e7\u00e3o: ele anda mas n\u00e3o anima?<\/div>\n

\n O move_key_x()<\/code> move, mas quem troca os quadros da anima\u00e7\u00e3o \u00e9 o\n update()<\/code>. Neste passo ainda n\u00e3o o chamamos \u2014 no passo seguinte o\n update_physics()<\/code> passa a fazer isso por n\u00f3s.\n <\/p>\n <\/div>\n <\/div>\n\n

\n

Passo 3 \u2014 gravidade, ch\u00e3o e pulo<\/h2>\n

\n Aqui o movimento manual d\u00e1 lugar a um corpo cinem\u00e1tico<\/strong>. A partir deste\n ponto o her\u00f3i cai, colide, anda com in\u00e9rcia e pula com coyote time<\/em> \u2014 e voc\u00ea n\u00e3o\n escreve nada disso.\n <\/p>\n\n

from PPlay.physics import Physics\n\nfisica = Physics(gravidade=2500)\n\nheroi.setup_physics(fisica) # <- ganha corpo fisico\n\nchao = Sprite(“assets\/pedra.png”)\nchao.set_position(0, 320)\nchao.width = 640 # estica o retangulo de colisao\n\nwhile True:\n janela.set_background_color((22, 32, 58))\n heroi.update_physics([chao]) # gravidade + colisao + animacao\n chao.draw()\n heroi.draw()\n janela.update()<\/div>\n\n
\n
\ud83d\udca1 Dica do S\u00eanior: sinta a diferen\u00e7a<\/div>\n

\n Segure o espa\u00e7o por mais tempo: o pulo fica mais alto (pulo vari\u00e1vel). Corra at\u00e9 a\n borda e pule depois<\/em> de j\u00e1 ter sa\u00eddo dela: ainda funciona, gra\u00e7as aos 150 ms\n de coyote time<\/em>. S\u00e3o detalhes que ningu\u00e9m percebe \u2014 e que fazem o controle\n parecer bom.\n <\/p>\n <\/div>\n <\/div>\n\n

\n

Passo 4 \u2014 o cen\u00e1rio vem do arquivo de texto<\/h2>\n

\n O ch\u00e3o improvisado sai de cena. Agora o mundo inteiro vem do fase1.txt<\/code>,\n onde cada caractere \u00e9 um bloco de 32 pixels.\n <\/p>\n\n

from PPlay.tilemap import TileMap\n\nmapa = TileMap(tamanho_tile=32)\nmapa.carregar_mapa(“assets\/fase1.txt”, {\n ‘#’: “assets\/pedra.png”,\n ‘X’: “assets\/madeira.png”,\n ‘solido’: [‘#’, ‘X’] # quem tem colisao\n})\n\n# no loop, no lugar do chao provisorio:\nheroi.update_physics(mapa.get_solidos())\nmapa.draw()\nheroi.draw()<\/div>\n\n
\n
\ud83d\udc1e Armadilha: o her\u00f3i cai pelo ch\u00e3o<\/div>\n

\n Se ele atravessa tudo, o dicion\u00e1rio provavelmente n\u00e3o tem a chave 'solido'<\/code>,\n ou ela lista caracteres que n\u00e3o aparecem no arquivo. Confira imprimindo\n print(len(mapa.get_solidos()))<\/code>: se der zero, \u00e9 isso.\n <\/p>\n <\/div>\n <\/div>\n\n

\n

Passo 5 \u2014 a c\u00e2mera acompanha<\/h2>\n\n
from PPlay.camera import Camera\n\n# ATENCAO a ordem: a camera precisa existir ANTES do mapa,\n# para que carregar_mapa() ja configure os limites do mundo.\ncamera = Camera(640, 360)\n\nmapa = TileMap(tamanho_tile=32)\nmapa.carregar_mapa(…)\n\n# no loop, depois da fisica:\ncamera.follow(heroi, 0.1)<\/div>\n\n

\n O 0.1<\/code> \u00e9 a suaviza\u00e7\u00e3o: a c\u00e2mera persegue o alvo em vez de grudar nele.\n Troque por 1.0<\/code> e sinta a diferen\u00e7a \u2014 fica seco e embrulha o est\u00f4mago.\n <\/p>\n <\/div>\n\n

\n

Passo 6 \u2014 profundidade com parallax<\/h2>\n\n
from PPlay.parallax import ParallaxSystem\n\nfundo = ParallaxSystem()\nfundo.add_layer(“assets\/ceu.png”, 0.0) # estatico\nfundo.add_layer(“assets\/montanhas.png”, 0.3) # longe\nfundo.add_layer(“assets\/arvores.png”, 0.7) # perto\n\n# no loop, ANTES de tudo (fica atras):\nfundo.draw()\nmapa.draw()\nheroi.draw()<\/div>\n\n

\n Tr\u00eas camadas em velocidades diferentes: o c\u00e9u n\u00e3o se move, as montanhas quase n\u00e3o se\n movem, as \u00e1rvores acompanham. O olho l\u00ea isso como dist\u00e2ncia.\n <\/p>\n <\/div>\n\n

\n

Passo 7 \u2014 moedas: sua primeira classe<\/h2>\n

\n Aqui voc\u00ea deixa de usar<\/em> a engine e passa a estend\u00ea-la<\/em>. A moeda \u00e9 uma\n classe sua, que herda de Sprite<\/code> e acrescenta regra pr\u00f3pria.\n <\/p>\n\n

from PPlay.sprite import Sprite\nfrom PPlay.object_group import ObjectGroup\n\nclass Moeda(Sprite):\n def __init__(self, x, y):\n super().__init__(“assets\/moeda.png”, 8) # SEMPRE a primeira linha\n self.set_total_duration(700)\n self.set_position(x, y)\n self.valor = 10\n\nmoedas = ObjectGroup()\nfor x, y in [(150, 130), (200, 130), (250, 130),\n (450, 200), (500, 200), (860, 100)]:\n moedas.add(Moeda(x, y))\n\npontos = 0\n\n# no loop:\nmoedas.update() # anima todas de uma vez\npega = moedas.collided(heroi) # devolve a moeda tocada, ou None\nif pega:\n pontos += pega.valor\n moedas.remove(pega)\nmoedas.draw()<\/div>\n\n
\n
\ud83d\udca1 Dica do S\u00eanior: por que uma classe pr\u00f3pria?<\/div>\n

\n Voc\u00ea poderia guardar as moedas numa lista de Sprite<\/code>. Mas com uma classe,\n cada moeda carrega o seu<\/em> valor \u2014 e amanh\u00e3, quando existir moeda de ouro valendo\n 50, basta mudar um atributo. Estado e comportamento juntos: \u00e9 isso que orienta\u00e7\u00e3o a\n objetos compra.\n <\/p>\n <\/div>\n <\/div>\n\n

\n

Passo 8 \u2014 suco: part\u00edculas, tremor e som<\/h2>\n

Coletar uma moeda precisa sentir<\/em> bem. Tr\u00eas linhas resolvem.<\/p>\n\n

from PPlay.particles import ParticleEmitter\nfrom PPlay.effects import ScreenEffects\n\nfaiscas = ParticleEmitter(0, 0)\nfaiscas.cor = (245, 197, 66)\nfaiscas.vida_base = 0.5\nfaiscas.tamanho_base = 2\n\n# no loop, logo no comeco:\nScreenEffects.update()\n\nif pega:\n pontos += pega.valor\n moedas.remove(pega)\n faiscas.set_pos(pega.x + pega.width \/ 2, pega.y + pega.height \/ 2)\n faiscas.explodir(14)\n ScreenEffects.shake(4, 0.12)\n\nfaiscas.update()\n# … desenhos …\nfaiscas.draw()\nScreenEffects.draw_flash()<\/div>\n\n
\n
\ud83d\udc1e Armadilha: o efeito n\u00e3o acontece<\/div>\n

\n S\u00e3o tr\u00eas chamadas independentes e todas obrigat\u00f3rias:\n ScreenEffects.update()<\/code> no come\u00e7o do la\u00e7o,\n apply_to_camera()<\/code> depois do camera.follow()<\/code>, e\n draw_flash()<\/code> no fim dos desenhos. Faltando a primeira, o tremor nunca\n termina; faltando a segunda, ele n\u00e3o aparece.\n <\/p>\n <\/div>\n <\/div>\n\n

\n

Passos 9 a 11 \u2014 inimigo, interface e cenas<\/h2>\n

\n Os tr\u00eas \u00faltimos passos fecham o jogo: um inimigo que enxerga o jogador e persegue usando\n o algoritmo A*<\/strong>; a interface com vidas e pontua\u00e7\u00e3o pelo m\u00f3dulo\n ui<\/code>, que tem tema e layout autom\u00e1tico; e as telas de menu e fim de jogo como\n Scene<\/code> independentes, trocadas pelo SceneManager<\/code>.\n <\/p>\n

\n O c\u00f3digo completo dos onze passos, com as ilustra\u00e7\u00f5es de cada etapa, est\u00e1 no\n manual da Power PPlay 2.1<\/a>, cap\u00edtulo 3.\n <\/p>\n <\/div>\n\n\n

\n

Refer\u00eancia dos m\u00f3dulos<\/h2>\n

\n O tutorial acima ensina montando um jogo. Estas p\u00e1ginas explicam cada pe\u00e7a da\n engine isoladamente \u2014 use como consulta enquanto constr\u00f3i.\n <\/p>\n\n

\ud83d\ude80 Primeiros Passos<\/h3>\n
\n \n Instala\u00e7\u00e3o e Setup<\/span>\n

Guia<\/p>\n <\/a>\n \n A Janela e o Tempo (FPS)<\/span>\n

Core<\/p>\n <\/a>\n <\/div>\n\n

\ud83c\udfae Atores e Controles<\/h3>\n
\n \n Criando Sprites Animados<\/span>\n

Sprites<\/p>\n <\/a>\n \n Lendo Teclado e Mouse<\/span>\n

Input<\/p>\n <\/a>\n <\/div>\n\n

\u269b\ufe0f F\u00edsica e Colis\u00e3o<\/h3>\n
\n \n Usando o Motor Cinem\u00e1tico<\/span>\n

F\u00edsica<\/p>\n <\/a>\n \n Colis\u00e3o em Massa (Grupos)<\/span>\n

Gest\u00e3o<\/p>\n <\/a>\n <\/div>\n\n

\ud83c\udf0d Construindo Mundos<\/h3>\n
\n \n C\u00e2mera, Mapas e Parallax<\/span>\n

Mundo<\/p>\n <\/a>\n \n Trocando de Fases (Cenas)<\/span>\n

Flow<\/p>\n <\/a>\n <\/div>\n\n

\u2728 Game Juice e IA<\/h3>\n
\n \n Part\u00edculas e Ilumina\u00e7\u00e3o<\/span>\n

VFX<\/p>\n <\/a>\n \n Pathfinding (A*) e Raycast<\/span>\n

IA<\/p>\n <\/a>\n <\/div>\n\n

\ud83d\udee0\ufe0f Ferramentas S\u00eanior<\/h3>\n
\n \n Auto-Organizador (Architect)<\/span>\n

DevTools<\/p>\n <\/a>\n \n Retrocompatibilidade (1.0)<\/span>\n

Ponte<\/p>\n <\/a>\n <\/div>\n <\/div>\n\n

\n

Para onde ir agora<\/h2>\n