Програмирање у Скречу, практикум за пети разред

Коришћење графичког едитора

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

Прво ћемо крeирати нови лик – Пинокија, коришћењем едитора у растерском режиму и направити анимацију у којој он игра уз музику. Затим ћемо коришћењем едитора у векторском режиму направити лик мачка Мргуда и различите костиме за цвет руже – ликове пројекта Које је боље – илустрацију истоимене песмице Чика Јове Змаја. Kроз креирање пројекта Дан и ноћ показаћемо још неке специфичности коришћења векторског начина цртања. На крају ћемо научити како се од дела позадине може направити нови лик кроз пројекат Лептирићи.

Рачунари могу да памте слике на два начина: растерском и векторском.

У растерској графици слика се памти као правоугаонa мрежa пиксела - битмапа. Битмапа је технички одређена ширином и висином лика у пикселима и бројем потребних битова да се упамти боја пиксела. На пример, ако имамо само 16 боја, потребна су 4 бита по пикселу за памћење његове боје. Растерска графика је зависна од резолуције. Растерске слике се не могу увећавати без губитка квалитета снимка.

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

_images/raster_vektor.png

prouci Проучи следеће примере пројеката

Следећи пројекат направљен је по узору на пројекат Manikin_Dance.

Пример 1 - Пројекат Пинокио

У овом пројекту лик Пинокио, који ћемо сами креирати коришћењем уграђеног едитора у растерском режиму, има 5 костима. Скрипте које су му је придружене су сасвим једноставне. У једној се после клика на зелену заставицу у бесконачном циклусу смењују костими са задршком од 0.2 секунде, а у другој се стално понавља репродукција звука dance funky до краја.

_images/animacija.png

Креирање лика Пинокио

Започни нови пројекат, па обриши лик мачка. За увођење новог лика изабери начин Насликај нови лик.

Отвориће се Скречов едитор слика.

_images/graficki_editor.png

Следећа табела даје опис фунција алата у растерском режиму.

_images/rasterski_alati.png

Прво слободном руком нацртај главу, користећи при том алатке ralat1 и ralat7.

_images/pin1.png

Преименуј костим1 у Пинокио и настави са цртањем. И тело можеш нацртати слободном руком. На тело постави 4 маркера који ће ти помоћи кад будеш, на различите начине за сваки костим, на тело повезивао ноге и руке. За цртање маркера користи алатку ralat3.

_images/pin2.png

Затим нацртај надлактицу једне руке коришћењем алатке ralat4 без попуњавања, у коју такође стави два маркера (1).

Алатком ralat9 изабери руку и превуци је. Тако добијаш другу надлактицу (2).

На сличан начин нацртај подлактицу којој ћеш додати шаку цртањем слободном руком (3).

Алатком ralat9 умножи подлактицу, а затим је преврни надесно коришћењем алата за симетрично пресликавање која се налази у горњем десном углу прозора едитора (4).

Слично начину како си нацртао руке, нацртај и леву и десну ногу (5) и (6).

_images/pin3.png

Пошто си нацртао све делове тела, лик Pinokio растављен на делове изгледаће као на следећој слици.

_images/pin4.png

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

_images/pin5.png

Сада на 5 различитих начина треба повезати горње и доње делове ногу и руку са телом, а затим доње делове руку са горњим деловима руку и доње делове ногу са горњим деловима ногу.

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

Алатком ralat8 изабери горњи део ноге, па је превуци до тела, затим га окрени коришћењем кружића на врху изабране слике тако да се лепо повеже са телом. Преклопи маркере, кликни негде ван изабране области да се ослободиш алата, па коришћењем ralat7 и ralat1 подеси да спој лепо изгледа.

_images/pin6.png

Сада на сличан начин треба повезати и остале делове. Свих пет костима приказано је на следећој слици.

_images/pin7.png
Следећи пример илуструје употребу едитора слика у векторском режиму. У њему ћемо показати
како се више различитих ликова може креирати на основу једног постојећег.

