Instructions for writing plugin (addon) in Construct 3

How to write plugin in Construct 3 using native frameworks (android / ios)?

Steps to make plugin (Addon) Construct 3:

• Create a Basic Addon with the necessary functions that the Construct 3 side will call. (Here will call the external plugin generated from the Cordova plugin)
• Config so when exporting proj to Cordova will automatically add the Cordova plugin.
• Create plugin on Cordova side to communicate with native frameworks (android & ios)
• While creating a plugin, create proj Cordova to test functions running in native (android / ios)
• After the functions work, run on proj Cordova exported from plugin Construct 3.

LIBRARY STRUCTURE TO CREATE PLUGIN IS NTN?

Android:

HOW TO OVERRIDE CONFIG: BY CODE JS FROM CONFIG.XML Add permission to mainifest file:

Turn on and off runtime permissions:

An example with the Permission READ CONTACTS is as follows:

After the user grants permisson permission, there will be a return callback & each Cordova plugin must implement it:

You can apply for a permission for 1 group permission:

Then will send a request to grant group permission as follows:

How to add the Framework to work in the codorva. (Firebase Plugin Research)

Directly through the framework to bundled library:

Or, configure the framework through custom .gradle file as follows:

See more here: link: cordova.apache.org/docs/en/latest/plugin_ref/spec.html#framework

Plugin Research in Construct3:

Attention when working with addon:

• property variable: https://www.construct.net/en/make-games/manuals/addon-sdk/reference/pluginproperty

In developer mode:

see also: https://www.construct.net/en/make-games/manuals/addon-sdk/guide/enabling-developer-mode

Open settings Click on Settings located at the top 10 times Scroll down to the bottom advance list and select enable developer. Restarting construct 3 is ok

Instructions to work with debug mode

