Visual Game Editor for Pixi.js | Hacker News Reader

Visual Game Editor for Pixi.js

ctjs.rocks

262 pointserlend_sh26 comments

I think ct.js is a hidden gem of open source game tooling. Pixi is among the most mature and popular game engines available for 2D game development, but it doesn’t have an official editor. ct.js simply layers a whole suite of graphical interfaces on top of Pixi to make it accessible to a wider audience.

The author is a classic “would rather spend time coding than doing PR” open source dev. I hope HN can show some appreciation for their work.

It's not that much of a hidden gem, it's one of the top 2D game engines on GitHub. https://github.com/topics/2d-game-engine

I wouldn't call Pixi a game engine, it's more like a rendering library isn't it?

Yeah, pixi is just a rendering engine. A way to specify sprites and declare there positions on the canvas and have the rendering engine lay them out and update the canvas.

That’s an equally valid description of it. They have started describing it as a “creation engine” in their own copy.

Awesome work. I will try it this week!

This looks really cool - there goes the rest of my weekend testing this out! The JS game world has been missing a straight-forward editor like this... there are 3rd party tools that are very powerful (like Tiled), but having everything integrated is just... fun! And that's pretty important when you're making games!

[Edit: if the person who created ct.js is around: I just booted it up, and it looks nice and simple - but I think I'd make the default "empty" project be populated with a minimal texture and room... you should be able to launch a game and see what this software is about instantly: like Blender's "default cube".

This could be disabled for experts if it's annoying to delete things, but it would really encourage beginners and tire-kickers to dig in rather than having to figure out how get started and go through tutorials]

Ct-js and Pixi.js is great, but personally I always reach for Phaser (https://phaser.io/) and the Phaser Editor 2d IDE (https://phasereditor2d.com/) first for games. There's just more batteries included with a better ecosystem if you're making an interactive game. I would use Pixi.js if I didn't need any interaction or sounds or sprite sheets.

I switched from phaser to pixi because I wanted more control over what I was doing. Animated sprites in phaser -- at least from what I could figure out -- have to have the exact same dimensions. Some of the sprites I was using were not that clean. This is one example of what I didn't like phaser, but it was pervasive. If phaser fit your particular game assets and use-cases, then it saved a ton of time. If it didn't fit perfectly, then it was a time suck going through forum posts, documentation, blogs, etc. trying to figure out what to do.

Pixi supplies the primitives and gets out of your way.

Just curious if you experienced those issues with Phaser before or after they replaced Pixi and what's your strategy for sound and controls?

Sprite sheets work fine with pixi, at least in my very rudimentary project of around 20 different sprites, did you encounter any problem in that space?

I was mainly thinking how spritesheets tools are much more developed in PhaserEditor2d vs ctjs, but you're definitely right in that loading spritesheets works perfect in Pixi especially if you use a tool like TexturePacker.

I downloaded this and tried it out, but it seems to hide all the implementation details. What if we need to make some changes to index.html? For example, I want to make a game like Untrusted (https://alexnisnevich.github.io/untrusted/) but to do so I need to be able to create a textbox for code editing next to the game canvas.

Is this possible to do under ct.js?

The collision shape editor seems quite nice and beginner-friendly indeed, I remember a game developer friend of mine in the old days telling me how many nights he wasted fixing collision boxes. I am humbled by how little of game development I understand but this looks super well crafted.

Collision boxes make my brain hurt. I spent a week once with Sfml trying to get my collision boxes to change in size accordingly and still work properly when the player crouched. Not to mention just the hassle of trying to get the collision boxes to interact with all sides of every other object properly.

I just remember it breaking every time I added the code for the next side and having to go back and figure where I fucked up to begin with.

Then I used the godot engine and editor next time. Having simple, easily created, collision boxes that just worked was pretty mind blowing to me. That and setting up sprite animations...that had been another week of struggle with Sfml.

I’ve used a ton of game engines throughout the years. This looks better than most closed-source and paid software. Can’t wait to give it a try.

The name confuses me a little. I had always felt the foo.js branding meant “this is a library”.

I always interepeted the *.js to mean "belonging to the js / web front end ecosystem"

Would be nice if they took at look at the OSX build... doesn't seem to contain most of the example assets for the tutorials. Plus some kind of installer script would be even better.

Wow, I can't believe I haven't seen this before. This looks absolutely incredible!

Can I use this to build and deploy games for iOS or Android?

Whatever you make with this will be contained in a webpage. You can turn it into an app using a tool like Apache Cordova. Not the most efficient approach in terms of battery/memory/etc usage, but it works.

Will battery life be horrific, or just "sub par"? In other words, are users going to notice and should I refrain from doing it this way?

Recent developments in visual editing specially for 2d games is wonderful. Wondering if there's a visual editor yet which also supports multiplayer games.

Roblox would be an example of that. Only 3d, and quite cartoony looking.

How would this compare to cross-platform dev in, say, heaps.io

Reply on news.ycombinator.com