Activity

Silverhoft

Shipped this project!

I added Define shape support(Versions 1-3) and completely revamped my rendering pipeline. I am now able to play shape only flash animations, and the best part, we now have sound!

Silverhoft

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.

Attachment
0
Silverhoft

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…
Attachment
Attachment
2

Comments

Silverhoft
Silverhoft 4 days ago
  1. I fixed one line that completely changed everything, shapes were in the right spot, for the most part, there was still something critically wrong with shapes clipping inside of each other, and in the wrong places, and more critically, shapes where only rendered in their initial placements, we were not keeping a list of currently rendererd shapes per frame, and adding and removing, we were just adding shapes to the canvas as they were defined. No shapes where re rendered when we moved them, and no shapes would ever leave the canvas. But out of everything, the speed was the main issue, the filling and emptying of the buffers took immense amounts of time, leading to lag, and breakages in the sound. - Took around 30 mins.
  2. We fixed a large amount of these issues here, I rewrote the pipeline again, but based it on the old one, and looked at what made ruffle and lightspark so efficient. Now, instead of filling giant buffers of edges and piecing them together one at a time, we would process the edges values, and add them to the path, every time a group of them formed a closed shape. This worked, almost 60 times as fast as the old one, and was more accurate. We also reworked the entire tag system to render based on a rendering list with depth, and added support for removing shapes from the list. There was another 1 line of code that fixed the weird positioning bugs for the shapes, and suddenly all of the shapes lined up, and looked almost perfect to the animations. The issues where that the rework, kinda destroyed the video and audio, that we spent so long on, but after a bit more time, we fixed that. - 4 hours(Shorter because it was based on last rendition)
  3. Now was debugging, and this was full of little tweaks and bug fixing, but there is one bug that simply must be mentioned, because it consumed a majority of the remaining 7 hours of time. I like to call it the black box of death. It was a box that covered 3/4 of the screen, and this was for like 90 percent of all old shape only flash animations I could find, I will include screenshots of it. I thought it was a fill, that was just like that, maybe a mask for the real stage size. I did everything, and nothing would get rid of this awful box, and the worst part, the animations under it were perfect(As perfect as they could be, I will explain don’t worry.). I genuinely spent so long just adding debugging statements and testing, just to have the same result, and genuinely I was getting really upset, but fret not, because if I know anything about computers, it’s that there is always a logical solution. So I started thinking, if this isn’t something my program is creating, it must be something in the file that I am rendering wrong, that happens to be in a lot of old flash animations. So I take one of my samples, and I load up JPEXS, an SWF editor, and look. I do this to a bunch of them, and they all have one thing in common, a little outline frame, to make the corners of the window seem curved like a TV, this is some kind of template or something. The question is why is it covering 3/4 of the screen, and I realized something: The curved edge was working as intended in the uncovered part, but not in the black areas. Remember how I said that there was a rule that takes an overlapping shape and makes a hole in the underlying shape? This is how it should have been doing it:
    Black rectangle covers screen, another rectangle that is slightly smaller with rounded corners is placed on top, we use the rule, and the rounded rectangle becomes a hole punched in the black rectangle, revealing the animation behind it, making the black rectangle just a frame now. The issue was that the black rectangle that was supposed to be bigger than the small one, was only the size of the revealed corner, so it was punching a hole backwards. I was searching and searching and searching, and right towards the end of that 7 hours, I found one line, that for days I had been ignoring, and flagging as a “Inefficiency”, when in reality, with the new system, was a bug, that caused this. After literally changing a += delta, to an = end postition, it fixed the entire thing, just one small line. Suddenly I was playing full flash shape animations to near* perfect rendering. - Took the rest of the 7 hours
Silverhoft
Silverhoft 4 days ago

Now to address the *s:

We did not implement DefineShape4 or Bitstream Fillstyles yet, as I am trying to ship this, before it is too late. Also these animations are not perfect yet, because of the sprite tags, that contain all of the sprites, and their animations, so most characters are kinda buggy outlines of their sprites, but all shapes are correct. The next steps are to impliment shape4, bitstreams, then polish up the project(After shipping ofc). We will then parse sprites, images, and fonts, and hopefully after everything, start the hard work on an Action Script engine.

Before you grade storytelling, don’t just look at the length, read these please!

I am leaving some examples in the screenshot section, and will be working on the website. I should be reshipping pretty soon here.

For now, see you soon!

Silverhoft

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.

Attachment
Attachment
Attachment
Attachment
1

Comments

Silverhoft
Silverhoft 12 days ago

If you want the tree open it in a new tag, and try your best to read it, FT wouldn’t let me paste the tree here.

Silverhoft

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.

0
Silverhoft

Shipped this project!

Hours: 50.16
Cookies: 🍪 1251
Multiplier: 24.95 cookies/hr

This is a reship because of a bug that only showed one of my devlogs.

Silverhoft

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

Attachment
1

Comments

Silverhoft
Silverhoft 27 days ago

Also I did a crap ton of optimization in this update, fixed tag lag, stopped some memory leak stuff, cleaned up some redundancies, and tho its not logged, I spent days getting all of the WASM together.

Silverhoft

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.

0
Silverhoft

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…

Attachment
0
Silverhoft

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.

Attachment
0
Silverhoft

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!

Attachment
0
Silverhoft

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!

Attachment
Attachment
Attachment
Attachment
0
Silverhoft

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

Attachment
Attachment
1

Comments

Silverhoft
Silverhoft about 2 months ago

WAIT ON THAT SECOND IMAGE!! Ok ok ok, I just realized that Tag Code 9 is Background color tag! That means we are super close to having an image!!

Silverhoft

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!

Attachment
1

Comments

Silverhoft
Silverhoft about 2 months ago

And no, Tag length, and Actual Tag length are not faked, one is from the tag header, and the other is the size of the data, and seeing as there are no fatal memory overflow errors, I would call that a success :D

Silverhoft

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!

Attachment
0
Silverhoft

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!

Attachment
0
Silverhoft

Shipped this project!

Hours: 2.78
Cookies: 🍪 33
Multiplier: 11.87 cookies/hr

I have made great progress on writing my very own SWF Flash Player! I have almost completely parsed the header, and I’ve gotten passed all of the super difficult bit math involved in doing so. I learned a lot about binary to hex conversions, and how they translate to decimal numbers, as well as how files can have different Endianess, basically meaning that when you have more than one byte, they are ordered backwards. I think it’s super cool that you can take a file and read out it’s bytes, and actually build something from them, when it’s just numbers.

Silverhoft

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

Attachment
4

Comments

Silverhoft
Silverhoft about 2 months ago

Currently displays the values of the frame, these are derived from a RECT structure located in the header!

Silverhoft
Silverhoft 25 days ago

Please note that there are around 10 devlogs and not just this one :(

Silverhoft
Silverhoft 25 days ago

Also I shipped this very recently not a month ago

Silverhoft
Silverhoft 25 days ago

Please use my official page to look at devlogs when voting:
https://flavortown.hackclub.com/projects/15918