Outstanding game performance with Construct

23
Official Construct Post
Ashley's avatar
Ashley
  • 29 Apr, 2022
  • 895 words
  • ~4-6 mins
  • 6,763 visits
  • 1 favourites

Construct is a web-based game development tool, with all its games powered by browser technology. Some people still think browsers are slow for gaming. We're here to dispel that myth! Things were certainly different 10 years ago, but we've come a long, long way.

A sprite is an image that forms the basic building-block of a game. How many sprites do you think Construct can render on-screen and still hit 60 frames per second (FPS)? 500? 1000? Maybe more? We built a test that measures exactly that. So lets find out!

The test

We've called our test PiggyPerf after our piggy mascot. We'll link to the test at the end of this blog. It starts out creating ten thousand (!) sprites. Then it repeatedly measures performance, estimates how many sprites it can get at 60 FPS, and then adjusts the sprite count. Usually it fairly quickly arrives at a final number. The test exercises both JavaScript performance for issuing draw calls for thousands of sprites, as well as the GPU performance for rendering them. It looks a bit like this.

Yep, that's a lot of piggies.

An old Android device

Let's set the bar low, so we know what the minimum we can rely on is. We dug out an old Samsung Galaxy S8, originally released in early 2017. So this model is now 5 years old. How does it fare on the test?

Performance testing is hard. Left idle, the device power management continuously adjusts performance to save battery, meaning the test doesn't always settle on a final number. However it can manage around 8000 sprites on-screen at 60 FPS. Pretty impressive for its low-power state!

If the screen is repeatedly tapped the device stays in a high-power state, and manages 21500 sprites. Even better! That is the true capability of the device when battery saving is taken out of the equation.

Some games won't even have that many sprites in total - on and off screen. Many games will also only need a few hundred sprites at a time on screen. So this is far more than enough. Even this device is capable of handling intensive Construct games.

Some other mobile devices

We also have a Nokia 7.1, a low-cost device first released late 2018, so the model is now 3 years old. That manages 12600 sprites idle. Even better than the S8's idle score!

How does a modern device fare? The Asus ZenFone 8, a high-end device released just last year, manages 71000 sprites. That is a staggering number of piggies.

How about iPhone? We have an old iPhone 7 Plus, released late 2016, now also over 5 years old. This also has power management that makes the test vary, but it can clearly manage 10000 sprites at 60 FPS. Naturally newer devices will be much faster. This is the least you can expect!

Desktop

OK, so low-end mobile devices can handle thousands of on-screen sprites no problem. Let's see what the top end can do. We ran the test on a 2021 Macbook Pro with Apple's new M1 Pro. With a fullscreen window, it can handle 88000 sprites in Chrome, and 38000 sprites in Safari. In both cases if the window is resized smaller the score goes up even more, as there is less rendering work.

Let's pull out all the stops and try it on a desktop gaming PC with an Intel Core i7-6700K and NVidia GeForce GTX 1050 Ti graphics - released 2015 and 2016 respectively, so not even the latest gear. That can handle 113000 sprites in a maximized Chrome window (2560x1440 resolution). Over one hundred thousand sprites! How many piggies does anyone really need?

Conclusion

Even old and low-end devices can comfortably handle thousands of sprites on-screen and still hit a smooth 60 FPS. Of course, off-screen sprites are not rendered, so have a lower performance impact - this is all on-screen content. This is vastly more than many games will need, and enough even for high-intensity games. There's more to game performance than on-screen sprites, but this illustrates how capable Construct games are, thanks to four things:

  1. JavaScript is now exceptionally fast - rivalling or even beating some other native technologies.
  2. WebGL is now ubiquitous for high-performance rendering on your GPU, presenting pretty piggy pixels perfectly promptly.
  3. We've worked hard to optimise Construct so it's super efficient at handling even ridiculous amounts of content.
  4. Over the years hardware gets faster and better, meaning the definition of a low-end device increases over time too.

Construct's web-based engine works and performs consistently across all platforms. That means you can count on great performance in your Construct games no matter where you publish them.

To highlight how much things have changed, way back in 2012 - a whole decade ago now - we did our first HTML5 performance comparison, and the results were mixed to say the least. At that time many devices were unable to hit 30 FPS even with a simple game. But if you thought browsers were slow, times have changed. Now the web is a high-performance gaming platform capable of great things across all devices!

We believe that the web is the gaming platform of the future. Want to get involved? Get started with Construct today.

Try the PiggyPerf test yourself! How many sprites can the device you're on right now handle?

Subscribe

Get emailed when there are new posts!

  • 28 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • This is great - curious if you can recommend any tutorials that focus on refining project structure ? trying to understand some of the project structuring fundamentals for clean and more debuggable progress.

  • Hell to the Yeah! Look at all them piggies! A steady 352,090 in Chrome Full Screen on my current PC build. While using my second display for other things right now. And, also having a ton of other applications open, atm.

    Construct is a beast! Keep up the great work Scirra! Every release gets better and better :)

    Hope you all have a fantastic weekend coming up!

    Peace,

    Colin

  • Scirra Construct 3 travelled a long way since I used it as Construct 2. I still can remember the negative reviews before the initial launch of C3, which proved very wrong.

    Congratulations, Scirra Team. You did and do an excellent job! Keep up the good work!

    Chris

  • Good job.

    It would be cool to see how many Piggies in action, as bullets, platforms and/or physics it could handle.

  • Nice. All we need now is the speed of events to catch up since we will be limited by cpu way before gpu at this point. Although I guess JavaScript was given more priority to solve that problem.

  • thats neat!

    I would be interested in a similar test closer to a game use case. Add one or two effects to a layer and have them be moved by a behavior and collide + a moving camera.

    Also what about render cells.

    • I think that is still the downside of construct. Effects keep dropping overall game performance and I don't believe they have a solution yet... Plain sprites: checked they work fine with several thousand (no effects); ticking in events, meh well.. since the release of new C3 runtime it runs slower than in C2 runtime. A real-game scenario should be the true benchmark and I've been using C3 for the las 4 years...

  • This is somewhat outstanding. I've been stress testing for a game with massive enemy waves, and I can get 60fps with 13,000 objects on a older surface pro with 3,000 of them being moving/animated enemy sprites (using bullet & sine behaviours). Not bad!

    (For reference I get 17,000 piggies on the same system)

  • Nice! I hope more and more people will start to give credit to web games and Construct. It's a well deserve achievement and we as developer deserve too to don't be considered unskilled compared to the ones that use industry standard software.

  • I got only ~45,000 piggies on my desktop (chrome, fullscreen) with Ryzen 3700x, GTX 1080ti, 3440x1440 display. Though lowering it to 1920x1080 got me 50,000.

    My crappy 6 year old (intel) laptop, however, got 150,000 piggies. Ehhh???

  • I'm getting around 80,000 piggies in Chrome on a Xiaomi Mi 9T Pro (AKA Redmi K20 Pro). Not too bad.

  • Load more comments (10 replies)