While developing Curse of Wallachia, I was assaulted with a great curiosity: Would it be possible to emulate the way traditional film movies work using javascript?
The idea was pretty simple: Emulating the “film strip” as individual frames moving quickly (very quickly) on the screen, and then having an overlay area act as a shutter, synchronized with the film strip so that it showed a single frame at a time.
I decided to stream my adventure, which involved a lot of exploring the different options. You can check it out here and here
The goal was to make it so that the movie played at lower FPS than the actual game was running. I ended up doing the following calculations:
Given:
- SHUTTER_HEIGHT in Pixels.
- TARGET_FRAME_RATE in Frames per second
Then:
- MILLIS_PER_FRAME = 1000 / FRAME_RATE
- SHUTTER_SPEED = 1000 / TARGET_FRAME_RATE
- in Milliseconds per shutter cycle
- Each shutter cycle consists on it being opaque and then transparent for the same amount of time.
- FILM_SPEED_MILLIS = SHUTTER_HEIGHT / SHUTTER_SPEED
- in Pixels per millis
- How quick should the film move so that a single frame is shown for each shutter cycle.
- FILM_SPEED = FILM_SPEED_MILLIS * MILLIS_PER_FRAME
- Converted to pixels per frame.
- All sprites in the film strip move this distance on every frame.
Here are my observation after the first try:
- It’s very hard to time the sprites correctly to move at this high speed and sync their position with the shutter. This is caused in part by the varying real frame rate and the high precision required for the timing.
- Even if this was possible, having the shutter block the image 50% of the time reduces its brightness a lot (if I’m correct, they fixed this using stronger reflectors historically).
- Ultimately, I missed the fact that the persistence of vision effect wouldn’t be achievable at low frame rate speeds so in order for this to work I’d have to work with higher frame rates, complicating the emulation even more.
I decided to give up this idea. I realize I may be doing something wrong so if someone wants to take on the challenge (or elaborate on why it’s not feasible) please post in the comments!
Later on I thought on alternatives to achieve my goal, I figured the only way to go was is faking both the Phi phenomenon and the Persistence of Vision effect as follows:
- Keep the motion of the “film strip” using the same previous calculations.
- Remove the shutter altogether, instead put a “still frame” sprite on top of the film strip. (This simulates the persistence of vision effect)
- As the sprites from the film strip come close to a the “still frame” sprite, “burn” the sprite image into it. Since the film strip is moving quickly, this will simulate the phi phenomenon at lower speed (giving it the desired “retro” feel).
Here are the results:
I’m pretty happy with these results, admittedly I could have cheated and just put a blurb of pics as the film strip, since they are barely noticeable when over 8FPS… but this was fun and I think it feels more authentic 🙂
Finally, I made the still frame move around a bit when captured to simulate a bit of “jankiness” and imprecision.
If you have followed the development of Curse of Wallachia, you may have an idea what I’m going to use this for.
Slashie's Journal 