Alien invasion tower defense

[dzejkob]

Po dlouhé době zakládám alespoň motivační téma. Jedná se o zcela spotřební hru, kde inovace jsou celkem malé - tower defense. Hra bude zcela zdarma a ideálně rozseta ve všemožných free web games portálech, kde to půjde. Monetizační záměr je maximálně v umístění reklam.

Oč se jedná trochu podrobněji - pro začátek je důležitý epický příběh:
http://v.dzejkobgames.eu/the_story.png

Po kterém bude hráč takřka bezprostředně vrhnut do víru kosení alienů a jiných monster.

Jak byl zmíněno, hra je webová - použité technologie javascript (typescript) a three.js.

Ačkoliv to používá webgl, tak pro určitou originalitu je prostředí kromě terénu skládáno ze spritů. Podle mě to vypadá nebývale a zajímavě - jako jediná originalita, co hra nabízí. Grafika není nic moc - je to v podstatě na tentýž úrovni, jako když jsem před 15ti lety kreslil postavičky. Nějaký styl to ale snad má. Klíčový aspekt je infantilita kombinovaná s násilím (ovšem páchaném na vetřelcích).

Kromě programování ve své podstatě většinu času kreslím, což se ukázalo jako nejnáročnější - veškerá grafika je vlastnoručně kreslená, takže to je 100% copyright (detaily jak viz. web).

Přikládám i současné gameplay video:
http://v.dzejkobgames.eu/alien_td.mp4
( pozor - je to streamable mp4 a webserver streamování umí - jenom je třeba aktuální prohlížeč chrome, firefox - nejsem si jist, zda to umí explorer - edge by snad měl. Youtube mi video stáhnul - nevím proč - asi že tam stříká krev )

Co je jisté, že bude jinak:

* ten freeplace věží (vojáčků) nakonec nebude, ale budou předdefinované místa (jinak by to nebylo taktické)
* věže budou mít nějaký hezčí placeholder - ale v principu bude vojáček koukat z trubky (není třeba kreslit nohy) - u pokročilejších věží to bude smysluplnější
* cesta je škaredá - zatím jsem neprobádal, jak to udělat lépe
* až bude lepší cesta, vetřelci budou po ní chodit trochu více rozptýleně, aby to vypadalo lépe

Obecně je na tom ještě dost práce - především co se týče kreslení. Pokud se to bude natahovat, tak se to pokusím vydat nějak více minimalistické.

Pár dotazů pro kohokoliv, kdo by dokázal poradit:

1) potřeboval bych vyrobit nějaké podobné cesty: https://i0.wp.com/www.paladinstudios.com/wp-content/uploads/2013/07/lfg_terrain_05.jpg - včetně UV mapování. Ten texture blur dokážu případně oželet. Momentálně na to používám sketchup a není to moc ideální. Potřebuju prostě v něčem opensource kreslit terén - nároky na to nemám moc vysoké.

2) znáte nějaké gamedev fóra - které jsou trochu aktivnější - třeba zahraniční? (kdysi to tady bylo více živé)

3) znáte nějaké reklamni služby, které by se daly pro hru použít? Podobně, jak je ve free android aplikacích reklam - tak něco takového bych si představoval. Nečekám od toho vůbec žádné zázraky.

Díky

Průběžně budu přidávat updaty.

[mar]

[dzejkob]

No spíš jsem to myslel tak, že bych potřeboval v "něčem" relativně snadno vyseknout několik podobných map (bude jich tak možná 6). Když nad tím přemýšlím, tak žádný blending není úplně žádoucí - protože by to ztratilo ten "cartoon look" - spíš by okraje cesty měly být zřetelně nakresleny. Ten generátor si dovedu představit - akorát jsem s tím chtěl mít tah na branku (ve smyslu realizace) - a zatím to dopadá tak, že úplně všechno dělám po svém (pominu li three.js).

EDIT: asi reálně by bylo nejvhodnější prostě cestu nakreslit ručně na jednu bitmapu - a to napasovat na tu heightmapu

[dzejkob]

Update:

* nakonec jsem udělal terrain editor, který namapuje texturu s cestou na pole vertexů, které se dá pak upravovat metodou raise/lower apod. Vypadá to nyní mnohem lépe

* vetřelci jsou více rozptýleni po cestě

* udělán jednoduchý texture generátor, díky kterému mám lepší texturu trávy a cesty

* editor levelů vylepšen a je použitelnější (několik nástrojů, snazší vkládání objektů a cest)

* předdefinované místa pro vkládání věží + věže (vojáčci) mají oddělený spodek a vlastní postavu

* základní UI - peníze, životy + nezbytná grafika - které je renderováno taktéž přes webgl (aby ta věc byla více nezávislá)

* funkční management scény - lze načíst za běhu jinou mapu atp.

* dílčí optimalizace, konfigurace kvality, nová verze three.js

* první publikovatelný build


Kdyby to někoho zaujalo, tak tady je funkční verze k otestování:

http://www.dzejkobgames.eu/alien_td/game.php

Jakmile se to načte, tak klik na "new game" (stahuje to cca 10M+ obsahu). Po rozmístění věží (nahoře "NEW") dole tlačítka "batch 1/2", "one 1/2" vypustí vetřelce.

Otestováno v chromu (tam to běží nejlépe), firefoxu, exploreru. Prozatím vypnuty světelné záblesky - kromě chromu příliš zpomalovaly.

Je to pouze demonstrativní ukázka - není vůbec vybalancovaná hratelnost, vyváženost a cokoliv dalšího.

Teď bude na pořadu dne vyrábět další content - tedy věže, upgrady, vetřelce apod.


Několik screenshotů:

[mar]

