Explanation of Puzzle & Quest with Love Live

Introduction

This is an article on the 20th day of the Advent Calendar of Kagawa University Faculty of Engineering Circle SLP (Student Programming Institute). This time, I would like to write about the puzzle & quest with love live of the self-made game announced at the student LT of OSC Hiroshima 2017! It's my first Advent calendar, so I'm writing an article with a little nervous ^^

What is Puzzle & Quest with Love Live?

Puzzle & Quest with Love Live is "the most interesting love live game I think" created by combining a famous smartphone puzzle game and a famous RPG game and incorporating love live elements. By the way, the development language is Java, and I made it by making full use of Eclipse.

The rules are very simple. Operate the mouse to rearrange the drops (round ones with love live characters) and form combos (three or more series of the same color). And if the number of combos you have assembled is larger than the number of combo quotas, you can damage your opponent. On the contrary, if it is smaller than the combo quota number, it will be damaged. If you set the opponent's HP to 0 before your HP becomes 0, the game will be cleared.

What a simple and interesting game !!

aa.png

Two game modes

Did you know that there are two groups in Love Live, μ's (Muse) and Aqours (Aqua) ?? μ's is the main character group of the first Love Live, and Aqours is the main character group of Love Live Sunshine, which is currently broadcasting the second season of anime. I couldn't choose either one, so I implemented μ's mode and Aqours mode in this game as well. The image below is the title screen. The left side is μ's mode and the right side is Aqours mode. You can switch modes by clicking on the Love Live logo. You can go to the difficulty selection screen by clicking on the door where the character is popping out. In addition, this door opens while the mouse is on it and closes without the mouse. Well, I'm just swapping the image at the time of mouse hover and the image at other times. bb.png

The Love Live logo is actually a button, the image of the logo is displayed on the button, and the frame of the button is hidden. The important ones are this.setContentAreaFilled (false); and this.setBorderPainted (false);. The button can be hidden by these two processes.

ModeSelectButton.java


	public ModeSelectButton(String aqours,String muse, TitleButton titleButton) {
	    super();
	    this.titleButton = titleButton;
	    aqoursURL = getClass().getClassLoader().getResource(aqours);
	    museURL = getClass().getClassLoader().getResource(muse);
	    this.setIcon(new ImageIcon(museURL));   //Paste the image on the button
		this.setContentAreaFilled(false);     //Make the background transparent
		this.setBorderPainted(false);         //Hide button frame
		addMouseListener(this);
		this.SelectSound = new SoundPlayer("select.wav");
	}

Drop creation

There is one important point when creating a drop. That is, there are 5 types of drops used this time. This is because there are 5 types of certain smartphone puzzle games + 6 types of recovery in total, and recovery is not used in this game. However, there are 9 love live characters in a group.

Now this is a problem ...

Therefore, we decided to divide 9 people into 4: 4: 1 and the remaining 1 person to belong to both groups to divide into 5: 5. The table below is a group of drops. By treating the purple drops (Yoshiko Tsushima, Nozomi Tojo) as two people, we have created two groups of five people. Then, when starting the game, one of the groups is randomly decided so that everyone can play with drops.

μ's1 group μ's2 group Aqours1 group Aqours2 group
Nozomi.png Nozomi.png Yoshiko.png Yoshiko.png
Niko.png Maki.png Daiya.png Ruby.png
Honoka.png Rin.png Chika.png Hanamaru.png
Hanayo.png Kotori.png Kanan.png Mari.png
Eri.png Umi.png Riko.png You.png

Create enemy characters

The enemy character was very easy. All you have to do is take a nice enemy character image, change the color and hide your eyes. Anyone can do it!

Game flow

The flow of the game is as follows.

  1. Select μ's mode or Aqours mode on the title screen
  2. Select EASY, NORMAL, HARD on the difficulty level selection screen
  3. Play the game on the game screen
  4. Game clear OR game over
  5. Return to the difficulty level selection screen

We have prepared an enumerated GameScene to manage the game. As you can see from the code, I don't know how to manage the two modes at the same time, I have prepared two Scenes for the title screen and two Scenes for the selection screen.

GameScene.java


