Cyber Jedi: Model fighter game UI with Swing

tutorial reference:

In this session, we will create a fighter selection user interface. If you ever played console game such as "Street Fighters" and "Iron Fists", you already know what the UI feels like.

In part 1, our objective is to create the UI frame showing the fighter's information.

At the application level, once the User opens the game, a panel will list all available fighters with their thumbnail pictures. Once user selects a fighter, we entered this information frame, which show the details about the fighter. There will be two buttons "Back" and "Fight". "Back" button brings user to the thumbnail frame, while "Fight" button brings user to the fighting arena frame. Optionally, user can click to view the fighter's story, watch the fighter's fighting movie's etc.

At the function level, this frame have upperArea and lowerArea. The upperArea shows the fighters name, style, birthday, hometown and many control buttons. The lowerArea shows the fighter's picture, fighter's power, speed, energy etc. There are many interactive features. For example, the user is able to adjust the fighter's power, speed, energy etc. with sliders and save the data to hard disk. There are prev and next button to iterate through all the fighters. The frame embeds many special effects, such as the 3D shadowing of the text, button pressing sounds and the background music for each fighter.

At the implementation level, there are two classes, SelectPanel.java and Afighter.java. SelectPanel provide the view and control. The Afighter.java is the model of a fighter, with fields and getters/setters. The persistant layer is provided by harddisk files.

SelectPanel.java

/*SelectPanel.java*/
package FighterSelect;

import java.applet.AudioClip;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.AffineTransform;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Properties;
import java.util.Vector;

