I know people make all kinds of stuff with <canvas> but that's all black magic to me. Time to change that. This is how I built Attacke!, a si...
For further actions, you may consider blocking this person and/or reporting abuse
This is awesome Daniel, I will surely contribute a few features soon.
Awesome! Looking forward to it :)
This is cool. I skimmed the article and noticed one thing about the requestAnimationFrame. I think that the fps is contingent upon the refresh rate of the monitor - whatever load you're putting behind it.
So, without a load at all, on a 120Hz monitor, I believe you would get 120 fps.
I'd be interested in knowing if this is incorrect.
It is. My external display maxes out at 75Hz, my Macbook does 120Hz. Browsers won't go higher than 60fps either way (30 on MacOS with energy saver). That is also true for all CSS animations, GPU-acceleratet or not.
Seems that Chrome is an exception to this rule:
As a test, I opened this site testufo.com/framerates-versus using Chrome on my Macbook M1 Pro, in a dual-screen configuration, the other monitor running at an apparent 60 fps.
The tests were measured by taking the window and moving from one screen to the other w/o refresh, while the M1 was plugged in (I didn't measure on battery).
[120 fps] dev-to-uploads.s3.amazonaws.com/up...
[60 fps] dev-to-uploads.s3.amazonaws.com/up...
Safari and Firefox maintained 60 fps for both, even if doing a hard refresh.
I skimmed this post to find the link to begin with: bugs.webkit.org/show_bug.cgi?id=17...
agree !
Freaking brilliant thanks for the great inspiration you actually gave me. I grew m uo to feel alone and youreminded me with this post why i love it
Congratulations and well done!
You deserve a medal 🥇
Also nice diagram 👍
💯 Lighthouse!?
When someone bring me that metrics I've always question how Lighthouse calculate those scores 😆
For the next step maybe you want try using ECS. Here some list
Any ECS library should be fine (except ECSY). Speaking of WebRTC, here an example combining ECS with WebRTC
Lihhthouse scores are easier to get to 100 when you try to not mess up things instead of adding performance features :)
I haven't heard of ECS yet, but I'm no real game dev either. It sounds like I'm already halfway there. It would mean e.g. to put all positioning data into its own structure, right? I can see how that would be beneficial in games with a high number of players, but how would that pattern be batter than what I have now with only a handful of players?
Bullet-hell is one type of game that work best when using ECS even though it's single player. Every type of bullets and obstacles are modeled as ECS components. For example modeling them based on the effect and damage then we can model it as component fire, ice, poison, and physical. Ice will have parameter
slowdown in percent and icedamageper hit. Poison will haverandommove chance and poisondamageper second. And so on. After that you just need to put each logic/implementation in different ECS systems.Even if the game only has small amount of entities, it can still benefit from how easy the data can be serialized. Make it suitable in multiplayer game for states synchronization.
agree !
Wow thats so cool! TypeScript and JavaScript can be used to make serious games. Like Danger Crew on Steam which was made with a JavaScript tech stack.
Cool. I will go read with more calm it tutorial.
Congratulations!
Why setInterval and not RAF? Nice article btw!
I did use
requestAnimationFrame, which is the whole reason behind the frame skip mechanic.Awesome post Daniel. I can't deny this fact that this post actually made me amaze. Keep going ! You earned a new follower 🤗.
One of the best article on this platform, really well done, congrats!
Cool stuff
That was a really nice to read, have fun with WebRTC ;)
Well Done Daniel.
Awesome Article.
Keep on going. I will wait your article.
Best regards.
Awesome work, Daniel! I'm thinking the same to build a game to learn everything about Web API's and logic. Probably will use your repo as a reference 😁