public enum GameScene {
	title_aqours,     //title screen(Aqours mode)
	title_muse,       //title screen(μ's mode)
	select_aqours,    //Selection screen(Aqours mode)
	select_muse,      //Selection screen(μ's mode)
	game_aqours,      //Game screen(Aqours mode)
	game_muse,        //Game screen(μ's mode)
	gameClear_aqours, //When the game is cleared(Aqours mode)
	gameClear_muse,   //When the game is cleared(μ's mode)
	gameOver_aqours,  //When the game is over(Aqours mode)
	gameOver_muse,    //When the game is over(μ's mode)
	combo_aqours,     //In combo(Aqours mode)
	combo_muse        //In combo(μ's mode)
}

Select EASY, NORMAL, HARD on the difficulty level selection screen

Three difficulty levels are available: EASY, NORMAL, and HARD. Depending on this difficulty level, the number of combo quotas and the HP of the enemy will change. cc.png

Game screen implementation

The game screen is finally here. The following classes are defined on the game screen. --Board class Drop board class --Field class Class at the top of the game screen --Drop class A class that manages drops --PlayerFrame class A class that displays player information (upper left of the screen) --TextFrame class A class that displays the number of combo quotas --FieldManager class A class that manages the Field class and interacts with the BoardManager class. --BoardManager class Management of Board class Class that interacts with Field class

I can't explain everything, so I'll explain a part of the Board class.

Board class

The Board class is a class that represents the board of the drop. In this class, ArrayList of Drop type ArrayList is prepared and Drop is managed. The constructor randomly gets a value between 0 and 4 and decides which color drop to generate according to that value.

board.java


public Board() { 
        this.width = GameEnvironment.BOARDWIDTH;               //Get the number of drops on the side of the board
	    this.height = GameEnvironment.BOARDHEIGHT;              //Get the number of vertical drops on the board
		this.dropDiameter = GameEnvironment.DROPDIAMETER;            //I'll get the size of the drop
    	 board = new ArrayList<ArrayList<Drop>>();        //Define a two-dimensional array of Drop class
    	// this.setBounds(0, this.environment.getBoardPosition(), this.width * this.dropDiameter, this.height * this.dropDiameter);  //The board will be displayed at the specified position and size.
 
    	 //A child class of the Drop class in a two-dimensional array with a double for statement(Fire, water, wood, darkness, light)I'll put in
    	 for (int k1 = 0; k1 < this.height; k1++) {
    		 this.board.add(new ArrayList<Drop>());       //Create an array of Drop class inside the array of Drop class
    		 for (int k2 = 0; k2 < this.width; k2++) {
    			 //I'll decide which drop to make depending on the random value
    			 switch(random()) {
    			 case 0: this.board.get(k1).add(new FireDrop(this.dropDiameter / 2,this.dropDiameter / 2)); break;  //If the random value is 0, it will store the fire drop.
    			 case 1: this.board.get(k1).add(new WaterDrop(this.dropDiameter / 2,this.dropDiameter / 2)); break; //If the random value is 1, it will store the water drop
    			 case 2: this.board.get(k1).add(new WoodDrop(this.dropDiameter / 2,this.dropDiameter / 2)); break;  //If the random value is 2, it will store the tree drop
    			 case 3: this.board.get(k1).add(new DarkDrop(this.dropDiameter / 2,this.dropDiameter / 2)); break;  //If the random value is 3, it will store the dark drop.
    			 case 4: this.board.get(k1).add(new LightDrop(this.dropDiameter / 2,this.dropDiameter / 2)); break; //If the random value is 4, it will store the light drop.
    			 }
    		 }
    	 }
    }

Game clear OR game over

If you set the enemy's HP to 0 before your HP becomes 0, the game will be cleared, and conversely, if your HP becomes 0 before your HP becomes 0, the game will be over. In a famous RPG game, the hero (player) will die when the HP becomes 0. However, "death" should not be a noisy element in love live. In this game, when the game is over, you will lose the qualifying in Love Live. If you clear the game, you will win the love live. The image displayed when the game is cleared is a certain enthusiasm that was popular at the time of game production. dd.png

in conclusion

How was that. It may have been difficult to read because it was my first post, but I hope you find this game a little more interesting. If you want to know the source code, please check it out on Github! We will continue to make love live related apps, so thank you. Finally, I would like to write a brush with the state of the game. (The keyboard is here, but w) love.gif

github-takuminish

Recommended Posts

Explanation of Puzzle & Quest with Love Live
[Java] Explanation of Strategy pattern (with sample code)