Synthesia 8.4

Archived development update discussion from past versions
Archived development updates.
User avatar
swalker133
Posts: 246
Location: @iosmusician

Post by swalker133 » 04-18-12 5:27 pm

Nicholas wrote:Yeah, if it does CoreMIDI it should work just fine. Though, I'm not sure how useful two octaves is. If they went to all the trouble to produce an actual physical device, it's a shame they didn't decide to make it bigger.
Yup, gotta love Core MIDI on iOS. ION is making a bigger one too: http://www.ionaudio.com/products/details/pianomaster
Learning, creating, recording, and performing music on the iPhone and iPad...
http://www.iosmusician.com/

Nicholas
Posts: 12397

Post by Nicholas » 04-22-12 9:35 am

So, there won't be a better time to do the major UI theme redesign than this release. I've mentioned before that the retina display in the third-gen iPad requires I rebuild all my graphics... and if I'm already rebuilding them, it's a good chance to update them. I've wanted the site and the game to match for years now.

Brace yourselves. This is a lot of change. :D How does something like this look for the title screen?

I'm still figuring out how things will need to look to make them work on every screen, but I like what is there so far. What do you guys think?

(And yes, everything is supposed to be that large. :lol: I'm keeping the iPad and desktop UIs as similar as possible to reduce the overhead of maintaining separate code paths.)

User avatar
swalker133
Posts: 246
Location: @iosmusician

Post by swalker133 » 04-22-12 11:49 am

Nicholas wrote:Brace yourselves. This is a lot of change. :D How does something like this look for the title screen?

I'm still figuring out how things will need to look to make them work on every screen, but I like what is there so far. What do you guys think?
Looks great to me...
Learning, creating, recording, and performing music on the iPhone and iPad...
http://www.iosmusician.com/

User avatar
DC64
Posts: 830
Location: Earth, U.S.

Post by DC64 » 04-22-12 1:41 pm

I think it's okay for the organization, but the colors hurt my eyes a little.
Having a custom choice of colors might be good.(?)
"And now for something completely different."

Nicholas
Posts: 12397

Post by Nicholas » 04-22-12 9:16 pm

DC64 wrote:... but the colors hurt my eyes a little.
They're the same colors used here and on the main site, aren't they? Do those hurt your eyes too?

Raymond
Posts: 528
Location: United States, Washington

Post by Raymond » 04-23-12 1:37 am

Nicholas wrote:They're the same colors used here and on the main site, aren't they? Do those hurt your eyes too?
Yes
I liked the old dark gray site. :cry:

The layout looks good. I still don't understand why you couldn't make the layout more modular that way the sizes could change.
The title screen it doesn't matter. But the song list/adv track it was nice being able to see more. And have the rating/difficulty in one place.

It does look like it will look good!(on the iPad) :D

Nicholas
Posts: 12397

Post by Nicholas » 04-23-12 2:02 am

Raymond wrote:The layout looks good. I still don't understand why you couldn't make the layout more modular that way the sizes could change.
Lots of things are changing. 0.8.2 and 0.8.3 were individually huge releases. They will be tiny compared to this one for as much as is changing behind the scenes. The answer to your concern is that now I'll be able to. If this goes the way I think it will, we'll be 90% of the way toward being able to resize the window on the fly!

So, re-skinning makes sense because I have to rebuild all my graphics anyway. No better time for it.

What I realized in the last day or so: reworking my window layout code makes sense because now I have to rebuild every single screen(!) for the iPad. So there is also no better time for that. And doing it now when so much needs to change will probably end up a time-savings because the old method is painfully slow (and has been for six years now).

Lemo is going to be super excited when he see's how this is going to change things. Talk about better modding support...

Raymond
Posts: 528
Location: United States, Washington

Post by Raymond » 04-23-12 2:19 am

YAY! :D
Then I could make a dark skin for it. :lol:


But wait... Now im getting excited about the iPad release. ;)

Nicholas
Posts: 12397

Post by Nicholas » 04-23-12 2:22 am

There are a variety of other non-iPad things coming too that I haven't announced yet. I am getting totally stressed out because of how much work all of this is going to be, but it is very exciting to see so many of the old requests finally coming true. :D

