On this page

Share

Tags

License

This blog post is licensed Creative Common Attribution Required v4.0.

Video and image improvements in Construct

25
Official Construct Post
Ashley's avatar
Ashley
  • 27 Jun, 2024
  • 941 words
  • ~4-6 mins
  • 2,077 visits
  • 2 favourites

The latest Construct updates and browser updates have made possible some interesting new improvements for both video support and images. We wanted to highlight these in a blog post, so here's a quick run-down of what's new!

Video improvements

Here are some new improvements affecting both Construct's Video recorder object, which allows recording video and audio, as well as the Video object for video playback.

Video recorder - MP4 H.264 support

Construct's Video Recorder object can record your game, the entire screen, or input from a camera or microphone. Previously it would record WebM VP9 video in Chrome (and other Chromium-based browsers like Edge), and MP4 H.264 in Safari. This was because Chrome didn't support recording in H.264 and only supported WebM recording. As MP4 H.264 is a more widely supported format, this inconsistency was occasionally annoying and we sometimes got questions about supporting MP4 recording in Chrome.

Back in r375 we made some improvements to the Video Recorder object to allow choosing the container, video codec, and audio codec separately. We also improved the codec selection algorithm for "auto" mode. This work has now paid off as the latest Chrome 126 release now supports recording MP4 H.264 as well - and that also means Construct now defaults to recording videos as MP4 H.264 in Chrome. So now you can record widely-supported MP4 videos in both Chrome and Safari!

Video - more codec support

Construct's Video plugin makes it easy to play video files in your project. Previously it only supported WebM with VP8 or VP9, or MP4 H.264.

However technology continues to advance, and these are both quite old video formats now. In r391 (and now available in the latest stable release) we expanded the Video plugin to support more video formats, including WebM AV1 and MP4 H.265. These more modern formats allow for even better quality with even smaller file sizes. The AV1 video format is a particularly interesting one as it is a modern and highly efficient format which is also open and free to use in any way - which can't be said of H.264 and H.265 (although the patents will eventually expire on those). AV1 is now also widely supported, with the sole exception of Safari only supporting it on modern hardware such as the iPhone 15 Pro and M3 MacBook Pro. Eventually as old hardware falls out of use it will become effectively universally supported, which will make it a great choice for cross-platform video playback.

The AV1 codec logoThe AV1 codec logo

So you can now use AV1 and H.265 videos in the Video object for more efficient video files - and until support becomes universal, you can take advantage of the ability to specify both a primary format and secondary format, so you can add a widely supported format like MP4 H.264 as a fallback in case the more modern format isn't supported.

Check supported video formats

Construct provides a quick way to check which video formats are supported for playback and recording: choose Menu - About, and then click Platform information. Near the bottom you'll find information about the supported video and audio formats in the current browser.

Image improvements

A couple of years ago we added support for exporting your project images as WebP, which we blogged about at the time. By now support for WebP is universal, and it's the new default in Construct. Lossless WebP images are usually significantly smaller than PNG while preserving identical quality, and lossy WebP also supports alpha unlike JPEG - so it's now a no-brainer to use WebP. It can significantly reduce your project's download size with pretty much no downside.

Originally you could not export WebP images when using Safari, because while Safari supports reading WebP images, it lacks built-in support for encoding WebP. We've now made use of a WebAssembly WebP encoder to support exporting WebP in Safari too, making sure it's universally supported regardless of the browser.

As ever technology continues to advance and new image formats appear which are still more advanced and more efficient. AVIF is an interesting new lossy format based on still images from the AV1 video codec, which can produce amazingly small files which retain impressive quality. This blog post by Jake Archibald from 2020 is a great summary of AVIF. The AVIF format is also now widely supported, and now Construct supports it too - when exporting your project you can choose to export lossy images as AVIF, which can help reduce your project's download size even more.

Lossless on the left and AVIF compressed to just 18kb on the right. It's hard to spot the difference! Credit: Jake ArchibaldLossless on the left and AVIF compressed to just 18kb on the right. It's hard to spot the difference! Credit: Jake Archibald

AVIF supports lossless images too, but it doesn't seem better than WebP lossless, so we've only enabled AVIF support for lossy images.

Conclusion

