Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Welcome to our site

Take a moment to join our board

Sign in to follow this  
Spirited

UI Framework Discussion for Map Editor

Recommended Posts

Hi all. A few years ago, I did the research around converting maps for Conquer Online into plain text file systems that can be easily modified by a visual client editor or simple text editor. I started a command-line version of "Architect" to convert maps, but I'm a bit confused about the direction of the project. Overall, I'd really like to get more experience with client-side application development. Keeping Architect as just a command line tool doesn't really get me more experience in anything, nor is it great for the usability of the tool.

The problem is, I'm not very experienced in what frameworks are used these days for cross-platform development. I'm thinking about using Angular and Typescript with Electron. That way, I can use a nice UI Framework with WebGL for the visual editor (if I get around to that). Otherwise, just allowing the window to do text editing for now. Again, I'm not very experienced with this, so I'd really appreciate the community's feedback. Thanks!

Share this post


Link to post
Share on other sites

I honestly would not bother if you with making a text editor. I would start the projects with the intention of making a visual editor. However, if you wanted to have a text editor I would just make a VS Code plugin that can interact with the CLI and possibly do validation/linting.

18 hours ago, Spirited said:

Angular and Typescript with Electron

I have used this in the past to make enterprise applications. One plus side is that you can have very rapid development and easy deployment. That being said, I have never attempted something similar to this. I would image a visual map editor would be rather difficult in a web framework, as it does not quite fit the standard model. I maybe would investigate Qt. 

Share this post


Link to post
Share on other sites
2 hours ago, Smallxmac said:

I honestly would not bother if you with making a text editor. I would start the projects with the intention of making a visual editor. However, if you wanted to have a text editor I would just make a VS Code plugin that can interact with the CLI and possibly do validation/linting.

I have used this in the past to make enterprise applications. One plus side is that you can have very rapid development and easy deployment. That being said, I have never attempted something similar to this. I would image a visual map editor would be rather difficult in a web framework, as it does not quite fit the standard model. I maybe would investigate Qt. 

Well, the primary use wouldn't be just a text editor. It's more of "implement a way to navigate assets" and "open raw view of asset". The rest would be a system around other map editing functions and organizing that data to be easily modifiable. I considered Qt for making the editor window, but do you have experience with Qt themes? My understanding was that it uses the system theme by default. I was hoping to have an editor that functioned very similarly to a web app. Since you mentioned you have experience in Angular or React, could you tell me a bit more about why you think this would fall outside of a standard use-case model? Thanks for your feedback.

Share this post


Link to post
Share on other sites
9 hours ago, Omicron said:

It is quite do-able in web to be fair, but you would have to be able to convert TQ's 3D models into proper 3D models. Once you can overcome this hurdle there are libraries like:

https://www.babylonjs.com/ and https://threejs.org/ which can do the heavy lifting for you. 

 

Right now, I don't anticipate supporting 3D models. I'd only like to complete the puzzle and interactive layers, which should be 2D (unless I missed some key detail). In the event that I want to support 3D in the future, I do have the code for that, but I'd have to ask for permission to use it. Thanks for the library recommendations. That's exactly what I need right now, keep them coming if you can. Again, I'm excited to do something other than server stuff for a change.

Share this post


Link to post
Share on other sites
13 minutes ago, Spirited said:

Right now, I don't anticipate supporting 3D models. I'd only like to complete the puzzle and interactive layers, which should be 2D (unless I missed some key detail). In the event that I want to support 3D in the future, I do have the code for that, but I'd have to ask for permission to use it. Thanks for the library recommendations. That's exactly what I need right now, keep them coming if you can. Again, I'm excited to do something other than server stuff for a change.

Even for 2D those libraries should be fine. 

You can use html canvas and draw on it, disadvantage of this, is that it uses your CPU. Those libraries make use of WebGL thus your GPU. 

Edited by Omicron

Share this post


