Stencyl

STENCYL
Увод
Данас постоји доста различитих game engine-а (надаље engine) који доприносе
могућност експортовања финалне игре на различите платформе. Обично се користе за PC,
као и за новије конзоле (PS4, Xbox One), али и за мобилне уређаје. Следи листа неких од
најпопуларнијих enginе-а у овом тренутку у паровима: назив, припадни лого:

Unreal Engine
4

Unity

CryEngine

Frostbite

Побројани enginе-и су доста захтевни за рад јер траже доста искуства не само са 3D
окружењем него и доста добро познавање програмских и/или скрипт језика. Ово повлачи и
потребу за да се поседује „јак” рачунар који би могао да извршава симулације у реалном
времену.
Постоје и „мање снажнији“ engine-и који користе такође многи развојни тимови али
искључиво за веб и мобилне платформе. Они су обично типа „drug and drop“, што
кориснику даје додатну брзину и лакоћу при раду (поред овога имају и део одвоојен за
кодовање).
Овде ће се користити бесплатни алат Stencyl, који припада 2D game engine-има.

1
 Stencyl

3 Stencyl
Stencyl je познат алат за израду видео игара који не захтева знање програмирања (Слика 3-1
Stencyl, развојно окружење и лого. Уместо кода, корисник спаја логичке блокове догађаја
који дају логику објектима игре. Поред овог постоји и кодни део који се може користити
паралелно са логичким блоковима (није предмет практикума).

Слика 3-1 Stencyl, развојно окружење и лого

Једна од великих предности је то што је програм доступан за познате платформе: Windows,

Max OS X као и за популарне Linux дистрибуције.

3.2 Инсталација

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

http://www.stencyl.com/ , те креирати налог и потом скинути најновију верзију програма тако
што се кликне на дугме Download које има навигацију до странице где се бира инсталација
за оперативни систем на коме се жели коришћење Stencyl-а. На крају покренути инсталацију
и инсталирати програм.
2
 Stencyl

3.3 Преглед вежби

Трећи блок вежби из предмета Рачунарска графика обухвата креирање три једноставне
засебне игре при чему ће акценат бити на имплементацији логике. Типови игара које ће се
реализовати у практикуму су приказани на сликама: Слика 3-2 Свемирски хаос (Shoot ‘em
Up), Слика 3-3 Нинџа платформер (2D Side Platformer), Слика 3-4 Авиони (Endless
Horizontal Scrolling Runner):

Слика 3-2 Свемирски хаос (Shoot ‘em Up)

Слика 3-3 Нинџа платформер (2D Side Platformer)

Слика 3-4 Авиони (Endless Horizontal Scrolling Runner)

3
 Stencyl

3.4 Вежба “Свемирски хаос”

Овакав тип видео игре први пут се појавио почетком 80-их година прошлог века
и остао је популаран и до данас. Најпознатија игра овог типа је Space Invaders чији је изглед
дат на Слика 3-5 Изглед видео игре Space Invaders.

Слика 3-5 Изглед видео игре Space Invaders

Ова вежба има за циљ упознавање корисника са окружењем Stencyl. У вежби се

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

4
 Stencyl

3.4.1 Нови пројекат

Након што се отвори програм прикаже се поље My Games (Слика 3-6 Поље My Games),
у којој се налазе пројекти игара на којима се ради. Сада је потребно кликнути на квадрат са
испрекиданом оградом на коме пише Click to create a new Game.

Слика 3-6 Поље My Games

Након што се кликне, отвара се прозор где се поставља питање да ли се жели

коришћење готовог шаблона или се жели креирање празног пројекта (где се све прави од
„нуле“). Изабрати празан пројекат (Blank Game), а користиће се ресурси из уграђене
продавнице. Уноси се име “chaos in the universe” и бира се величина 600x800px, јер за овај
тип игре треба усправан екран. Кликом на дугме Create креира се нови пројекат са жељеним
подешавањима. Примећује се измена окружења леве стране програма, где је поље Welcome
Centar замењено пољем Dashboard (Слика 3-7 Dashboards). Dashboard поље прати корисника
током читавог рада на пројекту што значи да увек може да му се приступи. Ово поље се дели
на два основна поља, а то су ресурси (Resources) и логика (Logic).

Слика 3-7 Dashboards

5
 Stencyl

3.4.2 Сцена
Сада је потребно креирати сцену. Сцена спада у ресурсе (Resources>Scenes) и
представља засебан ниво у игри. На исти начин као што је креиран нови пројекат тако се
креирају и остале компоненте игре тј. кликом на испрекидани оквир (“Click here to create ...”)
добија је дијалог приказан на Слика 3-8 Параметри креирања сцене Омогућен је унос
параметара за креирање сцене: назива пројекта, величине сцене која је матрично
организована као плочице (tiles), величине плочица те боје позадине која није битна ако се
као позадина буде постављала слика. Креира се сцена са подешавањима као на Слика 3-8
Параметри креирања сцене

Слика 3-8 Параметри креирања сцене

Након сваке новокреиране компоненте Stencyl аутоматски отвара едитор у новом таб-у
(картици) који је намењен за дату компоненту. Након креирања (клик на Create), отвара се
едитор сцене где се приказују разне алатке, слојеви, плочице и актери (Слика 3-9 Едитор
сцене).

6
 Stencyl

Слика 3-9 Едитор сцене

Сада се иде на Stencyl-ову продавницу StencylForge да би се одабрала позадинска
слика. StencylForge је лако приступачан јер се налази увек изнад табова (Слика 3-9 Едитор
сцене), те када се кликне на његову икону отвара се продавница у новом табу.
У горњем десном углу налази се поље за претрагу (Слика 3-10 Одабирање ресурса),
након што је у истом откуцано Universe I појављује се ресурс типа позадине које се
преузима кликом на поље Download (Слика 3-10 Одабирање ресурса).

Слика 3-10 Одабирање ресурса

Након преузимања ресурса, Stencyl је отворио позадину у новом табу. У доњем левом
углу налази се налази иконица оловке (Слика 3-11 Одабирање едитовања ресурса) која након
клика отвара прозор где је потребно кликнути на дугме Edit Image који отвара едитор слике
(Edit Frame).

Слика 3-11 Одабирање едитовања ресурса

Постоји могућност да се појави порука да Pencyl (Stencyl-ова верзија Photoshop-а) није
инсталиран те би у том случају требало прихватити да Stencyl инсталира Pencyl. Унутар
Pencyl-a слику, подесити на 800x600 (Image Size...) и ротирати за 90 степени ротира опцијом
Image>Rotate 90 (Слика 3-12 Ротација слике.

7
 Stencyl

Слика 3-12 Ротација слике

Да би се промене сачувале, потребно је да се ново стање сними (File>Save) и након тога

да се кликне на дугме OK у прозору Edit Framе.

Слика 3-13 Подешавање скроловања

Биће коришћена Scroll Speed опција која се налази са десне стране едитора (Слика
3-13 Подешавање скроловања), која даје позадини илузију да се свемирски брод креће на горе
као што је случај код оваквих типова игара. Horizontal Scroll Speed се поставља на 0.1 и његов
смер биће лево, Vertical Scroll Speed се поставља на 50 и смер је на доле (Down) и поред
овога се укључује понављање позадине (Repeat Background). Да би наведено било примењено
на претходно направљену сцену потребно је да се кликне на дугме Attach to Scene и у
новотвореном прозору да се изабере нека од постојећих сцена (у овом случају First_Level
сцена).

3.4.3 Актери
Актeри (Actors) представљају све објекте који имају стања и понашања у игри. У њих
могу да спадају играчи, непријатељи, муниција, животи, итд. Такође ће се и за актере
користити „продавница“ где треба претражити свемирске бродове и метке користећи кључне
речи „ship“ и „bullet“ у пољу за тражење. Биће потребна два типа свемирских бродова, један
за непријатеља и један за играча (Слика 3-14 Свемирски бродови играча и непријатеља), али и
два различита метка (Player Bullet и Enemy Bullet). Зелени брод ће представљати играча, а
8
 Stencyl

љубичасти ће бити додељен непријатељима. Надаље, плаве метке испаљује играч, а црвене
непријатељи (Слика 3-15 Одабирање метака

Слика 3-14 Свемирски бродови играча и непријатеља

Слика 3-15 Одабирање метака

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

9
 Stencyl

Слика 3-16 Приказ постојећих актера

Са десне стране едитора налазе се сви постојећи актери из тренутног пројекта унутар
палете Actors (слика 3-16). Селектовањем и повлачењем на видљиви део сцене поставити
љубичасти брод на нулти слој (0 Layer 0). Ово се ради тако да се у палети Layers селектује
слој 0 Layer 0 и троугластом стрелицом у дну помери на врх листе слојева. Исти поступак
применити и за зелени брод. Позицију постављеног брода подесити у селект моду (икона
курсора).

10
 Слика 3-17 Покретање игре
Ако су додата понашања приликом преузимања ресурса обрисати их
(Dashboard>Logic>Actor Behaviours). Уколико се кликне на плаву стрелицу у горњем десном
углу покренуће се игра у Flash Player-у, где се позадина помера али бродови остају статични
без обзира који тастер је притиснут на тастатури (Слика 3-17 Покретање игре).

3.4.4 Контроле
Да би кретање било укључено потребно је да понашање буде додељено зеленом броду
који на основу контрола врши одређену радњу. Поред кретања потребно је да се дода тастер
везан за пуцање.

Слика 3-18 Активирање подешавања

Кликом на програмско дугме Settings (Слика 3-18 Активирање подешавањ) отвара се
прозор са подешавањима свега што је везано за пројекат, доносно, игру. Ова иконица
подешавања је увек присутна изнад табова баш као и StencylForge.

11
 Слика 3-19 Креирање контроле
Унутар подешавања треба кликнути на поље Controls где су приказане контроле које
Stencyl подразумевано креира, а онда кликом на испрекидани текст креира се нова контрола
са параметрима: име је Fire, а активациони тастер је Space (Слика 3-19 Креирање контроле).

3.4.5 Понашања
Понашањa (Behaviors) су везана за логику објекта. Могуће је контролисати сцену,
актере, звукове итд. Понашања се креирају преко логичких блокова. У овој вежби се неће
креирати понашања од „нуле“ већ ће бити преузета из „продавнице“.
Оно што је потребно преузети јесте:
 4 Way Movement mbuist 2016 – везан за контролу кретања играчевог свемирског
брода;
 Cannot Exit Screen juanfranzoni– ограђује играча да не изађе ван граница сцене
(екрана);
 Space Shooter Action Pack chavarias 2016 – готова понашања за пуцање;
 Health Pack ammoniteA– приказ животне енергије.

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

логичке блокове или кодовање. О манипулисању логике преко логичких блокова биће речи
касније. У овом тренутку требало би затворити све аутоматски отворене табове да се оде на
поље актера (Dashboard>Actors Types). Дуплим кликом миша на зелени брод отворају се
опције за подешавање истог (Слика 3-20 Одабирање актера за његово подешавање и припадни
табови).

Слика 3-20 Одабирање актера за његово подешавање и припадни табови

12
 Подешавања за сваког актера су подељена у шест табова који се односе на: изглед
(Appearance), понашања (Behaviors), догађаје (Events), колизију (Collision), физику (Physics),
и особине (Properties) (Слика 3-20 Одабирање актера за његово подешавање и припадни табови).
Коришћењем таба који се односи на понашање (Behaviors) актера потребно је
придружити једно од претходно преузетих понашања одабраном зеленом броду. Понашања
се придружују тако што се кликне на дугме +Add Behaviour и изабере се 4 Way Movement
(Слика 3-21 Придруживање понашања актеру).

Слика 3-21 Придруживање понашања актеру

13
 Слика 3-22 Подешавања контрола
У подешавањима контроле поставити подешавања као на Слика 3-22 Подешавања
контрола.

14
 Слика 3-23 Подешавање анимација по смеровима кретања
Пошто свемирски брод садржи само једну анимацију (Animation 0) онда ће она бити за
све типове кретања. Подешавање анимације по смеровима кретања урадити према подацима
датим на Слика 3-23 Подешавање анимација по смеровима кретања Потребно је додати и још
понашања зато треба кликнуту на +Add Behavior да би додали понашање Cannot Exit Screen
које се оставља на подразумеваним вредностима.

15
 Слика 3-24 Додавање понашања Fire Weapon

Поред кретања потребна је логика за пуцање која се остварује коришћењем два понашања а то су: Fire Weapon и Do on Key
Press. Понашање Fire Weapon се надовезује на Do on Key Press понашање тако што користе заједничко позивно име

16
 “shoot”, које се реализује коришћењем тастера Fire (

Слика 3-24 Додавање понашања , Слика 3-25 Додавање понашања Do on Key Press).

Слика 3-25 Додавање понашања Do on Key Press

Потребно је након овога отићи у таб Physics и поставити гравитацију и ротацију на No
(Слика 3-26 Подешавање гравитације и ротације).

17
 Слика 3-26 Подешавање гравитације и ротације
У табу Player Bullet у пољу Dashboard>Actors, одабрати таб Collision за контролу
колизије и омогућити сензор (Is a Sensor ?) што омогућује играчу испаљивање метака који се
преклапају (Слика 3-27 Подешавање колизије). Исто урадити и за Enemy Bullet.

Слика 3-27 Подешавање колизије

18
 Остало је да се додају понашања за непријатеља (љубичасти свемирски брод). Од
понашања треба додати Bullet Wave који треба попунити као на Слика 3-28 Подешавање
понашања Bullet Wave.

Слика 3-28 Подешавање понашања Bullet Wave

Након овога следи класификација актера. Потребно је отворити подешавања Settings,
али овог пута треба изабрати поље групе (Groups). У њима се налазе подразумевано
дефинисане групе. Потребне су три групе које се креирају кликом на зелено дугме Create
New (Слика 3-29 Подешавање група):
• Enemy (група којој припадају сви непријатељи)
• Hero Bullet (група која је везана за метке које играч буде испалио)
• Enemy Bullet (група која се доноси на непријатељске метке)

19
 Слика 3-29 Подешавање група
Сада је потребно подесити сударе (Collide) објекта са другим објектима што повлачи да
искључење судара доводи да објекти могу да пролазе попут духова једни кроз друге. У том
смислу треба подесити колизију за новокреиране групе као на сликама: Слика 3-30
Подешавање колизије група, Hero BulletСлика 3-31 Подешавање колизије група, Enemy и Слика 3-32
Подешавање колизије група, Enemy Bullet:

Слика 3-30 Подешавање колизије група, Hero Bullet

Слика 3-31 Подешавање колизије група, Enemy

20
 Слика 3-32 Подешавање колизије група, Enemy Bullet

Слика 3-33 Подешавање колизије група, Enemy Bullet

Сада је потребно изменити и подразумевану групу Players као на Слика 3-33 Подешавање
колизије група, Enemy Bullet. Након што су групе дефинисане, потребно је да се оне и доделе
актерима тако што се отвори актер, на пример зелени брод, те да се оде на таб Collision.
Унутар ovog таба треба доделити одговарајућу групу из падајуће листе, у овом случају групу
Players (Слика 3-34 Додељивање групе актеру). Исти принцип треба применити и на све
остале актeре.

21
 Слика 3-34 Додељивање групе актеру
Ако пакет који је инсталиран нема понашање Die Upon Collision, онда наведено
понашање преузмите из „продавнице“. Ово понашање треба придружити свим мецима.

Слика 3-35 Поставке за понашања придружена Enemy Bullet-у

За одузимање животне енергије костисти се понашање Inflicts Damage које се
придружује свим бродовима и свим мецима, где се за вредност поставља на 20 (Слика 3-35
Поставке за понашања придружена Enemy Bullet-у).

22
 Слика 3-36 Подешавање понашања Health за непријатељски брод
Health понашање даје иницијалну вредност за животну енергију где непријатељ треба
да има већу вредност од играча (Слика 3-36 Подешавање понашања Health). За брод играча
поставити исто као и за неприајтељски брод.
За приказ тренутног стања животне енергије се користи понашање Show Health Bar
(Слика 3-37 Подешавање понашања Show Health Bar), а за ефекат ударца понашање Flicker
when Hit који мења боју актера уколико му се смањи енергија (Слика 3-38 Подешавање
понашања Flicker when Hit). Оба понашања се пимењују на оба брода.

Слика 3-37 Подешавање понашања Show Health Bar

23
 Слика 3-38 Подешавање понашања Flicker when Hit

3.4.6 Експортовање
Пре експортовања поставиће се иконица игре тако да се иде на подешавања (Game
Settings) те селектује слика која ће бити иконица игре (Слика 3-39 Постављање иконице игре).

Слика 3-39 Постављање иконице игре

Слика 3-40 Експортовање игре

Као финални део пројекта видео игре следи експортовање. У бесплатној верзији
програма постоји могућност експортовања само за веб платформу. Кликом на мени Publish
отвара се падајћи мени где се бира Web а затим једна од три опције за веб, а онда се изабере
фолдер и сними игра (Слика 3-40 Експортовање игре).

24