We're committed to bringing you the latest and greatest technology in Construct, and we're always working hard to make improvements and take advantage of all the excellent additions constantly being made to the web platform. Using modern video and image formats can do a lot to reduce the download size of your project and help improve quality for lossy images too. These new formats are, or will likely become, the new standard formats for the web. With wide support for the latest formats, there is little downside and lots to be gained, with high-quality, high-efficiency formats supported consistently cross-platform. And the web is always getting better! More new formats may emerge in future, including JPEG XL or other more advanced video codecs - and rest assured once they're widely supported we'll be integrating them with Construct so you can take advantage too.

Subscribe

Get emailed when there are new posts!

  • 10 Comments

  • Order by
Want to leave a comment? Login or Register an account!

  • What about animated WebP as an alternative to sprites? A 15 frame idle animation for a player character will have most pixels be the same between most frames. (i.e. only the chest lightly moves with breathing, etc) Video codecs already use some pretty advanced magic to trim down file size for sequential frames that don't change much. Could animated sprites do the same?

      • [-] [+]
      • 1
      • Ashley's avatar
      • Ashley
      • Construct Team Founder
      • 1 points
      • (0 children)

      Construct uses spritesheets instead of animated image formats. Spritesheets also allow compression between similar parts of images on the same sheet.

  • I've just done some image tests with Gimp (it supports all these formats) with Avif and Jxl in maximum quality, real tests because I looked at the pixels with a zoom * 8 on each image, original, Avif and Jxl, conclusion:

    Jxl in first position

    Avif in 2nd position

    Both without loss (in any case no difference even with 800% zoom, same colometry too.

    Then there's Webp in position 3, also lossless.

    As for loss, I haven't really looked, it's difficult to judge because there are so many parameters to take into account, so when I judge a codec, it's on maximum quality, but it's true that they're very good.

    I don't know how they manage to make such high-performance codecs, but it's incredible.

  • I love the continued dedication to supporting new and improved formats, thanks.

    In my experience, WebP has still proven to be an issue in the past especially as Safari on older hardware still failed to load them sometimes. I don't think I've seen WebP related errors this year, so I will give them a try, the size improvements would be very cool.

    I've also been following JPEG XL for a while and I can't wait for it to get widely supported, I truly believe that open formats like JPEG XL and AVIF are great advancements for the web, and I would switch to them in a heartbeat.

    I'm sad there is no way to provide fallback formats for image data as it would make it a lot easier to move without thinking twice about it, but at the same time I'm not sure it would be beneficial to most people to export every image twice. For web game platforms like Poki where a huge amount of the traffic comes from mobile phones and older hardware, it would be great to have.

    • It would work only for online games and maybe on limited case only, depending on the game, but load from URL the images should partially solve the issue. Just need to plan ahead what type of game could support such type of organisation.

      For example, card games would be easier to handle in this way because the collision box is easier to manage compared to sprites that require irregular collision boxes. Though you could have all collision images pre-defined with proper sprite in the project, then replace all the images just before exporting, using all blank images to save space and then load everything from URL depending on the browser.

  • New here testing

  • I had to reduce the size of an image of a sky which is 6000 x 4000 pixels, size of the image in PNG = 37 MB, and I tried to put it in Avif format:

    Without loss = 19.6 MB, not bad at all, but actually useless because Jpg maximum quality, much better, 16.6 MB!

    But it gets interesting afterwards, although I haven't done any tests with JPG with reduced quality, it's too complicated to do this kind of thing.

    So I tried Avif maximum quality but with losses = 9.28 MB, nice!

    Then quality 50% and then something crazy, not even 60KB even though the quality remains very good!

    Well, it's a blue sky with clouds so there's no need for great quality, we don't care, yes but still, it's just crazy, I don't even realize actually that much it's crazy, we're talking about an image that's still 24,000,000 pixels, that's not nothing, how do they manage to achieve such a feat?!!!

    So this codec is really crazy and what kills me is that it's free!!!

    ...

    • For me something like this is worth at least €1 billion and even more lol!

      Imagine that he manages to make a data compression codec as crazy as that, ok well it's not at all the same thing yes, but hey, it would have been crazy from crazy!

  • Hope this kind of improvement makes exported project smaller in size.

    • Oh yes, but you'll need to include a parameter allowing you to choose the loss, with or without, and if so, to choose the degree of loss.