Construct 3 ed Electron: avviare un gioco

Come preannunciato qualche giorno fa ho deciso di scrivere una breve guida, a mio uso e consumo, su come integrare un gioco creato con Construct 3 ed Electron. Userò come esempio KiwyStory e come guida base il tutorial Writing Your First Electron App. Cominciamo.

Come esportare un gioco Construct 3

Per poter usare un gioco C3 con Electron occorre esportarlo come HTML. Qui c’è piccolo problema: se scegliamo l’opzione predefinita (Web HTML 5) dobbiamo modificare alcune parti del codice esportato. In compenso è possibile usare l’opzione Scirra Arcade:

Ovviamente occorre scaricare il file ZIP ottenuto ed estrarre i vari file lì contenuti. Per il momento è sufficiente salvarli da qualche parte sul PC, serviranno tra poco.

Inizializzare Electron

Un’applicazione Electron non è nient’altro che una applicazione basata su NodeJS. Quindi, se non lo avessimo già fatto va prima installato NodeJS (e qui ci sono tutti i file necessari). Fatto questo cominciamo con il creare una nuova cartella. Entriamo quindi nella cartella tramite la linea di comando (io utilizzo la Windows Power Shell) e inizializziamo una nuova applicazione con il comando:

npm init

Il processo di creazione del file package.json è abbastanza banale, basta rispondere alle domande poste. Come processo principale, in questo esempio, uso index.js ma è possibile usare anche main.js: è una questione di abitudine e di gusto.

Fatto questo va modificato il file package.json aggiungendo il comando start: electron .. Il mio file, adesso, è simile a questo:

{
  "name": "prova-electron-c3",
  "version": "1.0.0",
  "description": "Versione di prova",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  }
}

“Installare” Electron

Ovviamene non basta questo per avere ElectronJS: devo ancora aggiungerlo come dipendenza del progetto. Per farlo eseguo il comando:

npm install --save-dev electron

Inserire il gioco

Per la parte teorica meglio cercare la spiegazione sul sito di Electron. Per quello che serve qui basta sapere due cose:

1. il file index,js è fondamentale, serve per avviare una pagina HTML in una sua finestra e gestisce vari compiti
2. serve un file HTML da usare come prima pagina del progetto

È quindi giunto il momento di prendere i file scaricati da Construct 3 e copiarli nella cartella del progetto di Electron. Vanno copiati dentro una nuova cartella chiamata src.

È importante mantenere questa struttura per permettere ad Electron di funzionare bene.

Per quanto riguarda il file index.js, ecco il codice che ho utilizzato:

const electron = require('electron');
const path = require('path');
const url = require('url');

const {
  app,
  BrowserWindow
} = electron;

let mainWindow;

// 426x240
app.on('ready', () => {
	mainWindow = new BrowserWindow({
		width: 426,
		height: 240,
		useContentSize: true,
		center:true,
		show: false,
		backgroundColor: '#420024',
		title: "KiwiStory (C3 & Electronjs)",
		icon: path.join(__dirname, '/src/icons/icon-256.png')
	});

	mainWindow.loadURL(url.format({
		pathname: path.join(__dirname, 'src', 'index.html'),
		protocol: 'file:',
		slashes: true
	}))


	mainWindow.once('ready-to-show', () => {
		mainWindow.show();
	})

	mainWindow.on('closed', () => {
		mainWindow = null;
	})
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Ovviamente è possibile personalizzare i vari aspetti, però per questo esempio è sufficiente.

Eseguire Electron

Dopo aver completato questi passaggi è possibile avviare il gioco digitando il comando

npm start

Ma per creare un file eseguibile? Ne parlerò domani.

Ah, dimenticavo, questi sono i link due file su cui ho lavorato:

• index.js
• package.json