Писање PyGame програма

Основна структура PyGame програма

Да би програми које пишемо могли да користе библиотеку (модул) PyGame, прва ствар коју треба да урадимо је да на почетку програма прикључимо нашем програму модул PyGame. Тиме омогућавамо употребу свих функција и константи које су дефинисане у модулу PyGame.

Сваки програм који користи библиотеку ПајГејм (PyGame), по прикључивању модула а пре позивања других функција треба да изврши неколико корака да би иницијализовао библиотеку, задао димензије прозора у коме ће програм да црта и поставио наслов тог прозора. Исто тако, на крају програма има неколико корака који говоре програму да треба да чека док корисник не кликне на дугме за затварање прозора, а затим да затвори прозор и искључи библиотеку PyGame.

Ти кораци на почетку и на крају рада су у сваком програму исти или врло слични. Да би коришћење PyGame библиотеке било што једноставније за почетнике, користићемо и малу додатну библиотеку по имену PyGameBg. Захваљујући овој библиотеци, уместо навођења свих неопходних корака довољно је да и модул pygamebg прикључимо нашем програму, а затим позовемо само по једну функцију из модула pygamebg на почетку и на крају програма. Тиме програми постају краћи и једноставнији, што нам омогућава да се усредсредимо на део програма који је специфичан за дати задатак.

Програме који користе библиотеку PyGameBg можете да покренете и у свом локалном развојном окружењу (нпр. IDLE). Потребно је само да пре тога инсталирате и библиотеку PyGameBg на исти начин као што сте инсталирали библиотеку pygamebg, куцањем pip3 install pygamebg у командној линији. Када инсталирате и ову библиотеку, можете да копирате изабрани програм у ваш едитор и сачувате га на вашем рачунару. После тога програм можете да дорађујете и мењате по вољи, да чувате различите верзије програма и да их испробавате покретањем програма.

Ево како изгледа један ПајГејм програм, који црта једну косу дуж и чека да корисник затвори прозор.

Прођимо редом кроз наредбе овог програма да бисмо детаљније објаснили чему оне служе.

Најпре имамо групу наредби какве ће морати да се појаве на почетку сваког програма:

  • наредбом import pygame as pg прикључујемо модул pygame нашем програму. Овде користимо мало другачији облик наредбе import од оног који смо користили раније. Овде уједно модулу pygame дајемо скраћено име pg и то скраћено име онда користимо надаље у програму као име модула. Могли смо равноправно да пишемо и само import pygame и тада би у наставку програма уместо pg.Color, pg.draw.line и слично, требало да стоји pygame.Color, pygame.draw.line итд.

  • наредбом import pygamebg прикључујемо модул pygamebg нашем програму. Ова наредба се заједно са претходном може спојити у једну: import pygame as pg, pygamebg, а то ћемо често и чинити.

  • Наредба prozor = pygamebg.open_window(400, 400, "Pygame") позива фукцију open_window из модула pygamebg, који смо додали програму. У овој функцији се обављају све портебне припремне радње које смо раније помињали. Параметри функције су ширина, висина и наслов прозора који се позивом ове функције отвара. Променљиву prozor коју ова функција враћа, касније користимо у програму да бисмо у том прозору цртали.

Следи група наредби која је у сваком програму другачија и одређује шта конкретан програм заправо ради. Наш први програм црта црну линију на белој позадини, а то је постигнуто помоћу овог дела програма:

  • наредба prozor.fill(pg.Color("white")) боји прозор у бело. Оваквом наредбом се често започиње цртање (боја може да буде и другачија)

  • наредба pg.draw.line(prozor, pg.Color("black"), (100, 100), (300, 300), 5) црта линију.

Овакве наредбе ће ускоро бити детаљно објашњене, али ако сте нестрпљиви, можете да пробате да у програму измените вредности параметара или додате нове, сличне наредбе и сами откријете како ове функције за цртање раде.

