Last month, August, was quite busy. A few things overlapped, some negative (my wife’s grandmother died), others positive: after more than a year I was able to see my parents. And, finally, my wife and I managed to move home, returning to Milan. In addition to the convenience of the City, we will both have more space: we will no longer have to cast lots for who is going to use the mini table :D.

It’s September. And for me it’s like New Year: it’s time for good intentions and to think about what to do. For the past year, I have focused on experimenting. My Construct Demo repository has 45 projects, some successful, some not. My goal was to experiment, follow ideas and publish frequently and regularly. I am satisfied: I have grown and improved. For the new year I want to do something different.

I want to focus on something bigger. Instead of publishing something small every week, I want to build something complete and useful. Among my templates there are some projects that I think are interesting:

I also have the idea of returning to my One Color Idle Game, extending the template to make it a real game.

Finally I want (and must) complete the repository restyling. At the end of July I started to modify it, but everything has stopped.

As if that weren’t enough, I need to work on a completely offline system to manage issues and suggestions. I think I have to dedicate some time to this matter as well.

In short, there are a few issues to address. And, consequently, the posts I write and the things I talk about will also change.

Svelte e Construct 3

But before starting to work on future things I want to bring back my notes on how to integrate a component of Svelte with Construct 3.

First I create a new project by importing Svelte:

npx degit sveltejs/template
node scripts/setupTypeScript.js
npm install

Then I install rollup-plugin-copy:

npm i rollup-plugin-copy

I create a c3files folder to save Construct files to use when developing a program.

I create a new C3 project and save it locally in the c3files folder (save as project folder).

I change the rollup.config.js file to copy the Svelte files automatically into the folder with the Construct 3 source files:

When I run npm run build or npm run dev I copy the files I need into the C3 folder. In order to use them I must first import them into C3 (only the first time).

Inside C3 I create a main.js file and use it to import the compiled Svelte file:

From the event sheet I import the CSS file:

+ System: On start of layout
-> Browser: Load stylesheet from "svelte.css"

+ System: On loader layout complete
-> System: Go to Main

To check the Svelte code inside C3 I create a store and a function to initialize the store globally:

root
└──src
    ├──Globals
    │   └──CustomSvelte.ts
    └──Stores
        └──CustomStore.ts

CustomStore.ts:

CustomSvelte.ts:

Then I modify the App.svelte file to import the initialization function from the store:

I can test the operation by entering some test commands in C3:

+ System: Every 0.5 seconds
-> Run JavaScript: customSvelte.cs.false();

+ System: Every 1 seconds
-> Run JavaScript: customSvelte.cs.true();
-> Run JavaScript: customSvelte.print("SVELTE IS TRUE");

As usual, I uploaded the code to GitHub:

It is also possible to download the template directly on PC with:

npx degit el3um4s/memento-svelte-construct-3

Finally, this is my Patreon: