{"id":4414,"date":"2019-12-21T09:52:20","date_gmt":"2019-12-21T08:52:20","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4414"},"modified":"2023-12-23T16:39:21","modified_gmt":"2023-12-23T15:39:21","slug":"pygame-platformer-1","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/","title":{"rendered":"Pygame: platformer 1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I am going to follow the tutorial of <strong>dafluffypotato<\/strong>, getting inspiration from his tutorial and trying to figure out a platform with <strong>pygame<\/strong> and <strong>Python<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the png image for the player. Right click and save it in the folder where you saved the code of the game.<br><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/12\/player.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4431\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/12\/player.png\" alt=\"\" width=\"13\" height=\"36\"><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following code I resemble the code from the first 2 videos starting from skratch till we make the player move, jump and interact with a rectangle on the screen. This is the code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import pygame\nfrom pygame.locals import *\n\n#pip install pygame into cmd, use 3.7 21\/12\/2019\n\npygame.init()\nclock = pygame.time.Clock()\nWINDOW_SIZE = (400, 400)\npygame.display.set_caption(\"Game\")\nscreen = pygame.display.set_mode(WINDOW_SIZE, 0, 32)\n# Image\nplayer_image = pygame.image.load(\"player.png\")\n# other variables for movements\nlocation = [50, 50]\nmoving_right = False\nmoving_left = False\n\n# collitions\n# rectangle that wraps the player\nplayer_rect = pygame.Rect(location[0], location[1], player_image.get_width(), player_image.get_height())\n# another rectangle for test\ntest = pygame.Rect(100, 100, 100, 50)\nmomentum = 0\n\nloop = 1\nwhile loop:\n    # clear the screen\n    screen.fill((146, 244, 255))\n    # show the player\n    screen.blit(player_image, location)\n\n    # check if the player collide the test rectangle\n    if player_rect.colliderect(test):\n        print(\"collided\")\n        # if they collide the rectangle goes red\n        pygame.draw.rect(screen, (255, 0, 0), test)\n    else:\n        # if not it is drawed in black\n        pygame.draw.rect(screen, (0, 0, 0), test)\n\n    player_rect.x = location[0]\n    player_rect.y = location[1]\n\n    # Goes down until reaches 0 then goes up til top and down again...\n    if location[1] &amp;gt; WINDOW_SIZE[1] - player_image.get_height():\n        momentum = -momentum\n    else:\n        momentum += 0.2\n    location[1] += momentum\n\n    if moving_right == True:\n        location[0] += 4\n\n    if moving_left == True:\n        location[0] -= 4\n\n    for event in pygame.event.get():\n        if event.type == QUIT:\n            loop = 0\n        if event.type == KEYDOWN:\n            if event.key == K_RIGHT:\n                moving_right = True\n            if event.key == K_LEFT:\n                moving_left = True\n        if event.type == KEYUP:\n            if event.key == K_RIGHT:\n                moving_right = False\n            if event.key == K_LEFT:\n                moving_left = False\n\n    pygame.display.update()\n    clock.tick(60)\n\npygame.quit()<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Live coding<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pygame platformer 1\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/qrTb_4b4qz8?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>\n\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How can it become&#8230; a look at a basic map<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I just wanna show a little more graphic in the game to see how can it become. To make the maps is very easy.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/12\/game_example1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Some explanations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The collisions. The most important stuff in a game is the collision detection, that makes us know when two elements collide so that we can make something happen like collect an item, damage something, increase score etc. In pygame you create a rectangle area that wraps the items whose position needs to be controlled to check if they collides.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the example above the two rectangle are here:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># collitions\n# rectangle that wraps the player\nplayer_rect = pygame.Rect(location[0], location[1], player_image.get_width(), player_image.get_height())\n# another rectangle for test\ntest = pygame.Rect(100, 100, 100, 50)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The first surround the <strong>player<\/strong> the second is just a rectangle. as you can see in the video, when the player touches the rectangle it <strong>changes color<\/strong>. The rectangles are created with the <strong>Rect<\/strong> <strong>class<\/strong> of pygame that takes the <strong>coordinates<\/strong> of the starting point of the rectangle (from the player position that we stored in <strong>location<\/strong>) and the width and height of the image of the player (<strong>player_image<\/strong>) obtained with the method<strong> get_width()<\/strong> and <strong>get_height()<\/strong> of the <strong>pygame.image.load<\/strong> object. This code is in the while loop that loops 60 time each second.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    # check if the player collide the test rectangle\n    if player_rect.colliderect(test):\n        print(\"collided\")\n        # if they collide the rectangle goes red\n        pygame.draw.rect(screen, (255, 0, 0), test)\n    else:\n        # if not it is drawed in black\n        pygame.draw.rect(screen, (0, 0, 0), test)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The control is in the if statement that checks if the player_rect collides with the other (test) using the method with the intuitive name of <strong>colliderect<\/strong> that has as argument the other rectangle object. The test object created with pygame.Rect is drawed in red or black each frame if there is a collision or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other posts about pygame<\/h2>\n\n\n<h3>Pygame's Platform Game<\/h3>\r\n\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/01\/climbercover.png?w=557&ssl=1\"\/ width=\"50%\"><\/a>\r\n<script>\r\nvar title = \"Platform Pygame\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animation-of-a-sprite-v-1-3\/\",\"Animation 1.3\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-v-2-better-coding-test-it-checking-fps-on-the-screen\/\",\"Animation 1.2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-how-to-display-the-frame-rate-fps-on-the-screen\/\",\"Display Frame rate\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-update\/\",\"Animation 1.1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Pygame Platform Game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-platform-game-2\/\",\"Pygame Platform 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-3-recap-cheatsheet\/\",\"Pygame PLatform 3 - recap and some Cheat Sheet\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-4-background-and-stuffs\/\",\"Pygame Platform 4 - Background & organizing code\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\",\"Pygame Platform 5 - Sounds\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/platform-game-in-detail-part-1\/\",\"Game in detail part 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/map-maker-1-2\/\", \"Map maker 1.2\"]\r\n\t\t];\r\n\t\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\r\n<h3>Other Pygame's posts<\/h3>\r\n\r\n<script>\r\nvar title = \"Pygame's Posts\"\r\nvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Platform game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/make-a-platform-game-with-pygame-dafluffypotato\/\",\"DaFluffyPotato Platform Tutorials\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-and-classic-arcade-games-pong\/\",\"Pong Game Full\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-draws-in-colors-app-to-draw-with-pygame\/\",\"PyGameGIF 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-draw-app-with-animation\/\",\"PyGameGIF 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pydraw-2-0-app-to-draw-gif\/\",\"PyDraw 2.0\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-drawing-2\/\",\"Draw with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-with-pygame\",\"Sprite animation 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-on-pygame-2-free-characters-and-more-actions\/\",\"Sprite animation 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/starting-with-pygame\/\",\"Starting movements with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-3-move-sprite\/\", \"Move a Sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-4-fonts\/\",\"Text and Fonts\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animate-a-sprite\/\", \"Animate a sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-and-mouse-events\/\",\"Mouse events\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pgp-aka-pygamepresentation-project\/\",\"Pygame presentation\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/moving-the-player-in-pygame-with-key-get_pressed\/\",\"How to use key.get_pressed()\"]\r\n]\r\n<\/script>\r\n\r\n\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"A platform game with Python and Pygame\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4430,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[154,191],"tags":[652,194,4],"class_list":["post-4414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-pygame","tag-platform-game","tag-pygame","tag-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"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\/4414","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=4414"}],"version-history":[{"count":7,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4414\/revisions"}],"predecessor-version":[{"id":13795,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4414\/revisions\/13795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4430"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}