Create IT Blog - vzdělávání

 

 

Clever Ballet Academyhttps://create-it.cz/Blog/Stranky/baletni-akademie.aspxClever Ballet Academy<p>Vědecké výzkumy z posledních let ukazují, že balet dokáže přinášet nejen radost, celkové uklidnění, ale udržet i fyzickou kondici vedoucí k celkovému vyššímu sebevědomí. Naše lekce jsou vhodné pro všechny příznivce tohoto​ krásného druhu tance, kteří dosud neměli přiležitost si ho vyzkoušet.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/baletni-akademie/ballet-academy-2021_letak.png" alt="ballet academy" data-themekey="#" style="max-width:690px;" /> </p><p></p><p>Váháte? Přečtěte si příběhy kolegů, kterým naše baletní akademie změnila život!<br></p><h2> Rober​t</h2><p> Po absolvování baletního kursu jsem během několika večerů nacvičil známý balet <em>Pták Ohnivák</em>, jako překvapení k výročí seznámení s mojí partnerkou. Výkon v sólo choreografii si partnerka natolik oblíbila, že ho musím opakovat několikrát týdně. </p><h2> Ema​<br></h2><p> Při mém sedavém zaměstnání jsem kurs uvítala a brala ho jako impuls ke snížení váhy. Bohatě ilustrovaná kniha <em>Balet pro samouky </em>se stala mojí druhou biblí, a navíc jsem si poprvé v životě odůvodnila nákup vysněného přiléhavého trikotu. </p><h2>​​​​Den​is</h2><p> Kurs mi změnil život, doslova teď tančím životem. Každou chvilku se přistihnu v nějaké baletní póze. Mezi kolegy vývojáři ve společném open space to občas budí údiv, ale co by člověk neudělal pro zajímavou fotku na Instagramu.​<br></p><p> <img src="/Blog/PublishingImages/Stranky/baletni-akademie/baletni%20akademie-4939-2.jpg" alt="baletni akademie-4939-2.jpg" data-themekey="#" style="max-width:690px;" />​<br></p><h2> Vla​​sta</h2><p> Doposud jsem preferovala spíš silové sporty - posilování, crossfit a zvlášť šerm historickými zbraněmi mě doposud zcela naplňovaly. Kolegyně Šárka mě přesvědčila k návštěvě Baletní Akademie, a díky ní se mi v sobě podařilo najít něhu, smyslnost, lehkost, a dokonce i nový pohled na mužskou část populace. </p><h2> ​Adam a Ev​a</h2><p> Baletní Akademie dodala našemu vztahu nový svěží vítr. V nelehkých časech zvýšené domácí izolace jsme si už občas trochu lezli na nervy, ale tanec nám​ ukázal cestu, jak se společně zabavit, udělat něco pro své zdraví a cítit se doslova jako v Ráji.<br></p><div> ​<br> </div> <img src="/Blog/PublishingImages/Stranky/baletni-akademie/baletni%20akademie-4956-2.jpg" alt="baletni akademie-4956-2.jpg" data-themekey="#" style="max-width:690px;" />​<br><br>hobby;#vzdělávání;#
Jak vytvořit klon Flappy Bird ve vizuálním jazyku Bolt v Unityhttps://create-it.cz/Blog/Stranky/flappy-bird.aspxJak vytvořit klon Flappy Bird ve vizuálním jazyku Bolt v Unity<p>​​Dva nejdominantnější herní enginy na trhu jsou Unity a Unreal Engine 4. UE4 používá kromě klasického programování i systém grafického programování přes tzv. blueprinty. V Unity tato možnost oficiálně dlouho chyběla, až do minulého roku, kdy se tvůrci rozhodli do všech verzí Unity přidat systém grafického programování Bolt. V tomto článku se podíváme na základní funkcionalitu Boltu a vytvoříme s jeho pomocí klon legendárně úspěšné hry <a href="https://www.youtube.com/watch?v=YHH2101OFfI" style="text-decoration:underline;">Flappy Bird</a>. Pokud jste chtěli zkusit herní vývoj, ale programování vás doteď děsilo, Bolt může být snadný způsob jak začít!<br></p><p>Konečným produktem tohoto tutoriálu bude klon hry Flappy Bird s replikou původního ovládání létání a generátor překážek. Překážky se budou donekonečna generovat vpravo mimo obrazovku a budou putovat doleva a tvořit tak iluzi pohybu herní postavy doprava (tedy stejná metoda, kterou používá původní Flappy Bird a další hry typu infinite-scroller). Dejme se do toho!</p><h1>Instalace Boltu<br></h1><p>Nejprve vytvoříme nový 2D projekt v Unity 2020 a nainstalujeme Bolt (<a href="https://assetstore.unity.com/packages/tools/visual-scripting/bolt-163802" style="text-decoration:underline;">odkaz</a>). Návod jak vytvořit nový projekt a importovat balík z Unity Asset Store naleznete v prvním dílu seriálu o herním vývoji v Unity (<a href="/Blog/Stranky/unity3D.aspx" style="text-decoration:underline;">odkaz</a>). Typ nového projektu zvolíme 2D. Po importu Boltu z Asset Store ho v Unity stáhneme přes <em>Package Manager -> My Assets -> Download</em>.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/package%20manager.png" alt="package manager.png" data-themekey="#" /> <br> </p><p>A nainstalujeme přes <em>Tool -> Install Bolt</em>. Pak stačí následovat Setup wizard<br></p><p>(<em>Next -> programmer naming -> next -> generate</em>).<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/install%20bolt.png" alt="install bolt.png" data-themekey="#" style="margin:5px;width:200px;height:65px;" /> <br> </p><h1>Herní charakter - Alien​</h1><p>Jako hlavní herní charakter vytvoříme malého Aliena. Klepneme do okna hierarchie a vybereme <em>2D Object -> Sprite</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/2Dobjectsprite.png" alt="2Dobjectsprite.png" data-themekey="#" style="margin:5px;width:400px;height:175px;" /><br></p><p>Nový objekt přejmenujeme na <em>Alien</em></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/alien.png" alt="alien.png" data-themekey="#" style="margin:5px;width:200px;height:88px;" /><br></p><p>V sekci <em>Sprite Renderer</em> pak zvolíme Sprite <em>shipGreen_manned</em> (dostupné v mém github repozitáři, odkaz v závěru). Další zajímavé grafické podklady můžete najít na <a href="https://kenney.nl/" style="text-decoration:underline;">kenney.nl</a>.</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/shipgreen.png" alt="shipgreen.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Přes<em> </em>tlačítko <em>Add Component</em> přidáme alienovi <em>Polygon Collider 2D. </em>Tím později zajistíme přesnou detekci kolizí s překážkami. A přidejme mu také komponentu<em> RigidBody2D </em>pro emulaci gravitace. Změníme parametry <em>Mass </em>a<em> Drag</em> na 0.1 a 1 aby se pohyb více podobal Flappy Birdovi.</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/rigidbody.png" alt="rigidbody.png" data-themekey="#" style="max-width:690px;" /><br></p><p>A pomocí šipek pro pohyb na ose posuneme objekt ve scéně doleva.</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/dileva.png" alt="dileva.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Dále přidáme hlavní komponentu, <em>Flow Machine</em>, s logikou pro ovládání herního charakteru.</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/flowmachine.png" alt="flowmachine.png" data-themekey="#" style="margin:5px;width:200px;height:113px;" /><br></p><p>A změníme <em>Source</em> na <em>Embed</em>. Pojmenujeme jako <em>Alien</em> a přidáme popis.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/sourceTOembed.png" alt="sourceTOembed.png" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Po kliknutí na na tlačítko <em>Edit graph</em> se zobrazí grafické rozhraní, ve kterém se chováme podobně jako při reálném programování. Graf drží metody <em>Start </em>a <em>Update</em>.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/startaupdate.png" alt="startaupdate.png" data-themekey="#" style="max-width:690px;" /> </p><p>Nové funkce se přidávají přes výstupní šipku nebo kliknutí do prázdna. Tažením výstupní šipky se načte dialog pro vyhledání existujících metod. Najdeme tedy metodu pro vstup z klávesnice (<em>Input.GetKeyDown</em>), abychom mohli ovládat herní charakter.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/input-key-down.png" alt="input-key-down.png" data-themekey="#" style="margin:5px;width:400px;height:159px;" /> <br></p><p>Létat budeme např. pomocí klávesy Space. Jako parametr <em>key</em> tedy zvolíme <em>Space</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/space.png" alt="space.png" data-themekey="#" style="margin:5px;width:200px;height:128px;" /> <br> </p><p>Pokračujeme přes <em>Control -> Branch</em> (ekvivalent podmínky if).</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/control-branch.png" alt="control-branch.png" data-themekey="#" style="margin:5px;width:400px;height:190px;" /><br></p><p>Dále potřebujeme získat referenci na <em>RigidBody2D </em>komponentu:<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/rigidbody2D.png" alt="rigidbody2D.png" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Vybereme <em>RigidBody2D</em> jako parametr <em>type</em>.</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/type.png" alt="type.png" data-themekey="#" style="margin:5px;width:400px;height:147px;" /><br></p><p>A přidáme kinetický impuls přes funkci <em>RigidBody2D.AddForce</em>, který bude emulovat pohyb Flappy Birda.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/addforce.png" alt="addforce.png" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Chceme, aby Alien "​poskakoval" nahoru, takže změníme souřadnici <em>y</em> vektoru <em>force</em> na 1 a <em>mode</em> přepneme na <em>Impulse</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/impulse.png" alt="impulse.png" data-themekey="#" style="margin:5px;width:400px;height:144px;" /><br></p><p>Celá logika pak vypadá takto:<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/cela%20logika.png" alt="cela logika.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Když teď spustíme hru, můžeme aliena ovládat mezerníkem.</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/mezernikem.gif" alt="mezernikem.gif" data-themekey="#" style="max-width:690px;" /><br></p><p> </p><h1>Překážky</h1><p>Stejně jako pro Aliena vytvoříme nový <em>Sprite </em>přes menu <em>2D object -> Sprite </em>a pojmenujeme ho <em>Obstacle</em>. Ve <em>Sprite Renderer </em>nastavíme sprite <em>elementMetal055 </em>(také dostupný v mém repozitáři níže).</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/elementmetal55.png" alt="elementmetal55.png" data-themekey="#" style="max-width:690px;" /><br></p><p>A přidáme <em>Box Collider 2D</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/boxcollider2D.png" alt="boxcollider2D.png" data-themekey="#" style="margin:5px;width:400px;" /> <br> </p><p>Pomocí <em>Rect </em>nástroje pak změníme rozměr překážky, aby víc odpovídal předloze ve Flappy Bird. Překážku posuneme mimo viditelnou plochu.</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/prekazkamimoplochu.png" alt="prekazkamimoplochu.png" data-themekey="#" style="margin:5px;width:200px;" /><br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/prekazkamimoplochu2.png" alt="prekazkamimoplochu2.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Teď vytvoříme prázdný "​rodičovský" objekt, který pojmenujeme <em>ObstacleHolder</em> a asociujeme s ním předešlé 2 <em>Obstacle</em> objekty, a to jejich označením a přetažením nad <em>ObstacleHolder</em>.</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/obstacleholder.png" alt="obstacleholder.png" data-themekey="#" style="margin:5px;width:200px;height:96px;" /><br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/obstacleholder2.png" alt="obstacleholder2.png" data-themekey="#" style="margin:5px;width:400px;" /> <br> </p><p>Musíme také vytvořit tzv. <em>prefab </em>z objektu <em>ObstacleHolder</em>. Stačí vzít <em>ObstacleHolder</em> a přetáhnout do okna <em>Assets</em>.</p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/obstacletoassets.png" alt="obstacletoassets.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Tak budeme schopni tvořit instance stejného objektu ze skriptu generátoru, který bude na objekt držet referenci. Původní <em>ObstacleHolder </em>objekt můžeme ze scény smazat, budeme používat už jenom jeho <em>prefab</em>.</p><h1>Generátor překážek</h1><p>Vytvořme prázdný objekt (<em>Create Empty</em>), který bude sloužit jako generátor překážek. Pojmenujme ho <em>Generator</em>. Přidáme mu novou komponentu <em>Flow Machine </em>a stejným způsobem jako u Aliena a otevřeme editor grafu.<br></p><p>V levém podokně editoru grafu vytvoříme novou proměnnou typu <em>GameObject</em>, která bude držet referenci na prefab s objektem <em>ObstacleHolder</em>. Ten přetáhneme do parametru <em>Value</em> z okna <em>Assets</em> (lze vidět na vlevo dole na obrázku zobrazeném níže).</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/gameobject.png" alt="gameobject.png" data-themekey="#" style="margin:5px;width:400px;" /><br></p><p>Přes menu editoru přidáme nový uzel grafu, a totiž <em>Timer</em>. Ten bude zodpovědný za pravidelné generování nových překážek. Timer začne počítat při vytvoření generátoru, proto ho budeme volat z metody <em>Start</em>. Trvání nastavíme na 4 sekundy.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/start.png" alt="start.png" data-themekey="#" style="margin:5px;width:400px;" /><br></p><p>Každou instanci překážky budeme generovat s náhodným posunutím na ose <em>y</em>. Použijeme funkci <em>Random.Range</em>, která bude generovat náhodné číslo od 0.2 do 0.7 (otestoval jsem, že tyto hodnoty jsou nejlepší pro běžná rozlišení obrazovky).</p><p>Hodnotu pak předáme jako parametr do uzlu <em>Vector3</em>, kde ještě upravíme souřadnici x na hodnotu 1.4 (tzn. bude 40 % za "koncem" obrazovky).</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/vector3.png" alt="vector3.png" data-themekey="#" style="margin:5px;width:300px;" /><br></p> ​​ <p>Tento <em>Vector3</em> předáme do funkce <em>ViewportToWorldPoint</em>, která přeloží námi zadané hodnoty na souřadnice na obrazovce. Jako parametr zvolíme hlavní kameru - <em>Main Camera</em>.</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/maincamera.png" alt="maincamera.png" data-themekey="#" style="margin:5px;width:400px;" /></p><p> <br> </p><p>Na takto vypočtené pozici už můžeme vygenerovat překážku. K tomu využijeme funkci <em>Instantiate</em>. Předáme jí dříve vytvořenou proměnnou <em>obstacle</em> s referencí na <em>ObstacleHolder </em>(funkce <em>Get Variable -> Graph -> zvolit obstacle</em>), vypočítanou pozici a nakonec rotaci (<em>get Quaternion identity</em>).</p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/flappy-bird/quaternion.png" alt="quaternion.png" data-themekey="#" style="margin:5px;width:400px;height:382px;" /></p><p>Teď už jen přidáme nové instanci objektu <em>Rigidbody2D</em>, nastavíme ho na kinematický typ (<em>set RigidBody2D.bodyType</em>) a rychlost na ose x nastavíme na -2 (<em>set RigidBody2D.velocity</em>). Tím zajistíme posun překážek doleva.<br></p><p>Nakonec vše napojíme na metodu <em>Destroy</em>, která bude instanci překážky automaticky ničit po 20 sekundách - tedy když bude už dávno mimo dohled. Jako parametr musíme vzít objekt překážky vytvořený několik uzlů zpět ve funkci <em>Instantiate</em>.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/instantiate.png" alt="instantiate.png" data-themekey="#" style="max-width:690px;" /> </p><p>Posledním krokem je napojení proudu zpět na <em>Timer </em>(časovač), aby se celý cyklus spustil znovu.<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/timer.png" alt="timer.png" data-themekey="#" style="max-width:690px;" /> <br> </p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/timer2.gif" alt="timer2.gif" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Pro úplnost můžeme přidat detekci kolize hráče s překážkou. Pokud se tak stane, celá scéna se načte znovu (prakticky se restartuje hra).<br></p><p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/kolize.png" alt="kolize.png" data-themekey="#" style="max-width:690px;" /><br></p><p>Tím máme hotovo!<br><br></p> <img src="/Blog/PublishingImages/Stranky/flappy-bird/hotovo.gif" alt="hotovo.gif" data-themekey="#" style="max-width:690px;" />​ <p>Pokud jste si tento návod užili, můžete zkusit i moje další články na téma herního vývoje zde na portálu. Odkaz na první díl je výše v textu. Celý tento projekt jsem zveřejnil na svém githubu (<a href="https://github.com/janjilecek/flappy_bird_clone_in_unity_bolt/tree/master" style="text-decoration:underline;">odkaz</a>). Na shledanou u dalšího článku!<br></p><p>​<br></p><p> <i>Jan Jileček<br></i></p><p>​<br></p>odborné;#hobby;#vzdělávání;#
Na stopě barevným trendůmhttps://create-it.cz/Blog/Stranky/barva-roku-2021.aspxNa stopě barevným trendům<p>​​​Pantone Colour Institute svou každoroční volbou barvy roku už více než dvacet let udává barevný trend všem designovým odvětvím, včetně módního průmyslu. Informace o zvoleném odstínu je užitečná všem, kte​​ří pracují s barvami, tedy i grafickým designérů. <br></p><p>​A letošní vítěz? Jsou hned dva: žlutá a šedá.<br></p><div><p>Dvojice odstínů byla vyhlášena teprve podruhé od roku 2000, kdy Pantone Colour Institute začal s volbou barvy reprezentující daný rok. První dvojicí byla v roce 2016 světle modrá v kombinaci se světle růžovou. Letošní pár je PANTONE 13-0647 Illuminating – jasná zářivá žlutá symbolizující optimismus a PANTONE 17-5104 Ultimate Gray – neutrální šedá symbolizující stabilitu. Za každou volbou se skrývá symbolika. Letošní ​​spojení dvou barev podle Pantone vyjadřuje sílu a naději. Spojení dvou barev namísto jedné je podle zástupců Institutu daleko silnější, stejně tak jako dva lidé dokážou společně více než každý sám.<br></p><p> <img src="/Blog/PublishingImages/Stranky/barva-roku-2021/vzornik.jpg" alt="vzornik pantone" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Pantone Colour Institute je americká organizace, která se už přes 20 let zabývá predikcí barevných trendů. Historie barevného kó​du Pantone je ale delší. Už v 50. letech minulého století začali bratři Lewinovi provozovat tiskárnu v New Jersey. Její oddělení tisku a tiskařských barev pak v roce 1962 odkoupil jeden z jejich zaměstnanců zabývající se chemií a barevnými pigmenty – Lawrence Herbert. Dal svému podniku jméno Pantone. Už rok poté představil světu designu Pantone Matching System, standardizovaný systém reprodukce barev. Snad každý, kdo se nějakým způsobem zabývá designem, ale firmu zná díky jejím vzorníkům. Podlouhlé kartony s příbuznými odstíny, které jsou označeny unikátním kódem, umožňují vybrat ladící i kontrastní odstíny. A právě z těchto ikonických vzorníků Institut vybere tu, která bude pro nadcházející rok dominantní.</p><p>Znát barvu roku je v současnosti v podstatě nutnost pro profesionály téměř všech odvětvích designu. Volba Institutu má globální dosah: o​​vlivňuje módní průmysl, interiérový design, grafický design stejně jako design uživatelských rozhraní. Módní průmysl je ovlivněn nejen výběrem barvy roku, ale celé barevné palety pro určité období. Proto se najednou v obchodech s módou objeví oblečení v podobných barvách. Barva je ale také jedním z klíčových prvků korporátní identity, dnes téměř jediným zapamatovatelným. Nejde přitom o to, jestli designér jako firemní barvu zvolí žlutou, modrou, červenou, zelenou, oranžovou či fialovou. Důležité je, aby zvolený odstín dané barvy působil současně, moderně. Odstíny barev jsou poplatné své době. A to, co zákazník vnímá jako vyšlé z módy, určuje do značné míry právě Pantone Colour Institute.<br></p><p>Mimochodem, barevnou paletu s barvami roku si můžete zkusit ​​sestavit i sami: <a href="https://connect.pantone.com/#/color-of-the-year?language=en" target="_blank">https://connect.pantone.com/#/color-of-the-year?language=en</a><br></p><div> <a href="https://connect.pantone.com/#/color-of-the-year?language=en" target="_blank"> <img src="/Blog/PublishingImages/Stranky/barva-roku-2021/Screenshot%202021-02-11%20at%2010.30.31.png" data-themekey="#" alt="pantone" style="max-width:690px;" /></a> <p>​​​​ </p></div></div>odborné;#vzdělávání;#
5 žádaných webových frameworků pro rok 2021https://create-it.cz/Blog/Stranky/frameworky.aspx5 žádaných webových frameworků pro rok 2021<p>Na trhu je hodně webových frameworků a volba toho správného může být obtížná. V tomto článku se podíváme na ty nejžádanější backendové i frontendové frameworky, které si momentálně drží nejlepší pozice na trhu a budou proto dobrou volbou i pro rok 2021.<br></p><p><br></p><h1>Express</h1><p>Podle nedávného dotazníku pro nejpopulárnější jazyky na Stack Overflow (<a href="https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages-all-respondents" style="text-decoration:underline;">odkaz na výsledky</a>) se na prvním místě umístil JavaScript. Na backendu nemá JavaScript takové zastoupení, což se ale pomalu mění díky <a href="https://nodejs.org/en/" style="text-decoration:underline;">Node.js runtime</a>. Pro Node existuje rychlý a minimalistický framework Express.</p><p>Express je velmi flexibilní, MVC (Model-View-Controller) framework s podporou pro routing a šablony. Existuje od roku 2010 a za tu dobu dospěl - je stabilní a vysoce výkonný. Má velice přehlednou dokumentaci a je to nástroj, na kterém je postaveno mnoho dalších Node.js knihoven.</p><p>Je <em>unopinionated</em>, tzn. že se nesnaží nutit vývojáře do použití nějakých zažitých postupů, ale nechává čistě na něm, jaké postupy a komponenty budou nejvhodnější.</p><p>Podle Stack Overflow dotazníku se umístil na 5. místě mezi webovými frameworky.<br></p><p><br></p><h1>React</h1><p>Facebook vyvinul React jako jednoduchou javascriptovou knihovnu a vydal ji v roce 2013. React je frontendový framework a má na starosti zobrazovací vrstvu UI. Jeho hlavní výhodou je jeho dynamičnost - překresluje pouze ty prvky, které se změnily. React stojí na tzv. component-based architektuře, a umožňuje vývojářům vytvářet malé, skládatelné a znovupoužitelné komponenty. To je kongruentní s řešením zásadních problémů, umožňuje totiž rozložení velkých problémů na menší podproblémy. Po vyřešení podproblémů vzniká celkové řešení. React podporuje tento styl přemýšlení.</p><p>Vývojáři mají rádi React hlavně kvůli jeho jednoduchosti, čitelnosti a rychlosti psaní. Lze v něm používat HTML tagy přímo v kódu a JSX umožňuje vytvářet HTML šablony, které používají podmíněné​ renderování (rozhodování, kdy se má co zobrazit).</p><p>React používá tzn. one-way data flow. Data tečou jedním směrem z komponenty do komponenty a tyto jsou překresleny na základě nového stavu.</p><p>Oproti Angularu má React větší počet knihoven a podle Stack Overflow dotazníku se umístil na 2. místě.</p><p>Podle Google Trends zůstává ReactJS nejpopulárnějším frameworkem, ale všechny zde recenzované mají víceméně stejnou trajektorii.<br></p> <img src="file:///Users/veronikajandova/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip_image004.jpg" data-themekey="#" alt="" style="width:690px;margin:5px;" /> <img src="/Blog/PublishingImages/Stranky/frameworky/unnamed-3.png" alt="unnamed-3.png" data-themekey="#" style="max-width:690px;" /> <h4 style="text-align:center;">Google Trends za posledních 12 měsíců, celosvětově, kategorie Programování<br></h4><p><br></p><h1>Angular</h1><p>Angular je MVW (Model-View-Whatever) frontendový framework. Používá jazyk TypeScript, který značně zpopularizoval. Za posledních 5 let neprošel tento framework žádnými značnými změnami a je velice stabilní. Mezi jeho přednosti patří snadná správa závislostí, jeho robustnost a široká škála vlastností, jako např. data binding, filtry nebo validace formulářů. Obsahuje mnoho nástrojů, ale to znamená, že začátečníkům zabere delší dobu se s nimi naučit správně pracovat. Angular appka se dělí na moduly a podmoduly, díky čemuž je snadno testovatelná a manažovatelná.</p><p>Velkou výhodou Angularu je tzv. two-way binding - jakékoliv datové změny v modelu se okamžitě propagují do odpovídajících <em>view</em>, a jakékoliv změny ve <em>view </em>jsou ihned reflektovány zpět do modelu. Tedy pokud se změní data, tak se změní i UI, a naopak.</p><p>Angular používá stejně jako React TypeScript. V dotazníku se umístil na 3. místě.<br></p><p><br></p><h1>Vue</h1><p>Vue je MVVM (Model-View-View-Model) framework vyvinutý Evanem You v roce 2014. Úspěšně kombinuje nejlepší části Angularu a Reactu. Vue podporuje mnoho problémů, kterým může vývojář čelit - od routování, přes management stavu aplikace až po unit testing. Je velice výkonný a v některých ohledech předčí i další javascriptové frameworky. I naprostý začátečník, který umí pouze HTML se dokáže do Vue dostat - tak snadné je s ním začít. Technologičtí giganti jako Facebook, Alibaba, Xiaomi nebo Grammarly ho používají.</p><p>Mezi jeho dovednosti patří defaultní ochrana proti <a href="https://cs.wikipedia.org/wiki/Cross-site_scripting" target="_blank" style="text-decoration:underline;">XSS</a>, rychlé přepínání mezi URL s možností přechodových efektů a možnost psaní stylů přímo v SCSS bez nutnosti se starat o kompilaci. Má obrovskou komunitu, takže je velice snadné najít řešení naprosté​ většiny problémů.</p><p>Nejžádanější je v Číně a v dotazníku SO se umístil na 7. místě.<br><br></p><h1>Django</h1><p>Jako poslední se podíváme na backendový framework Django, tentokrát pro jazyk Python.</p><p>Vytvořili ho dva mladí inženýři, Adrian Holovaty a Simon Willison v roce 2005. Podporuje MTV (Model-Template-View) a RAD (Rapid Application Development). Je vytvořen pro pokročilejší webové vývojáře, kteří chtějí stavět rozsáhlejší, rychlé a bezpečné projekty. Jeho hlavní předností je vysoká škálovatelnost a tzv. “batteries included", což znamená, že už při prvním spuštění projektu máte dopředu nastavené všechny důležité funkcionality. Má podporu pro téměř vše (např. ORM, Cachování, zabezpečení..) co je potřeba pro RAD. Django bezchybně zapadá do ekosystému jazyka Python, který je jedním z největších na trhu. Podle dotazníku SO je jedním z nejmilovanějších webových frameworků a na umístil se na 10. pozici nejžádanějších.</p><p>Při výběru frameworku nejvhodnějšího pro vás berte v potaz, zda hodláte pracovat pro větší firmu nebo jako freelancer, a zda chcete dělat spíše na backendu nebo frontendu. Také neváhejte kouknout na výsledky dotazníku ze Stack Overflow uvedeného na začátku, určitě z něj získáte další cenné vhledy pro volbu ideální životní cesty webového vývojáře.<br></p><p> <i>Jan Jileček</i><br></p><p>​ </p><p> <br> </p>odborné;#vzdělávání;#
Tajný život dat aneb webová analytika jako klíč k bludišti online světahttps://create-it.cz/Blog/Stranky/tajny-zivot-dat.aspxTajný život dat aneb webová analytika jako klíč k bludišti online světa<p> <em>Online svět může na uživatele působit jako chaotické mraveniště. Může se v něm velmi rychle ztratit – pokud uživateli cestu nenavrhneme jasně a intuitivně, podle přesných plánů. Tím, jak by takové plány měly vypadat a jak z chaosu vytvořit místo příjemné a funkční, se zabývají kromě dalších disciplín i webová analytika a SEO.​</em><br></p><p>Tuto situaci známe všichni. Hledáme na firemním webu nebo v aplikaci konkrétní informaci či produkt. Ač zkoušíme vše možné, nemůžeme ji najít. Reagujeme všichni podobně: jsme frustrovaní, stránku rychle zavřeme a pokud je to jen trochu možné, v budoucnu se jí chceme vyhnout. Frustrace z webu se mění v nespokojenost s celou organizací. Zákazníci svou špatnou zkušenost často šíří dál mezi své okolí a negativní image firmy je na světě. Jednou z cest, jak se podobným momentům vyhnout, je provedení webové analýzy, která se soustředí na odhalení slabých míst webu nebo aplikace. Taková analýza by měla být automaticky součástí větších rozpočtů určených na vývoj jakéhokoli online prostředí, rozhodně se však vyplatí i v případě menších projektů. </p><p>Mnoho firem v současné době přistupuje k analytickým nástrojům webové analytiky jako k nástrojům reportovacím, kdy se zpětně vyhodnotí parametry, ideálně s rostoucí tendencí, které se odprezentují na meetingu. Webová analytika ale nabízí mnohem více. Kouzlo spočívá v interpretaci získaných dat a statistik, testování variant a v následném doporučení, jak web a obsah optimalizovat. Teprve taková analytika je pak pro byznys přínosná. </p><p>Další potenciál webové analytiky se ukrývá v propojení dat získaných z online systémů s interními daty, které firmy mají k dispozici ve svých CRM databázích (business analýza). Jejich propojení umožní získat komplexní pohled na zákazníka, jeho chování a vztahy s firmou, a mít tak informace ke všem jeho online i offline aktivitám. Díky tomu odkryjeme realistický obraz chování a potřeb každého našeho klienta. Následující tabulka uvádí hlavní rozdíly mezi webovou a business analýzou.​<br></p><p> <img src="/Blog/PublishingImages/Stranky/tajny-zivot-dat/analytics.png" alt="analytics.png" data-themekey="#" style="max-width:690px;" /> <br> <br> </p><h2>​​Když je zákazník jeno​m online<br></h2><p>Nouzový stav zákazníky doslova nahnal do online světa, ale už před tím řada z nás jednoduše preferovala internetové služby před těmi „kamennými“. Velmi patrné to je například v oblasti klientských online zón. Je pohodlnější vyřešit požadavek z telefonu v mobilní aplikaci, než zajít na pobočku. Navíc v otevírací době, která se často kryje s naší dobou pracovní. </p><p>Online prostředí je v mnoha případech jediný kontaktní bod zákazníka s organizací. O to důležitější je zákazníkova zpětná vazba a schopnost jeho pohyb a reakce v online světě rozklíčovat. V první fázi je třeba mít správně nastavenou webovou, případně mobilní analytiku. Získáváme opravdu všechna data, která potřebujeme? Na to nám odpoví audit dat – ⁠jiné údaje jsou důležité pro marketing, jiné pro produktové manažery a jiné pro oddělení Risku. </p><p>V druhé fázi pak data sbíráme. Pokud máme k dispozici CRM databázi, hledáme vodítko, propojení mezi ní a webovou částí. Díky datům vidíme, jaké jsou kroky konkrétního uživatele, jak se chová, kterým částem webu věnuje pozornost a kde se naopak ztrácí. </p><p>Pomocí dat a vizualizačních nástrojů můžeme upravit podobu analytických grafů do uživatelsky přívětivější formy. Výsledkem jsou pak analytické dashboardy, které mohou mít jinou podobu pro manažera a jinou pro obchodního zástupce. Podstatné je, že oba dva s nimi mohou pracovat opravdu na denní bázi, jako online nástroj jsou k dispozici neustále v aktuální podobě. Oproti klasickému vyhodnocování je to velká časová (a tím pádem i finanční) úspora.<br></p><p>Další výhodou analytických dashboardů je také vizualizace dat na jednom místě. To je dobrý odrazový můstek pro další podstatnou fázi, interpretaci dat. Při ní lze vyjít z klasické metody A/B testování, kdy vytvoříme hypotézy a ty potom na základě dat ověřujeme. Příklad? Náš klient, významný český virtuální operátor, uvažoval, zda má na svých webových stránkách během marketingové kampaně vést uživatele rovnou na formulář pro objednání produktu, nebo mu o něm nejdříve dodat podrobnější informace. Sledovali jsme tedy, která varianta povede k většímu prodeji tohoto produktu.<br></p><p>Třetí a byznysově nejzajímavější částí webové analytiky je samotná interpretace dat. Důležité je umět z dat vyčíst takové informace, které byznysu pomohou. Na trhu existují různé reklamní systémy, stejně jako je k dispozici vyhodnocování např. ve Facebook Business Manageru nebo Google Ads. Každý nástroj má ale jinou metodiku pro přičítání konverzí a jiné tzv. atribuční okno. Obecně nastavené metriky poskytují jednoduše řečeno příliš obecné závěry. Proto je vždy efektivnější nechat si analytiku ušít na míru svým potřebám, a využít i dalších možností, jako je SEO. To je soubor metod, jejichž cílem je přivést na web co největší množství relevantních návštěvníků z organického vyhledávání.<br></p><p> <img src="/Blog/PublishingImages/Stranky/tajny-zivot-dat/seo.png" alt="seo.png" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Přístup k webové analytice lze také obrátit: z pomocníka vytvořit nástroj marketingu. Tento trend sleduje např. growth hacking, druh marketingu typický hlavně pro startupy v západním světě. Cílem je v relativně krátkém čase získat co největší podíl na trhu a zasáhnout tzv. early adopters, kteří vytvoří první zákaznickou základnu a následně přivedou další zákazníky. Tato metoda je postavena na inovativní marketingové komunikaci, testování a rychlém přizpůsobování produktu zákazníkům. Základem je využívání dat z analytiky a testování hypotéz prostřednictvím statisíců malých A/B testů, které vedou k neustálému vylepšování designu připravovaného produktu. Jejich marketing je postavený výhradně na datech o tom, co na budoucí zákazníky produktu “nejvíce fungovalo." Typickými firmami, které growth hacking využívají, jsou miliardové firmy jako Facebook, Airbnb, Dropbox nebo např. Spotify.​<br></p><h2> Přežít bez ​​analytiky? Ano, ale…</h2><p>Podnikat se dá samozřejmě i bez analytiky. Ale optikou malých firem – pokud děláme jakýkoli marketing, tak potřebujeme vědět, jak funguje. Pro velké firmy to je pak absolutní nutnost, jinak se v online světě pohybujeme se zavázanýma očima. Díky porozumění chování klientů můžeme třeba vidět, že má skupina našich zákazníků některé společné znaky. Pak jim můžeme v rámci personifikovaného marketingu nabídnou zajímavý, a hlavně relevantní produkt. To vše vede k vytváření byznys modelů šitým na míru cílovým skupinám zákazníků.​<br></p><p>Když bychom měli charakterizovat dnešní online svět, je to prostředí, které stojí na datech, testování a ověřování hypotéz. To je jeden z principů fungování online světa. Není náhodou, že se daty intenzivně zabývají největší globální firmy. Ale užitek z umění interpretovat data mají i menší a střední firmy.</p><p> <i>Aneta Hejnová, Mobile and Web Data Analyst<br></i><br></p><p> <br></p><p> <br> </p><p> <br> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> <br> </p>odborné;#vzdělávání;#
SEO pro začátečníky: co to je a jak fungujehttps://create-it.cz/Blog/Stranky/SEO-pro-zacatecniky.aspxSEO pro začátečníky: co to je a jak funguje<p>​​Optimalizace pro vyhledávače zní jako strašidelné technické zaklínadlo, přitom nejde o žádnou raketovou vědu. Pokud pochopíte, jak internetové vyhledávače přemýšlí, máte z poloviny vyhráno. V oboru si navíc přijdou na své jak kreativci, tak analytici.<br></p><h2>Co je to ​​SEO?</h2><p>Anglická zkratka v sobě skrývá slova search engine optimization. Jedná se o soubor různých metod, které mají za cíl přivést na vaše webové stránky co největší množství relevantních návštěvníků z organického vyhledávání. Lidsky řečeno, snažíte se svému webu zajistit co nejlepší pozici v neplaceném vyhledávání.</p><p>Podívejte se např. na výsledky vyhledávání pro dotaz „samsung galaxy s20“. Nejprve nám Google nabízí čtyři placené odkazy (zdravím kolegy PPCčkaře), teprve pod nimi vidíme organické výsledky.  A právě ty jsou náš cíl.</p><p> <img src="/Blog/PublishingImages/Stranky/SEO-pro-zacatecniky/serp.png" alt="serp" data-themekey="#" style="max-width:690px;height:444px;" /> <br> </p><p style="text-align:right;"> <em>Stránka s výsledky vyhledávání, zkráceně SERP (search engine results page)</em></p><h2>Proč je SEO ​​důležité</h2><p>Vyhledávače na první stránku výsledků umisťují weby, které pro daný vyhledávací dotaz považují za vhodný a důvěryhodný zdroj informací. SEO nám takovou pozici pomáhá vybudovat. „Vybudovat“ píšu záměrně – stojí to čas a úsilí. Jde o dlouhodobou promyšlenou strategii, jejíž výsledky uvidíte nejdříve za několik měsíců. Jako spousta dobrých a kvalitních věcí to chce zkrátka trpělivost.</p><h2>5 důvodů, proč SEO věnovat pozorn​​ost</h2><p> <b>1. Organické vyhledávání je často největším zdrojem webové návštěvnosti</b></p><p>Většina návštěvníků webu přichází právě z výsledků vyhledávání. Tuto návštěvnost můžete dočasně podpořit PPC kampaní, obvykle ji ale nejde platit věčně. Budujte postupně svou organickou návštěvnost, abyste nebyli závislí na svých reklamách.</p><p> <b>2. Své značce budujete důvěryhodnost a autoritu</b></p><p>Umělá inteligence vyhledávačů posuzuje např. odkazový profil stránky (počet a kvalitu zpětných odkazů vašeho webu) nebo optimalizaci obsahu, dokáže si také ověřit správnost uvedených informací. Pokud budete na svých stránkách tvrdit, že Microsoft založil Steve Jobs, můžete urputně optimalizovat klíčová slova dnem i nocí, ale na první místa vyhledávání se zkrátka nedostanete.</p><p> <b>3. Dobré SEO znamená lepší uživatelskou zkušenost</b></p><p>Vyhledávače posuzují nejen obsah, ale i technickou stránku webu. Poznají, zda se na mobilech pomalu načítá, kolik času na ní uživatelé tráví anebo zda z ní ihned odcházejí. Cílem je nabídnout uživatelům stránky, na kterých se snadno zorientují a najdou informace, které hledají.</p><p> <b>4. Vycházíte vstříc zájmům svých zákazníků</b></p><p>SEO pracuje s pojmem search intent (záměr vyhledávání). Vyhledávač se snaží pochopit, co uživatel hledá, a nabídnout mu tak odpovídající výsledky. Lidem hledajícím dotaz „jak uvázat kravatu“ nenabídne e-shop, ale videonávod. Při zadání „pizza žižkov“ nebudou mezi výsledky recepty, ale mapa s žižkovskými provozovnami nabízejícími pizzu a s recenzemi návštěvníků. Přizpůsobte proto svůj obsah záměru svých zákazníků.</p><p> <b>5. SEO můžete měřit</b></p><p>Oproti PPC kampaním nemáte sice k dispozici jednoduché metriky jako třeba ROI, se správně nastavenými cíli ale můžete sledovat takřka cokoliv. Důležité je umět si spojit všechny střípky dohromady a zjistit, jak spolu souvisí. Mezi nejčastěji sledované metriky patří vývoj organické návštěvnosti v čase, bounce rate, pozice webu v organickém vyhledávání nebo počet indexovaných stránek.</p><p> <span style="color:#333333;font-family:farnham-web-medium, open-sans, sans-serif;font-size:1.46em;">Jak funguje vyhle​​​dávání?</span><br></p><p>Vyhledávač funguje jako knihovna. Sbírá informace, tvoří si z nich katalog a na požádání nabídne relevantní zdroje k danému tématu. Pravidelně vysílá své roboty (též boty nebo crawlery), aby stránky procházely a shromáždily informace o jejich obsahu. Informace o stránkách si ukládá (indexuje) a postupně si tak buduje svou znalostní bázi (index). Když zadáte do vyhledávání svůj dotaz, vyhledávač se ve svém indexu snaží najít pomocí algoritmu co nejrelevantnější odpověď.<br></p><p> <img src="/Blog/PublishingImages/Stranky/SEO-pro-zacatecniky/crawl%20bez%20textu.PNG" alt="crawl bez textu" data-themekey="#" style="max-width:690px;" /> <br> </p><p>Relevanci stránek vyhledávače posuzují na základě mnoha faktorů, jejichž seznam a popis vydá na samostatný článek. SEO faktory rozdělujeme na tzv. on-page a off-page.</p><p>Mezi on-page faktory patří vše, co jako autor webu můžete přímo ovlivnit. Patří sem veškerý obsah, jeho kvalita, zpracování nebo použití klíčových slov a nejčastěji vyhledávaných frází. Důležitá je také rychlost webu, struktura url adres a navigace, přizpůsobení webu pro mobilní vyhledávání a jeho přístupnost pro roboty.</p><p>Off-page faktory naopak zahrnují prvky, které nemáte plně pod kontrolou a ovlivňují je návštěvníci a další stránky. Typicky se jedná o počet a kvalitu zpětných odkazů nebo sdílení obsahu uživateli na sociálních sítích.</p><h2>Pro které weby má SEO s​mysl?</h2><p>Pro všechny, bez debat. Každý web nicméně potřebuje jiný přístup. E-shopy nebo srovnávače zboží nesmí opomíjet technickou stránku SEO, pravidelně kontrolovat indexaci a hlídat si např. správné fungování filtrace. Využijí např. možnost propisovat do výsledků vyhledávání cenu produktu, jeho dostupnost a hodnocení. Jinak se bude chovat zpravodajský portál, který je závislý na přístupnosti a rychlosti webu na mobilních zařízeních, a jinak zase blog o vaření, pro který je klíčový především líbivý obsah.</p><p>Osobně mě na SEO nejvíc baví jeho oborový přesah. Pro práci s obsahem čerpám ze svých zkušeností z copywritingu, v technickém SEO mi pomáhá znalost HTML a alespoň základní povědomí o Javascriptu. Díky SEO si postupně rozšiřuji znalosti o základy UX, psychologie, programování nebo business analýzy. V příštím článku vám představím 10 nejdůležitějších SEO faktorů a moc ráda se s vámi uvidím na některém z dalších školení.</p><p>​ <i>Kateřina Martínková</i><br></p><p> <i>úvodní foto: <a href="https://unsplash.com/%40merakist" target="_blank">Merakist​</a>, Unsplash<br></i></p><p> <br> </p>odborné;#vzdělávání;#
Vytvoř noční hororovou atmosféru v Unityhttps://create-it.cz/Blog/Stranky/Unity3Dzaver.aspxVytvoř noční hororovou atmosféru v Unity<p>​​​​​V poslední části tohoto Unity tutoriálu vylepšíme vzhled původní scény. Přidáme lepší modely, pohrajeme si s celkovou atmosférou a vytuníme “game feel".<br></p><p>​​V podstatě vytvoříme toto:<br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D6/horor_unity.gif" data-themekey="#" alt="unity horror" style="max-width:600px;" /> <br> </p><p>...z tohoto:<br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D6/original.png" data-themekey="#" alt="basic unity style" style="max-width:600px;" /> <br> </p><p>Nejprve změníme barevný prostor na Lineární přes <em>Edit | Project settings</em>. Barvy budou vypadat přirozeněji.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/barvy.png" data-themekey="#" alt="barevny prostor v unity" style="max-width:500px;" />  </p><p></p><p>Objekt <em>Plane </em>odstraníme a nahradíme ho novým terénem. Ten přidáme jako nový 3D objekt.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/3DSettings.png" data-themekey="#" alt="unity 3D settings" style="max-width:500px;" /> <br></p><h2>Tvorba terénu</h2><p>Vybereme objekt <em>Terrain</em> a přepneme se na kartu <em>Paint terrain</em>. Zvolíme možnost <em>Paint texture</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/painttexture.png" data-themekey="#" alt="unity paint texture" style="max-width:500px;" />  </p><p> ​ ​<span style="text-align:justify;">Vytvoříme novou vrstvu:</span> </p><p style="text-align:center;"> ​<img src="/Blog/PublishingImages/Stranky/unity3D6/layer.png" data-themekey="#" alt="unity new layer" style="max-width:400px;" /><br></p><p>Pro textury hlíny si stáhneme a importujeme balík <em>Outdoor Ground Textures</em> z <em>Asset store</em>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/importbaliku.png" data-themekey="#" alt="unity import textury" style="max-width:500px;" />  </p><p></p><p>Poté vybereme nově staženou texturu přes <em>Create layer</em> menu.<br></p><div style="text-align:center;"> ​ <img src="/Blog/PublishingImages/Stranky/unity3D6/7vybertextury.png" data-themekey="#" alt="create layer menu" style="max-width:500px;" /> ​<br><br></div><p>Do nové vrstvy také importujeme tzv. <em>normal map</em> - ta určuje, jak se bude na texturovaném povrchu zalamovat světlo, aby tvořilo iluzi plastického objektu (pro představu např. povrch cihlové zdi, co je 2D, ale zdá se 3D díky normálové mapě).<br></p><div style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/normalmap.png" data-themekey="#" alt="terrain layer unity" style="max-width:500px;" />​ </div><div style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/7vybertextury.png" data-themekey="#" alt="unity select texture" style="max-width:600px;" /> <br> </div><p>Po přidání textury hlíny scéna vypadá následovně:<br></p> <img src="/Blog/PublishingImages/Stranky/unity3D6/10shlinou.png" data-themekey="#" alt="unity scrn" style="max-width:600px;" /> ​ <h2>Nové mod​​ely</h2><p>Doposud jsme používali základní modely ze Synty Polygon balíku. Ty teď nahradíme. Já použiju placené modely, co mám k dispozici, vy můžete použít jakékoliv modely máte. Vybírám další ze série Polygon modelů, tentokrát Polygon adventure.<br></p>​ <p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/11polygonadventure.png" data-themekey="#" alt="import unity package" style="max-width:500px;" /><br><br></p><p>Nahrazuji většinu modelů ve scéně - místo auta přidám studnu, dům nahradím chatkou a pro model nepřátel importuji <a href="https://assetstore.unity.com/packages/3d/characters/humanoids/zombie-30232">zombie model</a> z Unity Asset Store (jak použít jeho animace si můžete přečíst v <a href="/Blog/Stranky/unity3D.aspx">prvním dílu</a> tohoto seriálu).</p><h2>Atmos​féra</h2><p>Projekt můžeme <a href="https://learn.unity.com/tutorial/upgrading-an-existing-project-to-use-hdrp-2019-2">snadno převést</a> do HDRP (High definition pipeline) pro rozsáhlejší možnosti nastavení grafiky. Po převodu do HDRP můžeme importovat tzv. <em>volume</em>s. Ty jsou zodpovědné za lokální i globální nastavení post-processingu (aplikování filtrů na grafický výstup), osvětlení a atmosféry.<br></p><p>Importujeme novou <em>Sky and Fog volume</em>.<br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D6/fogvolume.png" data-themekey="#" alt="fog unity" style="max-width:400px;" /> <br> </p><p>Ta ihned změní vzhled scény k lepšímu. Po chvíli hraní si s nastavením (dokumentace <a href="https://docs.unity3d.com/Packages/com.unity.render-pipelines.high-definition%407.1/manual/Override-Physically-Based-Sky.html">Fyzikálně založené oblohy</a>) dociluji tohoto vzhledu:<br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D6/svetlo.png" data-themekey="#" alt="light in unity" style="max-width:600px;" /> <br> </p><p>Objektu osvětlení <em>Directional Light </em>nastavíme intenzitu na 0.07 a scéně tak dáme noční nádech.<br></p> <img src="/Blog/PublishingImages/Stranky/unity3D6/nocninadech.png" data-themekey="#" alt="nocni nadech" style="max-width:600px;" /> <p>Nakonec přidáme mlhu a stromy.​</p><h2>Další úpravy te​​rénu, trávy a stromů<br></h2><p>Z <em>Asset store</em> si stáhneme <em>Grass and Flowers Pack 1:</em></p><p style="text-align:center;"> <em> <img src="/Blog/PublishingImages/Stranky/unity3D6/flowerspack.png" data-themekey="#" alt="unity flowerspack" style="max-width:500px;" /> </em></p> <em></em> <p>Ačkoliv nám HDRP propůjčuje rozšířenou funkcionalitu, v některých ohledech stále zaostává - proto nemůžeme použít klasickou metodu “kreslení" trávy na terén jako detail shader, ale musíme kreslit trávu jako stromy. K tomu využijeme modely trávy z balíku volně dostupného na Asset store jménem <i>Book of the Dead</i> (jedná se o demo scénu poskytovanou přímo Unity).</p><div style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/bookofdead.png" data-themekey="#" alt="book of dead" style="max-width:500px;" /> </div><p>Balík přidáme do projektu a importujeme pouze složku <i></i><em>Art.</em></p><div style="text-align:center;"> ​<img src="/Blog/PublishingImages/Stranky/unity3D6/art.png" data-themekey="#" alt="unity art" style="max-width:500px;" /></div><p> <br></p><p>V objektu <i>Terrain</i> se přepneme na kartu <i>Paint trees</i>. Vybrat objekt stromu lze přes <i>Edit trees</i>a <i>Select prefab</i>.<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/prefab.png" data-themekey="#" alt="unity select prefab" style="max-width:500px;" />  </p><p></p> <i></i>Vybírám <i></i><em>GrassGreen</em> z importované složky <i></i><em>Art:</em><div><i>​<br></i><em></em> <div><div style="text-align:center;"> <i> <img src="/Blog/PublishingImages/Stranky/unity3D6/grassgreen.png" data-themekey="#" alt="unity grass green" style="max-width:500px;" /> <br></i> </div><p></p><div style="text-align:left;"> A můž​eme malovat na terén! </div><p></p> <img src="/Blog/PublishingImages/Stranky/unity3D6/malovatnateren.gif" data-themekey="#" alt="unity terrain painting" style="max-width:600px;" /> <p> Stejnou metodu použijeme pro její původní účel, a totiž malování stromů na terén. Vybereme model stromu a můžeme malovat.<i></i></p><div style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/muzememalovat.png" data-themekey="#" alt="unity paint" style="max-width:600px;" /> </div><div style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D6/muzememalovat2.png" data-themekey="#" alt="paint in unity" style="max-width:600px;" /> <br> </div><p> Teď už jen stačí spustit hru a máme noční hororovu scénu s hordou zombie!<br></p> <img src="/Blog/PublishingImages/Stranky/unity3D6/spustit.png" data-themekey="#" alt="unity play" style="max-width:600px;" /> <p> Nyní je vše hotovo, hra je zakončena a tím i tento seriál Unity tutoriálů. Tento díl nemohu sdílet na githubu, jelikož obsahuje placené modely, které podléhají licenci. Pro scénu použijte modely z Unity asset store nebo Sketchfabu, jsou zde dostupné tisíce bezplatných modelů s otevřenou licencí. A to je vše! Doufám, že jste si mé návody užili a něco nového se přiučili.<br></p><p> <i>Jan Jileček</i></p><p> <em></em></p></div></div>odborné;#hobby;#vzdělávání;#
Testing Clever Academyhttps://create-it.cz/Blog/Stranky/testing-akademie-2020.aspxTesting Clever Academy<p style="display:none;">​​​​​​​​​​​​Vstup s námi do světa IT a pojď se naučit testovat software!​ Naši průvodci tě provedou cestami a stezkami až na tvou pomyslnou K2 – získáš svou příležitost v jiném oboru, ve kterém zúročíš své analytické a kritické myšlení.</p> ​<div class="ms-rtestate-read ms-rte-wpbox" unselectable="on"><div class="ms-rtestate-notify ms-rtestate-read 7011e392-79f3-4920-88bc-448b0e5808ac" id="div_7011e392-79f3-4920-88bc-448b0e5808ac" unselectable="on"></div><div id="vid_7011e392-79f3-4920-88bc-448b0e5808ac" unselectable="on" style="display:none;"></div></div><p>​​<br><br></p>vzdělávání;#
Unity 3D: obrana proti hordám nepřátel a částicové efektyhttps://create-it.cz/Blog/Stranky/unity3D5.aspxUnity 3D: obrana proti hordám nepřátel a částicové efekty<p>V této části Unity tutoriálu si ukážeme, jak se lze bránit proti hordám nepřátel pomocí telekineze, kterou jsme si naprogramovali <a href="/Blog/Stranky/telekineze.aspx">minule</a>, a vyzkoušíme si částicové efekty.<br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D5/unity_obrana.gif" alt="unity obrana" data-themekey="#" /> <br> </p><p>Nejprve musíme přidat kolizní box na nepřátelský model, abychom mohli detekovat kolize s hozenou kostkou. Na prefab "Enemy" tedy přidáme Capsule Collider a nastavíme ho jako Trigger (<em>Is Trigger</em>). To zajistí, že hráč ani hozený projektil nebude používat fyziku při kolizi. Kolizní box tak bude sloužit čistě pro detekci nárazu. A jelikož ho vkládáme do tzv. prefabu, aplikuje se následně na všechny vygenerované nepřátele. <br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D5/2capsule.png" alt="capsule unity" data-themekey="#" style="width:400px;" /><br></p><p>Pro efekt "smrti" nepřítele vytvoříme nový <em>Particle Effect</em>. Parametry jsem nastavil přibližně tak, aby efekt evokoval výbuch krve v rámci low-poly grafiky. Na obrázku níže je přesné nastavení, particle efekty často vyžadují chvilku nastavování, než se přiblížíme ke kýženému výsledku. V tomto efektu jde hlavně o <em>Start Color</em> (nastavení barvy), <em>Emission </em>(ovládání generátoru), <em>Shape </em>(tvar vysílání částic) a <em>Collision </em>(nastavení fyzikální kolize s okolím). <br></p><p> <img src="/Blog/PublishingImages/Stranky/unity3D5/kolize.gif" alt="kolize" data-themekey="#" /><br></p><p>A nastavení generátoru:<br></p><p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D5/4deathboom.png" alt="deathboom" data-themekey="#" style="margin:5px;width:400px;height:643px;" /> <br></p><p>Po jeho vytvoření ho opět přetáhneme do <em>Assets</em>, stejně jako předchozí objekty, aby se z něj také stal <em>prefab</em>. Bude ho pak možné hromadně generovat a dále používat bez nutnosti hledat objekt ve scéně.<br></p><p>Ve skriptu Enemy.cs, který jsme tvořili v předminulém dílu, vytvoříme novou proměnnou <em>deathSplash</em>, která bude držet referenci na <em>prefab</em> s výbuchem krve. Přidáme metodu <em>OnTriggerEnter</em>, která se používá pro detekci začátku kolize s jiným objektem. V moment kolize detekujeme, zda objekt, který s nepřítelem koliduje, má dostatečnou rychlost (tzn. zda hráč hodil krabici s dostatečnou silou, aby mohl "zranit" nepřítele). Pokud tomu tak je, zničíme objekt nepřítele a na jeho pozici vytvoříme instanci objektu <em>deathSplash</em>.</p><p> <img src="/Blog/PublishingImages/Stranky/unity3D5/5deathsplash.png" alt="5deathsplash.png" data-themekey="#" style="margin:5px;max-width:640px;" /></p>Teď už jen přiřadíme prefab s efektem výbuchu do proměnné deathSplash, spustíme, a je hotovo! <div> <br> <p style="text-align:center;"> <img src="/Blog/PublishingImages/Stranky/unity3D5/6enemy.png" alt="6enemy.png" data-themekey="#" style="width:400px;" /><br></p><p> </p><p>Doufám, že jste si ničení nepřátel užili. Pro kompletní kód této části tutoriálu navštivte můj <a href="https://github.com/janjilecek/unity_tutorial/blob/d5e91e566c2ca574d6e2a90226fe4a0b16669516/Assets/Scripts/Enemy.cs" target="_blank">github</a>. V dalším díle vylepšíme grafiku hry.<br></p><p> <br> </p><p> <i>Jan Jileček</i><br></p><p> <br> </p></div>hobby;#vzdělávání;#
Základy tvorby 3D animované scény v Unityhttps://create-it.cz/Blog/Stranky/unity3D.aspxZáklady tvorby 3D animované scény v Unity<p>Podařilo se vám minule napsat <a href="/Blog/Stranky/hra-v-pythonu.aspx" target="_blank">hru v Pythonu </a>a chcete si vyzkoušet regulérní herní vývoj? Dnes vám ukážu, jak si lze snadno vytvořit 3D animovanou scénu v <a href="https://unity.com/" target="_blank">Unity</a> engine (ke stažení <a href="https://store.unity.com/download-nuo" target="_blank">zde</a>). Ten se hlavně používá právě pro herní vývoj (hry jako Inside, Cuphead nebo Hollow Knight jsou právě z Unity), ale běžně s ním pracují i filmová studia pro vytváření <a href="https://en.wikipedia.org/wiki/Computer-generated_imagery" target="_blank">CGI</a> scén a samozřejmě tak vznikají i animované filmy. Animace udělají pro pocit ze hry hodně, jelikož oživují herní objekty a umožňují tak hráči se lépe vžít do hry. <br></p><p> Pojďme se tedy podívat, jak pomocí bezplatných nástrojů a modelů v Unity vytvořit jednoduchou scénu: </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/unity3D.gif" alt="unity3D.gif" /> <br> </p><p> Nejprve v Unity založím nový 3D projekt. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/nejprve3D.png" alt="nejprve3D.png" /> <br> </p><p> Unity má v klasickém rozložení okno pro manipulaci s 3D scénou nalevo a pohled herní kamery na scénu vpravo. V levém panelu je seznam všech herních objektů a v tom úplně napravo se provádí nastavení vybraných objektů a entit. Panel dole pak obsahuje importované zdroje, jako modely, animace, zvuky, atp. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/panelobsahuje.png" alt="panelobsahuje.png" /> <br> </p><p> Vytvořím tedy první 3D objekt, tzv. “Plane”, přes menu <i>GameObject - 3D Object - Plane</i>. Ten poslouží jako “podlaha” pro 3D model postavy, aby nepadala nekonečným herním prostorem. Unity má klasické manipulační nástroje s 3D scénou - posun, rotace a škála. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/manipulacninastroje.png" alt="manipulacninastroje.png" /> <br> </p><p> Nyní potřebuji 3D model postavy. Použiju bezplatný balík <a href="https://assetstore.unity.com/packages/3d/props/polygon-starter-pack-156819" target="_blank">Polygon starter</a>, který obsahuje základní modely a prostředí. Do Unity ho pak stačí naimportovat přes <i>Package Managera</i> (všechny balíky přidané přes webové rozhraní <i>Unity Asset store </i>se synchronizují přes uživatelský účet přímo do Unity engine). </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/synchronizace.png" alt="synchronizace.png" /> <br> </p><p> Po importu vytvořím nový prázdný model, který bude sloužit jako “rodič” animovaného 3D modelu (opět přes menu, <i>GameObject - Create Empty</i>). Objekt se vloží na souřadnice (0,0,0), tzn. přímo do středu podlahy <i>Plane</i>. Objekt ještě pro přehlednost přejmenuji na <i>Player</i>. V okně prohlížeče zdrojů najdu herní model postavy z balíku Polygon Starter, vybírám tu s názvem <i>SM_Character_Male_01</i>. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/sm_character.png" alt="sm_character.png" /> <br> </p><p> Model přetáhnu do levého okna objektů na předtím vytvořený objekt <i>Player</i> - zobrazí se i ve scéně. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/player.png" alt="player.png" /> <br> </p><p> Chybí nám už jen přidat animaci. Ručně animovat model by zabralo hodiny, využiji proto webu <a href="http://mixamo.com/" target="_blank">mixamo.com</a>, kde stahuji <a href="https://www.mixamo.com/#/?page=1&query=breakdance" target="_blank">breakdance animaci</a>. Zdarma tam poskytují rozličné herní animace, pro chůzi, běh, smrt hráče atp. <br></p><p> Animaci naimportuji do Unity (v prohlížeči projektu dole, <i>pravý klik - </i><i>Import New Asset</i>) a stejně tak vytvořím <i>Animator Controller,</i> pro ovládání animace (<i>pravý klik - create - animator controller</i>). Po importu animaci vyberu a změním její parametry, aby s ní bylo možné manipulovat. Její typ nastavuji na Humanoid a ukládám přes <i>Apply</i>. Také měním její jméno na <i>breakdance</i> na záložce <i>Animation</i>. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/breakdance.png" alt="breakdance.png" /> <br> </p><p> Pak vyberu vytvořený <i>Animator Controller</i>, a do nově zobrazeného okna <i>Animator</i> přetáhnu animaci <i>breakdance</i>. Automaticky se napojí na vstupní stav <i>Entry</i>. </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/entry.png" alt="entry.png" /> <br> </p><p> Teď už jen stačí přiřadit tento <i>Animator Controller</i> modelu postavy a animace se spustí! </p><p> <img src="/Blog/PublishingImages/Stranky/unity3D/animacespusti.png" alt="animacespusti.png" /> <br> </p><p> Animace tvoří velkou část hry, takže je dobré si s nimi dát tu práci pro co nejautentičtější pocit při hraní. Jak jsme si ukázali, tak napojení animací na herní modely je vcelku jednoduché, a s online databázemi jako je Mixamo si člověk vystačí i při tvorbě rozsáhlejší hry. Pro specifičtější potřeby už bude samozřejmě nutné vytvořit si animace vlastní, v praxi se humanoidní animace dělají pomocí motion capture, jelikož modelovat je manuálně je velmi časově náročné a nepřesnosti mohou narušit “game feel”.</p><p> V příštím díle tohoto miniseriálu o Unity se můžete těšit na základy ovládání pohybu a to pomocí C# Unity skriptů. </p><p> <i>Jan Jileček</i></p> <br> <br>odborné;#hobby;#vzdělávání;#