Crafting Menu Updates

Overview

This sprint, we focused our attention on refining the currently existing features within the game and polishing up the user experience when interacting with the crafting system. The features implemented are a tutorial on how to craft, hover animations for the materials in the inventory display, sound effects that will play when the user selects a material or presses a button on the menu and three new crafting tables on each map at various positions.

Tutorial

A tutorial will appear when the user opens the crafting menu for the first time. Two materials (wood and rubber) will be gifted to the user upon starting the tutorial, which they can then use to craft a plunger, the weakest weapon in the game. The tutorial will step them through the entire process of how to craft this weapon.

First, the assets needed will be initialised the first time they open up the menu.

craftArrow = new Image(new Texture(Gdx.files.internal("images/Crafting-assets-sprint1/popups/arrow-top-left.png")));
craftArrow.setPosition(craftMenu.getX() + 650, craftMenu.getY() + 145);
craftArrow.addAction(craftArrowAction);

The wood and rubber will be added to the user's inventory.

if (!inventoryComponent.hasItem(MaterialFactory.createWood(), inventoryComponent.getInventory())) {
    inventoryComponent.addItem(MaterialFactory.createWood());
}

Everytime the user completes a step in the tutorial, the next step will be added to the stage and the previous one will be disposed of.

disposeFirstTutorial();
stage.addActor(secondTutorial);

If the user leaves the menu without completing the tutorial, it will restart the next time they open up the menu since they will have most likely forgotten where they were up to. However, no additional materials will be gained from restarting the tutorial.

if (firstTime < 4) {
    firstTime = 1;
}

Hover Animations

Hover animations were added to the materials in the inventory display of the crafting menu so that the items will jump off the page slightly when the user hovers over it. This was done by adding a ClickListener to the materials and overriding the enter and exit methods within it. The enter method detects when the user's mouse goes over the object and the exit method detects when the user's mouse goes outside of the object's boundaries.

material.addListener(new ClickListener() {
    @Override
    public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor) {
        super.enter(event, x, y, pointer, fromActor);
        material.setSize(50, 65);
    }
    @Override
    public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
        super.exit(event, x, y, pointer, toActor);
        material.setSize(50, 50);
    }
});

Sound Effects

Sound effects were made as part of a collaboration with Team 7. They were added everytime the user selects a material in the inventory display as well as to buttons on the interface.

Sound selectMat = ServiceLocator.getResourceService().getAsset("sounds/ItemClick.wav", Sound.class);
selectMat.play();

New Crafting Tables

Forest game area

lysImage

Underground game area

lysImage2

Due to the increased map size implemented by Team 5 last sprint, we received feedback from various other teams that the crafting menu was too inaccessible due to having to traverse the entire map to get to a table. After conducting more user testing, we decided on various additional positions within each game area to place them so that there was always one table that could be reached without too much effort from everywhere on the map.

Entity craftingTable3 = ObstacleFactory.createCraftingTableForest();
craftingTable3.setEntityType(EntityTypes.CRAFTINGTABLE);
spawnEntityAt(craftingTable3, new GridPoint2(96, 139), true, true);