Technology panel

[RM]

Hello.

I have been working on a technology chart panel for another project (another game actually). But I think it is usable for clash as well, so if you like it, you may use it in clash. You can see a screenshot of it on http://web.telia.com/~u22012801/tech/tech.html. The screenshot shows four technologies: irrigation, computers, morris dancing and clogshoes.

It works like this. Each technology has a rectangle which displays its name and a progress bar. The progress bar shows how much knowledge you have in the technology.

There is also arrows from to all technologies from their prerequisite technologies progress bars, at the location of the minimum progress required for starting on the tech. i.e. if the green bar has not passed the arrow yet, you can not start researching the new technology. If it has passed the arrow start, then you can begin researching. For instance, the technology morris dancing on the screenshot can not yet be researched. We have enough knowledge of Irrigation, but not yet enough knowledge of computers.

You can click on the panel and select a technology. The selected technology has a thin red border (not shown on the screenshot, but I am contemplating making it thicker to be more easily visible).

It currently only a panel you can click on to select technologies. There is no game logic behind it, but I guess you have already got that working.

You have to think about how to place the technologies for it to work. It will look strange if the technology boxes overlap each other or a technology is not positioned to the right of its prerequisite. But that is mainly a problem for the tech tree designers, not the players.

I have a few ideas for possible future developments of it, but I would like to hear some thoughts about it first. Will it be usable for clash? Any ideas for visual improvements?

RM

[Mark_Everson]

Hi RM, thanks for suggesting your approach. I like the way that it graphically indicates what the threshold level is in a precursor tech that is required for another. Lines could be made thicker or thinner to indicate strength of the contribution of tech A to tech B once tech B is active also.

My reservation about its usefulness is that we have so many techs that we would need to show only small pieces of the tech tree at one time. However showing requirements connections surrounding a single tech might indeed be valuable for players.

If for your other project you intended to have a way to automatically organize the display efficiently, that would certainly make it more valuable to us since then it could likely be close to a drop-in interface element. Otherwise it would take a bit of work to make it reasonably functional.

Thanks for the suggestion! Let's see what others on the Clash team think.

Regards,

Mark

[RM]

Hello Mark_Everson.

“Lines could be made thicker or thinner to indicate strength of the contribution of tech A to tech B once tech B is active also.”

Good idea. And easy to implement.

“My reservation about its usefulness is that we have so many techs that we would need to show only small pieces of the tech tree at one time.”

One way around this could be to have a zoom button. Or make the technology squares smaller, which only requires changing a few parameters in the constructor call. If you look at http://web.telia.com/~u22012801/tech/tech.html again, you will see that I have added another screenshot with smaller rectangles. That way you can fit a larger number of techs in one screen, but it might get cluttered if they are too many. How many will you use approximately?

“If for your other project you intended to have a way to automatically organize the display efficiently, that would certainly make it more valuable to us since then it could likely be close to a drop-in interface element. Otherwise it would take a bit of work to make it reasonably functional.”

The arrow lines are currently laid out automatically, but one will have to give the coordinates for the upper left corner of each technology individually. So you will have to specify one coordinate for each tech.

I have currently no plans for any automatic layout of the technologies in my other project. In fact, I see it as an advantage to have full control over placement of techs. That way one can organize them in such a way that technologies that belong in similar categories, but are not exactly related can be placed close to each other. For example: Conscription could have social technologies as prerequisites and Rifles could have industrial technologies as prerequisites, but both have to do with warfare in the modern time period and should therefore be placed next to each other, so one can quickly glance how far one have advanced in the war technologies during the modern age.

I might on the other hand make a flag for the panel, which when it is set (edit mode), makes it possible to drag technologies around in the panel with the mouse, which could help the tech tree designers some. When the flag is not set, the technologies stay in place. But I do not know when and if I will do this. It might not be worth spending a lot of programming time only to save a little scenario design time.

RM

[alms66]

