DOM vs canvas html game

[Solo89]

Hallo iedereen,

Ik moet voor mijn studie een html game maken met typescript. Op school kregen we alleen lessen waarin we DOM elementen in de body plaatsen. Ik heb online naar tutorial gekeken en zag dat veel mensen canvas gebruiken om een game te maken. Mijn vraag is dan wat is het verschil tussen die 2? En welke is beter?

[Onbekend]

Hint: Probeer eens een lijntje op de webpagina te tekenen.

[Creepy]

Dat lijkt me inderdaad het beste. Probeer beide methodes eens gewoon uit en/of vraag het eens aan je docent

[Solo89]

@onbekend: Ok, I see your point. Tot nu toe hebben we alleen met plaatjes gewerkt en het dan in de body gezet.
@creepy : Had hem ook gevraagd en hij zei =>
Canvas is voor high performance en in DOM gebruikt je containers en lagen.

Ik heb tot nu toe alleen op die DOM manier gemaakt en gebruikt gemaakt van Phaser voor mijn game. Ik denk ik ga dit project op zijn manier maken en later verder experimenteren met canvas.

[Verwijderd]

DOM = Document Object Model.
(het zegt het al zelf...) Ligt aan het type spel wat je wilt maken. Sommige text based spellen kun je prima maken met de DOM. Met Javascript en in jou geval Typescript welke een subset is van Javascript kan je de DOM benaderen met een API.

Je moet eerst naar de oorsprong van HTML. Wat is het en waarom is het uitgevonden destijds. Het is gewoon eigenlijk een opmaak taal. Hypertext Markup Language. Vroeger had je geen CSS e.d.
Altijd jezelf verdiepen in de geschiedenis van de technologie die je gaat gebruiken. Dat verklaart vaak een heleboel over bepaalde keuzes die gemaakt zijn zowel goed als slecht. http://www.wdtonline.com/...rks/WiserWays/csshtml.htm\

Ga je echt voor grafische zaken. Dan is het canvas element the way to go. Maar goed, als je heel veel games aan het maken bent ga je niet continu verschillende wielen opnieuw uitvinden. Dan heb je weer "game engines" bovenop canvas. https://html5gameengine.com/ De vraag is of je dit wel mag gebruiken met je studie omdat je juist die baremetal dingen moet leren.

[ Voor 5% gewijzigd door Verwijderd op 18-06-2016 22:05 ]

[Verwijderd]

Solo89 schreef op zaterdag 18 juni 2016 @ 21:11:
Ik moet voor mijn studie een html game maken met typescript.

Voor een game is canvas vele malen veelzijdiger, maar zo te lezen verwacht je school dat je het in de DOM gaat doen - ik zou het even navragen voor de zekerheid!

[Ramon]

Of je voor canvas of DOM kiest hangt af van de aard van je spel. Maak je bijvoorbeeld een sidescroller dan heb je denk ik meer performance nodig dan DOM je kan bieden, maar maak je een turnbased top-down strategy, dan zou je met DOM ook wel uit kunnen komen denk ik. Als de spelsoort het toelaat zou ik in eerste instantie kiezen voor wat je het meest onder de knie hebt. En dat eigenlijk omdat het maken van een game al behoorlijk complex is, met het bijhouden van de state en het maken van een gameloop. Daarnaast moet het ook nog mooi zijn en leuk om te spelen, dus daar zou wat mij betreft de focus moeten liggen.

[epic007]

Wat is het doel van de opdracht?

Als het Typescript leren is zou ik me niet gaan verdiepen in low level canvas (al is dat niet heel erg moeilijk).
Je hebt al ervaring met de phaser library dus die kan je ook gebruiken. Het gevaar is dan wel dat de binding richting Typescript weer lastig kan zijn..

[Ventieldopje]

Als je ook maar even hand gegoogled dan had je binnen no time de verschillen (overduidelijke verschillen) tussen het DOM model en Canvas gevonden.

It's even in the name... met Canvas kun je tekenen en is de performance een stuk hoger omdat je gerichte GPU acceleratie kan gebruiken. Iets dat bij de DOM beperkt is omdat je niet met pixel data werkt of met geometrische objecten maar met lagen. WebGL is overigens het grote broertje van het Canvas object en is nog een stuk geavanceerder.

Als je al ervaring hebt met Phaser dan zou ik lekker dat gebruiken als dat de bedoeling is. Als je nagaat dat als je geen gebruik maakt van een framework je ineens een héle hoop dingen zelf moet doen zoals hier al vaker aangegeven.

[GlowMouse]

Solo89 schreef op zaterdag 18 juni 2016 @ 21:45:
Canvas is voor high performance en in DOM gebruikt je containers en lagen.

Bij canvas is het ook gebruikelijk om meerdere lagen te gebruiken. Door meerdere canvassen over elkaar te plaatsen, hoef je een achtergrond bijvoorbeeld niet opnieuw te tekenen als je iets op de voorgrond wist.

[Ventieldopje]

GlowMouse schreef op donderdag 23 juni 2016 @ 00:28:
[...]

Bij canvas is het ook gebruikelijk om meerdere lagen te gebruiken. Door meerdere canvassen over elkaar te plaatsen, hoef je een achtergrond bijvoorbeeld niet opnieuw te tekenen als je iets op de voorgrond wist.

Maar dit is wat anders dan de al snel tientalle lagen die je met de DOM hebt Bovendien ook grafische lagen en niet lagen die opgemaakt zijn uit door de DOM te parsen en elementen te tekenen (a.d.h.v CSS regels etc.).

Laag != laag