Table of Contents

Monster Manual Screen creation

Monster Details Implementation

Secret Table Unlock

Monster manual screen creation

MonsterMenuScreen.java Is used to create the screen of the monster illustration book MonsterMenuScreen is a construction method that defines the components of the monster menu screen，it Register a UI Entity and add various components to it.

    public MonsterMenuScreen(GdxGame game) {
        logger.debug("drawing monster menu ui");
        ServiceLocator.registerInputService(new InputService());
        ServiceLocator.registerResourceService(new ResourceService());
        ServiceLocator.registerEntityService(new EntityService());
        ServiceLocator.registerRenderService(new RenderService());
        renderer = RenderFactory.createRenderer();
        renderer.getCamera().getEntity().setPosition(2f, 1f);
        loadAssets();
        Stage stage = ServiceLocator.getRenderService().getStage();
        ui = new Entity();
        monsterDispay = new MonsterDispay(game);
        ui.addComponent(monsterDispay).addComponent(new InputDecorator(stage, 10))
                .addComponent(new MonsterDetails())
                .addComponent(new BackgroundSoundComponent("sounds/mainmenu_bgm.mp3", 0.5f));
        ServiceLocator.getEntityService().register(ui);
    }

loadAssets() enables Textures to be loaded in the monster menu

    private void loadAssets() {

        ResourceService resourceService = ServiceLocator.getResourceService();
        resourceService.loadTextures(MonsterMenuTextures);
        ServiceLocator.getResourceService().loadAll();
    }

Monster details implementation

MonsterDispay.java is a component used to define the appearance of the screen, in which the style and function of the monster menu are edited. Create various tables in createMonsterMenuBoard(), these tables form the basic style of the monster menu

Create image button， and add listener to it. When it is clicked, it will trigger the effect of the pop-up page

 /**
     * Returns an image button to be reused everywhere.
     *
     * @param upPath image path
     * @param overPath image path
     * @return ImageButton in monster menu
     */
    private ImageButton getImageButton(String upPath, String overPath) {
        ImageButton.ImageButtonStyle style = new ImageButton.ImageButtonStyle();
        style.up = new TextureRegionDrawable(new TextureRegion(
                new Texture(Gdx.files.internal(upPath))));
        style.over = new TextureRegionDrawable(new TextureRegion(
                new Texture(Gdx.files.internal(overPath))));
        ImageButton button = new ImageButton(style);
        return button;
    }

    private void createMonsterMenuBoard(){

        unlockedImg.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                logger.info("Plant button clicked");
                entity.getEvents().trigger("openDetailPage");
            }
        });
     }

Create a monster display board, place a picture button, and create a monster attribute table

  //this table contains the board
        boardTable = new Table();
        boardTable.center();
        boardTable.setFillParent(true);

        monster1Table = new Table();
        Label monsterName = new Label("Alien plant", skin);
        monsterName.setFontScale(1f);
        monster1Table.padBottom(700);
        monster1Table.setFillParent(true);
        monster1Table.add(unlockedImg).size(60, 60).padBottom(20);
        monster1Table.add(monsterName).padLeft(55).padBottom(45);

        BaseEntityConfig config_plant = configs2.plant;
        monster1AttributeTable = new Table();
        Label monsterAttributes = new Label("attack:" + config_plant.baseAttack + "\nhealth:" + config_plant.health, skin);
        monsterAttributes.setColor(255, 255, 255, 0.5f);
        monsterAttributes.setFontScale(0.8f);
        monster1AttributeTable.center().padLeft(90).padBottom(680);
        monster1AttributeTable.setFillParent(true);
        monster1AttributeTable.add(monsterAttributes);

Add background table, monster board table and monster table to the stage

   // add the board to the stage first so that its can be under of score data
        stage.addActor(bgTable);
        stage.addActor(boardTable);
        stage.addActor(monster1Table);

When the picture button is clicked, the openDetailPage function on MonsterDetails.java will be called

   @Override
    public void create() {
        super.create();

        entity.getEvents().addListener("openDetailPage", this::openDetailPage1);
      

    }

The dialog method is used in the openDetailPage1() method to define a pop-up window effect. In this function, head, picture and text are added to the dialog.

   private void openDetailPage1() {
        logger.info("Alien Plant Detail Page");
        dialog = new Dialog("Alien Plant Detail", skin);
        dialog.setModal(true);
        dialog.setMovable(false);
        dialog.setResizable(true);
        Image plantImage = new Image(new Texture("images/monster_menu/plant_img.png"));
        Label heading = new Label("Alien plant Feature: Trigger bounce " , new Label.LabelStyle(new BitmapFont(), Color.BLACK));
        Label story = new Label("This is an alien plant, when the character touches the obstacle, the alien plant will burst into pieces. Then the main character will be slowed down and deducted a certain amount of blood", new Label.LabelStyle(new BitmapFont(), Color.DARK_GRAY));
        heading.setFontScale(2f);
        story.setFontScale(1.3f);
        story.setWrap(true);
        story.setAlignment(Align.topLeft);
        dialog.getContentTable().add(heading).expandX().row();
        dialog.getContentTable().add(plantImage).height(152).width(240).row();
        dialog.getContentTable().add(story).width(600).row();
        dialog.getButtonTable().add(renderCloseButton()).size(50, 50).row();
        Image background = new Image(new Texture("images/monster_menu/box-background.png"));
        background.setScaling(Scaling.fit);
        dialog.setBackground(background.getDrawable());
        dialog.show(stage);
    }

Secret table unlock

The monster menu is locked by default, and the lock attribute returns a true by default. Only the secret table is displayed on the menu. When the character encounters a monster in the game, it will return a false unlock illustration book.

    if (ObstacleEventHandler.locked) {
            stage.addActor(secretTable);
            logger.info("Alien Plant Detail Page Locked");
        }

When the character encounters a monster in the game, it will return a false through the related function to unlock the illustration book.

   void plantsDisappear(Fixture me, Fixture other) {
        if (hitboxComponent.getFixture() != me) {
            // Not triggered by hitbox, ignore
            return;
        }
        if (!PhysicsLayer.contains(PhysicsLayer.PLAYER, other.getFilterData().categoryBits)) {
            // Doesn't match our target layer, ignore
            return;
        }

        if (count == 0) { // Avoid an entity from repeatedly triggering an attack
            count++;

            logger.debug("collisionStart event for {} was triggered.", entity.toString());
            animator.getEntity().setRemoveTexture();
            animator.startAnimation("obstacles");
            animator.getEntity().setDisappearAfterAnimation(1f);
            locked = false;
        }
    }