{"id":2854,"date":"2019-08-13T11:55:06","date_gmt":"2019-08-13T09:55:06","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=2854"},"modified":"2019-08-28T17:23:11","modified_gmt":"2019-08-28T15:23:11","slug":"pygame-3-move-sprite","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/pygame-3-move-sprite\/","title":{"rendered":"Pygame 3 &#8211; move sprite"},"content":{"rendered":"<p>In the previous episodes:<\/p>\n<ul>\n<li><a href=\"https:\/\/pythonprogramming.altervista.org\/starting-with-pygame\/\">draw circle with mouse (starting with pygame)<\/a><\/li>\n<li><a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-drawing-2\/\">draw with mouse with pygame.mouse.get_pressed()(pygame draw app 2)<\/a><\/li>\n<\/ul>\n<p>This was one output with the code of the last example:<a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/movewithpygame.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2860 aligncenter\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/movewithpygame.png\" alt=\"\" width=\"346\" height=\"248\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/movewithpygame.png 602w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/movewithpygame-320x230.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/movewithpygame-321x229.png 321w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/a><\/p>\n<h2>Moving\u00a0 a sprite with arrow keys<\/h2>\n<p>This time, in this 3rd episode of Pygame, we will move a sprite with the arrow keys.<\/p>\n<p>In the code we will<\/p>\n<ul>\n<li>import pygame<\/li>\n<li>create the screen with pygame.display.set((x,y))<\/li>\n<li>load the image<\/li>\n<li>create the loop to move the sprite<\/li>\n<\/ul>\n<h2>Live coding video with full code to move a sprite with Pygame<\/h2>\n<p><iframe loading=\"lazy\" title=\"Pygame 3: move a sprite!\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/2n3zC7ucA7Q?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>In this video I followed in part the code below and in part I tried something new to make the sprite move with the mouse (I saved this part in this post too, after this code below). Let&#8217;s see how to make a sprite move.<\/p>\n<p>&nbsp;<\/p>\n<p>I used this image for the sprite:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-613 alignleft\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/mega.gif\" alt=\"\" width=\"82\" height=\"82\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true\">import pygame\r\nfrom pygame.locals import *\r\n\r\npygame.init()\r\nclock = pygame.time.Clock()\r\nsize = 400, 300\r\nscreen = pygame.display.set_mode(size,0,32)\r\npygame.display.set_caption('GAME')\r\nx, y = 200, 130\r\n\r\nsprite=pygame.image.load('mega.gif')\r\nloop = True\r\nwhile loop:\r\n    # this adds the sprite at every frame rate\r\n    screen.blit(sprite,(x,y))\r\n\r\n    for event in pygame.event.get():\r\n        # this is to close the window\r\n        if event.type==QUIT:\r\n            loop = False\r\n            #sys.exit() # this will close the kernel too\r\n            # in development mode leave the comment above\r\n    # this is the list with the keys being pressed\r\n    keys = pygame.key.get_pressed()\r\n    if keys[pygame.K_LEFT]:\r\n        x -= 2\r\n    if keys[pygame.K_RIGHT]:\r\n        x += 2\r\n    if keys[pygame.K_UP]:\r\n        y -= 2\r\n    if keys[pygame.K_DOWN]:\r\n        y += 2\r\n    # we update the screen at every frame\r\n    pygame.display.flip()\r\n    # if we put the frame rate at 60 the sprite will move slower\r\n    clock.tick(120)\r\n\r\npygame.quit()<\/pre>\n<p>You can use png files and jpg also. There is a little &#8216;issue&#8217; because there is a trace that the sprite will leave on the screen.<\/p>\n<p>To avoid that effect, you need to clear the window before you blit the next sprite frame. You can do this adding, after the loop, before the sprite blit the following code:<\/p>\n<pre class=\"lang:default decode:true\">\tscreen.fill((0,0,0))<\/pre>\n<p>Watch the output in this video below:<\/p>\n<div style=\"width: 747px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2854-1\" width=\"747\" height=\"420\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/output0.mp4?_=1\" \/><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/output0.mp4\">https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/output0.mp4<\/a><\/video><\/div>\n<h2>Move the sprite with the mouse<\/h2>\n<p>We can also move the sprite with the mouse, just like we did for circles and rectangles in the previous post.<\/p>\n<p>In this code you can see the screen.fill((0,0,0)) to avoid leaving traces on the screen like in the video below:<\/p>\n<figure id=\"attachment_2883\" aria-describedby=\"caption-attachment-2883\" style=\"width: 402px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/megaaaa.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2883 size-full\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/megaaaa.png\" alt=\"Psychedelic effect with pygame due to the sprite blit function\" width=\"402\" height=\"332\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/megaaaa.png 402w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/megaaaa-320x264.png 320w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><figcaption id=\"caption-attachment-2883\" class=\"wp-caption-text\">Psychedelic effect with pygame due to the sprite blit function<\/figcaption><\/figure>\n<div style=\"width: 747px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2854-2\" width=\"747\" height=\"420\" poster=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/megaaaa.png\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/output3.mp4?_=2\" \/><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/output3.mp4\">https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/output3.mp4<\/a><\/video><\/div>\n<p>With the screen.fill((0,0,0)) this effect is avoided.<\/p>\n<pre class=\"lang:default decode:true \">import pygame\r\nfrom pygame.locals import *\r\n\r\npygame.init()\r\nclock = pygame.time.Clock()\r\nscreen = pygame.display.set_mode((400,300), 0, 32)\r\npygame.display.set_caption(\"Game\")\r\nx, y = 200, 130\r\nsprite = pygame.image.load(\"mega.gif\")\r\n\r\nloop = True\r\npygame.mouse.set_visible(False)\r\nwhile loop:\r\n\tscreen.fill((0,0,0))\r\n\tx, y = pygame.mouse.get_pos()\r\n\tscreen.blit(sprite, (x-50,y-50))\r\n\tfor event in pygame.event.get():\r\n\t\tif event.type == QUIT:\r\n\t\t\tloop = False\r\n\tpygame.display.flip()\r\n\tclock.tick(60)\r\n\r\n\r\npygame.quit()<\/pre>\n<p>This is how the sprite moves with the mouse:<\/p>\n<h2><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mega_game.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2880 aligncenter\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mega_game.png\" alt=\"\" width=\"402\" height=\"332\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mega_game.png 402w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mega_game-320x264.png 320w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/h2>\n<div style=\"width: 747px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2854-3\" width=\"747\" height=\"420\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mousemove.mp4?_=3\" \/><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mousemove.mp4\">https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/mousemove.mp4<\/a><\/video><\/div>\n<h2>Using Visual studio code with jupyter<\/h2>\n<p>As you can see in the video you can use jupyter with Visual studio code. This is great because you unite the versatility of jupyter with the confortable code editing in Visual Studio Code. You just need to use a python interpreter where you installed jupyter lab and put #%% before every cell. Then you can shift enter to run the code like in jupyter lab and you will se the output in a window on the right of the screen.<\/p>\n<p>Look at this <a href=\"https:\/\/pythonprogramming.altervista.org\/jupyter-lab-and-visual-studio-code-together\/\">post where I talked about VSC and Jupyter<\/a>.<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/jupyter-lab-and-visual-studio-code-together\/\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2866 aligncenter\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover.png\" alt=\"\" width=\"387\" height=\"276\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover.png 840w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover-320x229.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover-768x549.png 768w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover-676x483.png 676w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/jupyter2_cover-321x229.png 321w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2861\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter.png\" alt=\"\" width=\"1366\" height=\"728\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter.png 1366w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter-320x171.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter-768x409.png 768w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/08\/vsc_jupyter-960x512.png 960w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a><\/p>\n<p>Watch this video to see how:<\/p>\n<p><iframe loading=\"lazy\" title=\"Use Jupyter lab in Visual Studio Code\" width=\"747\" height=\"560\" src=\"https:\/\/www.youtube.com\/embed\/PyBHcAAzJjs?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"Let&#8217;s move a sprite on a screen, the most fundamental part of a 2d game, with pygame and python\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/pygame-3-move-sprite\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":2859,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1,154,11,191],"tags":[157,194,510],"class_list":["post-2854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","category-games","category-modules","category-pygame","tag-move","tag-pygame","tag-sprite"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=2854"}],"version-history":[{"count":10,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2854\/revisions"}],"predecessor-version":[{"id":2971,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2854\/revisions\/2971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/2859"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=2854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=2854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=2854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}