Is it possible to build a UI like this in Construct 3?

0 favourites
  • 8 posts
From the Asset Store
Casino? money? who knows? but the target is the same!
  • I'm trying to make a financial game. It requires some charting to display economic trends and data. Is something like this possible to make in Construct 3?

    Could someone guide me please?

    Thank you.

    (https://dribbble.com/shots/7281474-Finance-Mobile-Dashboard?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=Finance%20Mobile%20Dashboard&utm_medium=Social_Share)

  • the short answer is yes, it is possible.

    the longer answer is that there is a lot going on with that UI and it would be a LOT of work to make something look that good, easy to use, properly handle multi-touch, interact with a server for security and data, graph the data in various ways, etc.

    I use C3 to do a lot of database work, and have figured out many of the stumbling blocks so I can help out. But you will need to break it down into smaller tasks and build it bit by bit, and ask specific questions.

    one of the hardest parts is making it responsive - adapting to various screen sizes, and handling input because form controls hover over the canvas which means nothing can easily pop up over them. You can make you own input methods, but then you lose copy/paste/spell checking/etc.

    I haven't done much with graphs yet, but it is something I plan on doing, and have played around with various types. ROJOhound has done some examples graphing equations. Animating graphs like in the image you linked to raises the difficulty quit a bit.

  • Yes its doable. The hardest part would be interpolating the curves into Drawing Canvas.

    Depending on your point data you could probably get away with lerp(), or you might need qarp().

    Ashley been meaning to ask this, how hard would it be to get a spline drawing feature into Drawing Canvas?

    Edit: Alan beat me, but what he said.

    Also Ashley I just realized that polygons would would be a better fit to the Dribble example, but the feature would still be nice to have.

  • (https://dribbble.com/shots/7281474-Finance-Mobile-Dashboard?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=Finance%20Mobile%20Dashboard&utm_medium=Social_Share)

    it is possible yes, but performance wise, and project future expansion etc... personally i don't advise it... i mean nobody can stop you, im just saying it will be more practical to replicate that in vue.js or something similar.

    but if you want a prototype that has no backend, yea u can definitely use Construct to do it... as a interactive slideshow of sorts etc... many companies are using construct as a prototyping tools being it for games, admin dashboards, websites etc... i even used Construct 2 not 3 ... which is way faster(3 is faster... and i used the old C2 slughish boy)... to prototype a arcade sort of steam clone ... with a admin dashboard... sure was just a slide show interactive elements etc... showing what was about and how it could interact with stuff... and to my surprise even tho the project ended up being something like 500mb ... it run pretty smooth. but compared to a native vue.js you have the same power even faster... in around 10mb or less. plus the scalability on the backend... etc ... way better on vue.js type of environments..

    that is why there are game engines, and website programming languages. sure you can make websites with game engines and games with html5 and css and some javascript ... but both have downsides to each other.

    i mean if you can code ... i would code it... but if you can't code... Construct definitely will do what you need it to.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hi, this is faster to implement using Ionic, and way faster using their finance addons and templates.

  • just for fun, I made a quick mock-up with an animated chart. The lines aren't very smooth because there aren't very many data points. The Drawing Canvas object doesn't let you do filled polygons that self-intersect so I changed the filled area on the chart to something it could draw without a lot of extra work.

    https://www.rieperts.com/games/forum/ChartUI.c3p

  • Wow this is my first time posting in Construct forum and I'm very surprised by the quality and depth of the replies received. Thank you guys so much for the advices really reallyyyy appreciate it!

    So basically what I can understand is for fast prototyping use Construct 2/3. But for more advanced UI features I would have to use Ionic or Vue.js or other responsive languages.

    It's not possible to integrate these together inside Construct?

    I would have to custom build the whole app if I were to use these languages?

  • Wow this is my first time posting in Construct forum and I'm very surprised by the quality and depth of the replies received. Thank you guys so much for the advices really reallyyyy appreciate it!

    So basically what I can understand is for fast prototyping use Construct 2/3. But for more advanced UI features I would have to use Ionic or Vue.js or other responsive languages.

    It's not possible to integrate these together inside Construct?

    I would have to custom build the whole app if I were to use these languages?

    I feel like you have things backwards here... you can do everything within Construct itself, it would just take longer and you would be "custom building" it yourself, while the third party resources have basically done all the work for you.

    I'm not familiar with it myself, but Ionic looks like it gives you straight up JavaScript you can just copy and paste, since C3 allows you to include JavaScript directly in your projects. construct.net/en/make-games/manuals/construct-3/scripting/using-scripting/javascript-construct

    Edit: Just start working on it yourself, and when you get stuck on a specific problem ask again. There are many ways of charting data, depending on how much data you have, how much you want to display, and what you want it to look like. These things will depend on how you build your underlying game. You might find that you may not need certain capabilities (like does the chart really need to be animated?), or that it actually ends up simpler than you think. Basically if you want the capability to chart/graph anything and the ability to display it in any way like you would in a spreadsheet program, the prebuilt libraries could be useful. If you're aiming for something specific, making it directly might be quicker and easier than trying to integrate a third party library.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)