4. Rhythm Game : ClientUI & LoadingPanel

이번 포스팅에서는

클라이언트에서 프로그램이 시작되고

로그인화면이 출력되기 전인

로딩화면 창까지 설계하겠습니다.

===========================================================================================

Rhythm Game : ClientUI & Loading

1.  Rhythm Game : ClientStart.java

 설계할 프로그램이 시작될 때 접속할 서버의 ip가 바뀔 수 있으니 첫 화면에 다이얼로그로 연결할 서버의 ip를 입력하는 창을 띄우겠습니다.

만약 동일한 환경에서 한다면 이 입력창을 굳이 넣으시지 않아도 됩니다.

 시작될 때 ClinetUI 객체를 생성하여 화면에 출력합니다.

package client;
 
import javax.swing.JOptionPane;
 
public class ClientStart {
    public static void main(String[] args) {
        String ip = JOptionPane.showInputDialog("서버 ip 입력하세요.");
        ClientUI b = new ClientUI(ip);
        b.setLocationRelativeTo(null);
        b.setVisible(true);
    }
}

2.  Rhythm Game : ClientUI.java

 기본적으로 전체 적인 4개의 화면은 모두 같은 프레임에 패널만 변경하는 방식으로 설계할 것이기 때문에 전체 프레임의 기능을 담당하는 ClientUI를 설계합니다.

- net : 앞에서 설계한 ClientNetwork는 UI에서 관리할 Panel들이 사용할 객체이기 때문에 UI에서 생성해줍니다. 이 때 static을 사용한 이유는 어차피 ClientNetwork는 한번만 생성되고 프로그램이 사용될 때까지 사용되기 때문에 사용하기 쉽게 static으로 선언했습니다.

- addListeners() : 각 패널에서 사용할 컴포넌트에 대한 리스너를 추가하기 위한 메소드입니다.

- setUIcomponent() : UI에서 사용할 각 패널의 객체를 생성합니다.

package client;
 
import java.awt.event.ActionListener;
...
 
public class ClientUI extends JFrame{
    static public ClientNetwork net;
    static {
        net = new ClientNetwork(this);
    }
    String ip;
    
    public ClientUI(String ip) {
        this.ip = ip;
        setUIcomponent();
        addListeners();
    }
 
 
    private void addListeners() {
        
        // 리스너 추가를 위한 기능 정의
    
    }
 
    private void setUIcomponent() {
        // Client UI에 출력할 패널 정의
    }
}
 

3.  Rhythm Game : WelcomePanel.java

 

로딩화면을 위해 WelcomePanel 클래스를 생성하겠습니다. 실제로 여기서 구현하는 로딩화면은 쓰레드를 한번 사용해보고자 만든 것이기 때문에 별다른 기능은 존재하지 않지만 네트워크 연결되는 구간을 로딩화면으로 대체하도록 설계하는 것도 좋을 것 같습니다.

Graphics를 이용해서 전체 배경화면을 그린다음, 로딩 이미지를 띄우기 위한 LoadingPanel 객체를 다시 만들어 로딩 움짤을 띄우도록 합니다.

package clientPanel;
 
import java.awt.Graphics;
 ...
 
public class WelcomePanel extends  JPanel{
    public LoadingPanel pnLoading;
    private Graphics screenGraphic;
    private Image panelImage;
    private Image selectedImage ;
    private Image backgroundImage = new ImageIcon(getClass().getResource("imge/123.gif")).getImage();
    public WelcomePanel() {
        setSize(496, 748);
        setLayout(null);
        pnLoading = new LoadingPanel();
        pnLoading.setOpaque(false);
        pnLoading.setSize(320, 320);
        pnLoading.setLocation(132, 403);
        add(pnLoading);
        JLabel lblNewLabel = new JLabel("Welcome To ");
        lblNewLabel.setForeground(new Color(255, 255, 255));
        lblNewLabel.setHorizontalAlignment(SwingConstants.CENTER);
        lblNewLabel.setFont(new Font("나눔고딕", Font.BOLD, 37));
        lblNewLabel.setBounds(132, 191, 245, 75);
        add(lblNewLabel);
        
        JLabel lblDropTheBeat = new JLabel("Drop The Beat !!");
        lblDropTheBeat.setForeground(new Color(255, 255, 255));
        lblDropTheBeat.setHorizontalAlignment(SwingConstants.CENTER);
        lblDropTheBeat.setFont(new Font("나눔고딕", Font.BOLD, 37));
        lblDropTheBeat.setBounds(88, 276, 335, 75);
        add(lblDropTheBeat);
        
    }
    @Override
    protected void paintComponent(Graphics g) {
        g.drawImage(backgroundImage, 0, 0, this);
        this.repaint();
    }
}
 

4.  Rhythm Game : LoadingPanel.java

 WelcomPanel 클래스와 비슷하게 별다른 기능없이 로딩 움짤을 위한 패널을 설계합니다.

package clientPanel;
 
import java.awt.Color;
...
 
public class LoadingPanel extends JPanel {
    private Graphics screenGraphic;
    private Image panelImage;
    private Image selectedImage;
    private Image backgroundImage;
 
    public LoadingPanel() {
        setOpaque(false);
        setSize(320, 320);
 
        setLayout(null);
        try {
            backgroundImage = new ImageIcon(getClass().getResource("imge/gg2.gif")).getImage();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    @Override
    protected void paintComponent(Graphics g) {
        g.drawImage(backgroundImage, 0, 0, this);
        this.repaint();
    }
 
    
}

5.  Rhythm Game : ClientUI.java

이제 앞서 만든 WelcomPanel를 프로그램이 시작되었을 때 생성하여 1.5초간만 패널을 유지하다가 로그인 화면으로 넘어가도록 하겠습니다.

위의 ClientUI에 다음과 같이 추가하겠습니다.

WelcomPanel은 한번만 쓰고 버릴 객체이기 때문에 Runnable 인터페이스를 이용해 Thread를 생성하고 그 안에서 WelcamPanel 객체를 생성하겠습니다.

그리고 해당 쓰레드를 시작시킨후에 1.5초 후에 정지시키겠습니다.

package client;
 
import java.awt.event.ActionListener;
...
 
public class ClientUI extends JFrame{
 
    public LoginPanel pnLogin;
 
    ...
 
    private void setUIcomponent() {
        setTitle("Drop the beat!! - Welcome");
        Thread t = new Thread(new Runnable() {
            
            @Override
            public void run() {
                // TODO Auto-generated method stub
                int rand = (int)(Math.random()*8) *30;
                setLocation(300 + rand, 200+ rand);
                setSize(496, 748);
                
                WelcomePanel w = new WelcomePanel();
                setLocationRelativeTo(null);
                System.out.println(w);
                setVisible(true);
                setContentPane(w);
                System.out.println("w 호출");
            }
        });
        t.start();
        try {
            Thread.sleep(1500);
        }catch(Exception e) {
            
        }
        setTitle("Drop the beat!! - Login");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setResizable(false);
        setSize(496, 748);
        pnLogin = new LoginPanel();
        setContentPane(pnLogin);
    }
}
 

## 동작흐름.

프로그램 시작시 접속하고자 하는 서버 ip 입력 -> ClientUI 객체 생성 후 WelcomePanel 출력 -> 1.5초 후에 LoginPanel로 전환

=========================================================================================================

## 이렇게 로딩화면에서 로그인화면으로 넘어가는 것까지 구현하였는데 ClientUI에 pnLogin은 로그인 패널로 다음 포스팅에서 설계할 것입니다.