spinnerbox

Best library for furniture simulator

Recommended Posts

I was just wondering which Canvas/JS framework would best fit for building furniture simulator.

I could technically build it with jQuery but I need something that will ease my work.

Here is a screenshot I made:

FurnitureConstructor.png

This is built with Flash but I need to build in JS.

WHat do you think, would Phaser be best fit here?

There is snap to objects, some spritesheet logic to simulate fake 3D and drag and drop elements to place.

But yes it is for Canvas processing. The dashboard top would be html input fields I guess, even better if I could make them inside the canvas.

 

FurnitureConstructor.png

Share this post


Link to post
Share on other sites

Why put all that UI in a canvas? I can't see any benefit but there are plenty of cons—that sort of UI is a near-perfect fit for HTML/CSS, even more so if you use some sort of UI framework to help manage UI events (building something on jQuery is fine, but jQuery is a lib not a framework so it's up to you how involved in the actual framework you want to get, personally, I prefer libs to framework but everyone is different).

As far as I can see, you don't need all of Phaser, you just want the rendering, in which case why not just use Pixi (or another renderer)? If you used Phaser I'm not sure you'd use 80% of it, leaving you with just the rendering stuff.

To be honest the rendering does not look very heavyweight so, again, I'm not sure why you think the DOM wouldn't be good enough?

If your furniture pieces accept a lot of distortions (i.e. stretch, maybe skew) then it might be beneficial to think of rendering as SVG, in which case something like d3 might be better than canvas. Tough call without knowing more of what you want to do.

You have 2 main tasks (which are common to almost all applications), gather input via the UI and render the output. Unlike games this delineation is really clear, and unlike complex applications with multiple screens, you have a quite well defined break between inputs and outputs.

Your furniture is your end point, described in data (each piece, each location etc), your UI mutates that data and your 'screen' renders it (read-only). When assessing which tech to use I'd consider both sides of that puzzle, and only pick a larger framework (like Phaser) if it adequately covers requirements of both sides of the puzzle.

Share this post


Link to post
Share on other sites

Yes I though the input fields would be in html and the app would just access their value trough html.

The main reason why I asked this question is, have somebody done similar thing before, just to use as scheme and perhaps learn if there are suitable librarires/frameworks for similar thing.

As I was going trough the specs of this app I think I can build it with Phaser. It contains 2D drawing of rectangles and arcs. Probably will need help how to draw those arcs on the sides, maybe a point to point path.

At the beginning it didn't seem to me like a game engine would fit, but Phaser has all the necessary 2D drawing tools.

And yes, input/output is separated. There will be fields where to input data and the app should generate output according to those rules. In addition some parts should be editable using drag and drop.

Share this post


Link to post
Share on other sites

My point is that Phaser just uses Pixi for those drawing operations, it then adds a load of other stuff specifically for managing game states, keyboard (other) input devices, sound, physics etc etc You don't need any of that stuff, you just need something to handle input, which the DOM does just fine (and adds loads of helpers for managing that input) and you need the renderer, which is Pixi. Why add the overhead of all the other stuff that Phaser handles that you don't need? Just use the DOM to manage input and Pixi to handle rendering.

Pixi probably isn't the best renderer though, its primary concern is not primitive canvas drawing ops. I can't offer a better primitive renderer though, not too much call for it, the canvas API is pretty clean anyway and a lot of people with those concerns go for svg and something like d3 so not too much effort in using canvas for that.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.