Raymond
Posts: 528
Location: United States, Washington

Post by Raymond » 04-23-12 2:28 am

At first it sounded like you where just going to mess it up for the desktop, to make it all fit on the iPad. :roll:
But it's all good, now that I know it's not true. :lol:
Nicholas wrote:I am getting totally stressed out because of how much work all of this is going to be,
I would be more than willing to help, Although I don't have much c/c++ experience. (just vb/vb.net some c# and java)

Lemo
Posts: 313

Post by Lemo » 04-23-12 8:24 am

I think everyone agrees that a white background is neat and classy for a home page,
but IMO you should keep the default skin black and comfy for the game
So, you're gonna do vector graphics or something?
Stuff & experiments for Synthesia: Gramp v0.2SkinboxFireSynthVideoWebradio

Nicholas
Posts: 12397

Post by Nicholas » 04-23-12 10:45 am

Lemo wrote:but IMO you should keep the default skin black and comfy for the game
The play screen will be mostly unchanged. Same dark gray background.

The bulk of the changes will be to the menu screens... which are starting to get more indistinguishable from web pages anyway.
Lemo wrote:So, you're gonna do vector graphics or something?
Not quite. We'll see if it works and how much will be extensible, but very shortly you should have control over every single color and the placement, properties, and style of nearly every control on every screen. ;)

maccer
Posts: 222
Location: Sweden

Post by maccer » 04-23-12 5:32 pm

Nicholas wrote:How does something like this look for the title screen?
1. The Play button looks too much like a ordinary button, even though it is the most important one. I would have it in some other color (green?) and with a "play" triangle/forward arrow on it.
2. The "visit site" links: I'm not sure the forward arrow is a good symbol; i would expect it to somehow progress forward to the next screen in the app itself. A curved "redo" arrow, or a different icon altogether, would be better.
3. The exit button might be better if it had another color (red?).
Songs learned using Synthesia:
CT: Wind Scene, The Trial | FF7: Prelude | SMB: Overworld, Underwater | Tetris: Theme A | Zelda: Lost Woods | Other: Für Elise

Nicholas
Posts: 12397

Post by Nicholas » 04-24-12 2:28 am

maccer wrote:1. The Play button looks too much like a ordinary button, even though it is the most important one. I would have it in some other color (green?) and with a "play" triangle/forward arrow on it.
2. The "visit site" links: I'm not sure the forward arrow is a good symbol; i would expect it to somehow progress forward to the next screen in the app itself. A curved "redo" arrow, or a different icon altogether, would be better.
3. The exit button might be better if it had another color (red?).
Those are all great ideas. (I was a little worried about the View Site arrows, but you drove home why.)

The relative lack of icons/graphics is because I'm mostly going to have to go-it-alone now. The Fugue icons are only available at 16x16. Not only do all of my buttons have to get a little larger (so something like 24x24 would have been better), but for the iPad 3 I need double-resolution graphics. That makes 16x16 awfully tiny. I'll be making a lot of my own now.

For #2, how about a little globe icon (like I use for website links in the official version)?

Typhlosion
Posts: 82

Post by Typhlosion » 04-25-12 1:51 am

DC64 wrote:I think it's okay for the organization, but the colors hurt my eyes a little.
Having a custom choice of colors might be good.(?)
+1
1st, I find the orange and yellow a little too much. It's too colorful imho.
2nd, a dark/grey colorscheme looks more professional (it is said that you can focus better with darker background, that's why all these programs like Photoshop or 3DSMax have dark grey background).

Nicholas
Posts: 12397

Post by Nicholas » 04-25-12 4:37 am

You've swayed me. (The idea of a "dark color scheme" is so strong in some of those high-end pieces of software that you don't get the darkest one unless you buy the best edition.)

I'll see what I can't do about including color themes... themes that the Lemo-types out there will be able to create more of. They'll also be really easy to share. I might even be amenable to including a few user-created themes in the picker.

It might not be perfect this time around and modding support will still be unofficial, but this new UI layout stuff I'm working on is coming along way better and faster than I expected and something like color themes will take next to zero effort to include.

justpin
Posts: 31
Location: UK

