{"id":915,"date":"2023-01-02T08:08:43","date_gmt":"2023-01-02T08:08:43","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=915"},"modified":"2023-02-02T05:36:00","modified_gmt":"2023-02-02T05:36:00","slug":"pygamei-ekraan-ja-joonistamine","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/pygamei-ekraan-ja-joonistamine\/","title":{"raw":"PyGame'i ekraan ja joonistamine","rendered":"PyGame’i ekraan ja joonistamine"},"content":{"raw":"PyGame'is toimub visuaalse pildi joonistamine n-\u00f6 joonistamispinnale (surface<\/em>). Pind on ristk\u00fcliku kujuline ala, millele saab joonistada ja pilte lisada. pygame.display.set_mode()<\/span><\/code> funktsiooniga luuakse \u00fcks eriline pind, mis t\u00e4histab kogu m\u00e4ngu n\u00e4htavat osa. Seda loodud pinda kasutatakse, et sinna m\u00e4ngukomponente joonistada.\r\n\r\nPinna sisu luuakse valmis m\u00e4nguts\u00fckli jooksul ning tavaliselt ts\u00fckli l\u00f5pus n\u00e4idatakse see v\u00e4lja kasutajale pygame.display.flip()<\/span><\/code> funktsiooniga. N\u00e4iteks m\u00e4ngija tegelane liigub ja vastane liigub. See sisuliselt t\u00e4hendab, et pinna peal muudetakse m\u00e4ngija pildi\/kujundi asukohta ja vastase pildi\/kujundi asukohta. Asukoha muutmine t\u00e4hendab seda, et vana pilt\/kujund tuleb \"kustutada\" ja uus tuleb uuele positsioonile \"joonistada\". Kui need sammud on tehtud, siis kutsutakse v\u00e4lja funktsioon, mis n\u00e4itab muudatused ekraanile. Kui iga muudatus j\u00f5uaks kohe ekraanile, toimub v\u00e4ga palju visuaali muutmist (korra kustutatakse tegelane \u00e4ra ja siis joonistatakse uuesti), mis on m\u00e4ngijale ebamugav. PyGame'i puhul aga teeme muudatuse olekutes \u00e4ra ning flip()<\/span><\/code> funktsiooniga n\u00e4idatakse need korraga v\u00e4lja.\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/PUAzPUY4flA[\/embed]\r\n\r\n
\r\n

Pindade kasutamine\uf0c1<\/a><\/h2>\r\nKui eelnevalt r\u00e4\u00e4kisime peamisest pinnast, mida n\u00e4idatakse aknas kasutajale, siis PyGame'is saab luua t\u00e4iendavaid pindu. Selleks saab kasutada Surface<\/span><\/code> klassi. See annab v\u00f5imaluse t\u00e4psemalt juhtida, millist osa ekraanist on vaja uuendada. N\u00e4iteks v\u00f5ib kogu aken olla jagatud mitmeks osaks. \u00dches osas on m\u00e4ng, teises on men\u00fc\u00fc, kolmandas on m\u00e4ngija parameetrid. Sellisel juhul men\u00fc\u00fcd ja m\u00e4ngija parameetreid ei pea pidevalt uuendama. Kui m\u00e4ng on eraldi pinnal, siis on seda mugavam hallata ja m\u00e4ng t\u00f6\u00f6tab ka kiiremini.\r\n\r\nLoodav pind tuleb alati lisada m\u00f5ne teise pinna peale. \u00dcldiselt lisatakse loodav pind peamise pinna peale (mida pygame.display.set_mode()<\/span><\/code> funktsiooniga loome). Aga on v\u00f5imalik ka nii, et peamise pinna peal on pind (n\u00e4iteks m\u00e4ngupind) ja selle peal on omakorda m\u00f5ni pind (m\u00e4ngija tegelane v\u00f5i vastase tegelane). Seega pind tuleb lisada teise pinna peale. Lisatav pind j\u00e4\u00e4b ekraanil esiplaanile taustapinna suhtes. Ehk kui peamine pind on must, aga sinna lisatakse valge m\u00e4ngupind, siis valge m\u00e4ngupind katab terves m\u00e4ngupinna ulatuses musta pinna valgega.\r\n\r\nPinna lisamine teise pinna peale toimub funktsiooniga parent_surface.blit(child_surface,<\/span> (left,<\/span> top))<\/span><\/code>. child_surface<\/span><\/code> pind lisatakse parent_surface<\/span><\/code> pinna peale asukohale left<\/span><\/code> pikslit vasakult ja top<\/span><\/code> pikslit \u00fclevalt \u00e4\u00e4rest. Need koordinaadid on arvestatud parent_surface<\/span><\/code> pinna suhtes.\r\n\r\nSiin on \u00fcks koodin\u00e4ide:\r\n
import pygame\r\n\r\npygame.init()\r\n# create a window\r\nscreen = pygame.display.set_mode((800, 600))\r\n\r\nrunning = True\r\nwhile running:\r\n    for event in pygame.event.get():\r\n        if event.type == pygame.QUIT:\r\n            # closing window finishes the game loop\r\n            running = False\r\n    # fill screen with white color\r\n    screen.fill((255, 255, 255))\r\n\r\n    # game surface\r\n    game_surface = pygame.Surface((600, 500))\r\n    game_surface.fill((128, 0, 0))\r\n    screen.blit(game_surface, (0, 0))\r\n\r\n    # player info surface\r\n    player_info_surface = pygame.Surface((200, 500))\r\n    player_info_surface.fill((0, 0, 0))\r\n    # put it on the right side\r\n    screen.blit(player_info_surface, (600, 0))\r\n\r\n    # everything drawn will be visible\r\n    pygame.display.flip()\r\n<\/pre>\r\nTulemus peaks olema j\u00e4rgmine:\r\n\r\n\"Ekraanide\r\n\r\nKoodis luuakse game_surface<\/span><\/code> pind, mis lisatakse ekraanile vasakusse \u00fclemisse \u00e4\u00e4rde (0,<\/span> 0)<\/span><\/code>. Seej\u00e4rel luuakse m\u00e4ngija andmete pind, mis lisatakse m\u00e4nguala k\u00f5rvale. Kuna m\u00e4nguala laius on 600 pikslit, siis paigutatakse m\u00e4ngija andmete pind 600 piksli kaugusele vasakust \u00e4\u00e4rest.\r\n\r\nN\u00fc\u00fcd kui m\u00e4ngus midagi muutub, ei pea me tervet akent \u00fcle v\u00e4rvima. Piisab vaid m\u00e4nguala \u00fcle v\u00e4rvimisest. Tegelikult saab asju veel optimaalsemalt teha - saab \u00fcle v\u00e4rvida vaid selle osa, mis on muutunud. See annab teatud olukorras arvestatava kiirusev\u00f5idu. Kuigi esialgu m\u00e4ngutegemise juures ei ole see nii oluline. Kui kohe algusest peale proovid asju optimeerida, v\u00f5ib m\u00e4ngutegemise l\u00f5bu \u00e4ra kaduda. Pigem tegele optimeerimisega siis, kui see probleem tekib.\r\n
M\u00f5tle ja nuputa!<\/h2>\r\n[h5p id=\"43\"]\r\n\r\n<\/section>
\r\n
Pildi kasutamine\uf0c1<\/a><\/h2>\r\nTavaliselt m\u00e4ngus me ei kasuta igavaid v\u00e4rvilisi kaste, vaid taustapilti. Samamoodi m\u00e4ngu tegelane on pilt. PyGame'is pilt on samamoodi pind (surface<\/em>). Seega v\u00e4ga palju sellest, mida eelnevalt kirjeldasime, rakendub ka piltide kohta.\r\n\r\nKogu ekraanil paistev visuaal on tegelikult pilt. Vahet pole, kas me joonistame ringe, loome uue pinna v\u00f5i lisame pilte. L\u00f5puks PyGame joonistab pildi. Pilt ise on tegelikult pikslite kogum. Seega v\u00f5ib \u00f6elda, et m\u00e4ngu jooksul me peame muutma pikslite v\u00e4\u00e4rtust (v\u00e4rvi) ja seel\u00e4bi n\u00e4eb m\u00e4ngija asju liikumas ja muutumas.\r\n\r\nTeeme \u00fche lihtsa n\u00e4ite, kus meil m\u00e4ngus on taustapilt ja selle peal liigub tegelane. Kuna plaanime teha kosmoseteemalist m\u00e4ngu, siis kasutame j\u00e4rgmisi pilte. Tegelikult pole \u00fcldse vahet, mis pilte kasutada - v\u00f5id vabalt proovida m\u00f5ne oma pildiga.\r\n\r\nMeie taustapilt:\r\n\r\n[caption id=\"attachment_917\" align=\"alignnone\" width=\"640\"]\"Pilt Allikas: https:\/\/pixabay.com\/[\/caption]\r\n\r\nMeie tegelase pilt:\r\n\r\n[caption id=\"attachment_918\" align=\"alignnone\" width=\"64\"]\"V\u00e4ike Pildi allikas: https:\/\/pixabay.com\/<\/a>[\/caption]\r\n\r\nTegelase pilt on l\u00e4bipaistva taustaga, et taustapilt paistaks ilusti tema \u00fcmbert v\u00e4lja. Muidu pildid ise on ristk\u00fcliku kujulised. Kui pildi taust ei oleks l\u00e4bipaistev, siis oleks tegelane ka alati ristk\u00fcliku kujuline.\r\n\r\nVaatame, kuidas pildi liikumine peaks v\u00e4lja n\u00e4gema:\r\n\r\n\"Raketi\r\n\r\nPildil on n\u00e4ha akna raam. Akna sisu on pind, millel v\u00f5ib omakorda olla taustapilt (seda teeme hiljem koodis, selguse m\u00f5ttes siin on taust valge). Pildi \u00fcmber olev punktiirjoon t\u00e4histab selle piirjooni. Tegelikult pildil neid jooni n\u00e4ha ei ole.\r\n\r\nAlustame sellest, et lisame pildi positsioonile (left,<\/span> top)<\/span><\/code>. Need on ka joonisel nooltega t\u00e4histatud. Kui tahame raketti liigutada paremale, siis joonistame selle pildi teatud hulga pikslite v\u00f5rra paremale - n\u00e4iteks positsioonile (left<\/span> +<\/span> 100,<\/span> top)<\/span><\/code>. Kui me seda teeme, siis on ekraanil kaks raketti - algne ja liigutatud rakett. Selleks, et kasutaja jaoks oleks n\u00e4ha vaid \u00fcks rakett, peame vana \"kustutama\". Nagu eelnevalt kirjeldasime, siis toimub pikslite v\u00e4\u00e4rtuste muutmine. Selleks, et vasakpoolne rakett \u00e4ra kaoks, peame selle \u00fcle v\u00e4rvima. Kuna hetkel on meil taust valge, siis piisab, kui v\u00e4rvime selle ala valgega. Kui taustal oleks pilt, peaksime selle ala t\u00e4itma t\u00e4pselt selle osaga taustapildist. Alguses v\u00f5ib lihtsam olla see, et v\u00e4rvime kogu tausta korraga \u00e4ra - see on aeglasem, aga ei pruugi esialgu meie m\u00e4ngu m\u00f5jutada. Siin paljudes n\u00e4idetes oleme lihtsuse m\u00f5ttes terve tausta korraga \u00fcle v\u00e4rvinud. Aga teeme siin \u00fche t\u00e4psema n\u00e4ite.\r\n
import pygame\r\n\r\npygame.init()\r\n# create a window\r\nscreen = pygame.display.set_mode((640, 640))\r\n\r\nbg = pygame.image.load(\"background_space.png\")\r\nrocket = pygame.image.load(\"rocket_small.png\")\r\n# rocket rectangle <rect(0, 0, 64, 62)>\r\nrocket_rect = rocket.get_rect()\r\n# we will use this rectangle to position the rocket, therefore let's set y value\r\nrocket_rect.y = 150\r\n\r\n# game surface with background image\r\nscreen.blit(bg, (0, 0))\r\n\r\n# set up a clock in order to control the flow of time\r\nclock = pygame.time.Clock()\r\n\r\nrunning = True\r\nwhile running:\r\n    for event in pygame.event.get():\r\n        if event.type == pygame.QUIT:\r\n            # closing window finishes the game loop\r\n            running = False\r\n\r\n    # \"erase\" the current rocket\r\n    screen.blit(bg, rocket_rect, rocket_rect)\r\n    # change rocket position (x = x + 2)\r\n    rocket_rect = rocket_rect.move(2, 0)\r\n    # draw a rocket to a new position\r\n    screen.blit(rocket, rocket_rect)\r\n\r\n    # everything drawn will be visible\r\n    pygame.display.flip()\r\n    \r\n    # keep the program running at 30 FPS\r\n    clock.tick(30)\r\n<\/pre>\r\n \r\n\r\nblit<\/span><\/code> funktsiooni saab v\u00e4lja kutsuda kujul destination.blit(source,<\/span> destination_position)<\/span><\/code>. See t\u00e4hendab, et destination<\/span><\/code> pinnale lisatakse source<\/span><\/code> pind (n\u00e4iteks pilt) positsioonile destination_position<\/span><\/code>. Positsioon t\u00e4histab \u00e4ra pikslite arvu vasakult ja \u00fclevalt sihtkoha pinna \u00fclevalt vasakult \u00e4\u00e4rest. Positsioon v\u00f5ib olla kujul (left,<\/span> top)<\/span><\/code>, aga seal v\u00f5ib kasutada ka Rect<\/span><\/code> objekti. Rect<\/span><\/code> objektil on lisaks \u00fclemise vasakpoolse punkti koordinaadile (left<\/span><\/code> ja top<\/span><\/code>) ka laius ja k\u00f5rgus. Ristk\u00fcliku kasutamise puhul v\u00f5etakse sealt vaid left<\/span><\/code> ja top<\/span><\/code> v\u00e4\u00e4rtused. Meie n\u00e4ites teeme samamoodi, et kasutame ristk\u00fclikut raketi paigutamiseks.\r\n\r\nVaatame, mida eelnev kood t\u00e4psemalt teeb:\r\n