Zkoušel jsem to v chromu a je to dobré.
Je mi jasné, že to je WIP, ale myslím, že hratelné to bude.

Plánuješ zvuky? To jediné mi tam asi chybí.

pak už jenom drobnosti:
- bude to fullscreen? přijde mi, že okno (nebo jak se tomu na webu říká) má fixní velikost
- ta zelená mi přijde zelená až moc (možná desaturovat/trochu jiný odstín?), ale možná to tak máš schválně, nevím
- oblohu/pozadí asi taky budeš časem řešit, ta barva je taky dost agresivní

Jinak je to fajn, obzvlášt pokud je to programmer art

[satik]

Mam tu stranku uplne prazdnou, jen jsou tam v modrym obdelniku 4 tlacitka od "one 1" po "batch 2" (chrome, v edge to bezi)
_________________
https://www.facebook.com/peasantsandcastles/

[pcmaster]

Hlasim, ze na Pale Moon 27.9 x64 Windows 7 (Firefox 52+) to funguje!
Dokonca je to pekne

Beha to dost pomaly, rozlisenie jedneho monitoru mam 2560x1440, renderuje sa to do okienka 950x618 (plus minus).

Firefox 61.0 x64 podobny vykon i chovanie.
_________________
Off-topic flame-war addict since the very beginning. Registered since Oct. 2003!
Interproductum fimi omne est.

[Ladis]

Funguje ve všech prohlížečích (Explorer, Edge, Chrome, Firefox), ale ve všech je to nehratelně pomalé.
_________________
Award-winning game developer

[dzejkob]

Díky za zpětnou vazbu. S tou rychlostí to je podivné - běhá mi to plynule i na integrovaných gf (navíc tam je jen pár meshů a většina jsou sprity). Možná bude problém v tom, že se to fakticky renderuje na dvojnásobnou velikost a pak to dělá rescale na to malé okno - neboť to byl nejlepší výsledek antialiasingu (ostatní antialiasingy to škaredě rozmáznou). Asi to teda i společně s tím fullscreenem (nebo fullbrowser screenem) udělám tak, že to půjde scalovat podle okna, ale sprity budou exportované ve většim rozlišení. Jenom nevím jak se vyhnu tomu, aby finál měl 100 MB (asi přibalím js zip) + mám obavu, že budou více exponované nedokonalosti grafiky.

Fungují vám plynule jiné webgl věci? Např. rybičky:
http://webglsamples.org/aquarium/aquarium.html
Nebo něco v three js:
http://collinhover.github.io/kaiopua/

Jinak s kontrastem asi dobrý postřeh - zatím to je tak, jak to nějak vyšlo. Zvuky budou, ale jednoduché z freesound nebo něco podobného. Programer art to v zásadě je - jenom s tou grafikou trávím dost času (ve finále asi víc času padne na grafiku než na coding).

[mar]

Mně to taky běží plynule, těžko říct.
Je to opravdu GPU bound?
Pokud děláš 4x supersampling, možná by to mohl být s fillrate, ale zase ty shadery budou snad jednoduché a okno je relativně malé.

Terén se kreslí jedním draw callem, to je v pohodě.

Nicméně jsem si v GL profileru všimnul, že všechny sprity se renderují separátním draw callem plus změnou statu (uniformy plus textura) a navíc to vypadá, že nepoužíváš atlasy.

Asi to máš tak kvůli mipmapám, bohužel WebGL neumí texture arrays (nevím, jestli už je 2ka), ale i bez mipmap (většitou to je relativně malé, takže spíš upsampluješ) by to mělo být ok.

Otázka je, jak moc to máš ve své režii. Myslím, že kdyby se dal udělat atlas (atlasy),
sesortovalo se to podle atlasu/shaderu a vygeneroval bys dynamický vertex buffer (resp. prostě updatovat pro každý frame, případně vertex + index a renderovat přes drawElements, ale myslím, že tam je bez extenze omezení na 16-bit indexy jako v GLES2),
dalo by se to vyrenderovat na pár draw callů (pokud je toto ten bottleneck, ale klidně by mohl být).

[dzejkob]

Těžko říct, zda je vše na GPU. Já bohužel do toho tolik nevidím - jsem "prostý uživatel" three.js. V rámci svých možností můžu sprity nahradit planes rotovaným proti kameře a potáhnout je texturou spritu - třeba to pomůže. Tam bych mohl použít ty atlas mapy. Současné sprity řeší three.js nějak samo - těžko říct jak přesně. Každopádně je tam per sprit jedna textura - dokonce každý frame animace - asi to bude ono.

[pcmaster]

dzejkob, tie ostatne veci, ktore si linkoval, mi funguju velmi plynulo (GTX 1070).

Mar, bude az taky problem tych par10 spritov po 1 draw calle? To musi zvladnut par100 v pohode, ci je to az take zle?

Samozrejme doporucenie, aby to takto nerenderoval, v pripade, ze je to mozne, je velmi pravdive.
_________________
Off-topic flame-war addict since the very beginning. Registered since Oct. 2003!
Interproductum fimi omne est.

[mar]

[dzejkob]

Našel jsem tam problém, kdy to z nějakých tehdejších pokusů mohlo nesmyslně stackovat render přes různé timeouty. Teď to renderuje čistě přes requestAnimationFrame.

+ nedělá to rescale + okno hry se zvětší podle velikosti okna + sprity přegenerovány na dvojnásobné rozlišení (takže to bude mít tak 20M+)

Zkuste prosím zda to je pořád nehratelně pomalé:
http://www.dzejkobgames.eu/alien_td/game.php

[pcmaster]

Uz to beha trochu rychlejsie.
_________________
Off-topic flame-war addict since the very beginning. Registered since Oct. 2003!
Interproductum fimi omne est.