{"id":5878,"date":"2020-05-24T16:54:32","date_gmt":"2020-05-24T14:54:32","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=5878"},"modified":"2020-05-27T09:56:56","modified_gmt":"2020-05-27T07:56:56","slug":"pygame-from-start-1","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/pygame-from-start-1\/","title":{"rendered":"Pygame from start 1"},"content":{"rendered":"<p>Here is a new series of tutorials for pygame starting from the very skratch.<\/p>\n<!-- show images in a grid see the example below -->\r\n<style>\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: Arial;\r\n}\r\n\r\n.header {\r\n  text-align: center;\r\n  padding: 32px;\r\n}\r\n\r\n.row {\r\n  display: -ms-flexbox; \/* IE10 *\/\r\n  display: flex;\r\n  -ms-flex-wrap: wrap; \/* IE10 *\/\r\n  flex-wrap: wrap;\r\n  padding: 0 4px;\r\n}\r\n\r\n\/* Create four equal columns that sits next to each other *\/\r\n.column {\r\n  -ms-flex: 25%; \/* IE10 *\/\r\n  flex: 25%;\r\n  max-width: 25%;\r\n  padding: 0 4px;\r\n}\r\n\r\n.column img {\r\n  margin-top: 8px;\r\n  vertical-align: middle;\r\n  width: 100%;\r\n}\r\n\r\n\/* Responsive layout - makes a two column-layout instead of four columns *\/\r\n@media screen and (max-width: 800px) {\r\n  .column {\r\n    -ms-flex: 50%;\r\n    flex: 50%;\r\n    max-width: 50%;\r\n  }\r\n}\r\n\r\n\/* Responsive layout - makes the two columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 600px) {\r\n  .column {\r\n    -ms-flex: 100%;\r\n    flex: 100%;\r\n    max-width: 100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- Example -->\r\n\r\n<!--\r\n\r\n\r\n<!-- Photo Grid --><!--\r\n<div class=\"row\"> \r\n  <div class=\"column\">\r\n    <img decoding=\"async\" src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/falls2.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/nature.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/mist.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\r\n  <\/div>\r\n  <div class=\"column\">\r\n    <img decoding=\"async\" src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/ocean.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/mountainskies.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\r\n  <\/div>  \r\n  <div class=\"column\">\r\n    <img decoding=\"async\" src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/falls2.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/nature.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/mist.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\r\n  <\/div>\r\n  <div class=\"column\">\r\n    <img decoding=\"async\" src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/ocean.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/mountainskies.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\r\n    <img decoding=\"async\" src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\r\n  <\/div>\r\n<\/div>\r\n\r\n-->\r\n<h2>Index of Pygame First Game<\/h2>\r\n<div class=\"row\">\r\n\r\n\t<!-- colonna 1 -->\r\n\t\r\n\t\r\n<div class=\"column\">\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-from-start-1\/\">\r\n\t<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pg01.png?w=960&ssl=1\">\r\n<\/a>\r\n\r\n\r\n\t<\/div>\r\n\r\n\t<!-- colonna 2 -->\r\n\t\r\n\t<div class=\"column\">\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-tutorial-2\/\">\r\n\t<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pg02.png?w=514&ssl=1\">\r\n<\/a>\r\n\r\n\t<\/div>\r\n\t\r\n\t\r\n\t<div class=\"column\">\r\n\t\t<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-first-game-03-still-about-animation\/\">\r\n\t<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pg03.png?resize=676%2C483&ssl=1\">\r\n<\/a>\r\n\t<\/div>\r\n<\/div>\r\n\r\n\n<p>Let&#8217;s show a simple sprite here.<\/p>\n<p>We first:<\/p>\n<ul>\n<li>define a <strong>class<\/strong> that create a Surface object (a little piece of rectangle) and we colour it<\/li>\n<li>then we create a <strong>group<\/strong> from pygame.sprite.Group class to hold all the images or surfaces (1 for now)<\/li>\n<li>then we create an <strong>istance<\/strong> of Player called player and we add it to group<\/li>\n<li>then we <strong>draw<\/strong> the group on the surface<\/li>\n<\/ul>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/surface01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5919\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/surface01.png\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/surface01.png 800w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/surface01-320x240.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/surface01-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>The result will be this little square that you can see into this picture below. Nothing fancy, but it all starts from here. Now you are ready to go to the <a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-tutorial-2\/\">next step<\/a>: displaying an image and also animate it. That is why we used group.<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pt1c.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5883\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pt1c.png\" alt=\"\" width=\"402\" height=\"432\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pt1c.png 402w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/05\/pt1c-320x344.png 320w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<pre class=\"lang:default decode:true \">'''\r\n        TUTORIAL 01\r\n        pygame\r\n        absolute beginner\r\n\r\n24.5.2020\r\nGiovanni Gatto\r\n'''\r\n\r\n\r\nimport pygame as pg\r\nimport sys\r\n\r\n\r\nclass Player(pg.sprite.Sprite):\r\n    def __init__(self, px, py):\r\n        super().__init__()\r\n        self.image = pg.Surface([20, 20])\r\n        self.image.fill((255, 255, 255))\r\n        self.rect = self.image.get_rect()\r\n        self.rect.topleft = [px, py]\r\n\r\n\r\npg.init()\r\nclock = pg.time.Clock()\r\n\r\n\r\ndef window():\r\n    screen = pg.display.set_mode((400, 400))\r\n    pg.display.set_caption(\"Sprite animate\")\r\n    return screen\r\n\r\nscreen = window()\r\ngroup = pg.sprite.Group()\r\nplayer = Player(100, 100)\r\ngroup.add(player)\r\n\r\nloop = 1\r\nwhile loop:\r\n    for event in pg.event.get():\r\n        if event.type == pg.QUIT:\r\n            loop = 0\r\n\r\n    screen.fill((0, 0, 0))\r\n    group.draw(screen)\r\n    pg.display.flip()\r\n    clock.tick(60)\r\npg.quit()\r\nsys.exit()\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Video<\/p>\n<p><iframe loading=\"lazy\" title=\"Pygame tutorial 01\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/IAWOx4YtY08?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<h3>Other Pygame's posts<\/h3>\r\n\r\n<script>\r\nvar title = \"Pygame's Posts\"\r\nvar links = [\r\n[\"https:\/\/formazione.itch.io\/\",\"My Py-Games for free\"],\r\n[\"https:\/\/github.com\/formazione\/pygame_components.git\",\"Pygame components github\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-components\/\",\"Pygame-Components\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-tutorial-1-a-guide-to-get-pygame-immediately\/\",\"Pygame Tutorial 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/swap-color-palette-in-pygame-dafluffypotato\/\",\"Change palette color in Pygame\"],\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]\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":"Pygame 01\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/pygame-from-start-1\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":5886,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1,191],"tags":[194],"class_list":["post-5878","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples","category-pygame","tag-pygame"],"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\/5878","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=5878"}],"version-history":[{"count":6,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/5878\/revisions"}],"predecessor-version":[{"id":5920,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/5878\/revisions\/5920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/5886"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=5878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=5878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=5878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}