import javax.swing.*;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class SelectPanel extends JFrame implements ActionListener{
JPanel content;
JPanel upperArea;
JPanel controlBar;
JButton prevButton;
JButton nextButton;
JLabel infoLabel;
JLabel photoLabel;
JLabel descLabel;
JSlider slider1;
JSlider slider2;
JSlider slider3;
JSlider slider4;
JSlider slider5;
MusicButton musicBtn;
DrawingPanel drawingPanel;

Vector fighters;
String[] ids = {"010","030","022"};
Afighter afighter;
private int current = 0;
public static void main(String[] args) {
new SelectPanel("Fighter NameCard");
}

public SelectPanel(String name) {
super(name);
super.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
super.setSize(800,600);
super.setLocationRelativeTo(null);
fighters = parseParameters();
afighter = (Afighter)fighters.firstElement();

try {
// UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
// UIManager.setLookAndFeel(UIManager.getCrossPlatformLookAndFeelClassName());
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Error setting Motif LAF: " + e);
}

content = (JPanel)getContentPane();
content.setBackground(Color.GRAY);
Font font = new Font("Serif", Font.PLAIN, 30);
content.setFont(font);

ImageIcon lefticon = new ImageIcon("images/left.gif");
ImageIcon righticon = new ImageIcon("images/right.gif");
prevButton = new JButton("Prev",lefticon);
prevButton.setEnabled(false);
prevButton.addActionListener( new ButtonClicked());
prevButton.addActionListener(this);
nextButton = new JButton("Next",righticon);
nextButton.addActionListener(this);
nextButton.addActionListener( new ButtonClicked());
nextButton.setHorizontalTextPosition(SwingConstants.LEFT);
infoLabel =
new JLabel("labelText", JLabel.CENTER);
infoLabel.setBorder
(BorderFactory.createTitledBorder("Information"));
drawingPanel = new DrawingPanel(afighter.getName());
try {
URL u = new URL("file:audio/"+afighter.getMusic());
AudioClip audio = JApplet.newAudioClip(u);
musicBtn = new MusicButton(audio);
} catch (MalformedURLException e) {
e.printStackTrace();
}
JButton backBtn = new JButton("Back");
backBtn.addActionListener(new ButtonClicked());
JButton saveBtn = new JButton("Save Data");
saveBtn.addActionListener(new ButtonClicked());
JButton fightBtn = new JButton("Fight");
fightBtn.addActionListener(new ButtonClicked());
JButton storyBtn = new JButton("Story");
storyBtn.addActionListener(new ButtonClicked());
JButton videoBtn = new JButton("Video");
videoBtn.addActionListener(new ButtonClicked());
controlBar = new JPanel(new GridLayout(1,5));
controlBar.setBackground(Color.GRAY);
controlBar.add(saveBtn);
controlBar.add(backBtn);
// controlBar.add(storyBtn);
// controlBar.add(videoBtn);
controlBar.add(fightBtn);
controlBar.add(musicBtn);

upperArea = new JPanel(new BorderLayout());
upperArea.setBackground(Color.GRAY);
upperArea.add(infoLabel, BorderLayout.NORTH);
upperArea.add(drawingPanel, BorderLayout.CENTER);
upperArea.add(prevButton, BorderLayout.WEST);
upperArea.add(nextButton, BorderLayout.EAST);
upperArea.add(controlBar, BorderLayout.SOUTH);
content.add(upperArea,BorderLayout.NORTH);

slider1 = new JSlider();
slider1.addChangeListener(new sliderDragged(1));
slider1.setBackground(Color.GRAY);
slider2 = new JSlider();
slider2.setBackground(Color.GRAY);
slider2.addChangeListener(new sliderDragged(2));
slider3 = new JSlider();
slider3.setBackground(Color.GRAY);
slider3.addChangeListener(new sliderDragged(3));
slider4 = new JSlider();
slider4.setBackground(Color.GRAY);
slider4.addChangeListener(new sliderDragged(4));
slider5 = new JSlider();
slider5.setBackground(Color.GRAY);
slider5.addChangeListener(new sliderDragged(5));

photoLabel =
new JLabel("",
new ImageIcon("images/street_fighter_"+afighter.getId()+".gif"),
JLabel.CENTER);
descLabel = new JLabel("labelText");

JPanel controlArea = new JPanel(new GridLayout(6,1));
// controlArea.setPreferredSize(new Dimension(400, 0));
controlArea.setBackground(Color.GRAY);
controlArea.add(descLabel);
controlArea.add(slider1);
controlArea.add(slider2);
controlArea.add(slider3);
controlArea.add(slider4);
controlArea.add(slider5);

JPanel LowerArea = new JPanel(new BorderLayout());
LowerArea.setBackground(Color.GRAY);
LowerArea.add(photoLabel,BorderLayout.WEST);
LowerArea.add(controlArea, BorderLayout.EAST);
content.add(LowerArea, BorderLayout.SOUTH);

this.init();
super.setVisible(true);
}

void init() {
String labelText =
"<html>" +
"Style: " +
""+afighter.getStyle()+" " +
" Birthday: " +
""+afighter.getBd()+" " +
"HomeTown: " +
""+afighter.getHometown()+" " +
"</html>";
infoLabel.setText(labelText);

labelText =
"<html>" +
"<div width='250px' padding='10px' margin='0px'>" +
"" + afighter.getDescription() + "" +
"</div>" +
"</html>";
descLabel.setText(labelText);

photoLabel.setIcon(new ImageIcon("images/street_fighter_"+afighter.getId()+".gif"));
slider1.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Power "+afighter.getPower()));
slider1.setValue((int) afighter.getPower());
slider2.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Speed "+afighter.getSpeed()));
slider2.setValue((int) afighter.getSpeed());
slider3.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Flexibility "+afighter.getFlexibility()));
slider3.setValue((int) afighter.getFlexibility());
slider4.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Energy "+afighter.getEnergy()));
slider4.setValue((int) afighter.getEnergy());
slider5.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Endurance "+afighter.getEndurance()));
slider5.setValue((int) afighter.getEndurance());

controlBar.remove(musicBtn);
musicBtn.a.stop();
try {
URL u = new URL("file:audio/"+afighter.getMusic());
AudioClip audio = JApplet.newAudioClip(u);
musicBtn = new MusicButton(audio);
} catch (MalformedURLException e) {
e.printStackTrace();
}
controlBar.add(musicBtn);

upperArea.remove(drawingPanel);
drawingPanel = new DrawingPanel(afighter.getName());
upperArea.add(drawingPanel, BorderLayout.CENTER);

super.pack();
}

//Load all fighter characters
protected Vector parseParameters() {
Vector pix = new Vector(10); //start with 10, grows if necessary
for (int j = 0; j < ids.length; j++) {
pix.addElement(FighterFactory(ids[j]));
}
return pix;
}

protected Afighter getAfighter() {
return this.afighter;
}

//initiate Afighter object with persistant data (we can also use JDBC)
protected Afighter FighterFactory(String id){
Afighter fighter = new Afighter();
Properties props = new Properties();
try {
props.load(new FileInputStream("DataBase/"+id));
fighter.setId(props.getProperty("id"));
fighter.setMusic(props.getProperty("music"));
fighter.setPower(new Integer(props.getProperty("power")));
fighter.setSpeed(new Integer(props.getProperty("speed")));
fighter.setFlexibility(new Integer(props.getProperty("flexibility")));
fighter.setEnergy(new Integer(props.getProperty("energy")));
fighter.setEndurance(new Integer(props.getProperty("endurance")));
fighter.setName(props.getProperty("name"));
fighter.setBd(props.getProperty("bd"));
fighter.setHometown(props.getProperty("hometown"));
fighter.setStyle(props.getProperty("style"));
fighter.setDescription(props.getProperty("description"));
}catch(IOException e){
e.printStackTrace();
}
return fighter;
}

//Back and Next Buttons' sound effect
private class ButtonClicked implements ActionListener {
ButtonClicked() {}
public void actionPerformed (ActionEvent e) {
try {
URL u;
if(e.getActionCommand() == "Fight") {
u = new URL("file:audio/aah.wav");
}else if(e.getActionCommand() == "Back"){
u = new URL("file:audio/attack.wav");
}else if(e.getActionCommand() == "Save Data"){
u = new URL("file:audio/shutter.wav");
saveData();
}else{
u = new URL("file:audio/shutter.wav");
}
AudioClip music = JApplet.newAudioClip(u);
music.play();
} catch (MalformedURLException ex) {
ex.printStackTrace();
}
}
}

//save data to the file system (we can also use JDBC here)
private void saveData(){
Properties pro = new Properties();
try {
pro.load(new FileInputStream("DataBase/"+afighter.getId()));
} catch (Exception e1) {
e1.printStackTrace();
}
pro.setProperty("power", afighter.getPower().toString());
pro.setProperty("speed", afighter.getSpeed().toString());
pro.setProperty("flexibility", afighter.getFlexibility().toString());
pro.setProperty("energy", afighter.getEnergy().toString());
pro.setProperty("endurance", afighter.getEndurance().toString());
try {
pro.store(new FileOutputStream("DataBase/"+afighter.getId()),null);
} catch (Exception e) {
e.printStackTrace();
}
}

//Update slider title and the Afighter object.
private class sliderDragged implements ChangeListener {
private int id;
sliderDragged(int id) {
this.id = id;
}
public void stateChanged(ChangeEvent arg0) {
JSlider a = (JSlider)arg0.getSource();
switch(id) {
case 1:
getAfighter().setPower(a.getValue());
a.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Power "+afighter.getPower()));
break;
case 2:
getAfighter().setSpeed(a.getValue());
a.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Speed "+afighter.getSpeed()));
break;
case 3:
getAfighter().setFlexibility(a.getValue());
a.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Flexibility "+afighter.getFlexibility()));
break;
case 4:
getAfighter().setEnergy(a.getValue());
a.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Power "+afighter.getEnergy()));
break;
case 5:
getAfighter().setEndurance(a.getValue());
a.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEmptyBorder(),"Power "+afighter.getEndurance()));
}
}
}

