Improved development pipeline

Justin

I've recently been looking into ct.js and it is truly amazing with what it can do and was trying to determine if this was the tool to use for a project I want to work on, but I keep running into shortcomings like the fact that I can't add ESLint / Prettier or just customize the lint/build process in general. Since the editor is using Monaco which is VSCode's internal editor, I think it would just be nicer to edit the code right in VSCode instead of Ct.js so I can get all the great extensions I love already. So if this were to me a more of an action item it would be that leave Ct.js for what it is great at, the visual editing, then let VSCode handle what it is great at, code editing. Then exposing the build process more would be great so that you can import npm packages easier so that you can use it in your code.

I assume some of this can be resolved with Catmods, but others not so much. I am willing to contribute to this project to add this type of capability but would need to be pointed in the right direction.

CoMiGo

Ct.js is a tool aimed for a spectrum of users that is quite shifted from web developers' one. Game developers neither know nor probably want to use linting and fiddle with the build pipeline. (For better or worse? A debatable separate question.) Editing code outside of ct.js requires quite a lot of work for the audience it doesn't target for. You would somehow need to tell VSCode that this or that code is inside a Copy/Room class, which can be made either by making a separate API for dynamic project declaration (which is an overkill), or by making hacks that add and remove wrappers when editing code separately (which is ugly, error-prone, and hacky). There're no solutions that would suit all the kinds of users and, well, me as a guy who has to also maintain it.

My view is that generic code tools such as linters and code beautifiers should be integrated into ct.js, and be configurable with a well-rounded default settings preset. About npm, the easiest yet fully working method to make such support in ct.js is to make each ct.js project an npm as well, inside its assets' directory, and bundle the needed stuff with rollup or esbuild. Considering that the users know how to import stuff into their project. Still, it would cover JS code only.

Justin

CoMiGo Thank you for the reply. I guess I will add another note is that since all the source code gets put into a single file, makes git versioning difficult and it would be an interesting step if each template could get its own file and custom script. I want to dig more into the project to see if there is any feasible way to make this type of change that doesn't require ripping everything apart, but obviously you would know that best and so it seems like this will not be possible.

returnworld

CoMiGo I agree with Justin, it would be much more convenient when hard coding is needed, it will help for integrating different third party sdk, now you have to search for the necessary templates in the final bundle,

if you build a project with Export settings -> Code transformations - None

like that:

Questions

Сould you create a separate bandle/module for templates, rooms and other objects?
Сan i access the runtime objects? i would like to have Launch Settings, what happens when i click Launch? who is bringing up the server? from which folder?

CoMiGo

returnworld I agree with Justin, it would be much more convenient when hard coding is needed

You can use Phaser framework for a while and then return from that hell, reconsidering your decisions. Ct.js does more than simply stitching code files. Adding external code editor support is hard, the result would be unwieldy, and useless.

returnworld it will help for integrating different third party sdk, now you have to search for the necessary templates in the final bundle,

If you ever need to do something in the engine's output, you're using ct.js wrong. In case you need to do something in HTML markup, you can do it with akatemplate catmod.

returnworld Сould you create a separate bandle/module for templates, rooms and other objects?

A similar more needed feature to make bundles for textures/sounds is more needed and is planned. Bundles of scriptable objects is a more complicated matter and will be researched with a Modding API, when and if it will be implemented in ct.js. No ETAs right now for any of this.

returnworld Сan i access the runtime objects?

wdym?

returnworld who is bringing up the server? from which folder?

Ct.js hosts a local static web server from your ct.js data folder -> Exports. (The ct.js data folder points to ~/ct.js unless changed by user.) The port of the static web server is 40469 unless it is occupied already.

returnworld

CoMiGo

CoMiGo wdym?

I meant are there temporary files with the room code, templates and objects stored somewhere, before they're assembled in the export folder?

CoMiGo Ct.js hosts a local static web server

Please tell me exactly what сt.js is using inside?

Is it possible to add support for hot reloading and/or auto reloading like nodemon does?

CoMiGo

returnworld I meant are there temporary files with the room code, templates and objects stored somewhere, before they're assembled in the export folder?

No. Only the project file itself which loads into memory.

returnworld Please tell me exactly what сt.js is using inside?

serve-handler npm package. And this will change soon anyways.

returnworld Is it possible to add support for hot reloading and/or auto reloading like nodemon does?

No. Ct.js is not responsible — and must not be responsible — for changes in the generated output.

Shortly, your problems rise because you're trying to use ct.js as a code editor — it is not. Game engines are more complex than that. Learn to unlearn and use the engine the intended way.

returnworld

Thank you for your answers, can you explain some more things to me?

The pixi.js that is used inside ct.js has limited functionality? Can I use all the examples, classes and methods that I find in the pixi documentation inside the ct.js rooms and templates? such as mask containers and filters?

https://pixijs.com/8.x/guides/components/containers

https://pixijs.com/8.x/examples/masks/filter

is it possible to use pixi ecosystem libraries?

I am most interested in Community-Supported Plugins such as UI, Filters and https://pixijs.io/gif/docs/index.html

I think it would be easy to add support for working with gifs.

Can I use Template->Container as a mask? If it is possible could you give me a small example? I think it is possible because it uses PixiContainer.

CoMiGo

returnworld The pixi.js that is used inside ct.js has limited functionality?

No, it's a regular pixi.js v7

returnworld Can I use all the examples, classes and methods that I find in the pixi documentation inside the ct.js rooms and templates? such as mask containers and filters?

Yes and people did that before

returnworld Can I use Template->Container as a mask? If it is possible could you give me a small example?

You can but I'm not in the mood of writing examples atm. See pixi.js examples, they are not too complicated. You will need a PIXI.Graphics for the mask.

