Particle Experiments: Sprite sheets

[@Frankslaboratory]

It would be easy to combine this star effect with some kind of space game. Should we try that

[@LouisChang-le7xo]

Yes, and we should try to implement it into our space invaders game

[@r-i-ch]

Always great stuff!❤ Might be better to use SVG somehow to eliminate blurry stars? Can you load the image directly into JavaScript? Would it be better to keep the unchanging width/heights in the global/Scene scope since you’ll just be repeating those values in each particle? How might you get the individual stars to rotate? Somehow using transform?

[@Frankslaboratory]

Hi, yes SVG can be used, I will make a video on that as well. Images are always loaded directly into JavaScript, if you mean putting base64 data string into the .js file, like I do for pixel effect, yes that would work as well. It's always better to use a single value wherever possible. I'm not sure if you mean width and height of canvas, because that's already a global value in this codebase. Width and height of each particle sits on the object constructor, which would be the right way in terms of OOP principles. Not sure about performance difference if I made it global as well. Something to research. I covered rotation in many videos, you do it by combining translate and rotate canvas methods wrapped between save and restore. It's always the same technique, I used it in older tutorials here for games and for many different animation projects as well.

[@r-i-ch]

@@Frankslaboratory - Thanks! Looking forward to it!

[@HemantKumar-yi4gx]

This channel is a milestone for those who are learning JavaScript. This channel deserve more subscriber and likes

[@Frankslaboratory]

Thank you, very kind to say

[@MadaraAzukar]

Good

[@abdulrahmansmamman7538]

Hi Frank , if I want to to integrate API for virtual football game , and I don't know how to get the API , their API is private , how can I start

[@bartdemeyere]

can you rotate each snowflake from the sprite image? Or do you need to slice the sprite image into 9 file images to accomplish this task?

[@Frankslaboratory]

Yes you can rotate each individually using the usual technique by wrapping the drawing code between save and restore. Then translate over the snowflakes x and y and rotate each one by its individual positive or negative angle value. I do this in many videos just not on snowflakes. The source image being a sprite sheet has no effect on it

[@gamerpotato6667]

i want to know why using sprite? is it better than 9 individual png? it seems expensive to me for that each time you DrawImage you need to cut the image again.

[@Frankslaboratory]

The advantage of a sprite sheet is that you make only a single http call for the image. it's cheaper when it comes to server traffic. It doesn't really matter for a small project like this with small files, it's cleaner and more organised with a sprite sheet in my opinion and also the cropping operation is very cheap performance wise. I recommend a sprite sheet and I would say its strongly advised for proffesional projects. For a fun side project it's fine to use 9 separate images as well so feel free to do that

[@gamerpotato6667]

@Frankslaboratory thanks for replying. I did learn a lot about sprite sheet after watching your video.

[@zohaibqurban7386]

you are my best teacher I love you so much

[@Frankslaboratory]

Hi Zohaib, thank you for your kind feedback, glad you found some value

[@javifontalva7752]

Great vid. I am looking forward to the next one.

[@Frankslaboratory]

Hi Javi, thank you :)

[@ronolds6505]

As soon as I "cut" the "// setup" section in script.js my screen turns black and I lose all particles. ????? What am I doing wrong?

[@Frankslaboratory]

Not sure. A typo somewhere. Email me your code and when I have time I will look and I will tell you

[@ronolds6505]

@@Frankslaboratory I tried locating your email and the link didn't work. It checked me as a "robot" and then froze. Anyway, I've gone through this demo about 4 times (using a two-monitor system, and can't find my error. I would send you the code via email if I could get it to work. For now, I'll just go through the demo again. I'm halfway through it and I'm still getting circles, where your screen is showing the full sprite sheet floating around. I downloaded your sprite sheet by clicking on the link above. Thought maybe the something was wrong with the sprite sheet. But nobody else below made any comment about it. I'm sure it's my error (?)

[@ronolds6505]

@@Frankslaboratory I finally figured out what was causing the problem. You were correct, I had "quotation" marks where it should have been 'hyphen'.

[@Frankslaboratory]

@@ronolds6505 glad you worked it out, debugging is often the most challenging part, but it gets easier with time.

[@paulthomas1052]

Nice demo - thanks !

[@Frankslaboratory]

Hi Paul, I'm here to help

[@ПетрБалашенко]

Good afternoon. Thank you for sharing your javascript lessons. Have you had any experience creating particle-based fire animation, if so, could you share it in one of your following videos? Thanks again.

[@Frankslaboratory]

Hi, I made many fire effects in some older videos, even turning images into fire. I usually use SVG filters to blur and then sharpen a particle system, to create a variety of liquid and fire effects.

[@CoderFromMathura]

You are awesome 👍👍👍

[@Frankslaboratory]

Thank you

[@amoljadhav5088]

Nice ❤

[@Frankslaboratory]

Thank you ❤

[@TheStRaX_]

Justice for Game seriess.❤

[@Frankslaboratory]

Do you mean you want more games, or less games :D

[@TheStRaX_]

@@Frankslaboratory More ... Very More. I mean why not change FranksLaboratory to GamesLaboratory ....😅😅 Just Kidding. But i really love that game tutorials.

[@mashmixture5662]

Like 101 🎉

[@Frankslaboratory]

Thank you 👍