Post by justpin » 04-25-12 9:43 am

Whatever you do, keep an option in to use the old themes and UI.

Illynir
Posts: 3

Post by Illynir » 04-26-12 1:17 pm

Hello :)

I am French and it's a bit off-topic but I buy a key there is more than two years already and I wanted to thank Nicholas for Synthesia continue to code and add new functionality.

Thank you, you have kept your word and I greatly appreciated :)

Sorry for my English.

maccer
Posts: 222
Location: Sweden

Post by maccer » 04-27-12 5:40 pm

Nicholas wrote:For #2, how about a little globe icon (like I use for website links in the official version)?
Yes, a globe would probably be a good choice!
Songs learned using Synthesia:
CT: Wind Scene, The Trial | FF7: Prelude | SMB: Overworld, Underwater | Tetris: Theme A | Zelda: Lost Woods | Other: Für Elise

Nicholas
Posts: 12397

Post by Nicholas » 04-27-12 6:00 pm

Thanks Illynir!

Otherwise, the UI overhaul is coming along nicely. Most of the infrastructure work is done at this point and this feels like the tipping point: I've been complaining for years that my UI stuff is some "wacky homebrew" solution but that I'd been going down this path too long to switch now. Well... now it doesn't feel so wacky or homebrew anymore. It feels pretty mature and can hold its own against most other UI frameworks now. No promises for 0.8.4, but something like 98% of the work required for real-time window resizing is going to just be in there for free because of the rest of this work. :D

Also, this isn't a mockup anymore:
Spoiler:
Image
And it was produced using these two files:
Spoiler:
colors.xml:

Code: Select all

<UiDescription>

  <!-- Each color requires an id and either 'rgb' or 'hsv': comma-separated lists
       that are 3 or 4 integers long (4 to specify alpha).  RGB values are [0..255]
       and HSV are [0..360] for H and [0..100] for S and V. -->

  <!-- Colors specified at the top level are the default theme.  Theme elements
       inherit all the default colors and can override as few as they like. The
       theme element's id will be shown in Synthesia as the theme name. -->

  <color id="white" rgb="255,255,255" />
  <color id="black" rgb="0,0,0" />
  <color id="transparent" rgb="0,0,0,0" />

  <!-- Screen is cleared to this color at the beginning of each frame, on all screens -->
  <color id="screenBackground" rgb="63, 70, 84" />

  <!-- TODO: Remove once we change to the proper background color -->
  <color id="temporaryBackground" rgb="240, 240, 240" />

  <color id="buttonFace" hsv="200, 91, 71" />
  <color id="buttonFaceHover" hsv="200, 100, 100" />
  <color id="buttonSunkenHover" hsv="200, 85, 60" />
  <color id="buttonText" rgb="255, 255, 255" />
  <color id="buttonTextHover" rgb="255, 255, 255" />

  <color id="buttonAccept" hsv="120, 100, 71" />
  <color id="buttonAcceptHover" hsv="120, 100, 92" />

  <color id="buttonDeny" hsv="0, 63, 56" />
  <color id="buttonDenyHover" hsv="0, 77, 83" />
  
  <color id="textAgainstBackground" rgb="48,48,48" />
  <color id="warnAgainstBackground" hsv="0, 75, 85" />
  
  <!-- Used in places like the header and footer of the title screen -->
  <color id="headerGradientTop" hsv="200, 92, 62" />
  <color id="headerGradientBottom" hsv="200, 92, 81" />
  <color id="footerGradientBottom" hsv="200, 92, 75" />

  <color id="footerTextLight" hsv="200, 45, 100" />
  <color id="footerTextDark" hsv="200, 100, 42" />

  
  <!-- Gameplay stuff -->
  <color id="keyboardFelt" rgb="192, 0, 0" />
  <color id="keyboardMiddleCAnnotation" rgb="0, 0, 0, 48" />
  <color id="keyboardDisabledAnnotation" rgb="92, 92, 92" />
  <color id="keyboardEnabledAnnotation" rgb="232, 232, 232" />

  <color id="fallingNoteBackground" rgb="48, 48, 48" />
  <color id="fallingNoteGuide" rgb="112, 112, 112" />
  <color id="fallingMeasureLine" rgb="59, 59, 59" />
  <color id="fallingMeasureLabel" rgb="127, 127, 127" />


  <theme id="Classic Dark">
    <color id="screenBackground" rgb="30, 30, 30" />
  </theme>
  