Пример 2 - Пројекат Које је боље

Први лик биће мачак који се појављује као Лик1 при покретању новог пројекта, а Лик2 ћемо направити умножавањем првог. Преименоваћемо Лик1 у Срећко, а Лик2 у Мргуд.

Срећко и Мргуд биће ликови који представљају два дечака, оптимисту и песимисту, из дечије песмице Које је боље нашег песника Чика Јове Змаја. У презентацији песмице учествоваће и лик ружа са три костима: обичним, са великим трњем како је види песимиста и са великим цветом, како је види оптимиста.

Сам текст песмице приказиваће се у стрип облачцима наредбе zamisli, али лик приповедача неће се видети на позорници.

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

Сценарио

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

Мучила га често
И та мисо црна:
Што ниједна ружа
Да није без трна?

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

Тај је дечко имо
Веселога друга
Кога није лако
Обарала туга

појављује се Срећко који клизи из горњег десног угла позорнице до руже, где се зауставља и цупка. Ови догађаји синхронизују се слањем поруке Весело на коју реагује Срећко.
Када започне строфа:

Па и он сад рече:
Радујем се друже,
Што се и на трну
Могу наћи руже!

започиње анимација у којој се ружа појављује са великим цветом. Ово се синхронизује слањем поруке Ружа на коју реагује лик ружа новом променом костима.

На следећој слици приказано је како се реализује описана синхронизација дејстава ликова.

_images/sinhronizacija.png

Креирање ликова и позадине

Лик Срећко ће остати без промена, а Мргуд треба да буде дебљи од њега, тамно сиве боје, са опуштеним устима и по три брка на образу. Кроз његово креирање упознаћемо алате векторског начина рада едитора слика. Измене треба вршити на оба костима.

_images/vektorski_editor.png

Следећа табела даје опис фунција алата у векторском режиму.

_images/vektorski_alati.png

Креирање костима за Мргуда

Када отворимо картицу Костими за Мргуда, први костим биће приказан и у графичком едитору који ће бити у векторском режиму, јер је овај лик векторска слика. На следећој слици приказано је поступно како се измене врше. Слику смо увећали на 400% да би измене могле да се ураде прецизније.

Полазимо од лика Cat1 (1). Прво ћемо променити боју мачка у тамносиву. Изабери одговарајућу боју цртања и алатку valat8, па редом „залиј“ све области које су биле наранџасте боје и добићеш сивог мачка (2). Затим алатком alat1 узми узорак боје са контуре мачка (3), и том бојом и алатком valat3 нацртај још један брк на десном образу мачка (4). Видећеш да, иако изабереш најтању линију за цртање, тај брк има већу дебљину од преостала два. Зато ћемо за цртање трећег брка на левом образу показати нешто компликованији, али за даљи рад врло користан начин како се ово може урадити.

Изабери Мргуда (5), па кликни на дугме valat13. Када поново кликнеш, моћи ћеш да изабереш само главу (6), а не целог мачка. Још једном разгрупиши објекте који формирају главу и моћи ћеш да изабереш само доњи брк са левог образа (7). Умножи га алтком valat9 и постави између горњег и доњег брка (8).

_images/mrgud1.png

Пре него што поново групишемо све објекте у објекат глава мачка, а затим и у јединствен објекат – мачка Мргуда, направићемо му тужан израз лица тако што ћемо изменити уста. Алатком valat2 кликни на уста и повуци контролне тачке као на слици (9). Сада „удебљај“ Мргуда. Алатком valat2 изабери контуру тела мачка и превлачењем контролне таке му повећај стомак (10). Међутим, повећали смо само контуру, али не и белу површину на стомаку. Да бисмо и њу повећали треба да изаберемо ту површину и затим и њу да проширимо до контура стомака (11). Обоји и бели део главе у сиву Мргудову боју (12).

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

