GFX

The GFX plugin is specifically designed to implement graphics quality scaling features, for games built in Construct 3.


The GFX plugin primarily functions as a means for graphics quality settings. It scales the graphics canvas of the application between performance and quality.


It also is equipped with an automatic feature to automatically scale the game application's graphics quality based on the device specifications.


You can conveniently limit the amount of quality to be scaled without having to scale the percentage manually, using the limit feature, which you can choose either a limit of High Quality or a limit of Low Quality.


The GFX plugin implements graphics quality settings for your game applications, either automatically, manually or both applied seamlessly.

PlayFab API v2.png

Introduction

Step 1.png

The Construct Master Collection has plugins that extends the editor and engine features of both Construct 3 and Construct 2.


Please click here to learn more about Game.

Features


The GFX plugin is specifically designed to implement graphics quality scaling features, for games built in Construct 3.


The GFX plugin primarily functions as a means for graphics quality settings. It scales the graphics canvas of the application between performance and quality.


It also is equipped with an automatic feature to automatically scale the game application's graphics quality based on the device specifications.


You can conveniently limit the amount of quality to be scaled without having to scale the percentage manually, using the limit feature, which you can choose either a limit of High Quality or a limit of Low Quality.


The GFX plugin implements graphics quality settings for your game applications, either automatically, manually or both applied seamlessly.


Here are some of the game features of the game plugin:

  • Graphics quality settings

  • Performance

  • Quality

  • Graphics quality percentage

  • 0 to 100 quality

  • Graphics quality styles

  • Manual

  • Automatic

  • Built-in performance optimization features.

  • Automatic graphics quality mode.

  • Methods

  • Memory

  • Manual graphics quality mode.

  • Set initial graphics quality percentage.

  • 0 to 100 quality

  • Window scale limit features

  • High quality

  • Low quality

  • Easily switch graphics optimization style.

  • Toggles to enable or disable a graphics optimization style.

  • System counterpart features

  • Set canvas size

  • Set layout scale

  • Well maintained and fully tested for production release. (Currently repairing issues.)

For more information about game project features, please click here to read the introductory lessons to Game.


Platform Integration


Here are some of the platforms that are natively supported:

  • All platforms supported by Construct 3.

  • Web

  • Mobile Web

  • Desktop

  • Android

  • iOS


Build Support


Here are some of the supported build options:

  • Web

  • Desktop

  • NW.js

  • Windows (WebView2)

  • macOS (WKWebView)

  • Mobile

  • Cordova CLI

  • Android Studio

  • Xcode

  • Volt Builder

  • Phonegap

  • Construct 3 Build Service

  • Facebook Instant Games

  • Playable Ad

  • Construct Arcade


Editor Features


Here are some of the features in the Construct editor:

  • Construct 3

 
 

How to use?

It is easy to use the GFX plugin, you will only need to follow the steps below.

1. The first step is to add the GFX object into the project.



2. The next step is to go to the Properties Bar while the GFX object is selected.



3. Set the plugin's unique properties.


4. The debug mode property toggle enables info logs in the console.


5. The style to initially implement the graphics quality optimization. Either automatic or manual. You can later change this through events, to make them work seamlessly together, for example based on the player's preferences.


6. If the GFX optimization style is on automatic, the method property will be the based specification for the automated optimization. The GFX plugin will base the quality percentage with that of the selected optimization method.


7. The Limit property option sets the minimum quality scale, either High Quality or Low Quality. It's a convenient way of limiting the minimum quality scale without having to scale the quality percentage itself.

In other words, if the limit is set to High Quality, then the minimum quality would just be High Quality, while the maximum is High Definition.

But if the limit is set to Low Quality, then the minimum quality would be instead Low Quality, while the maximum still being High Definition.


8. The Automatic - Enabled toggle property determines if the automatic optimization would be enabled, that is only the case if the style is currently on automatic.


9. The Manual - Quality option determines the quality percentage of the optimization, from 0 to 100.

  • 0 - meaning having the most of the performance but lowest in graphics quality.

  • 100 - having the most graphics quality but lowest in performance.

This is only applicable if the style is currently on manual and the manual toggle is currently enabled.


10. The Manual - Enabled toggle property determines if the manual optimization would be enabled, that is only the case if the style is currently on manual.


 
 

Documentation

There is currently nothing to show, we will add more in the future.

 

Actions, Conditions & Expressions

Actions

press to zoom

press to zoom
1/1

The following action groups:

  • Manual

  • System+

  • Automatic

  • Optimization