</UiDescription>
ui.xml:

Code: Select all

<UiDescription>
  
  <!-- Top-level ui elements require an id.  Nested elements don't.  Every control must specify
       either 'type' or 'inherit'.  All screens are generally designed for 1024x768 and are scaled
       dynamically based on the [v|h]Align and [v|h]Anchor properties of each control. -->

  <!-- Buttons and windows have two interesting properties related to background/overlay1/overlay2
       that control how the texture is displayed:
       
       textureBorder:   the number of pixels from any edge until you get to the solid-color center area.
       textureFromEdge: the number of pixels between the edge of the texture and the first non-transparent
                        pixel. The following should be true: textureFromEdge <= textureBorder
                        
       For the default button texture, this is 5 and 1, respectively. (That is, 4 pixels of rounded border,
       set 1 pixel away from the outer texture extents, for a total of 4+1=5 pixels from edge to center.)
  -->
  
  <!-- Establish our basic color theme, most things inherit from these. -->
  <ui id="button" type="button" color="buttonFace" colorHover="buttonFaceHover" fontColor="buttonText" fontColorHover="buttonTextHover" />
  <ui id="sunkenButton" inherit="button" colorHover="buttonSunkenHover" background="ui_window_sunken" backgroundOverlay1="ui_window_sunken_o1" backgroundOverlay2="ui_window_sunken_o2" textureBorder="10" textureFromEdge="3" hoverShimmy="0" />
  <ui id="backgroundLabel" type="label" color="textAgainstBackground" fontEffect="none" fontSize="14" align="center" />

  
  
  <!-- Title Screen -->
  <ui id="titleButton" inherit="button" size="350, 55" fontSize="24" align="center" />
  <ui id="titleScreen" type="frame" size="1024, 768">
    
    <!-- TODO: Get rid of this once the background color changes -->
    <ui type="spacer" size="1024, 768" color="temporaryBackground" />
    
    <!-- Header and footer backgrounds -->
    <ui type="spacer" size="1024, 194" color="headerGradientBottom" />
    <ui type="image" size="1024, 194" color="headerGradientTop" texture="gradientDown" />

    <ui type="spacer" position="0,725" size="1024, 43" color="footerGradientBottom" />
    <ui type="image" position="0,725" size="1024, 43" color="headerGradientTop" texture="gradientDown" />

    <ui type="label" id="versionLabel" align="center" position="512, 736" color="footerTextLight" fontSize="18" />
    <ui type="label" id="rendererLabel" align="right" position="1011, 736" color="footerTextDark" fontSize="18" fontEffect="none" />

    <ui type="flowLayout" position="512, 40" padding="5">
      <ui type="image" texture="title_Logo" align="center" />
      <ui type="spacer" size="1, 1" />
      <ui inherit="sunkenButton" fontSize="24" align="center" id="profile" size="384, 45" />
      <ui type="spacer" size="1, 33" />
      
      <ui inherit="titleButton" id="play" text="Play!" color="buttonAccept" colorHover="buttonAcceptHover" />
      <ui inherit="titleButton" id="learningPack" text="Try the Learning Pack" />
      <ui type="spacer" size="1, 30" />
      
      <ui inherit="titleButton" id="options" text="Options" />
      <ui inherit="titleButton" id="keyboard" text="Keyboard Setup" />
      <ui inherit="backgroundLabel" id="inputDevice" text="[in]" align="center" />
      <ui inherit="backgroundLabel" id="outputDevice" text="[out]" align="center" />

      <ui type="spacer" size="1, 30" />
      <ui inherit="titleButton" id="exit" text="Exit Synthesia" />
    </ui>

  </ui>

</UiDescription>
The first one (colors.xml) has theme support (see the last three lines) and a really easy way to view changes to the file without restarting Synthesia. I'll describe all that when the next development preview goes out. In the meantime, this is to whet the whistle of people like Lemo.

Locked