SakeTami
davidrevoy
davidrevoy

patreon


Weekly news 2019-01-04: The firework animated panel

Hi! 

Happy new year 2019!


During the holidays, the project went a bit to sleep on my side; I had a lot of visit at home and it was a good opportunity to take a break and enjoy being with family and friends. I hope all of you could have a moment like that during the past weeks.

The contributors of Pepper&Carrot CalimeroTeknik, Craig Maloney, Martin Disch, Midgard, Nicolas Artance and ValVin kept working on the "alpha" version of episode 28. Because my English being not good enough for the dialogs; texts were enhanced with a serie of corrections. That's how the "alpha" became a "beta" yesterday morning: a version every translator can already work on it. With this process and this steps the episode will be translated before release time.

On my side I started working on the animated panel of episode 28. (picture on the top) It probably took a while to load in your webbrowser because I attached here a 3MB Gif animation with 60 frames. 

To do that GIF, I used Blender 3D (the 2.79b stable version) and the particle system mixed with the internal post compositing and the "glare" effects. I rendered the file with only the fireworks sphere over a black background. 

Then I could import the frame rendered with Blender in Krita; and paint-over using the animation feature. All the sequence was turned into the "screen" blending mode to keep only the light and remove the black background.  I really liked the process of masking and painting over a 3D animation with Krita. I'm not really inspired by the "animation from scratch" workflow but I like the process of animating a painted landscape this way. Also, designing a seamless perfect loop is really fun. 

I added extra animation in Krita, painted: small rocket dots, smoke, subtle highlight on the clouds and roof tops. 

That certainly something I'll try more often even if it consume a lot of time for a single panel. I imagine a lot of possible use case: flying birds, animated fog, rain, etc... 

On the downside; the file is quite heavy with its 3MB (I could optimize a version to 2MB). The only alternative were using videos. Video like Webm or Mp4 are very lightweight for a short sequence like that: less than 400KB, but I had to drop that solution "thanks" the webbrowser fighting recently all autoplay video on webpages and loops because advertisement company abused of that to polluate the web... Something that almost make me regrets the Flash technology with its *.swf and *.flv video. (but no :P).  

I'll continue finalizing each panels during the next week; check the social networks where I post (Framapiaf/Twitter) because I'll probably post more screenshots and sample than usual next week. That's the fun part when getting on the last week(s) of production: having "final" to show.

Thank you again for your presence in 2019 following this production diary.

I wish you again a Happy New Year!

Weekly news 2019-01-04: The firework animated panel

Comments

Wow! A big big thank you for the feedback. I'll test it ( I still have my old test page here: <a href="https://www.peppercarrot.com/extras/html/2019-videohtmltest/" rel="nofollow noopener" target="_blank">https://www.peppercarrot.com/extras/html/2019-videohtmltest/</a> but this one had a lot of fail , I'll update it with your feedback and maybe better encoding for videos , more fallback (maybe webm/mp4/ogg then test with the translators/contributor around ). If it works on our little group, I'll probably try a larger test on P&amp;C blog before using it in the episode. I keep your email preciously!

David Revoy

I think a GIF is mostly fine – besides filesize, as it can be played anywhere, though it also has some drawbacks in terms of CPU load compared to hardware-accelerated video. As far as I know, most browsers still autoplay video as long as its muted. You just have to add the "muted" attribute (and the "playsinline" attribute for iOS). However, autoplay can be disabled by the user globally (at least in Safari on iOS and macOS, not sure about Android or other desktop browers). You can test this with JavaScript somehow, but I don’t think it’s worth all the hassle. As long as you don’t have dozens of animated panels, it’s probably more effective to focus on content creation instead of web development. :-) If you have any questions about frontend development stuff in general, please feel free to contact me (hallo@fabianmichael.de). I’m happy to support your project (not only financially), if I can help anyhow.

Thank you for the idea. I'm studying it; I'm not sure I'll go for another buttons since a lot of reader still have no idea about the "HD" feature to turn the comic into full resolution (a button on the top). Making animation (it takes long! :D) for just a small percent of the audience knowing this button will probably demotivate me to do animations; I must think about that too. From the recent test, the gif load really quickly (first frame) and other picture follow quickly; so it shouldn't have a lot of impact. We'll see after the release :-)

David Revoy

Perhaps the "weight" of the page could be handled by having the default page load the non-animated version, with an "animation" button near the top - so those with low bandwidth can decide if they want to load the larger copy.

Tom Dickson


More Creators