Cílem bakalářské práce je nejprve seznámení s herním enginem Three.js a představení možností zobrazování informací pomocí HUD. Výstupem praktické části bakalářské práce je webová stránka, která slouží jako přehledný výukový materiál dané problematiky. Na stránce je uvedeno 9 ukázek nejčastěji zobrazovaných informací (zdraví, munice, zaměřovač, ). Stránka obsahuje obrazové přílohy a komentované ukázky zdrojových kódů v jazycích HTML, CSS a JavaScript, které jsou zasazeny do prostředí CodePen.
Anotace v angličtině
The main purpose of the bachelor's thesis is to apprise with game engine Three.js and to present possibilities of displaying information using HUD in Three.js. Practical part of this thesis is educational website. There are 9 illustrations of the most used HUD (health, munition, reticle, ). There are image attachments and commented code in languages HTML, CSS and JavaScript which is presented by CodePen environment.
Klíčová slova
HUD, průhledový display, Three.js, HTML, CSS, JavaScript, WebGL, herní engine, zobrazování informací ve hrách, výuková webová stránka
Klíčová slova v angličtině
HUD, heads-up display, Three.js, HTML, CSS, JavaScript, WebGL, game engine, displaying information in games, educational website
Rozsah průvodní práce
53 s. (63 000 znaků)
Jazyk
CZ
Anotace
Cílem bakalářské práce je nejprve seznámení s herním enginem Three.js a představení možností zobrazování informací pomocí HUD. Výstupem praktické části bakalářské práce je webová stránka, která slouží jako přehledný výukový materiál dané problematiky. Na stránce je uvedeno 9 ukázek nejčastěji zobrazovaných informací (zdraví, munice, zaměřovač, ). Stránka obsahuje obrazové přílohy a komentované ukázky zdrojových kódů v jazycích HTML, CSS a JavaScript, které jsou zasazeny do prostředí CodePen.
Anotace v angličtině
The main purpose of the bachelor's thesis is to apprise with game engine Three.js and to present possibilities of displaying information using HUD in Three.js. Practical part of this thesis is educational website. There are 9 illustrations of the most used HUD (health, munition, reticle, ). There are image attachments and commented code in languages HTML, CSS and JavaScript which is presented by CodePen environment.
Klíčová slova
HUD, průhledový display, Three.js, HTML, CSS, JavaScript, WebGL, herní engine, zobrazování informací ve hrách, výuková webová stránka
Klíčová slova v angličtině
HUD, heads-up display, Three.js, HTML, CSS, JavaScript, WebGL, game engine, displaying information in games, educational website
Zásady pro vypracování
V teoretické části bakalářské práce bude seznámení s herním engine Three.js a možnostmi zobrazování informací prostřednictvím HUD (heads-up display).
V implementační části bakalářské práce bude vytvořena webová stránka v rozsahu cca 10 ukázek implementace zobrazování informací prostřednictvím HUD. Práce se zaměří na nejčastěji potřebné zobrazování informací v počítačových hrách:
Webová stránka bude mít podobu přehledného výukového materiálu doplněná o obrazovou přílohou a komentované ukázky zdrojových kódů v jazycích HTML5, CSS a JavaScript v některém prototypovacím prostředí (JSFiddle, CodePen).
Zásady pro vypracování
V teoretické části bakalářské práce bude seznámení s herním engine Three.js a možnostmi zobrazování informací prostřednictvím HUD (heads-up display).
V implementační části bakalářské práce bude vytvořena webová stránka v rozsahu cca 10 ukázek implementace zobrazování informací prostřednictvím HUD. Práce se zaměří na nejčastěji potřebné zobrazování informací v počítačových hrách:
Webová stránka bude mít podobu přehledného výukového materiálu doplněná o obrazovou přílohou a komentované ukázky zdrojových kódů v jazycích HTML5, CSS a JavaScript v některém prototypovacím prostředí (JSFiddle, CodePen).
Seznam doporučené literatury
SUKIN, Isaac. Game Development with Three.js. 1st edition. Birmingham: Packt Publisher, 2013. ISBN 978-1-78216-853-9.
DIRKSEN, Jos. Learn Three.js: programming 3D animations and visualizations for the web with HTML5 and WebGL. 3rd edition. Birmingham: Packt Publisher, 2018. ISBN 978-1-78883-328-8.
LEWY, Blue. DISCOVER three.js: Welcome to the Missing Manual for three.js! [online]. 2020 [cit. 2021-10-27]. Dostupné z: https://discoverthreejs.com/.
MICROSOFT. HUD Components Overview of common HUD components [online]. 2021 [cit. 2021-10-27]. Dostupné z: https://gameuxmasterguide.com/2019-05-09-HUDComponents/.
Seznam doporučené literatury
SUKIN, Isaac. Game Development with Three.js. 1st edition. Birmingham: Packt Publisher, 2013. ISBN 978-1-78216-853-9.
DIRKSEN, Jos. Learn Three.js: programming 3D animations and visualizations for the web with HTML5 and WebGL. 3rd edition. Birmingham: Packt Publisher, 2018. ISBN 978-1-78883-328-8.
LEWY, Blue. DISCOVER three.js: Welcome to the Missing Manual for three.js! [online]. 2020 [cit. 2021-10-27]. Dostupné z: https://discoverthreejs.com/.
MICROSOFT. HUD Components Overview of common HUD components [online]. 2021 [cit. 2021-10-27]. Dostupné z: https://gameuxmasterguide.com/2019-05-09-HUDComponents/.
Přílohy volně vložené
CD
Přílohy vázané v práci
ilustrace
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Práce je zpracována přehledně a obsahuje všechny potřebné náležitosti a je v požadovaném rozsahu. Student prezentoval výsledky bakalářské práce a reagoval na dotazy a připomínky vedoucího i členů komise pro státní závěrečné zkoušky.