На крају програма имамо позив још једне функције из модула pygamebg: pygamebg.wait_loop(). У овој функцији се налазе наредбе које омогућавају да се цртеж појави на прозору и да прозор остане отворен док корисник не кликне на дугме за затварање. Функција након затварања прозора деактивира све покренуте делове библиотеке ПајГејм (искључује их).

Сви наши ПајГејм програми ће се завршавати позивом функције pygamebg.wait_loop() или неке сличне функције. После извршења ове функције програм може да настави да ради без библиотеке PyGame у текстуалном прозору ако за тиме има потребе.

Координатни систем

Координате су нам веома важан појам и са њима ћемо се сусретати у баш сваком ПајГејм програму. Положај свих објеката (тачака, дужи, кругова, текста, готових слика итд.) на прозору одређује се њиховим координатама у координатом систему прозора.

Координатни систем прозора је сличан, али ипак мало другачији од оног који се користи у математици. Положај тачке је и у овом случају одређен уређеним паром њених координата (координатом x тј. апсцисом и координатом y тј. oрдинатом). Јединица мере је један пиксел.

У рачунарској графици, координатни почетак је у горњем левом углу прозора. Координата \(x\) расте када се крећемо на десно (као и у математици), али координата \(y\) опада када се крећемо на горе, односно повећава се када се крећемо на доле, што је другачије од уобичајеног координатног система из математике. Нека је дата тачка \(A(5, 3)\). Ако бисмо померили ову тачку за 1 на горе и задржали њену \(x\) координату, тада би нове координате тачке \(A\) биле \(A(5, 2)\). Ако бисмо тачку \(A\) са тренутне позиције померили на доле за 2, нове координате би јој биле \(A(5, 4)\). Дакле, прва координата тачке одређује колико је тачка удаљена од леве ивице прозора, а друга координата колико је тачка удаљена од горње ивице прозора.

../_images/coordinate_system.png

У програмском језику Пајтон пар координата тачке можемо представити било двочланом торком (3, 5) било двочланом листом [3, 5]. У претходном примеру две крајње тачке дужи биле су задате помоћу две двочлане торке ((100, 100) и (300, 300)).

Често је потребно задати и правоугаоник, чије су странице паралелне координатним осама. Такав правоугаоник се задаје помоћу торке или листе од четири броја: (x, y, w, h) или [x, y, w, h]. При томе \(x\) и \(y\) представљају координате горњег левог темена правоугаоника, а \(w\) и \(h\) представљају редом ширину и висину тог правоугаоника у пикселима. Тако на пример, правоугаоник на следећој слици би могао да се зада као pygame.Rect(2, 1, 4, 3), или просто као (2, 1, 4, 3) или [2, 1, 4, 3].

../_images/rect_coordinates.png

Наредни програм може да вам помогне да схватите координате. Покрените програм кликом на дугме „Прикажи пример”, а затим померајте миша и пратите како се координате мењају. Прозор по ком се миш креће је велиичине 300 пута 300 пискела. Вредности координата x и y се појављују и у наслову прозора и поред показивача миша. Запис поред миша у облику уређеног пара, као што ће бити и у програмима када задајемо једну тачку.

Проверите своје знање о координатама кроз наредних неколико питања.

../_images/pygame_quiz_coordinates.png
    Q-34: Повежите боју кружића са координатама његовог центра (димензије прозора су 300 пута 300 пиксела). Покушајте поново!
  • црвена
  • (30, 40)
  • зелена
  • (50, 280)
  • плава
  • (230, 20)
  • црна
  • (150, 170)