A drag & drop editor would be nice, RM, but it would have to be disabled 'in game'. Perhaps having to versions of it would be better? One version is the "Tech Tree Editor" - your 'edit mode', and the other is like what you've got now 'game mode' and thus uneditable.

As for how many techs can fit on the pane, just make it scrollable in x & y directions, and that problem is solved.

[RM]

The flag to switch if the panel is editable or not would be in the code, not in the UI. So if you want to move the techs around you would have to write a command like:

techpanel.setEditable( true );

somewhere in the code, which will not be accessible to the players, but it would be accessible to anyone who wants to write a technology editing application.

But as I mentioned earlier, I might not make it editable. After all writing two coordinates for each tech (1 minute per tech if you are a very slow typist) is probably easier than coding an editor ( programming time estimation: from a few hours to a few days, depending on how complex you want it) and then use it to edit your techs ( a few more minutes). So time economy makes me reluctant to make it editable.

And I made a small mistake in my above post, each tech needs a coordinate pair ( x and y ) not a coordinate, as I wrote.

[LDiCesare]

Hi RM, I got a 404 on the first url you gave, but the second one works.
I like the way the lines are used., it gives the information in a very nice way.
I don't know exactly how we'd map the figures since I don't know whether we have an upper limit to the techs, but that's really a detail.
The number of techs would require zooming, but we can also show only a part of the tree, based on "Age" (I hate that but civ3 does it), category (military techs...) , advancement (only show techs that are known or can be reached in one or 2 steps)...
As for automatic layout, that's the kind of marginally useful things I like to do, so if needed I can code it (I don't think it's particularly easy or what, just the kind of thing I can't go to sleep if I haven't finished it).

[RM]

Hello LDiCesare.

Don’t worry about getting 404 on the first URL, because it refers to exactly the same page as the second URL, just that I added another picture to the webpage, and gave the address again.

“I don't know exactly how we'd map the figures since I don't know whether we have an upper limit to the techs, but that's really a detail.”

It does not matter if the techs have an upper limit, because my progress bars do not. If they exceed the progress limit, the bar will just continue to increase, even if it leaves the rectangle. But it still looks weird, so it is a good idea to set the progress bar “maximum” higher than the value the player is expected to reach. I might post another screenshot of it later.

“The number of techs would require zooming, but we can also show only a part of the tree, based on "Age" (I hate that but civ3 does it), category (military techs...) , advancement (only show techs that are known or can be reached in one or 2 steps)...”

It would be no problem of implementing any of these approaches. The class Graphics2D has a nice scale method which makes zooming a very easy addition to make.

Personally I am a fan of dividing the tree up in various categories, since it makes it easier to find the technology that you are looking for. It is also possible to add the same tech to several technology panels, so it would still be possible to show all relevant of prerequisite relations. The first tier techs would probably be prerequisite to many other techs, and also be more or less relevant in several categories, so it would make sense to have them in more than one (perhaps all) tech panels.

Another step in the development of the tech panel could be to colour code the tech squares according to tier. The other tech system that I am working on is not really using different tiers of techs, but colour coding would probably be a fun addition to make anyway, so I might do it.

“As for automatic layout, that's the kind of marginally useful things I like to do, so if needed I can code it (I don't think it's particularly easy or what, just the kind of thing I can't go to sleep if I haven't finished it).”

I wish you good luck. But I warn you, I have made no preparations for anything like this in my code. The code might be less flexible than you think, due to its simplicity. The line drawing code only takes into account the position of the two related techs, no other techs or other lines.

[LDiCesare]

I wish you good luck. But I warn you, I have made no preparations for anything like this in my code. The code might be less flexible than you think, due to its simplicity. The line drawing code only takes into account the position of the two related techs, no other techs or other lines.

The only thing complex is to guess the size of a box. The rest is mathematics, so if I can figure out a math formula that gives x/y coordinates for the techs, I think it doesn't matter much how unfriendly the code is. We'll see, maybe I'll swear and resign, but I tend to be stubborn.

[RM]

Sorry about taking so long time to respond. I have been busy the last weeks. Still am actually. I will write more later.