See also: (http local: https://www.construct.net/en/make-games/manuals/addon-sdk/guide/using-developer-mode ) Purpose to test faster.

Steps to be taken:

• 1. Enable debug mode as above
• 2. Create a web local server:
  • create at localhost and the port should be from: 49152-65535
  • The local web service must have access to all addon files with CORS (Cross-Origin-Resource-Sharing) enabled for Construct3 to load it.
    • add HTTP header to server response: Access-Control-Allow-Origin: *
    • if using NginX: add_header Access-Control-Allow-Origin *;
  • Check to clear the cache on the local server to always get the latest addon.
• 3. After the config server is finished: update the content on the host according to the c3addon directory structure: see also: https://www.construct.net/en/make-games/manuals/addon-sdk/guide/c3addon-file
  • For example, with the following link: http: // localhost: 65432 / myaddon / addon.json

  • Note: Chrome may block access to localhost since it treats it as mixed content from editor.construct.net (which is on a secure origin). You can work around this by running a secure server on localhost instead, using a self-signed certificate.

• 4. Update the addon.json file to get the complete file list
  • Normally the files are extracted from .c3addon, Construct3 can recognize the files in it
  • When loading via web service, you need to reconfigure so you need to update addon.json. See here: https://www.construct.net/en/make-games/manuals/addon-sdk/guide/addon-metadata
  • file-list can be retained during release mode.
• 5. Click on add dev addon and type the local host address. http://localhost:65432/myaddon/addon.json
• 6. When you want to test the latest addon feature again, just reload construct 3

Structure of the c3addon plugin folder:

• c2runtime / – subfolder for Construct 2 runtime files. Usually only contains file: runtime.js. For construct 2.
• c3runtime / – subfolder for Construct 3 executable files for the addon.
• lang / en-US.json – delicious language to display in the addon.
• aces.json – JSON to define actions, conditions & expressions.
• addon.json – JSON data file: contains the meta data of the addon.
• icon.svg – addon icon.
• plugin.js or behavior.js – class that represents the plugin or behavior
• type.js – represents type objects in plugin / bahavior
• instance.js – class representing plugin / behavior (instance)

Note about files:

• aces.json: many important parts: https://www.construct.net/en/make-games/manuals/addon-sdk/guide/defining-aces

Note the plugin code:

• unified use . or string to access the json object. such as:

• In case of calling to external API, the function must be kept intact, be minified so we will use string to not change the function. eg

• Use this way to access the global variable:

• When construct3 crashes by the tool, use SAFEMODE to remove the tool: go to link: editor.construct.net/?safe-mode

Plugins in-depth:

• https://www.construct.net/en/make-games/manuals/addon-sdk/guide/defining-aces

NGINX

• on mac nginx is stored in: /usr/local/cellar/nginx
• command to run nginx: launchctl load /usr/local/cellar/nginx/1.19.1/homebrew.mxcl.nginx.plist
• stop nginx command: launchctl unload /usr/local/cellar/nginx/1.19.1/homebrew.mxcl.nginx.plist
• nginx runs default at: http://127.0.0.1:8080

Add configs in -> / usr / local / etc / nginx / servers / Default config -> /usr/local/etc/nginx/nginx.conf Logs will be in -> / usr / local / var / log / nginx / Default webroot is -> / usr / local / var / www / Default listen address -> http: // localhost: 8080 Disable Cache nginx: http://ubiq.co/tech-blog/disable-nginx-cache/

https://cordova.apache.org/docs/en/latest/plugin_ref/plugman.html

Create the Cordova plugin:

Create plugin

To install proj cordova, add package.json:

Tao proj cordova de test:

• 1. npm install -g cordova
• 2. cordova create hello com.example.hello HelloWorld
• 3. Add platform can: android / ios cordova platform add android
• 4. Check back: cordova platform ls
• 5. Check the security requirements to build platform day: cordova requirements
• 6. Build du an: cordova build or follow the platform cordova build android ..
• 7. test on emu: cordova emulate android or cordova run android
• 8. Add plugin: cordova plugin search camera : search out the plugin! To add & save into package.json use the cordova plugin add cordova-plugin-camera

Test on Android:

• 1. Run the android emulator: Users/quile/Library/Android/sdk/emulator/emulator -list-avds after checking the device list, use the user to run /Users/quile/Library/Android/sdk/emulator/emulator -avd Pixel_2_API_29 -netdelay none -netspeed full

Check if the plugin & project test is ok:

plugman install --platform ios --project /path/to/my/project/www --plugin /path/to/my/plugin -> error

install plugin after finish on proj cordova:

cordova plugin add cordova-plugin-camera

Most important

• Overview of the Plugin in cordova https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html
• Android Plugin: https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

Take care when I proj with cordova:

There are 2 ways to create proj:

1. Create proj with cross-platform: cordova cli … can not use plugman
2. Create a separate proj to implement SDK & debug, specializing in each platform. Use plugman cli to create proj …
   • https://cordova.apache.org/docs/en/3.5.0/guide/platforms/android/index.html

How to add params to Action in Plugin Construct 3

1. the aces.json file defines the param in the action:

2. Lang file configuration: note that display-text: is configured as below to not have error when adding param number.

3. c3runtime folder file: actions.js

How to export build from Construct 3 via Cordova project with Cordova SDK:

Configure Addon (Plugin) in Construct 3 as follows:

In the plugin.js: add file as follows

Where cordova-plugin-device is the name of the plugin that cordova support.

Below we will use the cordova-plugin-gameanalytics to demo code implement logic for action.js

Define the necessary actions according to the instructions of the cordova plugin, and in the action code will call the cordova plugin as follows:

actions.js

Functions called from external api are minified, so they must be called via: ga["function"](var1,var2)

Steps to run proj in Cordova form after exporting from Construct 3:

Once the proj is built in the form of cordova, run the command:

This command is used to initialize & download the necessary sdk cordova according to the configuration from Construct3.

Check the tools to get ready to build android / ios.

To build on each platform.

More info: https://blog.quilv.com/blog