Manual

  • Set Quality - Set the optimization quality.

  • Percentage - The percentage from 0 to 100, to manually set the GFX quality.


  • Set Manual - Sets the manual optimization 'enabled' or 'disabled'.

  • Toggle - The manual optimization to set.


System+

  • Set Canvas Size - Sets the size of the canvas, use this instead of the System action for the optimization.

  • Width - The new width of the canvas, in pixels.

  • Height - The new height of the canvas, in pixels.


  • Set Layout Scale - Sets the scale of the entire layout, use this instead of the System action for the optimization.

  • Scale - The overall scale of the layout. 1.0 for the original size, 2.0 for double the size, etc.


Automatic

  • Refresh - Refresh the automated optimization, useful for rescanning the device specification.

  • Set Automatic - Sets the automatic optimization 'enabled' or 'disabled'.

  • Toggle - The automatic optimization to set.


Optimization

  • Set Style - Set the optimization style to either 'Automatic' or 'Manual'.

  • Style - If 'Automatic', the optimization is automatically based on the device specification while 'Manual' is developer defined.


Conditions

1/0

Expressions

press to zoom

press to zoom
1/1

The following expression groups:

  • Optimization

  • Relative

  • Base

  • Original

Optimization

  • QualityScale - Returns the quality scale (0 to 1.0) of the current optimization.

  • QualityPercentage - Returns the quality percentage (0 to 100) of the current optimization.



Relative

  • RelativeCanvasWidth - Returns the canvas width relative to the optimizations made.

  • RelativeCanvasHeight - Returns the canvas height relative to the optimizations made.

  • RelativeLayoutScale - Returns the layout scale relative to the optimizations made.

Base

  • BaseCanvasWidth - Returns the canvas width prior to the optimizations made.

  • BaseCanvasHeight - Returns the canvas height prior to the optimizations made.

  • BaseLayoutScale - Returns the layout scale prior to the optimizations made.

Original

  • OriginalCanvasWidth - Returns the original canvas width, based from the project properties.

  • OriginalCanvasHeight - Returns the original canvas height, based from the project properties.

Object   Properties

Plugin Properties

press to zoom

press to zoom
1/1

The following property groups:

  • Configuration

  • Optimization

  • Automatic

  • Manual

Configuration - The GFX's general configuration property.

  • Debug Mode - If enabled, everything will be logged in the Developer Tools : Console [F12].

  • Style - If 'Automatic', the optimization is automatically based on the device specification while 'Manual' is developer defined.

  • Automatic

  • Manual


Optimization - The configuration settings to how the GFX implements its optimizations.

  • Method - The device specification basis for the GFX's automatic style optimization.

  • Memory

  • FPS


  • Limit - The quality percentage's translated quality, from High Definition to the selected limit.

  • High Quality

  • Low Quality



Automatic - The configuration settings for the 'automatic' style of optimization.

  • Enabled - If 'enabled' and the sytle is in 'automatic', the automatic optimization will run.


Manual - The configuration settings for the 'manual' style of optimization.

  • Quality - The quality percentage from '0' to '100'. (minimum to maximum)


  • Enabled - If 'enabled' and the sytle is in 'manual', the manual quality scaling optimization will be allowed.

 
 

Showcase

The GFX is a plugin that implements graphics quality scaling features to choose between performance or quality, with both automatic and manual styles of implementation into a game application.

Initial tests were done to showcase and benchmark the performance improvement gained from using GFX plugin. It had significant performance improvements without noticeable quality loss.


Before optimization (28 fps)

​After optimization (60 fps)


The 1st image is a .gif and has been quality reduced, for hosting-related reasons. Contrary to how it looks in preview, the actual is similar in quality with the 2nd and 3rd images.

As you can see in the previews, the application went from 28 fps to 60 fps, in the initial optimizations alone. It scaled the quality from 100% to 0% without noticeable quality loss. This is a useful feature to have for high definition games where you would want to show the best graphics quality for your game on high-end powerful devices but would also want to reduce quality for performance on weaker devices. This is where the GFX plugin comes in, where it can scale the graphics quality percentage with the device specification, automatically. Although, the plugin also has an option to override it manually from the user's input, for example in the setting options.

 

Game Projects 

Instructions Kit

Construct 3 Project
Construct 3 Project

press to zoom
Construct 2 Project
Construct 2 Project

press to zoom
Construct 3 Project
Construct 3 Project

press to zoom
1/2

Specifications

  • Instructions - The game project contains instructions and steps on how to use the addon and its features.

  • Action, Conditions and Expressions - It covers the implementation of each action, condition and expression.

  • Tips and Tricks - It provides some tips and tricks on the recommended ways of using the addon.

Supporters

Only