-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
287 lines (227 loc) · 16.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Space Challenge by SindelarPetr</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Space Challenge</h1>
<h2 class="project-tagline">Tento repozitář slouží k ukázce hry Space Challenge a ke krátkému přehledu o tom, jak celá funguje.</h2>
<a href="https://github.com/SindelarPetr/Space-Challenge" class="btn">View on GitHub</a>
</section>
<section class="main-content">
<h1>
<a id="space-challenge" class="anchor" href="#space-challenge" aria-hidden="true"><span class="octicon octicon-link"></span></a>Space Challenge
</h1>
<img style="width:20%; height:20%" src="Pictures/Icons/SCAppIcon.png" />
<h2>
<a id="o-hře" class="anchor" href="#o-h%C5%99e" aria-hidden="true"><span class="octicon octicon-link"></span></a>O hře
</h2>
<p>Také máš plné zuby her, kde se střílí, střílí a zase jen střílí? Ne? Tak to jsi na správné cestě. V mé hře musíš zničit takřka celé galaxie plné
nebezpečných nepřátel! Ve 3 galaxiích na celkem 60 místech tě budou čekat hordy lačnící po tvé smrti, ale to je něco, co jim rozhodně nesmíš dopřát,
a proto je sundej jako první. Budeš tak moci sesbírat všechny části portálu roztroušené po mapě a dostat se tak do vyšších úrovní. Za sbírání těchto
prvků dostaneš automaticky peníze, za který si vylepšíš raketu a budeš moci zničit víc a více nepřátel, případně si pořídíš lepší skin. Tvoje touha
po krvi se pravděpodobně dostane do hrůzných dimenzí, takže sem se snažil, aby si ji mohl všechnu pěkně ventilovat.</p>
<blockquote>
<p>Pozn.: Přestože se Space Challenge zdá býti brutální, je vytvořen s citem a láskou.</p>
</blockquote>
<p style="text-align:center"><a href=""><img style="width:30%; height:30%" src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/Stores/winphone-store-friendly.png" /></a> (Již brzy)</p>
<hr>
<!-- Ukázka hry -->
<h2>
<a id="ukázka-hry" class="anchor" href="#uk%C3%A1zka-hry" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ukázka hry
</h2>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen10.png" alt=""></p>
<p>
Hru jsem se snažil koncipovat jako co nejjednodušší. Proto sama o sobě není složitá. Pro vítězství v každém levelu je potřeba sesbírat roztroušené
části portálu (na obrázku) a dostat se dovnitř samotného portálu. Aby se vám to nepodařilo, tak jsou zde připraveni nepřátelé různých velikostí a s
různými parametry.
</p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/Elements/BlueCoin.png" alt=""></p>
<!-- Portály -->
<p>Ukázka portálu (deaktivovaný a aktivovaný)</p>
<div>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/Elements/portalDeactivated.png" alt=""></p>
</div>
<div>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/Elements/portalActivated.png" alt=""></p>
</div>
<!-- Ukázka hry - Hra -->
<h3>
<a id="hra" class="anchor" href="#hra" aria-hidden="true"><span class="octicon octicon-link"></span></a>Hra
</h3>
<p>
Grafika je založena na nejjednodušších objektech a to jsou čtverečky a kolečka plus "barevné světlo". To mi dalo možnost vytvořit
příjemnou grafickou koncepci v relativně krátkém čase. Jediné, co není vytvořeno ze základních objektů je raketka, kterou ovládá hráč, nicméně i
ta je tvořena v duchu jednoduchosti. Co je také důležité a na obrázku se těžko ukazuje je práce s kamerou, je třeba, aby byla vždy zaměřena na
hráče a zároveň dávala nahlížet tam, kam by to člověk očekával. Když uživatel střílí, tak je na tu stranu zaměřený, tudíš by o ní měl rád přehled.
Dobře posunem tím směrem kameru. Nestřílí? Dobře kamera bude zabírat místo, před raketou, kam právě letí. Pro kvalitní zážitek hraní jsem nezapomněl
na screenshake! Jste zasaženi? Bum, kamera se třese. Bez toho by to nikoho nebavilo.
</p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen5.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen15.png"></p>
<!-- Ukázka hry - Menu -->
<h3>
<a id="menu" class="anchor" href="#menu" aria-hidden="true"><span class="octicon octicon-link"></span></a>Menu
</h3>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Menu/SCMain.png" alt=""></p>
<p>
V menu jsem se na grafické efekty tolik nesoustředil. Chtěl jsem docílit hlavně toho, aby člověk, který o této hře v životě neslyšel, menu
"pochopil" již od prvního okamžiku. Vymyslel jsem tedy koncept seznamů tlačítek, který je jednou z pro uživatele nejjednodušších možných
typů menu. Zároveň je velice jednoduché vytvořit výsledou strukturu menu (zajištění, aby tlačítka odkazovala na další seznamy tlačítek).
</p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Menu/SCChooseAGalaxy.png" alt=""></p>
<p>
Na obrázku výše je část menu, kde si uživatel vybírá, který svět chce hrát. Pokud jeden svět nedokončil, nemůže se tak dostat do dalšího.
Pozadí tlačítek nebylo nějak zvlášť využito, a tak jsem ho použil jako ProgressBar (ukazatel postupu) a ukazuje, jakou část již hráč prošel.
</p>
<!-- Menu upgrades -->
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Menu/SCUpgrades.png" alt=""></p>
<p>
V části, kde se dají kupovat upgrady, je výše zmíněný ProgressBar také použit a to k zobrazení, jak moc je raketka vylepšena. Upgrady se kupují za coiny,
které se dostávají za sbírání jednotlivých částí portálu.
</p>
<!-- Menu ship skins -->
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Menu/SCSelectSkin.png" alt=""></p>
<p>
Vytvořil jsem i možnost zakoupit za nasbírané coiny nový skin na raketu.
</p>
<hr>
<!-- Zdrojové kódy -->
<h2>
<a id="zdrojové-kódy" class="anchor" href="#zdrojov%C3%A9-k%C3%B3dy" aria-hidden="true"><span class="octicon octicon-link"></span></a>Zdrojové kódy
</h2>
<!-- Obecně o vývoji her -->
<p>
Na začátek seznámím laiky s tím, jak taková hra obecně vypadá "pod kapotou". V zásadě o nic složitého nejde, ve hře je každych x milisekund (např.: 16ms při 60FPS)
zajištěno, aby všechny prvky měly možnost změnit svůj stav (posunutí, rotace, změna barvy, výstřel, ...), to se děje v metodě nazvané <em>Update</em>.
Poté je třeba všechny prvky vykreslit pomocí metody <em>Draw</em>, poté se spouští znovu <em>Update</em> a hra takto stále pokračuje. Na začátku k vytvoření
všech prvotních prvků, jako bývá nejčastěji menu, se volá metoda <em>Load</em>.
</p>
<p>
Co se týče zdrojových kódů jako takových, zakládal jsem si na podobných hodnotách jako při návrhu hry. Myslím tím především jednoduchost, preciznost,
efektivitu a přehlednost. Přehlednost samotná je velice důležitá, Visual Studio (prostředí na vývoj) podporuje tzv. regiony, to nám umožní "sbalit" část kódu
a pojmenovat, takže poté nemusíme, při zběžném procházaní kódu, řešit, co přesně se uvnitř regionu děje - máme to pojmenované. Samozřejmě tam, kde je potřeba
dovysvětlit funkčnost jsem používal poznámky. Třídy tedy často budou mít podobný vzhled, pokud nebudu mít otevřené regiony, jako na obrázku níže.
</p>
<img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/Code/RegionsExample.png" />
<p>
Samotná třída <em>Table</em> je páteřní třídou celého programu, která se stará o propojení menu a hraní levelů. V
<a href="https://github.com/SindelarPetr/Space-Challenge/tree/gh-pages/Code%20examples">ukázkách kódů</a> si ji můžete celou prohlédnout.
</p>
<p>
Rád bych zde vypíchl z této třídy část, kde dochází k výše zmíněnému updatu. Ačkoliv je tato metoda velice důležitá a používaná po celou dobu
běhu aplikace a zajišťuje vlastně celý chod hry, je poměrně krátká. A tak to má být, v ideálním případě se snažím, aby třídy a metody byly co nejkratšího
rozsahu, práce se poté dělí do dalších částí programu, což umožňuje snadné ladění a poskytuje příjemnou přehlednost.
</p>
<code>
<pre>public void Update(GameTime gameTime, MyState myState)
{
#region Menu
if (ActiveMenu != null)
{
ActiveMenu.Update(gameTime, myState);
}
#endregion
#region Level
if (Level != null)
{
#region Level pause
if (myState.BackPressed && !myState.GamePadStateHandelt)
{
SetMenu(MenuType.Pause);
Level.Pause();
myState.GamePadStateHandelt = true;
}
#endregion
Level.Update(gameTime, myState, Content, GraphicsDevice);
}
#endregion
SoundEff.Update(gameTime);
CoinView.Update(gameTime);
}</pre>
</code>
<!-- Camera -->
<p>
Za zmínku stojí i třída, která se stará o práci s kamerou (<em>Camera</em>). Ukáži zase jen metodu <em>Update</em>, celá je
k nalezení <a href="https://github.com/SindelarPetr/Space-Challenge/tree/gh-pages/Code%20examples/Camera.cs">zde</a> v repozitáři. Kamera samotná se skládá
z různých pohybů. Je třeba zajistit, aby snímala hráče (<em>TargetViewMove</em>), pak také aby se "třásla" (<em>ShakeScreen</em>), aby se mohla posouvat tím,
že uživatel táhne po obrazovce (<em>DragViewMove</em>) - tato funkce nebude v publikované verzi zpřístupněna. A jako poslední úkol dávám kameře posouvat se,
tak aby uživatel viděl, kam střílí nebo letí (<em>ToSeeViewMove</em>). Kamera je tedy na zmíněné části "rozkouskována" a finální pozice se vypočítá sečtením
všech částí.
</p>
<code>
<pre>public void Update(GameTime gameTime, MyState myState)
{
#region Counting parts of ViewMove
TargetViewMove.Update(gameTime);
DragViewMove.Update(gameTime, myState);
ShakeScreen.Update(gameTime);
ToSeeViewMove.Update(gameTime);
#endregion
this.Zoomer.Update(gameTime, myState);
#region Counting final ViewMove
ActualViewMove = TargetViewMove.FocusedPoint * Zoomer.FinalZoom + OriginViewMove + DragViewMove.ViewMove + ShakeScreen.ShakeViewMove * Zoomer.FinalZoom
+ ToSeeViewMove.ViewMove * Zoomer.FinalZoom;
EaseViewMove();
#endregion
}</pre>
</code>
<!-- Ukázka třídy MLMain -->
<p>Zmínil jsem, že vytvoření menu je něco, co jsem se snažil co nejvíce zjednodušit. <a href="https://github.com/SindelarPetr/Space-Challenge/blob/gh-pages/Code%20examples/MLMain.cs">Zde</a>
je ukázka třídy, která reprezentuje úplně první okno, které se otevře po spuštění. Níže je uvedena část, kde probíhá vytvoření. Neděje se nic složitého. V zásadě
se jen vytvoří 3 další seznamy tlačítek a 3 tlačítka, kterými se do nich po kliknutí dosnanem.</p>
<code>
<pre>public MLMain(ContentManager content, MenuController menu, MenuList parent)
: base(content, menu, menu.Table.Resolution / 2f, parent)
{
#region MenuLists
#region MenuLists creation
this.MLPlay = new MLPlay(content, menu, this);
this.MLOptions = new MLOptions(content, menu, this);
this.MLAbout = new MLAbout(content, menu, this);
#endregion
#region MenuLists addition
this.Kids.Add(MLPlay);
this.Kids.Add(MLOptions);
this.Kids.Add(MLAbout);
#endregion
#endregion
#region Items creation
//3 buttons -> only moving menu forward
this.CreateButton(AppResource.Play, MLPlay); //Opens MenuList Play (MLPlay)
this.CreateButton(AppResource.Options, MLOptions); //Opens MenuList Options (MLOptions)
this.CreateButton(AppResource.About, MLAbout); //Opens MenuList About (MLAbout)
#endregion
}</pre>
</code>
<p>Tento projekt je celkem rozsáhlý a uvádím záměrně pouze malou část ze všech zdrojových kódů. Celý projekt má ke dni 21.1.2016 skoro 28 000 řádek kódu, do kterého
jsem se snažil vložit to nejlepší ze sebe sama.</p>
<h2>
<a id="do-budoucna" class="anchor" href="#do-budoucna" aria-hidden="true"><span class="octicon octicon-link"></span></a>Do budoucna
</h2>
<p><em>Jsem si jist, že stále je co zlepšovat a vždy bude. Pokud se budeme bavit o efektivitě použitých algoritmů, tak se snažím použít jen to nejlepší, nic neošidit
a to už jen proto, že, když u něčeho trávím čas, chci, abych se poté mohl ohlédnout a říct si, že ten čas jsem zbytečně nevyplýtval.</em></p>
<p>Samozřejmě počítám s vytvořením více levelů, vytvořením nových typů nepřátel. Počítám i s vytvořením určitých bonusů, které způsobí, že budete na nějakou dobu
nesmrtelní nebo budete ničit vše do čeho narazíte nebo budete střílet 2x rychleji/s větším poškozením/s větší plochou poškození.</p>
<p>Rozhodně jsem pro to, aby člověk měl možnost porovnat svůj výkon s ostatními lidmi ze světa. Takže zavedení ukládání skóre na server. Zde bych jako skóre považoval
aktuální množství peněz získaných při hraní a možnost vidět sám sebe v žebříčku nejbohatších lidí. </p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen1.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen2.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen8.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen11.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen13.png"></p>
<p><img src="https://raw.githubusercontent.com/SindelarPetr/Space-Challenge/gh-pages/Pictures/SCScreenshots/Game/gameScreen14.png"></p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/SindelarPetr/Space-Challenge">Space Challenge</a> is maintained by <a href="https://github.com/SindelarPetr">Petr Šindelář ([email protected])</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>