8 ms·
Hey HN, I haven't done a lot of technical postmortem blogpost-style writing so I'd welcome any feedback or tips on how to improve. Is it too long, too short, to
by rogual 4y ago
Hey HN, I haven't done a lot of technical postmortem blogpost-style writing
so I'd welcome any feedback or tips on how to improve. Is it too long, too
short, too technical, not technical enough? Boring? Interesting? Is it
enlightening or does it just come off like content marketing? I literally
have no idea how good I am at this.
- wila 4y agoKeep on writing! I enjoyed reading what you tried and why you ended up with what you did. It is fine to mention your game, I do not consider that content marketing at all.
- civilized 4y agoI don't think anyone here is going to complain about a post where you make a game work by reverse engineering Bezier splines encoded in XML by Adobe Flash. If that's not "Hacker" News, what is?
- bambax 4y agoIndeed! ;-) However I wonder why the OP didn't try to keep vector graphics and use to SVG for instance? That would allow for infinite scalability. It is mentioned that "GPUs don't like vectors" but if the game doesn't change too often it should not make a lot of difference?
- deleted 4y ago[deleted]
- rogual 4y agoI did consider it. Infinite scalability isn't required during runtime; the scene doesn't ever zoom or scale in the games, because that was always so slow in Flash, so the only real benefits would be 1) supporting higher resolutions and 2) reducing file size. For 1) I decided I'd rather just release an update with larger textures if these ones ever start to look dated. That way I get to keep the runtime code simple. Less code means fewer bugs. I don't want to spend a lot of time fielding support requests from users who hit edge cases in the rasterizer. As for not changing too often, that's true, but taking advantage of that means doing change tracking with dirty-rectangles or similar, which not only adds complexity but also feels like it would make performance less predictable. And for 2) the game as it stands now is under 50MB so I didn't feel a pressing need to make it smaller, although a tiny executable would be cool in a satisfying, demoscene kind of way.
- bambax 4y agoAh, thanks. That could maybe go into the article as well? Although it's already pretty thorough as it is.
- kmeisthax 4y agoSo, I think I need to elaborate on "GPUs don't like vectors". What the OP meant was "GPUs have literally no support for rendering anything other than pixels on triangles and getting them to efficiently draw Bezier curves and fills is an active area of research". You'd need specific hardware support for rasterizing them, and as far as I'm aware no such hardware exists. When Adobe hacked on "HTML5 support" to Animate, they did exactly the same thing the OP did. It renders every shape in the FLA to a sprite sheet and then draws it to a canvas tag. If you have knowledge over what will be drawn ahead of time, this is the most reasonable thing you can do. Even before HTML5 support, the AS3 Starling framework that let you "use the GPU" would pre-render all your vector assets to bitmap textures at runtime. And that was a framework built for Flex developers; if you were accustomed to building things on the timeline, you rendered on CPU, because that's where all of Flash's very particular rendering logic has to live. Ruffle gets around this by tesselating every shape into a GPU-friendly triangle mesh. This lets us render stuff that's technically vectors on GPU. But as you can imagine, this creates its own problems: - Flash has very specific stroke-scaling rules. If a stroke is smaller than 1px[0], it will be rounded up to 1px. This is how Flash's "hairline stroke" feature works: it actually asks for a 1/20px[1] stroke, and that gets rounded up to whatever the current scaling factor for that shape is. When your stroke is a polygon mesh, you can't vary the stroke to match Flash without retesselating, so hairline strokes on shapes that stretch don't animate correctly. - Likewise, any stretch of a stroke that changes the aspect ratio also distorts the stroke, since its baked into the tesselated mesh. There's a minigolf game that does this to hairlines and it will basically never look right in Ruffle. - Tesselated vectors lose their smoothness, so we have to sort of guess what scale the art is drawn at and add enough detail polygons for things to render correctly. Most of the time we get it right. However, there are some movies that do crazy things like store all the art at microscopic scale and blow it up. This provides a compression benefit, because it quantizes the points on the art with little visual difference on Flash Player. On Ruffle, however, the art becomes very low-poly. - All the tesselation work takes a significant amount of time. There are certain movies (notably, a lot of Homestuck) that would hang the browser because of how much ridiculously complicated vector art was being processed before the movie even loads. We had to actually limit how much art could tesselate per frame, and expose that to movies as bytesLoaded, which is why Ruffle movies have preloaders even though we don't support streaming download. There's another approach to drawing Beziers on GPU: drawing the hull of control points with a procedural texture that calculates the underlying polynomial. This is especially simple for quadratic curves (the ones with one control point), which is what all Flash timeline art[2] is. However, strokes are more complicated. You'd think we could just take the hull of the stroke and draw that as a fill, but you can't. This is because the offset of a Bezier curve is not a Bezier curve. Drawing the stroke in a pixel shader would make sense, except you still need to define a polygon mesh around your stroke with a reasonable texture coordinate system to make the math work. And the polygonal outlines of Bezier curves can get really funky; there's no obvious way to quickly say "here's a curve, now give me the polygon that encloses a 5px stroke around it". Remember how tesselation takes so long that it would hang Ruffle? [0] I'm not sure if this is virtual or device pixels. [1] Flash specifies vectors in fixed-point units called twips. That's why the zoom factor on Flash movies was locked to 2000%. [2] Flash can draw cubics - the two-control-point curves you think of when you think Bezier - but only in response to an AS3 graphics command. We haven't implemented this in Ruffle yet.
- HanClinto 4y agoI really enjoyed it! It didn't come off as content marketing at all. Well done!!
- unsafecast 4y agoI liked it a lot! It doesn't feel like marketing at all, and I think it's a good balance between technical and non-technical (though I wouldn't mind more details). Keep writing!
- pie_flavor 4y agoThis is pretty great writing, I'd love to read more of it.
- kulor 4y agoThere's a gem of a hidden narrative here for more junior developers that you don't always need to start over (which 9/10 fails) but instead be resourceful within your constraints and to be mindful of what your constraints actually are, which don't have to be new and shiny.
- darkwater 4y agoI think you nailed it at every layer, it was a very entertaining, nostalgic and instructive read. Thank you!
- bjackman 4y agoIt was great, loved the concise writing style, and it was a cool story.
- rogual 4y agoThanks! It's actually great to hear you describe it as concise, I was worried it was a bit waffly to be honest.
- mastersummoner 4y agoIt was long because there were a lot of steps to describe. But for each, the writing was concise, interesting and entertaining.
- log101 4y agoIt was a pretty insightful article, I didn't know how a flash game worked internally and how it could be reimplemented! I think it is also relevant for those migrating their projects to newer technologies, I always found this process fun(except there is a deadline) :) (Edit: I love your games and used to play a lot when I was a kid)
- Tepix 4y agoIt's interesting for sure, I'm left wondering if it was less work to make flash continue to work somehow instead of re-authoring the original games. I mean you've probably learned a lot, but you could have learned to author games using a more modern tool than flash instead and that would have been useful in the future, right?
- replwoacause 4y agoI thought it was great, and I have no interest in games or game development, but I read the whole thing top to bottom and came away thoroughly impressed. Excellent post and work!
- dontwearitout 4y agoFlash was my 2nd programming language (after VB6) back when it was still Macromedia. I had a lot of fun making really crappy minigames and learning the basics of coding. This article brought some good nostalgia and plenty of astonishment at the lengths you went to. Your writing itself is great. A lot of writing linked by HN seems too verbose because people try to sound smart. Yours is succinct while engaging. Right length, just technical enough, and interesting. I really enjoyed this, thanks for writing it! Also: > Object-orientation is not fashionable right now in gamedev circles Can you elaborate on this?
- BlueTemplar 4y agoProbably how OO teachers and mentors failed horribly (AFAIK we still don't warn new students about the pitfalls of inheritance ?), so ECS got popular as a better alternative to shitty OOP code ? https://www.gamedev.net/blogs/entry/2265481-oop-is-dead-long-live-oop/ https://www.gamedev.net/blogs/entry/2265481-oop-is-dead-long...
- stelonix 4y agoNot only that, but due to CPU caches and memory alignment issues, ECS have better performance than inheritance; also because most ECS systems ditch virtual function calls.
- cogman10 4y ago> ECS have better performance than inheritance Can have. Whether or not an ECS will actually be faster depends entirely on the type of game and access patterns of the inheritance structure. Further, it matters how you are doing inheritance (LTO can eliminate a lot of the pitfalls even if you use virtual function calls). This is nothing against ECS. I just find the current claims of performance dubious and potentially flat out wrong given modern compiler optimizations and changes in CPU caches (mainly that they got a LOT bigger).
- stelonix 4y ago
- thor_molecules 4y agoVery interesting, and frankly inspiring to see you get this creative.
- jonathanyc 4y agoGreat post! No complaints at all from me. The mix of your thought process + screenshots + examples is perfect.
- robertlagrant 4y agoJust to say: thank you for these games. I loved them when I was in my 20s.
- lsferreira42 4y agoYou are very good at this, i'll follow your site from now on hoping for more publications like that!
- sh4rks 4y agoThis was a great read. I distinctly remember playing Hapland as a kid. Armour games or Crazymonkeygames, can't remember which one it was. So this was a great nostalgia trip.
- namuol 4y agoIt was perfect! Full of low-key wisdom and fun observations. Doesn’t feel like “content marketing” in the slightest. I wish the Hapland series was coming to Mac, but I respect your decision to snub Apple.
- JoeyJoJoJr 4y agoGreat article! I also still use Flash by using a custom runtime that interprets the output of the “Export as texture atlas” feature. I was wondering if you had attempted to use this feature in order the rasterize the graphics? https://github.com/jackwlee01/animate_cc_runtime https://github.com/jackwlee01/animate_cc_runtime
- rogual 4y agoThanks! Looks like that feature was added in Animate CC, which I don't use, so I haven't tried it. Looking at the docs, it looks like something I would have at least tried. Might have saved me writing the rasterizer, though I'd still have wanted to atlas everything together into bigger atlases, and make binary animation files. One downside vs the .fla parsing approach I went with is that even if you can script away the GUI clicking, you'd still have to have Flash open while the build script runs. I quite like having an exporter that is just a CLI program you can run without Flash, though it's not a massive deal. I'd be interested to see what exactly Animate puts into the animation.json file it generates. The docs don't seem to mention it, and I couldn't find any example ones online. Your tool looks great, by the way — have you made any games with it?
- Jasper_ 4y agoWorth noting that there is a spec for the custom XML file, it's known as FXG. S starts a cubic Bezier curve in absolute coordinates: https://web.archive.org/web/20110611002637/http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification https://web.archive.org/web/20110611002637/http://opensource...
- enumjorge 4y agoI’ll add to the chorus and say that this was a wonderful post and the type of content I hope to find when I come to HN. I enjoyed how you explained certain technical concepts succinctly and using simple language. For example, as someone who never used Flash, you explained the 1000 ft view of how Flash works. When I’m looking at a new tool or framework, I try to star by understanding the mental model behind it. Yet, a simple explanation of it is often difficult to find. I was also struck by how much technical work was involved here—you made it sound easy. How long did this project take you?
- ficklepickle 4y ago> you explained the 1000 ft view of how Flash works I second that. I find the better someone knows a subject, the harder it is for them to provide this perspective, making it all the more impressive.
- Const-me 4y agoThis was awesome. Also, the idea of using text/assembly as an intermediate format of binary files is pure genius. I will probably use that occasionally for similar use cases.
- plasticeagle 4y agoYour writing is clear and concise. You don't indulge in run-on sentences, or hyperbole. It's an impressive piece of writing. You're definitely good at this.
- cpeterso 4y agoAs someone who worked on Macromedia’s and then Adobe’s Flash Player team, I thank you for sharing your experience preserving your Flash content! Did you investigate Haxe or OpenFL?
- andai 4y agoCan you comment on why Adobe let Flash die? Did it just become unprofitable compared to their other projects?
- andai 4y agoOr did Apple give them a nice deal in exchange? ;)
- Multicomp 4y agoI guess we will never know hehe
- cpeterso 4y agoAdobe couldn’t figure out how to monetize Flash, other than selling the Flash authoring tool to Flash designers, a dying breed, for a few hundred bucks or bundled in Adobe’s Creative Suite. Adobe tried selling Flash video DRM, which got undercut by Google Widevine, and selling licenses to unlock Flash opcodes for advanced 3D and C++ cross compilation, which was undercut by web technologies like WebAssembly. Also, I think Flash was more expensive to maintain than Adobe’s other design applications because the Flash Player needed constant security patches. Adobe was usually happy to milk cash cow products, such as Director and Shockwave, transferring maintenance to remote teams in India.
- andirk 4y agoIt depends on how one looks at it. For example, I didn't read it.
- djmips 4y agoI might have missed this in the article but are you sharing any of your work? I know that a lot of the work was manual but some of your tooling might be useful for anyone else who want to go this craftsman route of converting a flash game.
- throwaway2037 4y agoYour blog post was excellent. Thank you to share. Is it too long, too short, too technical, not technical enough? Boring? Interesting? Is it enlightening or does it just come off like content marketing Long, but well-organized and not ranty. You can quit after a few sections and still learn interesting things. Technical enough with enough screenshots to keep it from being "wall of text". It is a good way to share some eye candy from your games. [E]nlightening? Yes. [C]ome off like content marketing? Yes, but this is the kind that we want to read -- basically, interesting content marketing. Don't be ashamed that you need to hustle a little bit as a small software shop. Oh, and you forgot funny. This part made me laugh: Flash stores its vector graphics in XML format. You might argue that XML is a poor choice for graphics data, but you weren't a product manager at Macromedia. Behold: ...
- pmontra 4y agoIt is perfectly balanced. It can be read top to bottom in a few minutes. If you feel like to expand a part you can write a new post and link it from the original one. Some other posts are born with all the tiny details, are too long to be read on one session and I end up missing even the key points because that second session never happens.