During this week I continued working on how to integrate Svelte and Construct 3. The first attempt ended in nothing. Why? Well, I wanted to make some kind of scientific calculator but my math knowledge is pretty rusty. I’ll have to get back on the books. As a result, I threw myself into plan B: a menu for Construct 3. The first test was promising:

primo test

Starting from this, I decided to continue on this path. My idea is to get something that allows me to include menus of this type in my projects without having to work too hard. Although, to be honest, the fastest way would have been to use Aekiro’s Pro UI - UI Components project. But why do I have to choose the easy way when I can climb the long and hard one?

Anyway, starting from that test I created a template in which it is possible to add functionality. I’ve set up a mechanism to change the menu template:

templates

I added the ability to decide which font to use in the menu

fonts

And obviously an interface to dynamically manage the various items

items

A couple of things are still missing. I’d like to add the ability to enable and disable the various items. And secondly, add some predefined styles.

And then obviously there is a project in C3 to show how to use the various functions. To finish it I have to define some details on the commands to use.

I think a syntax similar to menuSvelte.category.function () would be fine. At the moment I have implemented

  • items
    • pushItem (item:ItemType)
    • unshiftItem (item:ItemType)
    • addItemAtIndex (index:number, item:ItemType)
    • updateItemById (id:string, item:ItemType)
    • updateItemByLabel (label:string, item:ItemType)
    • updateItemByIndex (index:number, item:ItemType)
    • shiftItem ()
    • popItem ()
    • removeItemById (id:string)
    • removeItemByLabel (label:string)
    • removeItemByIndex (index:number)
    • loadItemsFromArray (arrayItems:ItemType[])
  • columns
    • allColumns ()
    • setColumns (array:string[])
  • title
    • setTitle (title:string)
    • reset ()
    • clear ()
  • visible
    • true ()
    • false ()
  • CSSVarStyle
    • init ()
    • changeStyle (style: string, value: string)
    • changeFontTitle (value: string)
    • changeFontItems (value: string)
    • changeFontTitleAndItems (title: string, items: string)

I still have a couple of technical issues to clarify. The first concerns the possibility or not of using sprites as icons. There are some C3 related limitations that I don’t know if it’s worth trying to get around. The second is how to publish all of this.

All you need are two files:

  • menu.js
  • menu.css

After importing them into Construct 3 it is possible to create customized menus. But I don’t know if I can start from this to create a plugin or if I can distribute the two files directly.

I’ll think about it, but not today and tomorrow. Today is (finally) my turn for the vaccine and tomorrow will be a long day of work. But I wanted to talk about this project because I’m quite proud of it. And if you like it too, I remember my page on Patreon: patreon.com/el3um4s.