Креирање костима за ружу

На следећој слици приказано је како смо креирали лик Ружа. Слику руже са трњем која нам одговара (1) пронашли смо у png формату па смо нове костиме за њу направили коришћењем едитора слика у растерском режиму.

Прво смо обрисали белу позадину, па додали саксију коју смо нацртали алтакама ralat4 и ralat2 и попунили различитим начинима попуњавања (2).

Затим смо копирали лик у још два костима. Једном костиму повећали смо трње коришћењем алатке ralat1 са две боје и две дебљине (3), а другом цвет тако што смо изабрали област цвета, увећали га, па тако увећани вратили на стабљику (4).

_images/ruza.png

Креирање ликова који ће „замишљати“ стихове песмице

Нацртаћемо најмањи могућ лик који ће „замишљати“ стихове песмице – једну једину тачку. На почетку та тачка, постављена горе лево, „рецитује“ читаву песмицу. Предлажемо ти да истражиш колико знакова стаје у један ред стрип облачка.

Затим умножавамо овај лик тако што десним кликом на икону лика у листи ликова отворимо контекстни мени и изаберемо опцију Умножи. Напомињемо да умножавање лика преноси копији и све скрипте изворног лика.

Упамти. Ако желиш да у пројекту радиш са више сличних ликова који се истоветно или слично понашају, прво изворном лику придружи све скрипте, а после га умножи. Тако нећеш морати новом лику да преносиш једну по једну скрипту, већ ћеш му једним потезом ископирати све.

Сада премештамо другу тачку на десну страну екрана и раздвајамо строфе песмице на ова два лика. Прву строфу рецитује леви, а десни чека, другу рецитује десни, а леви чека и тако редом док један чека, други рецитује.

Следе скрипте које описују понашање Срећка, Мргуда и Руже.

_images/skripte.png

Пример 3 - Пројекат Дан и ноћ

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

На позорници се налазе две кућице од којих једна припада маци, а друга куци. Придружене су им две позадине – дан и ноћ.

У позадини дан виде се сунце, светло плаво небо и трава. У позадини ноћ све осим кућица је тамно плаве боје, а на небу се виде звезде и млад месец. Позадине дан и ноћ смењују се сваких 5 секунди.

Када је дан, маца и куца излазе из својих кућица и јуре се. Маца трчи у круг, а куца се усмерава према маци и покушава да јој приђе.

Када је ноћ, маца и пас иду у своје кућице и мирују.

_images/dan_noc.png

Креирање ликова куца и маца

Обриши Лик1 па унеси из библиотеке ликове пса (Dog2) и мачка (Cat2). Преименуј ликове у куца и маца. Куца има 3 костима, од којих ћемо користити само прва два, па трећи обриши. Маца има само један костим, па треба да направимо још један како бисмо могли да направимо анимацију кретања. За креирање другог костима маце користићемо едитор слика у векторском режиму. Десним кликом на костим маце отварамо приручни мени и бирамо Умножи. Добијамо нови костим (Cat3) који ћемо изменити у корацима које илуструје следећа слика.

_images/maca.png

Креирање позадине

Кликни на позорницу (лево од листе ликова), затим изабери картицу Позадине и векторски начин цртања. Из палете векторских алата изабери valat5, а начин цртања нека буде без попуњавања. Нацртај кућицу као што је приказано на следећој слици.

_images/kucica.png

Пошто си алатком valat12 груписаo објекте од којих је састављена кућица, коришћењем алатке valat9 умножи кућицу и копију премести у дољи десни угао позорнице, а оригинал у горњи леви угао. Затим коришћењем алатки за увећавање и смањивање подеси величине ликова тако да могу да стану у кућице.

Сада прелазимо на бојење алатком valat8. Примена овог алата се код попуњавања области разликује од рада у растерском режиму. Наиме, ако област није затворена, у растерском режиму боја „исцури“ на читаву слику. У векторском режиму се то не дешава – уопште не можеш да извршиш бојење. Зато на увећаној слици треба прво „затворити“ област. То се ради тако што се помоћу алатке valat2 кликне на слику, па део слике који није повезан (2) изабереш и повежеш са остатком слике (3). Онда коришћењем алатке valat8 можеш да обојиш како унутрашњост (4), тако и саме линије које образују област (5).

_images/zvezda.png

Како смо приликом цртања кућице користили алатку valat5, не би требало да буде проблема приликом бојења. На следећој слици приказан је начин и резултат попуњавања делова кућице.

_images/nacini_popunjavanja.png

Пошто си обојио кућице, умножи ову позадину.

Прву позадину ћемо допунити тако да представља ноћ, а другу тако да представља дан.

Креирање позадине ноћ

Нацртај попуњен тамно плави правоугаоник преко целе позорнице, а затим помоћу алатке Слој испод valat11 постави овај правоугаоник иза обе кућице (биће потребно да неколико пута кликнеш на позорницу). Када се буду виделе обе кућице, пређи на цртање месеца и звездица.

Млад месец може се нацртати тако да се прво нацрта попуњен жути круг (1), а затим делимично преко њега већи круг попуњен бојом позадине (2).

Звездицу формирамо тако што белом бојом нацртамо троугао (3), па га умножимо и заротирамо (4) и на крају цео облик попунимо белом бојом (5).

_images/zvezde_mesec.png

На крају ископирај готове звездице, распореди их на позадини, неке увећај, а неке смањи и ноћна позадина је завршена.

_images/noc.png

Креирање позадине дан

Нацртај сунце алатком valat6, а зраке алатком valat4. Затим великим светло плавим попуњеним правоугаоником ширине позорнице нацртај небо и пошаљи га онолико слојева испод колико је потребно да се виде сви детаљи. (Да си прво цртао небо, а после сунце брже би небо поставио у доњи слој, овако треба да га ставиш иза свих зракова сунца).

Затим зеленим попуњеним правоугаоником ширине позорнице нацртај траву и пошаљи и њега у позадину слике.

Поступак креирања позадине дан илуструје следећа слика.

_images/dan.png

Пошто смо завршили са позадином дан, можемо да кренемо са писањем скрипте за понашање ликова.

Синхронизација догађаја у пројекту Дан и ноћ

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

_images/dan_noc3.png

На следећим сликама приказане су скрипте придружене ликовима из којих се види како реагује на ове поруке.

_images/dan_noc1.png _images/dan_noc2.png

Пример 4 - Пројекат Лептирићи

У овом пројекту два лептира лете лево-десно, један пролази испред, а други иза девојчице која се налази у башти.

Слику расцветале баште у којој стоји девојчица пронашли смо на интернету у jpg формату. Да бисмо постигли да лептири које имамо у два костима у библиотеци ликова могу да лете иза девојчице, морамо имати девојчицу као засебан лик, а не само као део позадине. Зато ћемо показати како се од дела позадине у Скречу може направити лик.

Креирање лика од дела позадине

Прво учитај нову позадину, у нашем примеру то је фајл garden.jpg.

_images/leptirici1.png

Затим умножи ову позадину, па са копије обриши што више детаља око лика који желиш да искористиш.

_images/leptirici2.png

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

Ако је потребно, уклони белу позадину и помери лик тако да потпуно преклапа одговарајући део позадине.

_images/leptirici3.png

Понашање лептирића

Сада изабери лик Butterfly 1 из библиотеке ликова и придружи му следеће скрипте.

_images/leptirici4.png

Тестирај пројекат. Лептир ће летети лево- десно и прелазити испред лика девојчице.

Сада уради десни клик на сличицу лептира у листи ликова и из приручног менија изабери опцију Умножи. Појавиће се копија лептира под именом Butterfly 2 која има све скрипте које је имао први лептир у тренутку када си га умножавао.

Да би разликовао ова два лептира, пребој крила другом у оба костима црвеном бојом.

_images/leptirici5.png

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

Заустави извршавање програма, пренеси блок idi_iza из групе Изглед у област скрипти другог лептира и кликни једанпут на њега, па поново покрени извршавање програма кликом на зелену заставицу.

Сада ће црвени лептир пролазити иза првог лептира (б). Кликни још једном на блок idi_iza и црвени лептир ће пролазити иза девојчице (в).

_images/leptirici6.png
Приликом креирања овог пројекта подсетићемо се неких савета како да програмирамо брже.
Ово постижемо тако што максимално користимо оно што смо ми, или неко други, већ направили.
Трудимо се да искористимо претходно креиране ликове, позадине, скрипте и да од свега тога,
уз минималне измене и своју машту и креативност направимо нешто сасвим ново.
На Скречовом сајту може се наћи више ремикса пројекта Калеидоскоп који смо изабрали као
пример за подсећање на правила која смо до сада научили  за брже креирање пројекта.

Пример 5 - Пројекат Калеидоскоп

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

Сценарио

На почетку се три лика – црвена жута и плава стрелица са прорезима на средини постављају у центар сцене. Једна је усмерена на горе (угао 0 о), друга у смеру 120 о, а трећа у смеру 240 о. Све три се истовремено воде тастерима са стрелицама: стрелице лево и десно ротирају их за по 5 о улево и удесно, стрелица доле води их један корак наниже, а стрелица горе један корак навише уз остављање печата. На овај начин корисник може да формира симетричне слике по жељи, као на следећој слици.

_images/kaleidoskop0.png

Креирање и програмирање прве стрелице

Лик стрелица можемо направити на више начина. Ево како смо ми то урадили.

  • У графичком едитору изабрали смо векторски начин цртања и поставили увећање на 1600%. (1)
  • Алатком valat5 нацртали смо црвени попуњен квадрат величине 11х11 пиксела који има центар костима на средини леве странице (2).
  • Алатком valat2 превукли смо обе десне контролне тачке на средину десне странице и тако претворили квадрат у троугао (3).
  • Алатком valat4 нацртали смо белу линију преко троугла од центра костима до десног темена (4) и тако завршили лик црвена стрелица.
_images/kaleidoskop1.png

Направимо сада скрипте које описују понашање стрелице.

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

Друга скрипта дефинише како се понаша лик ако се кликне на дирку ↑. У бесконачној петљи се пропитује да ли је дирка ↑ притиснута и ако јесте лик се помера један корак и оставља свој печат. Да је лик са којим радимо већи, као што је то било у претходном пројекту, требало би да направи број корака у сразмери са својом величином пре но што остави свој печат.

_images/kaleidoskop2.png

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

_images/kaleidoskop3.png

Креирање и програмирање преосталих стрелица

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

Сада треба изменити изглед нових ликова у едитору слика и променити смер у првој скрипти – другој стрелици уместо 0 о поставити 120 о, а трећој 240 о. Другу стрелицу изменићемо тако што црвену боју променимо у жуту, а трећу тако што променимо њену боју у плаву. На следећој слици приказани су коначни изгледи све три стрелице.

_images/kaleidoskop4.png

Упамти овај пројекат под називом Калеидоскоп и изврши га више пута какo би добио различите слике на екрану. Не заборави да оне слике које ти се допадну можеш да упамтиш као фајл и користиш их у неком од следећих пројеката.

knjiga Шта смо научили

Појмови: растерска графика, векторска графика.

Алати: растерски - ralat1, ralat2, ralat3, ralat4, ralat5, ralat6, ralat7, ralat8, ralat9;

векторски - valat1, valat2, valat3, valat4, valat5, valat6, valat7, valat8, valat9, valat10, valat11, valat12, valat13;

заједнички - alat1, alat2, alat3, alat4, alat5.