Design of scenario explorer v2

[BenRQ]

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:

• Picture, scenario title, duration, average duration, avg victory, difficulty, users rating
• languages
• author
• expansions used / expansions missing

• marker for scenario already played

  Buttons:

• Download/Play, Delete, Update

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.

[redwolf2]

Great idea. Maybe structure it in a way, that both game types can have different backgrounds.

[antontimmermans]

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:

• Scenario languages: with tickboxes for each language that the player can sellect; Multiple boxes can be selected. The effect of selecting a tick box(es) is that a scenario containing the language(s) will appear in the list.
• Sorting: Choose in which way the list is sorted. Select only one option out of:
  • A-Z;
  • Difficulty (easy to difficult);
  • Duration (short to long).
  • User rating
  • In case of sorting ends up with same primary sorting keys in the list:
    • Difficulty level sorting; then the second key to sort on would be duration, third key: A-Z
    • Duration level sorting; then the second key to sort on would be difficulty, third key: A-Z
    • A-Z sorting; then the second key to sort on would be difficulty,third key: duration (<- default sorting) Note: that I didn't include the reverse selection (z-a; long to short, .. etc). I personally think that would be overkill and too much detail. Note: An additional switch could be added to selectwriters rating/user rating: witch results in: scenario duration vs. average duration scenario difficulty v.s. average win

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:

• Top right : a button that displays the one of the following text
  • PLAY if the content is downloaded and no update is available
  • UPDATE if the scenario is downloaded , but an update is available
  • DOWNLOAD If the scenario is not downloaded yet (which would typically be seen in the bottom part of the list with the not downloaded scenarios).
• Mid right: Delete (only visible if the content is downloaded (which means only in the top part of the list) Bottom right: User feedback:
• rating
• average duration
• average win ratio

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:

• green icon: required (or adds variation) and available
• Red icon: required and NOT available
• Black icon: Not required but adds variation
• Grey icon: Not required, does not add variation

Does this help?

[BenRQ]

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.

[antontimmermans]

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

• on the main paper slip scenario information provided by scenario writer:
  • Image
  • Title
  • Teaser text
  • Information about the scenario (containing duration, difficulty and required expansions)
• on the paper slip partly hidden behind the other paper the statistics and ratings from users:
  • User/usage statistics: horizontally aligned with their counter part from the info area (duration v.s. average duration etc.)
  • and a tool area (download/play/update-button and delete button)

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

• on the main paper slip scenario information (almost all) provided by scenario writer:
  • a little smaller image area compared to Proposal 1
  • Information about the scenario required expansions, duration, difficulty
  • Review score
• on the second paper slip (you could also just use one paper slip as in proposal 3):
  • the tools
  • statistics
  • language info

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

[BenRQ]

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 :)

[redwolf2]

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.

[BenRQ]

Here is the current status of implementation :

• all features are working: sort, filter, download, update, play
• all the informations are now displayed
• delete button should be added somewhere but I don't want it too close to the play button (for those using android with big fingers)

Still some work on the graphical side:

• play/download/update button to design
• fix difficulty and rating

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 :)

[BenRQ]

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 :)

[antontimmermans]

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?

[antontimmermans]

What about burning a hole in the paper and place button text in it? Example:

Used this image for it:

[BenRQ]

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.

[antontimmermans]

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)?

[BenRQ]

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.

[BenRQ]

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:

• Burnt paper format is 3x2
• Buttons play/download/updates are 1x1 They must have a transparent background.

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.

[NPBruce]

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.

[BenRQ]

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.

[antontimmermans]

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

[redwolf2]

Maybe this is less complex to do:

1. Create texture
2. Draw left part of this image to it (clip right part):
3. Draw right part of this image to it (clip left part). (you can't see it because it's white on white background)

3. Apply texture to UIElement

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

[NPBruce]

If you have a texture with the font prerendered you don't have to do step 3.

[BenRQ]

@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.

[redwolf2]

Just in case: ratings.zip

[BenRQ]

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.

[redwolf2]

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/

[BenRQ]

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

[BenRQ]

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 ?

[redwolf2]

No problem, I can create SVGs for you based on those images.

[BenRQ]

OK cool :) Do you create those SVG manually or do you have a tool to make a vector image from a bitmap?

[redwolf2]

Manually in inkscape. That process creates smaller SVG sizes.

Here you are: https://github.com/redwolf2/valkyrie_content_creation_kit_descent/tree/master/expansion

[BenRQ]

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.

[redwolf2]

We could add a default image, where there is none.

[BenRQ]

Yes I could use the Valkyrie picture there, good idea.

[BenRQ]

Looks .... not so good. Any suggestions for another picture, or do you think this is good enough ?

[antontimmermans]

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.

[BenRQ]

Here you go : https://github.com/NPBruce/valkyrie/blob/scenario_explorer_v2/unity/Assets/Resources/Sprites/scenario_list/default_quest_picture.png

[antontimmermans]

Made one with Valkyrie logo:

And with the elder sign i found earlier in this thread:

[redwolf2]

Very nice

[BenRQ]

Very cool, you are way better than me at this! :) So ... which one should we use?

[BenRQ]

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.

[BenRQ]

[scrubbless]

Looks freaking awesome

[scrubbless]

Any plans for an image on the main screen? The plain black is a bit plain :P

[antontimmermans]

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.

1. The elder sign is already used in this overview for the dificulty score.
2. I am guessing that in Decent some scenarios also don't have a picture. The logo can also be used there, elder sign probably not.
3. I would use any excuse to show of the logo of this great app. :)

[redwolf2]

We could use Howards original elder sign instead:

https://github.com/redwolf2/valkyrie_content_creation_kit_mom/blob/master/misc/elder_sign_original.svg

[BenRQ]

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).

[BenRQ]

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.