Construct2 Plugin Doc

Hello rockstars & welcome to the GamePix Guidelines for Construct2!
Follow some easy steps for a perfect integration of your game with our plugin.

1. Download the plugin

First: let's start by downloading the plugin.


Then: copy the ZIP content in the Construct plugin folder under the following path
C:\Program Files\Construct 2\exporters\html5\plugins

2. Open Construct & import the GamePix object

If you have extracted the ZIP content properly (as showed in step 1), you should find an object named GamePix in the list.
Please now have a look at the following screenshots to easily complete the integration.


A. Right click on the main canvas and then click Insert new object




B. Choose GamePix in the General category




C. Make sure that the GamePix object is in your Object types folder




D. Please also remember to insert the Function object if it isn't already present in your Object types folder




E. Add a new Event sheet by right clicking on your Event sheets folder




F. Rename this sheet as GamePix Event Sheet




G. Now fill in the GamePix Event Sheet fields as shown in the screenshot below




H. Then fill in the pause/resume & soundOn/Off functions following your game's logic.

E.G. If your game has a main variable to identify if the game is paused or not (isRunning = 0) you must also change this value in the actions list. Same thing for audio.
In some cases you will need to stop the background music in soundOff and play it again once soundOn is triggered.




I. After the GamePix Sheet Event is properly filled in, IMPORT IT INSIDE ALL SHEETS in your project as described below

3. Register the final events Level Complete/Game Over

When a level is completed add the action Level Complete or Game Over inside the GamePix object




Here you will finally have to pass the reached score, if present, and the level name.
If your game is an endless game you can choose to pass just the actual score and "main" for level




N.B.1: When a Level Complete or Game Over is triggered, we are going to pause for a few seconds, and then resume sound and gameplay with the functions you previous registered at point H of the Construct2 Plugin Doc. This pause each "level complete" / "game over" event is done just under test mode to allow you check the correct behavior of the registered functions. In the production environment the pause times will be fewer.


N.B.2: When you trigger the Level Complete or Game Over (please make sure to trigger it at the right moment!) you should see something like this in your console:


N.B.3: When you trigger the Level Complete or Game Over be sure that both events are fired only once each level complete / game over event. What we mean? Sometimes in construct 2, according with the logic of your game, you could fire this events under a tick function. This will cause that when the user complete a level (e.g.) the Level Complete event is launched more than once; same story for the Game Over. If so, use "trigger once while true" option provided by construct 2, that allow to trigger an event just once under a tick cycle.



4. Register GamePix.game.gameLoading and GamePix.game.gameLoaded

Once you've exported your game (remember to don't minify the output) you've to add GamePix.game.gameLoading and GamePix.game.gameLoaded functions.

Step 1: inside the file c2runtime.js generated from Construct 2, search for this string: 

if (this.areAllTexturesAndSoundsLoaded() && (this.loaderstyle !== 4 || isC2SplashDone)){
    self.go_loading_finished();
}
and replace it with this 
if (this.areAllTexturesAndSoundsLoaded() && (this.loaderstyle !== 4 || isC2SplashDone)) {
    GamePix.game.gameLoaded(function() {
        self.go_loading_finished();
    });
}




Step 2: inside the file c2runtime.js generated from Construct 2, search for this string: 

this.last_progress = this.progress;
and replace it with this 
GamePix.game.gameLoading(this.progress * 100);
this.last_progress = this.progress;




5. Add the GamePix SDK remote library inside index.html

Once you've exported your game add the GamePix JavaScript library inside the "head" section of the index.html page as shown below:

<head>
    ...
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Your Game Title</title>
    
    <script src="https://gamepix.blob.core.windows.net/gpxlib/dev/gamepix.js"></script>
    ...
</head>



6. Game Localization

Browser.QueryParam(params)

Construct 2 provide in the Browser object a property to read from the query string params from the URL. For instance, in this url: index.html?myname=rob the Browser.QueryParam('myname') will return 'rob'.


In our case, for identify the language we'll use index.html?lang=en. Follow this steps:

  • First: in one of your event sheets add an event

  • Second: choose System > Compare two values

  • Third: compare Browser.QueryParam("lang") with the possible language code:

  • Fourth: Add the action to change your texts/assets according to the chosen language.

  • Fifth: Don't forget to manage the case where the Browser.QueryParam("lang") is empty. In this case the language will be the default (en);

    • For more infos about multilanguage on Construct 2 check this link from the official site https://www.scirra.com/tutorials/444/supporting-multiple-languages