Closed BenRQ closed 5 years ago
Great idea. Maybe structure it in a way, that both game types can have different backgrounds.
I am not good with graphical tools but i'll try to describe it:
In one of the corners you can put an 'settings' icon. That icon gives a pop-up menu that lets you choose the following:
Further setting that affect the scenario overview list is the available expansions which are set elsewhere in the main menu. You can choose to apply this selection as an extra filter on the list to only display the scenarios that MUST have a specific expansion and scenarios that 'add variation'.
Back to the scenario overview list: List all available scenario's that match the sorting criteria downloaded or not. the list then has two parts that will be sorted according to the sorting setting in the options menu. Top half list contains all the downloaded titles (sorted). Bottom half shows all available (but not yet downloaded) titles, also sorted according to the setings.
Each 'title lable' looks roughly the same as current layout with Picute and Title. I personally would not include the authors name because it (should not) be a selection or filter criterium. Also the author name (or multiple authors names) can be one or more lines text wich makes it very difficult to keep it displayed nicely in a structured way. Below the title you can put the Duration and the difficulty.
The most right 15% of the lable is reserved for the following:
An alternative to handle the expansions in the list is to not filter on the expansions but to add icons for the expansions on the bottom of a scenario and then use color to display its status:
Does this help?
Hi @antontimmermans, all, I have not started working on sort / filtering so I won't answer that part. (It's actually better if you can give your proposal for that part of the feature here : https://github.com/NPBruce/valkyrie/issues/963, so we don't mix up topics :) )
For the scenario overview list, I've done a template picture on Gimp where I can play with all elements easily. You can find it here, if someone wants to play with it, and share some proposal. https://we.tl/t-3EaK3941Zm
I have done some basic graphical elements, but it still needs to be improved.
@antontimmermans I like your idea of using colours for the expansions. Also your choice of colours are very good.
I tried your proposal to have most things on the right, but I wasn't able to put everything there : too many things.
For the button, we can have one placement for the button, and the icon will change depending on action.
I'm thinking that adding a 'synopsis' line, would be of great value for players and authors. It will have to be a new line of text to create. Tell me what you think about it.
Regarding the placement, it is the hardest part. I don't want to make text too small, but I still want to show at least two scenarios at the same time, three would be better.
I tried different things and finished on this, but I'm not convinced at all this is the best placement. Please note all graphical elements are not final.
Based on your graphics @BenRQ I made 3 proposals. I didn't have a tool that uses the font that you use but your font is clearly better then mine. I also like the added pin to the picture. It does give the option that if you downloaded the scenario it adds the pin. If you want to delete the scenario you click on the pin to remove it. This would be a sexy solution but also a 'hidden' feature' in the pin that a random user may never find. Therefor I added the delete button in the proposals but if you think we can do without it... ignore it :).
I added in all proposals the language flags but I hope we can do without them and solve it with filtering. I find them distracting and to "technical" when I am searching for a new "adventure". But if we HAVE to show them I would propose to always show all language flags, but make the non-available languages darker or very transparent and the available languages light or non-transparent.
The grey transparent boxes and white text would obviously not be visible. I only used those to mark and name the areas.
All proposals have the same height and width and have the same aspect ration as your proposal.
Proposal 1
Advantage: Clearly distinguished information provided by the scenario writer and user generated statistics. And a bit more room for the image. Note: You could optionally exchange the "user stats area" with the "INFO area" if you want to give a little more priority to the user generated information.
Proposal 2
Advantage: if you scroll through the list of scenarios then its easier to compare (for example) difficulty or user rating since they are all listed in the same "column". Note: I think this advantage will only work if you have 3-4 scenarios visible in one screen. With 2 scenarios this effect will be less)
Proposal 3 Basically one paper slip that contains same information as in previous proposals with he difference that the scenario information and the user generated information is mixed. Also just to see the effect of it i placed the tool buttons on the other side. Note; that in this layout you can also exchange the locations of the tool buttons and the expansion icons (which may even be a better option). Advantage: same as 2. And it is keeping the scenario info and related user stats together (duration & Avg. Dur.)
With each of the proposals you could choose to have the single or the double 'paperslip' effect background. In my opinion the double paper slip helps to visually organize the information by adding a 'column' in a natural way. All the data on a single paper slip may look more scattered.
My preference: 1: Proposal 1 since type of information is nicely grouped and it is clear what is "writers" information and what is "users information". And I think (hope) that the language flags get solved by filtering (some time). 2: Proposal 3 with buttons and expansion items exchanged 3: Proposal 2
Hi @antontimmermans, thanks a lot for sharing your thoughts on this, a lot of great ideas :) I will let this topic mature a bit and get back to it in a while with actual implementation.
@redwolf2 shared this on Discord, I put here so I can find it again later:
I like the idea of using a maximum of the space on this screen.
And I know @scrubbless wants to share his thoughts on this too :)
All suppored languages don't need to be displayed on the item. Reserve a max space of 6 flags. Always show the first flag as the language set in the options, then english if available (because it is the world language). Then up to 4 more languages. If there are still more languages, show a + symbol. If the user clicks on the plus symbol a details popup will show the rest of the scenario information, including all languages. You could even reduce the the number of flags down to three.
Here is the current status of implementation :
Still some work on the graphical side:
I've selected your solution 3 @antontimmermans for design, which was quite close to my original design. Your other designs were difficult to implement because of the text size but I took some ideas.
For the buttons, I've spent some time on it, but can't work out something nice. I thought of wood button, wax seal button, basic black button ... I didn't manage to make something good. Please help if you can :)
Loading time for this screen is a bit more than 2 seconds on my PC. I'm expecting more on Android of course, but remains to be tested.
And there are still a lot of bugs to fix I'm sure :)
Looks good @BenRQ looking forward to test it.
As for button options I gues the wax seal button would match the paper contract style. I am not good a graphical designs but may have a go at it later this week.
Alternatively it could also be made to look as if it is 'burned into the paper". That maybe more easy to make. That doesn't have to look as "organic" as wax. In this case it can be 'straightforward' buttons but black-ish/brown-ish borders.
Isn't @scrubbless good with graphics?
What about burning a hole in the paper and place button text in it? Example:
Used this image for it:
I like this idea of burnt paper very much :) I'd rather use a picto rather than a text though, just to avoid the translation / size of text headache.
If you want to go for a complete burnt paper theme then maybe this could serve as scenario background:
And optionally this could serve as a border around the scenario image: This probably would require some rework. Currently this last picture has no background color but the inside is (moslty) white. If you want to use this image then let me know and what requirements you have for it.
The combination of all of the above would look like this (yes, i am on fire ;-): ### BTW I still think someone with better picture edit skills then me can make it look much better. So graphical designers , please stand up!
QUESTION: Current Valkyrie download system also allows for deletion of a scenario from the local system. In the 3 examples I tried to add this function with the 'X' button. In your latest example I see no hint of a delete button. Do you intend to keep deletion of a scenario as an option in the scenario explorer ('selection-scenario-paper' pull the pin in the image for example), or are you going to put that in a separate menu (settings menu)?
I think I'll move the delete button in the quest details screen. There is no need to have it in the quest selection screen, which is already having a lot of information.
OK it's done for delete button in quest details screen, and for the play/download/update button with burnt paper. Graphics are not amazing but it's working good and it can easily be improved by replacing images.
If you want to propose another image:
One remaining point to do : manage to display the difficulty level and rating The old solution (a white transparent rectangle on top of the characters), is not valid anymore as we have a background now, and this rectangle is clearly visible. I don't know how to do only touch the text with a mask, I'm digging through Unity doc to find a clean way to work this out.
I think you will have to render the font to a temporary image, then to pixel manipulation on the image, then draw the modified image.
Technical version is here if some of you want to test it : https://we.tl/t-ZSVyviSR23
Please note it is not synchronize with all the fix available with 2.2, so don't use it for anything else than for testing the new scenario explorer.
@NPBruce, I've been searching for this kind of solution, but didn't manage to find a tutorial or anything to do this (yet).
I was going to try to do it with mask2D and two texts on top of each other, but it may be too complex to realize for such a simple thing.
inital startup: start scenario ---> scenario list visible download scenario-> dowin loading-> back to scenario list set fliter on show only english select OK -----> Filter applied to list Select BACK ->Bug: select start scenario ---> black screen click filter click OK ---> Scenario list vissible after restarting the application the behavior repeats as mentioned above from ->bug
Maybe this is less complex to do:
Here is the SVG to it: https://github.com/redwolf2/valkyrie_content_creation_kit_mom/blob/master/expansion/base.svg
Elder sign: https://commons.wikimedia.org/wiki/File:Elder-Sign-Dearleth.png
If you have a texture with the font prerendered you don't have to do step 3.
@antontimmermans thanks for the feedback, it's fixed
If any of you see anything unexpected, or that would require an improvement please tell me.
@NPBruce @redwolf2, thanks for the advice, it's now working with an image. However I would need two pictures otherwise it looks a bit strange.
(Two pictures for rating + 2 pictures for difficulty) * 2 for Descent = 8 images.
It's better if I can create a texture based on font. I will look into that tomorrow with text mesh.
Just in case: ratings.zip
I tried to use TextMesh but didn't manage to get something working. So I used Mask2D and created a child of UIElement named UIElementCropped.
It now works like a charm :)
I've been testing Descent a bit, and see that everything is working also on that side. Except for expansions icons, as I don't think they exist. @redwolf2 @NPBruce Do you know if there is an equivalent to MoM symbols in Descent ?
If it does not exist, I may just replace symbol by a marker or a word "expansions" in red, to show that expansions are missing.
The default Gara_Scenario_Desc.ttf contains some symbols for it, but not all. I also extracted the font from the 1.7.0 assets, but it does not contain new symbols.
There is this: https://boardgamegeek.com/filepage/99055/font-containing-descent-symbols
And the official ones:
http://tools.fantasyflightgames.com/static/fonts/Gara_Scenario_Desc.ttf http://tools.fantasyflightgames.com/static/fonts/Windl.ttf
But it is probably not complete with all symbols. Maybe we could use the shortcut names under content\D2E?1111
Update: These rules contain a reference sheet of expansions. http://descent-community.org/index.php/crrg/
You can use this tool, so view installed system fonts: https://us.fontviewer.de/
For reference :
LoR = DJ04_LabyrinthOfRuin
LotW = DJ03_LairOfTheWyrm
MoB = DJ40_MistsOfBilehall
MoR = DJ21_ManorOfRavens
SoN = DJ07_ShadowOfNerekhall
TCTR = DJ44_ChainsThatRust
TT = DJ05_TheTrollfens
CKAoD = AoD
CKD1E = D1E
CKDQ = DQ
CKPromo = Promo
CKToI = ToI
CKWoD = WoD
BotW = DJ31_BondsOfTheWild
CoD = DJ27_CrownOfDestiny
CotF = DJ28_CrusadeOfTheForgotten
GoD = DJ29_GuardiansOfDeephall
OotO = DJ26-OathOfTheOutcast
SoE = DJ34_ShardsOfEverdark
SotS = DJ33_StewardsOfTheSecret
ToC = DJ32_TreatyOfChampions
VoD = DJ30-VisionsOfDawn
DJ12 = DJ12_AlricFarrow
DJ43 = DJ43_ArdusIxErebus
DJ18 = DJ18_Ariad
DJ10 = DJ10_Belthir
DJ20 = DJ20_BolGoreth
DJ14 = DJ14_ElizaFarrow
DJ41 = DJ41_Kyndrithul
DJ13 = DJ13_MerrickFarrow
DJ25 = DJ25_GarganMirklace
DJ19 = DJ19_QueenAriad
DJ16 = DJ16_Raythen
DJ22 = DJ22_RylanOlliven
DJ17 = DJ17_Serena
DJ35 = DJ35_Skarn
DJ09 = DJ09_Splig
DJ24 = DJ24_TristayneOlliven
DJ15 = DJ15_Valyndra
DJ23 = DJ23_Verminous
DJ11 = DJ11_Zachareth
DJ42 = DJ42_Zarihell
I found SVGs for the boxed expansions and hero and monsters pack: http://descent2e.wikia.com/wiki/Template:ValidateExpansionLogo I created a font based on those SVG.
But for the Conversion kit, I could not found any SVG or fonts even though symbols do exists: https://boardgamegeek.com/thread/1103567/document-defining-2nd-edition-symbols-card-setsexp Please help, if you know where I can find those.
For the rest of elements, all the DJXX are lieutenant packs, and they do not have specific symbols I think. I can just ignore those I guess, they should not be a requirement for a scenario, could they ?
No problem, I can create SVGs for you based on those images.
OK cool :) Do you create those SVG manually or do you have a tool to make a vector image from a bitmap?
Manually in inkscape. That process creates smaller SVG sizes.
Here you are: https://github.com/redwolf2/valkyrie_content_creation_kit_descent/tree/master/expansion
I've moved the expansions symbols under the quest name. Seeing the number of expansions on Descent, it's clear there was not enough space there. And new expansions are still coming for MoM so it's future proof now :)
This gives more space for the picture, and less space for the synopsis (only one line instead of 2).
I think it looks better, I hope you think so too :)
Still a lot of pictures missing in Descent quests list though, it's too bad, it does not give a good impression.
We could add a default image, where there is none.
Yes I could use the Valkyrie picture there, good idea.
Looks .... not so good. Any suggestions for another picture, or do you think this is good enough ?
The logo is OK but the shadow doesn't match and the pin doesn't make much sense like this. Maybe if you give it a solid background.
Where can I find the logo image? I'll try to play with it a little to make it look burned into wood, stamped on paper, Sepia photograph with burned edges.. or something like that if that is OK with you.
Made one with Valkyrie logo:
And with the elder sign i found earlier in this thread:
Very nice
Very cool, you are way better than me at this! :) So ... which one should we use?
If you want to try out some improvement at the other pictures, they are all here : https://github.com/NPBruce/valkyrie/tree/scenario_explorer_v2/unity/Assets/Resources/Sprites/scenario_list You can even propose completely different pictures, you just need to keep the same aspect ratio.
Looks freaking awesome
Any plans for an image on the main screen? The plain black is a bit plain :P
With the power of... powerpoint :D. For me both images would be fine but I have a slight preference for the Valkyrie logo now I see it in the end result.
We could use Howards original elder sign instead:
I don't know if we should count points, but my vote is for the Valkyrie sign. :)
Using the Valkyrie sign helps to understand that it is a replacement picture and it works for both Descent and MoM (and other if they come).
This feature is now fully implemented and merged in 2.2. Test version coming soon. Please open a new ticket if you find an issue in the test version provided. Or if you want to propose additional change in design.
This issue should be used to discuss the new design for the new "scenario explorer" screen. Root task is #962
This design includes two parts: 1) The graphical part : pictures, background, color thema, button graphics / color (all free of rights of course). 2) The placement part : where to place all the requested information
In more details : 1) My initial idea is to have a dark background, ( dark wood for example), with quests listed on scrap of old scroll of paper. Like this (please use your imagination):
2) The new design should Display all the following:
Info:
marker for scenario already played
Buttons:
Feel free to add your proposal, or suggestions if you think anything is missing. Any help on the design part, to provide image to integrate is very welcome.