WasFlash

I am about to ship, and this is likely my parting message. I would really like to thank Flavortown and Hackclub for actually getting me to dedicate myself to this project, I probably wouldn’t be here without them. In this final Devlog I updated my website, to make it easier to use, and got audio to work in the browser, while uploading the new binary into the site. This devlog is short, because I didn’t do much, but I really appreciate everything this community has done for me! Thank you all, and I hope to see you all elsewhere after FT hopefully.

Log 2 - Finnished Rendering shapes -
⠀
It goes without saying that 30h is insane, and that one Devlog probably won’t cover it, but I am going to try my best to describe my journey.
⠀
As of now, we currently support DefineShape, DefineShape2, and DefineShape3, not DefineShape4* yet, but I will get to that. I will work on re-porting to WASM for shapes, and cleaning up the website for easy access to voters.
⠀
The Journey:
⠀
I started off very overwhelmed, this part took 30h for a reason, and thats because I have a massive pipeline, of storing, more storing, conditional storing, then once everything is stored, I need to create lines for both linestyles, and fillstyles(Line Styling, and Shape Styling), and for fillstyles I need to create each fill with edges, one in forward order(Fillstyle 1) and one in reversed order(Fillstyle 0). I then need to apply an evenodd rule based on winding(Which is why one is reversed, and one is forward), and cut holes in shapes when there is overlap. As of now, we are handling gradients and normal fills, after this upcoming ship, I will add bitmap support for fills, and add DefineShape4. So this is a huge undertaking, and while I don’t have to calculate geometries myself(Skia does it for me), I do have to calculate the coordinates, and scale and everything else required to create an edge, and not just an edge I know, a random one, coming from the parser.
⠀
My attempts:
⠀

1. Showed good promise, but I was just reading out edges and creating fills. Fills didn’t even closely resemble expected result, and where scattered everywhere. The only really cool thing to see was that the linestyles(Which are just placed, and don’t really matter in terms of winding or placement order, only that they are in the right place) were showing outlines of things that I knew were in certain test animations. - Took around 5.5 hours to write.
   ⠀
2. Did not work at all, I was constantly getting segment faults, because I was calculating everything wrong. The SWF Spec, does not convey how to do this at all, it just explains simple things about the shapes. - Took around 4 hours.
   ⠀
3. Last attempt at my original idea, which ended up just as bad as number 2 - Took around 2 hours.
   ⠀
4. This was a big break, because I decided to look into lightspark and ruffle, and saw the idea, I did it differently, but it had the same concept of tracking the edges, then building fills with directions, not just putting edges into fills. I was storing everything into arrays, then looping through piles of edges to construct paths. This was the first kinda working result, and showed actual fills that I could recognize. I re-added linestyles here. It was very buggy to say the least, some fills were in the right spots, but most shapes simply didnt render, and fills were all over. - Took around 7 hours.
   ⠀
   Devlog continued in comment…

Dev Log #1(Not actually but the first in the new numbering system):
⠀
In this session I did a few things:

1. Parse The define shape tag(All 3 of the original, not the 4th yet)
2. Parse the Bit-Packed Shape Records field
3. Add the parser to the main processing pipeline
4. Add output to test the parser
5. Spent 2 hours fixing errors
6. Spent another hour fixing bugs.
   ⠀
   So when I say parsing, I don’t think a lot of people realize what it truly entails, so I am going to include trees of all of the data I have to sift through, and all of the edge cases I have to use.
   ⠀
   I included what the DefineShape tag looks like in the screenshots keep in mind, I have to read all of this, check if I need to store something, store it if I do, and continue. Also, every file is different, so each one needs to pass through a filter of edge cases to work properly.
   ⠀
   Believe it or not, that’s the easy part; I now have to take all of this information and turn it into something that you can see on the screen, and I have to make sure all 4 tags work, this is only the first 3, the 4th adds even more.
   ⠀
   The shape records took the longest by far, because they were Bit-Packed. Heres a quick explaination:
   ⠀
   Byte = 8 bits:
   ⠀
   00000000
   ⠀
   Example of normal packing(Easy):
   RGBA = 3 Bytes: Byte 1 = Red Byte 2 = Green Byte 3 = Blue Byte 4 = Alpha
   ⠀
   Example of bit packing(Hard):
   RGBA = 1 Byte, 2Bits per color:
   ⠀

  Green  Alpha
Red | Blue |
 |  |  |   |
 00 00 00 00

⠀
This is really difficult because sometimes you get something that just keeps reading bits until you reach a code that says its the end:
⠀
Stop reading when you reach code 010010:
⠀
011001010001000000010000001100100000100101110001010011
⠀
Was that hard? Well heres the solution:
⠀
01100101000100000001000000110010000 |010010| 111001010011
⠀
That’s right all of that stuff at the end actually is the start of the next little piece of data, so we just ignore it, because we reached our ending code. Now if you thing that was hard for you, you can look for 6 numbers, but the computer also needs to be looking for 4 bit numbers and 2 bit numbers, and like this end tag, 6 bit numbers. All of that happens in this program, and it’s not just on the define shape tag, this happens everywhere, and has happened multiple times in my current implementation. So if you find yourself asking where the 12 hours of work comes from, it’s mostly because of bit packing…
⠀
Anyways, that was a lot, so if your still here, thank you! I put a lot of time and energy into this project, and I would really appreciate it if you followed this project, so I know that someone is looking at this :D. I will be working on actually displaying this shape data next, so watch out for that.