Ако је прозор ширине 200 и висине 300 пиксела, које су координате његове централне тачке (резултат напишите у облику уређеног пара)?

    Q-35: Означите тачна тврђења.

  • Координата x расте слева надесно.
  • Тачно.
  • Координата y опада од врха ка дну екрана.
  • Координата y расте од врха ка дну екрана.
  • Тачке на горњој ивици екрана имају координату y једнаку 0.
  • Тачно.
  • Тачке на десној ивици екрана имају координату x једнаку 0.
  • Тачке на десној ивици екрана имају највећу x координату.
  • Тачка у доњем десном углу екрана има највеће обе координате.
  • Тачно.
    Q-36: Aко је ширина прозора `s`, а висина `v`, упари темена екрана са њиховим координатама. Покушајте поново!
  • горње-лево
  • (0, 0)
  • горње-десно
  • (s, 0)
  • доње-лево
  • (0, v)
  • доње-десно
  • (s, v)

Задавање боја

При цртању се, наравно, могу користити различите боје. Боју можемо задати њеним именом (на енглеском), које се наводи као параметар функције pg.Color. Moжете да користите боје навођењем одговарајуће ниске (стринга): 'black' за црну, 'white' за белу, 'gray' за сиву, 'blue' за плаву, 'green' за зелену, 'orange' за наранџасту, 'yellow' за жуту и слично. Подсетимо се, ниске се наводе било између једноструких, било између двоструких наводника (равноправно се, на пример, могу користити``’blue’`` и "blue"). На пример, ако позовете функцију py.draw.line(prozor, pg.Color('blue'), (0, 0), (200, 200), 3) на прозору ће се приказати дуж дебљине 3 пиксела, плаве боје, чија су темена тачке са координатама \((0, 0)\) и \((200, 200)\).

Нека од имена боја, која се често користе у програмима су:

pg.Color("black")

Црна

pg.Color("white")

Бела

pg.Color("red")

Црвена

pg.Color("green")

Зелена

pg.Color("blue")

Плава

pg.Color("cyan")

Reзеда

pg.Color("magenta")

Љубичаста

pg.Color("yellow")

Жута

pg.Color("orange")

Наранџаста

Поиграјте се мало са бојама у наредном програму и покушајте да обојите прозор у неке или све од ових боја.

Једна од грешака која се често дешава при писању првих ПајГејм програма је да приликом задавања боје напишете pg.color малим словом, уместо великим - pg.Color. То прузрокује грешку са поруком AttributeError: '' object has no attribute 'color'.

Још једна честа грешка је да назив боје не наведете под наводницима (на пример, да наведете pg.Color(white)). Тада уз грешку појављује порука NameError: name 'white' is not defined on line 8.

Поред ових боја, постоје и многе друге које можете да користие. Укупан број свих нијанси које постоје у рачунарима је огроман и износи око 16 милиона. Од тога, помоћу имена можемо да задамо нешто више од 600 различитих боја (комплетан списак се налази у фајлу colordict.py, који лако можете да нађете на интернету, а ако сте инсталирали ПајГејм, имате га и на свом рачунару).

Све ове именоване боје, а и све остале које немају имена, можемо да задамо помоћу бројева. За то се највише користи такозвани RGB модел боја. Наиме, у рачунарској графици свака боја се добија мешањем одређене количине црвене, зелене и плаве, по чијим именима на енглеском (Red, Green, Blue) је RGB модел и добио име. На пример, комбиновањем црвеног и зеленог светла добија се жуто светло, комбиновањем црвеног и плавог љубичасто, а комбиновањем плавог и зеленог резеда. Комбиновањем светла све три основне боје добија се бело светло док се црно светло добија када се сва три светла искључе. Сиво светло се добија када се измеша подједнака количина, црвеног, зеленог и плавог светла.

../_images/RGB.png

