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:
