f2e-spec icon indicating copy to clipboard operation
f2e-spec copied to clipboard

Published 20 hours ago • verified publisher icon alibaba

Theme backgrounds and theme configuration

Open twollgam opened this issue 2 years ago • 15 comments

What does this PR do?

Shows how theme configuration can be implemented for performous.

The PR has current status of a demo implementation.

Closes Issue(s)

None, but is related to #922.

Motivation

Give the theme designer more options.

Status

Implemented themes

  • [x] Intro screen (ScreenIntro)
  • [x] ScreenSing
  • [x] ScreenSongs
  • [x] ScreenPractice
  • [x] ScreenAudioDevices
  • [x] ScreenPaths
  • [x] ScreenPlayers
  • [x] ScreenPlaylist

Implemented configurations

  • [x] background image (Intro, Practice)
  • [x] color cycling (Intro, Practice)
  • [x] color cycle duration (Intro, Practice)
  • [x] turn off logo drawing
  • [x] image with position, scale, alpha
  • [x] image scale horizontal and vertical
  • [x] image rotation (only around center of the image)
  • [x] dynamic values: float, time, min, max, clamp, add, subtract,,multiply, mix, random, sinus, squareroot, constants
  • [ ] ~~fade background image on screen leave~~ (too difficult actually, cause the old background image is needed)

Other things not part of this pr

  • more events: menu switch, ...
  • play sounds

Documentation

  • [ ] Write a complete description to the wiki

twollgam avatar Nov 04 '23 12:11 twollgam

@marwin89 started with theme configuration. Would be good if you will test it. Development should be on demand, so feel free to offer new ideas.

twollgam avatar Nov 04 '23 12:11 twollgam

@marwin89 first it would be nice if you could add a colored image for intro screen of performous+ theme. Must not be an svg anymore, so try a png image if you want.

twollgam avatar Nov 04 '23 13:11 twollgam

Download the artifacts for this pull request:

This service is provided by nightly.link. These artifacts will expire in 90 days and will not be available for download after that time.

github-actions[bot] avatar Nov 04 '23 16:11 github-actions[bot]

@marwin89 I think the pr is feature complete from my side. Test it and look if there are things missing you need for good theme designs.

twollgam avatar Nov 07 '23 13:11 twollgam

Hmmm to increase themability would it be possible to find files by filename (without extension)? This way we aren't limited to what we use in game: (findFile("mainmenu_option.svg") this will become (findFile("mainmenu_option") and it'll try to find images in a certain order: svg -> png -> jpg

Baklap4 avatar Nov 15 '23 15:11 Baklap4

first it would be nice if you could add a colored image for intro screen of performous+ theme. Must not be an svg anymore, so try a png image if you want.

Hi @twollgam, sorry for keeping you waiting. This is such a cool PR 🚀

Feedback / Testing: ✅ adding png and jpg background for intro screen via theme.json works! ✅ turn on/off colorcycling for screen via theme.json works! I'll check out more tomorrow!

marwin89 avatar Nov 17 '23 14:11 marwin89

@twollgam : how can I configure the List of prefered Random Backgrounds in theme.json? What's the naming of the variables?

theme json

marwin89 avatar Nov 17 '23 14:11 marwin89

@twollgam : how can I configure the List of prefered Random Backgrounds in theme.json? What's the naming of the variables?

 "Sing": {
        "background": {
            "image": ["blue_band.svg", "classig_bg.svg"]
        },

twollgam avatar Nov 19 '23 01:11 twollgam

Hmmm to increase themability would it be possible to find files by filename (without extension)? This way we aren't limited to what we use in game: (findFile("mainmenu_option.svg") this will become (findFile("mainmenu_option") and it'll try to find images in a certain order: svg -> png -> jpg

@Baklap4 after thinking some time about it, I disagree. With the suggested solution the theme designer can't be sure, what image is found first. A theme designer want to have the total control over displayed images. So he would never use the feature. We should implement that if it was needed and not premature.

twollgam avatar Nov 19 '23 13:11 twollgam

Hi @twollgam: 👋

  • Performous crashes when I try to test preferered random backgrounds. ⚠️
  • It happens everytime I start a song. Game just closes without any error message.
  • This is how my theme.json looks
{
	"Intro" : {
		"background": {
			"image": "introscreen_background.jpg",
			"colorcycling": false
		}
	},
    "Sing" : {
        "background": {
            "image": ["performous_plus_1.jpg","performous_plus_2.jpg","performous_plus_3.jpg","performous_plus_4.jpg"]
        }
    }
}

marwin89 avatar Nov 20 '23 16:11 marwin89

FADE/BLEND when switching screens :gradient

Hi @twollgam: there is one feature I really would love to have:🙏 a fade effect between backgrounds. I mean a blend when a player switches screens. Just 0.5 seconds blend. Right now the screens loads with a hard cut. Is that possible with less effort?

marwin89 avatar Nov 20 '23 17:11 marwin89

Hi @twollgam: 👋

  • Performous crashes when I try to test preferered random backgrounds. ⚠️
  • It happens everytime I start a song. Game just closes without any error message.

Should be fixed now. @marwin89 thanks for feedback.

twollgam avatar Nov 20 '23 18:11 twollgam

FADE/BLEND when switching screens :gradient

Hi @twollgam: there is one feature I really would love to have:🙏 a fade effect between backgrounds. I mean a blend when a player switches screens. Just 0.5 seconds blend. Right now the screens loads with a hard cut. Is that possible with less effort?

That is a really nice idea. Sadly it is difficulty to implement actually, cause after the screen switch the old background image is not available. Needs much refactoring.

twollgam avatar Nov 20 '23 19:11 twollgam

@twollgam: a) Prefered random background for sing screen: I tested it and it works! ✅ b) how can I configure random backgrounds for queque screen? How is the screen name? (maybe a documentation? Wiki) c) Blending: okay! then that's fine for now. Maybe another time 😃 d) Is it possible to to give screens an individual background music? 🎵 This would be nice (especially for score screen). Like

A)
// Custom background music.
    "backgroundMusicMain": "music/example.mp3",
    "backgroundMusicRating": "music/example2.mp3",
    "backgroundMusicPractice":"music/example3.mp3",
B)
"Intro" : {
		"background": {
			"image": "introscreen_background.jpg",
			"colorcycling": false,
                        "music":"music/example3.mp3"
		}
	},

e) could you rewrite loading/title screen? Like this? (whole screen is a loading bar + loading circle) would be awsome 🤩 performous-loading-screen-mockup performous-title-mockup

marwin89 avatar Nov 27 '23 21:11 marwin89