//Play background music
private class MusicButton extends JButton implements Runnable, ActionListener {
Thread runner;
AudioClip a;
MusicButton(AudioClip audio) {
super("Play Music");
addActionListener(this);
a = audio;
}
public void actionPerformed(ActionEvent event) {
String command = event.getActionCommand();
if (command == "Play Music")
startMusic();
if (command == "Stop Music")
stopMusic();
}
void startMusic() {
if (runner == null) {
runner = new Thread(this);
runner.start();
setText("Stop Music");
}
}
void stopMusic() {
a.stop();
runner = null;
setText("Play Music");
}
public void run() {
a.loop();
}
}

//Drawing the name with shadowing effects
private class DrawingPanel extends JPanel {
private int fontSize = 20;
private String message = "Java 2D";
private int messageWidth;

public DrawingPanel(String message) {
this.message = message;
setBackground(Color.GRAY);
Font font = new Font("Serif", Font.PLAIN, fontSize);
setFont(font);
FontMetrics metrics = getFontMetrics(font);
messageWidth = metrics.stringWidth(message);
int height = fontSize*3;
setPreferredSize(new Dimension(0, height));
}

public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g;
int x = (super.getWidth()-messageWidth)/2;
int y = fontSize*5/2;
g2d.translate(x, y);
g2d.setPaint(Color.lightGray);
AffineTransform origTransform = g2d.getTransform();
g2d.shear(-0.95, 0);
g2d.scale(1, 3);
g2d.drawString(message, 0, 0);
g2d.setTransform(origTransform);
g2d.setPaint(Color.black);
g2d.drawString(message, 0, 0);
}
}