CoMiGo

returnworld is it possible to use pixi ecosystem libraries?

Yes, use browser builds of them.

returnworld

CoMiGo You can but I'm not in the mood of writing examples atm

😆 examplePIXI.zip

CoMiGo Yes, use browser builds of them.

I meant Community-Supported Plugins from the PIXI documentation. They usually require additional installation

npm install @pixi/ui

npm install @pixi/gif

npm install pixi-filters

and then

import '@pixi/gif';

that is, you need to manually add these modules to the build package as dependencies in package.json

I tried building these modules separately and using them as CDNs, but they don't work for various reasons as they need to reference the classes and methods of the built-in pixi.js.

I tried building my own ct.js build from the repository, but ran into cygwin related issues. I'm using Windows 10 and i think i'm tired of digging into this 🙂 after reading the post about migrating to Neutralino+Bun, i don't think there's any point in figuring it all out now, better to wait for a new build.

After you build a stable version with pixi v8 please add support for all Community-Supported Plugins. Usually they are stored in separate repositories https://github.com/pixijs/. There are much more of them here than on the pixi.js site.

Please add this plugin for working with gifs to the next minor version.

https://github.com/pixijs/gif

CoMiGo

returnworld After you build a stable version with pixi v8 please add support for all Community-Supported Plugins. Usually they are stored in separate repositories https://github.com/pixijs/.

No, I won't. This will bloat the ct.js game library or will require making custom builds of it from inside ct.js, which is… bloat to the engine itself. That I'm not too eager to maintain. For UI, ct.js has its own solution and pixi-ui is not compatible with it; instead, you can contribute with base classes for ct.js. For GIF, ct.js packages everything into atlases in PNG/WebP and this is good and the way it should be, so to support GIF you need a parser/converter on ct.IDE's side. And with other packages, ct.js has its own APIs and catmods for filters, lights and sounds. No need to repeat it in a 3rd-party dependency.

returnworld

CoMiGo No, I won't.

I thought it was a great idea to extend ct.js, like using base classes as wrappers over PIXI,

export default class PixiButton extends PIXI.UI.Button

or incapsulate these classes

export default class PixiButton extends PIXI.Container {

button: PIXI.UI.Button;

...

}

Create thus a modular template, a game object as in unity and other engines. It seems logical to me to delegate the development of such elements to PIXI, especially since there are already ready supported solutions, going this way you won't have to rework existing classes from time to time when migrating to a new version of PIXI, you can save your time and develop your own cool features.

Right now I see ct.js as a visual editor over PIXI, and that's cool, so why limit it to that? I think ct.js is more for graphic designers and hobbyists. So I think it's important to support different web formats, xml picture, gif, svg and others, it would also be cool to add the ability to work with templates using styles like CSS, I understand that they don't work inside canvas, but I've come across libraries that implement this kind of functionality, not sure if there are ready-made solutions for PIXI.

Support for add-on formats will not only allow us to use them at the development stage, but will also allow us to load them dynamically using PIXI.Assets, we can create a lot of endless cool mini-games with this.

just look at this.

https://phaser.io/examples/v3.85.0/animation/view/gif-to-animation

this is a really cool feature that beginners and designers will like.

CoMiGo

You want to add bloat to the engine and games' builds for minor benefits.
You ignore the fact that someone needs to code all that and support this or that feature for undetermined amount of time. And I don't have all the time in the world.
3rd-party dependencies are not a long-term solution and a way to be locked up with ancient tech as at one point you can't upgrade them all.
Ct.js already allows to do more and is "closer to the metal" than other HTML5 game engines. You may really need to use another framework and a regular code editor instead if ct.js is not enough for you.
Some features you propose would benefit 1% of users at best. Other features either already have a ct.js alternative or such alternatives are in progress.

So:

please keep in mind that this or that is not a simple "npm install that-cool-feature-and-it-magically-works", and not every shiny feature must be in an engine;
keep in mind that there are more important tasks on my plate, that I'm never obligated to do any of your requests, and that some of your requests must be vetoed for objective reasons;
and that if you really want something to be in the engine that is out of the current roadmap, contribute or find someone that will contribute, and don't forget that this something needs to be maintained, too.

returnworld

CoMiGo please keep in mind that this or that is not a simple "npm install that-cool-feature-and-it-magically-works"

When I was learning PIXI it worked like this, but with some minor changes to the WebPack configuration to build new file types. If I want to add Community-Supported Plugins to my projects which way is easier?

1)Make my own ct.js build (one of the reasons I chose ct.js is that it is an open sorce project and it allows me to do this).

2)Try to implement each plugin as a separate catmod module.

I don't understand the process of developing catmod modules at all. Could you make a video tutorial?

For example I want to add dev tools support

https://pixijs.io/devtools/docs/guide/installation/

As I see it, step by step:

1) build dev tools repository

2) place the files from the previous step in the include folder in the catmods module

3) write code in index.js to capture the initialization of pixiApp as a hook, injection

initDevtools({ pixiApp });

// or

initDevtools({ stage, renderer });

Am I thinking through this correctly? Or am ващее not here?

Thank you for your answers, I'm well aware that you don't have to fulfil my wishes. I just wanted to convey what improvements I would like to see in the project, and argue in their favour.

CoMiGo

returnworld I don't understand the process of developing catmod modules at all. Could you make a video tutorial?

The official ct.js docs cover everything about making catmods: https://docs.ctjs.rocks/modding-ctjs/mod-structure.html

For embedding 3rd-party modules, make sure you bundle a browser build of them and include them into a page. For example, with a script tag in the htmlbottom.html injection.

You can also use any build tools of your choice to use and bundle any modules into index.js a catmod will use. Some catmod developers, for example, used webpack in this way.