Боју тако можемо описати наводећи три броја (у овом случају то су бројеви од 0 до 255), који редом представљају количину црвене, зелене и плаве компоненте у боји коју дефинишемо. У програмском језику Пајтон боју можемо да представимо и у облику трочлане уређене торке (на пр. (123, 80, 56)) или трочлане листе (на пр. [123, 80, 56]). Торку или листу можете навести директно као аргумент функције који одговара боји, а можете је упамтити у променљивој и касније користити име променљиве. На пример, доделом REZEDA = (0, 255, 255) дефинишемо резеда боју наводећи одговарајуће количине црвене, зелене и плаве светлости коју ова боја садржи (пошто је то мешавина плаве и зелене боје у њој нема нимало црвене, а плава и зелена компонента су на максимуму). Након тога, ту боју можемо употребити и у позиву функције (на пр. prozor.fill(REZEDA)). Имена тих променљивих не морају бити написана великим словима, али то је постало уобичајено у писању Пајтон програма. У програмима које будете читали у наставку, сусретаћете се са дефиницијама овог облика.

Боју је могуће задати и са четири броја, на пример REZEDA = (0, 255, 255, 10). Последњи, четврти параметар (такође од 0 до 255) одређује прозирност боје, тј. овако задата резеда боја је благо провидна.

Резимирајмо сада RGB вредности неких карактеристичних боја.

(255, 0, 0)

црвена

(0, 255, 0)

зелена

(0, 0, 255)

плава

(255, 255, 0)

жута

(0, 255, 255)

резеда

(255, 0, 255)

љубичаста

(255, 255, 255)

бела

(0, 0, 0)

црна

(128, 128, 128)

сива

(255, 128, 0)

наранџаста

(255, 128, 128)

розе

Приметимо да су нијансе сиве боје препознатљиве по томе што су у њима количина црвене, зелене и плаве једнаке. Што је та количина мања, нијанса сиве је тамнија и обрнуто, веће једнаке количине црвене, зелене и плаве представљју светлије нијансе сиве (на основу RGB вредности, црну и белу можемо да посматрамо као најтамнију и најсветлију нијансу сиве).

У наредном програму можете да испробате и записе боја у RGB облику. Поред бојења прозора у неке или све од набројаних боја, можете да унесете и друге (било које) тројке вредности између 0 и 255.

Када будете бирали боје које желите да користите у својим програмима, може да вам помогне алатка за бирање боја. Таквих алатки има и на многим сајтовима (тражите color picker), а можете да користите и ону из програма Paint. Можете да испробате већ сада - изаберите боју и препишите вредности R, G, B у програм.

Утврдите своје знање о бојама тако што ћете одговорити на наредних неколико питања.

    Q-37: упарите боје. Покушајте поново!
  • Црна
  • pg.Color("black")
  • Плава
  • pg.Color("blue")
  • Црвена
  • pg.Color("red")
  • Зелена
  • pg.Color("green")
    Q-38: упарите боје. Покушајте поново!
  • Црна
  • (0, 0, 0)
  • Плава
  • (0, 0, 255)
  • Црвена
  • (255, 0, 0)
  • Зелена
  • (0, 255, 0)

    Q-39: Која од наредних боја је нека нијанса сиве?

  • (1, 12, 123)
  • Покушајте поново
  • (128, 0, 128)
  • Покушајте поново
  • (0, 0, 128)
  • Покушајте поново
  • (145, 145, 145)
  • Тачно

    Q-40: Које боје се мешају да би се добила љубичаста боја?

  • црвена и зелена
  • Покушајте поново
  • плава и црвена
  • Тачно
  • зелена и плава
  • Покушајте поново
  • црвена, зелена и плава
  • Покушајте поново

    Q-41: Како би се боја [240, 230, 18] најбоље могла назвати?

  • Плавкаста
  • Покушајте поново
  • Црвенкаста
  • Покушајте поново
  • Жућкаста
  • Тачно
  • Зеленкаста
  • Покушајте поново

Боје се дакле, представљају са три, а координате тачака са два броја. Провери да ли ово разумеш тако што ћеш одговорити на наредно питање.

    Q-42: упарите боје и координате, ако је екран ширине 300 и висине 200 пиксела. Покушајте поново!
  • Црна боја
  • [0, 0, 0]
  • Горње лево теме екрана
  • [0, 0]
  • Љубичаста боја
  • (255, 0, 255)
  • Доње десно теме екрана
  • (300, 200)