{"id":131,"date":"2024-06-07T08:57:17","date_gmt":"2024-06-07T11:57:17","guid":{"rendered":"http:\/\/pplay.local\/?page_id=131"},"modified":"2024-06-19T13:15:19","modified_gmt":"2024-06-19T16:15:19","slug":"movendo-e-animando-um-sprite","status":"publish","type":"page","link":"http:\/\/www2.ic.uff.br\/pplay\/tutoriais\/movendo-e-animando-um-sprite\/","title":{"rendered":"Movendo e Animando um Sprite"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introdu\u00e7\u00e3o: O GameLoop<\/h2>\n\n\n\n<p>Para mover um\u00a0<strong><a href=\"http:\/\/www2.ic.uff.br\/pplay\/documentacao\/sprite\/\" data-type=\"page\" data-id=\"119\">Sprite<\/a><\/strong>, precisamos do que chamamos de GameLoop.<br>O GameLoop \u00e9 um loop infinito que executa a l\u00f3gica do jogo e em seguida realiza as renderiza\u00e7\u00f5es.<\/p>\n\n\n\n<p>Fazer um Sprite se mover n\u00e3o passa de:<\/p>\n\n\n\n<ul>\n<li>1 \u2013 Alterar sua posi\u00e7\u00e3o na janela;<\/li>\n\n\n\n<li>2 \u2013 Pintar a janela com a cor de fundo padr\u00e3o (ou repintar a imagem de fundo);<\/li>\n\n\n\n<li>3 \u2013 Desenhar o frame atual&nbsp;(j\u00e1 em sua nova posi\u00e7\u00e3o);<\/li>\n\n\n\n<li>4 \u2013 Por fim, chamar o update() da janela para mostrar as altera\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mover um Sprite na Tela<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code># Primeiro temos que importar os m\u00f3dulos que iremos usar:\nfrom PPlay.window import *\nfrom PPlay.sprite import *\n\n# Como sempre, criamos primeiro a janela\njanela = Window(300, 300)\n\n# Associamos ent\u00e3o uma vari\u00e1vel ao Sprite\nball = Sprite(\"graycreep.png\")\n\n# O GameLoop\nwhile True:\n    # Atualizamos a l\u00f3gica do jogo\n    ball.move_x(0.1)  # move a ball 0.1 pixels por frame sobre X\n    ball.move_y(0.1)  # an\u00e1logo\n\n    # Pintamos o fundo da tela\n    janela.set_background_color((0, 0, 0))  # Preto\n\n    # E depois o Sprite\n    ball.draw()\n\n    # POR \u00daLTIMO, atualizamos a janela mostrando as mudan\u00e7as\n    janela.update()\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Mover um Sprite com o Teclado<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code># Basta mudar as linhas 14 e 15 do c\u00f3digo anterior\n# ball.move_x(0.1)\n# ball.move_y(0.1)\n# Para\nball.move_key_x(0.1)\nball.move_key_y(0.1)\n# As teclas padr\u00e3o s\u00e3o UP, DOWN, RIGHT, LEFT.<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Animando o Sprite<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\"\"\"A anima\u00e7\u00e3o consiste de uma sequ\u00eancia de imagens.\nPara tal, passamos um arquivo de imagem e o n\u00famero de frames em que ela est\u00e1 dividida.\nNo caso, utilizamos uma imagem de 608x120 pixels.\nPortanto, ela ser\u00e1 dividida (horizontalmente) em 8 frames de 76 pixels cada.\nAs fun\u00e7\u00f5es ser\u00e3o explicadas conforme forem usadas.\"\"\"\n\nfrom PPlay.window import *\nfrom PPlay.sprite import *\n\njanela = Window(400, 400)\n\n# Aten\u00e7\u00e3o ao segundo par\u00e2metro para criar o Sprite!!!\nanimacao = Sprite(\"walking.png\", 8)  # 8 frames\n\n# Sempre deve ser chamado antes de executar a animacao\nanimacao.set_total_duration(1000)  # dura\u00e7\u00e3o em milissegundos\n\n# GameLoop\nwhile True:\n    janela.set_background_color((255, 255, 255))  # branco\n\n    animacao.move_key_x(0.1)  # mesma coisa do exemplo 2.2\n    animacao.move_key_y(0.1)\n\n    animacao.draw()\n\n    # ATEN\u00c7\u00c3O!!! Tem que ser chamada para que mude o frame!!\n    animacao.update()\n\n    janela.update()<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><a href=\"http:\/\/www2.ic.uff.br\/downloads\/tutoriais\/2.0_Movendo_e_Animando_um_Sprite.zip\"><\/a><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Download do C\u00f3digo Completo<\/mark><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Cr\u00e9ditos do Tutorial<\/strong>: Gabriel Saldanha<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introdu\u00e7\u00e3o: O GameLoop Para mover um\u00a0Sprite, precisamos do que chamamos de GameLoop.O GameLoop \u00e9 um loop infinito que executa a l\u00f3gica do jogo e em seguida realiza as renderiza\u00e7\u00f5es. Fazer um Sprite se mover n\u00e3o passa de: Mover um Sprite na Tela Mover um Sprite com o Teclado Animando o Sprite Download do C\u00f3digo Completo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":57,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"tutorial-template.php","meta":{"footnotes":""},"_links":{"self":[{"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/pages\/131"}],"collection":[{"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":4,"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":481,"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/pages\/131\/revisions\/481"}],"up":[{"embeddable":true,"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/pages\/57"}],"wp:attachment":[{"href":"http:\/\/www2.ic.uff.br\/pplay\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}