//User clicked either the next or the back button.
public void actionPerformed(ActionEvent e) {
//Compute index of fighter to view.
if (e.getActionCommand().equals("Next")) {
current += 1;
if (!prevButton.isEnabled())
prevButton.setEnabled(true);
if (current == fighters.size() - 1)
nextButton.setEnabled(false);
} else {
current -= 1;
if (!nextButton.isEnabled())
nextButton.setEnabled(true);
if (current == 0)
prevButton.setEnabled(false);
}
//Get the Afighter object.
afighter = (Afighter)fighters.elementAt(current);
init();
}
}

Afighter.java

/*Afighter.java*/
package FighterSelect;

public class Afighter {
private String id = "030";
private String music = "030.wav";
private Integer power = 98;
private Integer speed = 87;
private Integer flexibility = 80;
private Integer energy = 100;
private Integer endurance = 100;
private String secretskill = "?";
private String name = "Phil Jackson";
private String bd = "02/14/1989";
private String hometown = "New York City, USA";
private String style = "Boxer/Out-fighter";
private String description =
"A classic boxer who seeks to maintain distance between himself " +
"and his opponent, fighting with faster, longer range punches, " +
"most notably the jab, and gradually wearing his opponent down.";

public Afighter() {}

public void setId(String id) {
this.id = id;
}

public String getId() {
return this.id;
}

public void setMusic(String music) {
this.music = music;
}

public String getMusic() {
return this.music;
}

public void setPower(Integer power){
this.power = power;
}

public Integer getPower(){
return this.power;
}

public void setEnergy(Integer energy){
this.energy = energy;
}

public Integer getEnergy(){
return this.energy;
}

public void setSpeed(Integer speed){
this.speed = speed;
}

public Integer getSpeed(){
return this.speed;
}

public void setFlexibility(Integer flexibility){
this.flexibility = flexibility;
}

public Integer getFlexibility(){
return this.flexibility;
}

public void setEndurance(Integer endurance){
this.endurance = endurance;
}

public Integer getEndurance(){
return this.endurance;
}

public void setSecreteskill(String secretskill){
this.secretskill = secretskill;
}

public String getSecreteskill(){
return this.secretskill;
}

public void setName(String name){
this.name = name;
}

public String getName(){
return this.name;
}
public void setBd(String bd){
this.bd = bd;
}

public String getBd(){
return this.bd;
}

public void setHometown(String hometown){
this.hometown = hometown;
}

public String getHometown(){
return this.hometown;
}

public void setStyle(String style){
this.style = style;
}

public String getStyle(){
return this.style;
}

public void setDescription(String description){
this.description = description;
}

public String getDescription(){
return this.description;
}

}

Cyber Jedi

Friday, May 29, 2009

Model fighter game UI with Swing - Part 1

No comments:

Post a Comment

meta.ai impression

My Blog List