Alrighty, you guys wanted longer devlogs, so here we go…

First off, I shipped my project!!! And I got a pretty good sum of cookies! Second, I got to work on sound, and I did it, sound is now fully functional on linux(Meaning its hopefully fine for emscripten). And my next goal is to get some animation stuff done, and basically get through the entirety of an old flash animation. After that, I guess I have to deal with action script, which definitely sucks, but will be the basis of all of this… Heres a rundown of my work in the last 6 hours

1. Trying to figure out how to get FFmpeg to activate again (I know I know I have an entire video renderer using it), because FFmpeg is way too complicated for no reason.

2. Started parsing SoundStreamHead tag, which took a minute but is pretty easy by now

3. I had to work on a brand new processing script for audio, which was quick because there are only 2 formats for this tag.

4. I had to start using miniaudio, and added a tiny little wget bit to my dependency script, so now we have audio playback.

5. I had to actually get the minaudio framework working, and implimented into a new pipeline, that I lined up with the Show Frame tags.

6. I finally got SoundStreamHead working, and playing something.

7. I started working on SoundStreamHead2, which is literally a copy with more options.

8. Added the other codec options for SoundStreamHead2.

9. I basically plugged it into the other function, and when I say my ears almost exploded, I mean holy crap.

10. I worked for 2 hours to get mp3 running, but it killed everything else, so I had to patch everything else.

11. Mono was playing stereo, which really hurt my ears.

12. There were a lot of issues with the chunk sizing, so I started using swre, to resize everything to chunks that don’t change every time.

13. And after a whole crap tone more bug fixes, it’s working.

Finnished Working on EMScripten Implimentation. Our little video player now works on both Debian and WASM. I am getting everything ready to ship!

THIS IS A BIG DAY! Countless hours of work later, and we have ourselves a (Mostly/Works with medium quality SWF movies, and can only show the video) functional SWF Movie player without playback options. This is so close to shippable, I have poured so many hours into this, and I really hope to have something out soon.

Ok, so I took some time away from the action script, and I’ve been working on video tags, so hopefully I will have a ship soon of a proof of concept, I will add more updates when I am done with the video rendering…

Worked heavily on making my own AS3 stuff, but my file was a bit broken, and I cannot find any AS3 files ig, so idk, I’ll keep working on tags. So far we’re doing ok, Its just taxing right now.

AHHHHHH!!! Ok ok ok… So, I took some time to get this together, and holy crap I did it, we are now using Lightspark’s AVM2! So the plan is to use Ruffle’s AVM1, because they have the best featured AVM1, and Lightspark has the best AVM2. Lightspark was the hard part, now we have another hard part, which is assembling the ActionScript3, and passing to processing and rendering. So this is yet another huge milestone, and sets us well on our way to making our fully functional, flash player! If anyone’s here, thank you for joining me on my journey, and I hope to see you soon!

I HAVE BIG NEWS! I was able to get the entire processing, and rendering pipeline created, and I am now rendering the background color! I also decided to use Google’s Skia, for rendering, as comparatively it is better than anything any other renderer in c++, and was the original renderer for flash anyways. This makes swf rendering instructions, near 1:1 to the renderer instructions.
Anyways this is an absolutely massive milestone, and I am hoping to start rendering actual shapes soon!

Hi guys, holy moly that took forever! But 4 hours later and we have our first tag parsed, the entire base pipeline of the processor(Stores info and assembles the content, basically the brain behind getting info ready for the rendering stage)! We are that much closer to getting to our first item we can see on the screen! If anyone, anyone at all can see this, thank you for even looking because this project means so much to me! I have never been more motivated to keep putting out something as awesome as this! Anyways, thank you all, and I’ll be back soon!

#Change Log:#
Added the very first fully parsed tag! And added the entire pipeline for each tag! And And added asynchronous processing of tags! And And And added three ands and an added to the end of this commit message :D

Hello everyone(Sorry I was napping), I decided to jump right in on working with tags, and moved my goal post a little bit. I first want to work on a few very simple tags, so I got a sample that only has a few words displayed without any movement, and only one frame, so no action script or anything crazy. This will act as a proof of concept, and perhaps with a few more tags and a slightly better example(Maybe a colorful image) I could ship this(Because completely finishing is never going to happen before ft ends D: ). We’ll will see in time what happens, I have been working pretty quickly so far, so anything can happen! If you have been watching, thank you so much, it means the world! Anyways, see you all again soon!

This was a smaller session, but a major milestone! I completed the header! Now I just have to write an entire tag parser/interpreter/parser/renderer/engine/omg please help/I’m kidding but please ask questions because I want to spread my project :D. Anyways, I’m gonna keep working on some stuff and check in a little later!

Hello Guys… If there is anyone out here 👀… I finally finished do LZMA Decompression, which is like huge because that’s like the hardest part of the header, and guess what… It worked… FIRST TRY! I know I’m crazy, but in all seriousness, this is a major milestone and means that we are very close to being done with header parsing. What this also means is that the hardest parts of this project are yet to come, tag parsing is going to be A TASK! I have to start from SWF version 1 and crawl my way up to SWF 19… Which is a bit daunting, but it will be good. I encourage you to join me on my journey, even if you don’t really understand whats going on, because we’re all developers here and who knows you might learn something cool! Anyways that’s all for this one, I can’t wait to see what happens next!

Added ZLIB support, and updated error messages. As well as some compiling fixes and a work in progress dependency script for Linux.