Link to post
Share on other sites
On 11/18/2019 at 9:25 AM, Omicron said:

Even for 2D those libraries should be fine. 

You can use html canvas and draw on it, disadvantage of this, is that it uses your CPU. Those libraries make use of WebGL thus your GPU. 

Yeah, I was trying to avoid drawing directly to an HTML canvas. I'll try WebGL. Worse case scenario is that it can't load the map properly and I port it to Qt. Really not that big of a deal. I'm not too excited about using Electron, but UI customization is so much better for web apps.

Share this post


Link to post
Share on other sites
19 minutes ago, Omicron said:

This is very far fetched.....

You can use https://github.com/chromiumembedded/cef and combine it together with QT? 

Use CEF for your web interface and communicate with your QT application that renders the visual editor

I could, perhaps. Another option is WPF. Apparently, .NET Core 3.0 has cross platform WPF support now. I'm not sure what requirements the Linux build has or what it looks like, but that might be interesting if it can support OpenGL. I'm probably less excited to use WPF than I am Electron, though. Microsoft makes me uneasy when it comes to cross platform UI.

Share this post


Link to post
Share on other sites
59 minutes ago, Spirited said:

I could, perhaps. Another option is WPF. Apparently, .NET Core 3.0 has cross platform WPF support now. I'm not sure what requirements the Linux build has or what it looks like, but that might be interesting if it can support OpenGL. I'm probably less excited to use WPF than I am Electron, though. Microsoft makes me uneasy when it comes to cross platform UI.

WPF on core 3 is currently still Windows only though. I believe they are working on making it cross platform but aren't there yet. 

  • Like 1

Share this post


Link to post
Share on other sites
7 hours ago, Omicron said:

WPF on core 3 is currently still Windows only though. I believe they are working on making it cross platform but aren't there yet. 

I see. Wow, that's not well outlined in their introduction article. Oh well, Electron it is then.

Share this post


Link to post
Share on other sites

Are you going to be doing this development on github/gitlab? I would like to see it progress and possibly help if I find the time.

Share this post


Link to post
Share on other sites
On 12/4/2019 at 4:24 PM, Smallxmac said:

Are you going to be doing this development on github/gitlab? I would like to see it progress and possibly help if I find the time.

Yeah. I'll be working on it on my GitLab and I'll post about it here once I have something to show. Right now, I'm still researching technologies. I really like the idea of Electron and React for a launcher or content focused application (using middleware to launch apps), but may be really unsuitable for a disk heavy application. I may try using Qt as I was recommended to, and just try and theme it. Again though, still looking into it.

Edited by Spirited
Meant "unsuitable"

Share this post


Link to post
Share on other sites

Sorry, I meant "unsuitable". So, I think I have two main options now. I tried using Electron and React without Webpack, and I got it working with less memory consumption than Windows 10's calculator app. It loaded UIKit 3 pretty well, but compatibility with JS/CSS frameworks was pretty rough without webpack. If I wanted to use Electron "right" with React, then I'd have to use webpack. I'd also have to make a middleware app just to pipe assets into memory from the filesystem. It's not that big of a deal, but just a hassle for an app that's going to perform worse in all categories. With Qt supporting themes pretty well (didn't know that), I might just go with Qt. I'm looking into that now with QtWidgets and QStyle. 

Share this post


Link to post
Share on other sites

@Spirited Webpack's main purpose is to compile. What you have is the additional plugins (not really called plugins but fits the purpose here) that allow you to run things like 'hot-reload' which automatically pick up changes you make in your js(x) or (s)css files. This is meant for just development purposes. Once you are done developing and ready to release, you let webpack create a production built where you don't have a lot of development plugins. What you end up with is a minified javascript file and minified css file or possibly multiple with chunks (only load what you need). 

TLDR: If you want to check the 'real' performance of your application which consists of webpack, you just have to run a production built to see. 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Terms of Use.