Player Eviction Menu: Code Guideline Sprint1

The Design Guideline：Sprint1: Design Eviction Menu

Contents

1. The main menu frame ( this part will be used for displaying several character cards).
2. The single card for displaying the information of each NPC. (this part will contain each character's information and allow players to select)
3. The button icon for entering this eviction menu.
4. The confirming box (When players select one specific NPC whom they regard as the traitor, the confirming box will pop up to ensure)

UI design implementation

1-2. Main menu and eviction card

In order to insert the NPC menu we designed earlier, theNpcEvictionMenu.java class is created under the .../screens folder.

In this class we call addComponent to register theNpcEvictionMenuDisplay.java class. The loadAssets function is used to update the background image.

private static final String[] npcEvictionMenuTextures = {"images/eviction_menu/evictionMenu_background.png"};  

public NpcEvictionMenu(GdxGame game) {  
    this.game = game;  
  
    logger.debug("Initialising npc menu screen services");  
    ServiceLocator.registerInputService(new InputService());  
    ServiceLocator.registerResourceService(new ResourceService());  
    ServiceLocator.registerEntityService(new EntityService());  
    ServiceLocator.registerRenderService(new RenderService());  
    renderer = RenderFactory.createRenderer();  
  
    loadAssets();  
    createUI();  
}  
  
*/
private void createUI() {  
    logger.debug("Creating ui");  
    Stage stage = ServiceLocator.getRenderService().getStage();  
    Entity ui = new Entity();  
    ui.addComponent(new NpcEvictionMenuDisplay(game)).addComponent(new InputDecorator(stage, 10));  
    ServiceLocator.getEntityService().register(ui);  
}  
  
*/
private void loadAssets() {  
    logger.debug("Loading assets");  
    ResourceService resourceService = ServiceLocator.getResourceService();  
    resourceService.loadTextures(npcEvictionMenuTextures);  
    ServiceLocator.getResourceService().loadAll();  
}

In the Npc Eviction MenuDisplay class a table is installed on 8 NPC cards and another table is used to load the background image. An important point is that the order in which the Actors created above are added to the stage is very important. The actor added first is at the bottom, and the actor added last is at the top. So the bgTable Actor for the background image is first added to the stage.

private void addActors() {  
  
    Image backgroundNpcMenu =  
            new Image(  
                    ServiceLocator.getResourceService()  
                            .getAsset("images/eviction_menu/evictionMenu_background.png", Texture.class));  
  
  
    Table menuNpcs = makeNpcCards();
    /** build new style exit button */
    //here is for button effect when you pressed on button
    Button exitBtn = createButton("images/eviction_menu/exitButton.png", "images/eviction_menu/exitButton_selected.png");
    exitBtn.setPosition((float) (stage.getWidth() * 0.928), (float) (stage.getHeight() * (1-0.1704)));
    exitBtn.setSize((float) (stage.getWidth()*0.035), (float) (stage.getHeight()*0.0593));
    exitBtn.addListener(
            new ChangeListener() {
                @Override
                public void changed(ChangeEvent changeEvent, Actor actor) {
                    logger.debug("Exit button clicked");
                    exitMenu();
                }  
            });  
    bgTable =new Table();  
    bgTable.setFillParent(true);  
    bgTable.add(backgroundNpcMenu).height(Gdx.graphics.getHeight()-BACKGROUND_HEIGHT_GAP).width(Gdx.graphics.getWidth()-BACKGROUND_WIDTH_GAP);  
  
    rootTable = new Table();  
    rootTable.setFillParent(true);  
    rootTable.add(menuNpcs).center();  
    rootTable.debug();  
  
    **stage.addActor(bgTable);  
    stage.addActor(exitBtn);  
    stage.addActor(rootTable);**  
  
}

3. Menu icon for entering

Because the traitor is selected during the game after start, the NPC menu icon is placed in the MainGameExitDisplay.java class of the maingame folder.

private void addActors() {  
  table = new Table();  
  table.top().right();  
  table.setFillParent(true);  
  /** build new style eviction menu button */  
  Button.ButtonStyle styleEvictionMenu = new Button.ButtonStyle();  
  styleEvictionMenu.over = new TextureRegionDrawable(new TextureRegion(  
          new Texture(Gdx.files.internal("images/eviction_menu/menuIcon_black.png"))));  
  //here is for button effect when you pressed on button  
  styleEvictionMenu.up = new TextureRegionDrawable(new TextureRegion(  
          new Texture(Gdx.files.internal("images/eviction_menu/menuIcon_white.png"))));  
  Button npcMenuBtn = new Button(styleEvictionMenu);  
  TextButton mainMenuBtn = new TextButton("Exit", skin);  
  
  // Triggers an event when the button is pressed.  
  mainMenuBtn.addListener(  
    new ChangeListener() {  
      @Override  
      public void changed(ChangeEvent changeEvent, Actor actor) {  
        logger.debug("Exit button clicked");  
        entity.getEvents().trigger("exit");  
      }  
    });  
  npcMenuBtn.addListener(  
          new ChangeListener() {  
            @Override  
            public void changed(ChangeEvent changeEvent, Actor actor) {  
              logger.debug("Load button clicked");  
              entity.getEvents().trigger("NpcMenu");  
            }  
          });  
  
  table.add(mainMenuBtn).padTop(10f).padRight(10f);  
  table.row();  
  table.add(npcMenuBtn).padTop(15f).width(NPC_MENU_BUTTON_WIDTH).height(NPC_MENU_BUTTON_HEIGHT);  
  table.row();  
  
  stage.addActor(table);  
}

4. Confirming box

For the implementation of confirming box, we choose the pop-up function in libgdx： Window ("title", style). In the window style, we set the background image; the title font and color are default. Similar to the construction method in 1 and 2, window is used as a stage, and OK and Cancel buttons are added. The size and position of the window are calculated according to the scale of the prototype. Finally, add the window to the stage, and use the Window. remove() method to remove it.

    private void createConfirmDialog(String button_name) {
     
        // set the style of dialog include font color of title; background; size; position
        TextureRegionDrawable styleImage = new TextureRegionDrawable(
                ServiceLocator.getResourceService().getAsset("images/eviction_menu/confirmBox.png", Texture.class));
        Window.WindowStyle windowStyle = new Window.WindowStyle(new BitmapFont(), Color.BLACK, styleImage);
        Window dialog = new Window("", windowStyle);
        dialog.setSize(dialog_size_x, dialog_size_y);
        dialog.setPosition(dialog_pos_x, dialog_pos_y);           // dialog_size is based on the size of the background

        // Set Cancel and Ok buttons for dialog
        Button okButton = createButton("images/eviction_menu/confirmBtn_ok.png", "images/eviction_menu/confirmBtn_ok1.png");
        okButton.setSize(dialog_size_x * scale), (dialog_size_y * scale));
        okButton.setPosition((float) (dialog.getWidth()*scale), 0);
        okButton.addListener(new ChangeListener() {
                    @Override
                    public void changed(ChangeEvent changeEvent, Actor actor) {
                        logger.debug("yes_button from " + button_name + " clicked");
                        // No action yet
                        dialog.remove();
                    }
                }); 

        dialog.addActor(okButton);
        //dialog.addActor(cancleButton);    The implementation of Cancel button is the same as the OK button
        stage.addActor(dialog);
    }

Relevant Files

NpcEvictionMenu.java

NpcEvictionMenuDisplay.java