Know any UI Developers? (Bounty Inside)

[ubeefx]

The Forge logo is looking awesome, moomarc.

[moomarc]

Thanks for all the great feedback. Now we wait to see what Rob can actually do with it when he's finished with other more important things.

I've taken a look at WindowBuilder to see if I could learn it and help, but I can't even work out how to use an image in the jFrame I'm too used to being able to drag-and-drop images in design software. I've tried to use an imageIcon method and another one that extends JPanel and overrides the paintComponent method. I copy/paste the code samples, then rename instances and classes to what I need, but I just can't seem to get anything to work because I don't have base coding knowledge. If nothing else, I learned a bit more of the layout options, so I've created a few more elements for Rob that splits the image into more useable pieces (I think). I also added an extra image for the Start button. If done with a CardLayout, I think a rollover effect can be created for when the cursor is over the button. The zip also contains a graphic for the Mode and Library boxes that can be set as a custom background for a dropdown box; just let it stretch to the frame extents. It also contains the logo as a separate png and cropped jpeg.

More Elements.zip

(215.29 KiB) Downloaded 266 times

So I'll stick to creating artwork for the game and maybe at some stage I'll do a crash course on WindowBuilder so that I can make more useful elements. Anyway, finally finished my big real-life projects, so time to create more pets

Edit: @Rob: If you'd like anything adjusted for the UI design, let me know. This kind of work goes quickly (especially compared to the pets' artwork) so I don't mind tweaking or even fairly large overhauls. I want to make it so that it can work, and you know what I need to do to enable that.

[Rob Cashwalker]

Yeah, I was thinking about the rollover too.

The trick I had to use with WindowBuilder for your design was switching the layout to Absolute (pixel-by-pixel layout). A JLabel is the best bet for non-interactive images, and JButton is best for the interactive ones. Most controls have an Opaque property, which allows the transparency of png files to shine. (I'm only using PNG files)
(BTW, WindowBuilder would like to see source images in a jar, I think, it warns against using path/file. Does anyone know how to do that or what to do different?)

I was thinking the human and AI deck selection shouldn't be radio buttons, but maybe a imaged button in similar style to the headers. Click the button, the deck selector pops up on the right. Select a deck, the button stays highlighted on some way to indicate the deck has been selected.

The Gui_NewGame screen is more than just a game launcher, it's the primary main class that initializes the entire application. I would like it if someone would take on the simple challenge of moving the initializing to a dedicated class, preferably in the form of a splash screen. When done, the new New Game Screen can be launched.

[moomarc]

Before it goes too much further I just want to check a few things:

Is the 600x600 artwork fine. I saw when I was trying to work out WindowBuilder that the program title bar is over-and-above the design space, whereas looking at the current start page UI and the background image, it looked like the image placement starts behind the title bar. So do you need me to resize the artwork or can you scale it suitably?

Another thing; how will the new UI play with the skins currently available through the Menu?

I was thinking the human and AI deck selection shouldn't be radio buttons, but maybe an imaged button in similar style to the headers. Click the button, the deck selector pops up on the right. Select a deck, the button stays highlighted in some way to indicate the deck has been selected.

I'll create the new buttons in 'btnUp', 'btnDown' and 'btnOver' versions to allow for rollover and selected effects. Both would start with btnUp form with rollover using btnOver. When selected the btnDown form is used and button state is stored. So you'd have something like this (I know the code is a horrible mess of concepts from Flash Actionscript and java and any other syntax I might have come across, but the basic logic should be correct):

Button Logic | Open

Code: Select all

button1.state==up
button1.image="PATH//humanbtnUp.png"
button2.state==up
button2.image="PATH//aibtnUp.png"

onClick(button1){
  set.button1.state=down
  and set.button1.image="PATH//humanbtnDown.png"
  and \*Launch list over scroll area*\
  and if{
    button2.state==down
  }
  then{
    set.button2.state=up
    and set.button2.image="PATH//aibtnUp.png"
  }
}

Finally, what is wanted for the splash screen? Just an Forge image with space for a loading bar and relevant text?

[Rob Cashwalker]

Not sure about the scaling, but it seemed OK to me.

The skins could have some odd interactions.. I don't use them, I never minded the gray look....

Splash screen - yeah, pretty much.

[moomarc]

I'm almost finished with all the button states. I'll update this post shortly with the files...

A short while later... Marc uploads the zip.

[moomarc]

For the splash screen, are the progress bars easily scalable or should I rather just work with sizes based on the current ones?

[Rob Cashwalker]

They're fairly scaleable... We would want to be able to write status texts into it, so it should be tall enough to fit an average 10pt font... but width isn't important.

[moomarc]

Splash screen

I decided it would just be easier to base it on the current one to make implementation as easy as possible.

[Rob Cashwalker]

All the settings from the New Game Screen and the Menus will need to be tranferred to another Gui screen as well.

Edit - nice screen, Marc. The Disclaimer should be dynamic though, not embedded in the image.

[Braids]

I would like it if someone would take on the simple challenge of moving the initializing to a dedicated class, preferably in the form of a splash screen.

@Rob, i'll take this if you write a Mantis issue and assign it to me.

forgeSplash.jpg

I decided it would just be easier to base it on the current one to make implementation as easy as possible.

i doubt we need a splash screen. we now load the card DB after the user selects an activity from the Forge main screen. this was a pleasant side effect of making the alternative LazyCardFactory available to unit tests. the forge main screen appears really fast now. if your changes are going to make the main screen appear more slowly, then we might want a splash screen.

[Rob Cashwalker]

Splash Screen is Issue 106. Settings Screen is Issue 107, but I didn't assign it to you.

Even if the splash screen appears only briefly, it at least segregates the global init stuff.

While it's nice for the game to start instantly, it sucks waiting extra time for the deck editor or games to actually start. When doing a generated deck, the card factory loads in between generating the human and AI deck.... I'd personally rather wait on startup, with a splash screen than be interrupted mid-session.

Meanwhile, I zipped all the image elements I'm using and changed the "zip" extension to "jar", and added it the classpath... WindowBuilder is now able to pull the resources from there no problem! WindowBuilder couldn't deal with relative paths, even though when I ran the Gui, Java was able to load the resources.
I've got button hovers and such working. But that's about it.

[slowe]

While it's nice for the game to start instantly, it sucks waiting extra time for the deck editor or games to actually start. When doing a generated deck, the card factory loads in between generating the human and AI deck.... I'd personally rather wait on startup, with a splash screen than be interrupted mid-session.

I have to agree with Rob here. Start-up wait is something users will have dealt with before; the way it works now is jarring.
And with some eye candy from Marc, the wait will seem like nothing at all!

[Braids]

While it's nice for the game to start instantly, it sucks waiting extra time for the deck editor or games to actually start. When doing a generated deck, the card factory loads in between generating the human and AI deck.... I'd personally rather wait on startup, with a splash screen than be interrupted mid-session.

I have to agree with Rob here. Start-up wait is something users will have dealt with before; the way it works now is jarring.
And with some eye candy from Marc, the wait will seem like nothing at all!

ok. i plan to move the card loading back to the point before the main window.

[moomarc]

Disclaimer should be dynamic though, not embedded in the image.

I had intended the first splash as a sample only for general feedback. For the disclaimer section I had intended it to be dynamic text, perhaps adding something along the lines of Forge being supplementary but users are encouraged to continue buying official Magic products (might also help keep WotC from our throats for a while). Here's the base image with open areas for disclaimer and progress bar with titles:

Base image for splash screen