Player Interaction and Movement Visuals - UQcsse3200/2024-studio-3 GitHub Wiki
This wiki will outline the design decisions involved with the implementation of the new sprite, the visualisation of the player movement and interactions.
- 1. Redesigning the player model
- 2. Visualisation of player movement
- 3. Visualisation of player item holding
Redesigning the player model
Overview
- Redesign the current sprite
- Choosing what size to render the sprite as
Image of the new sprite
The height of the sprite was chosen based on the height of the benches. We wanted the height of the sprite to be just above the benches such that when the sprite walks behind the benches you can still see him.
Visualisation of player movement
Overview
- Redraw the sprite in all adjacent motion (in the sense of a 3x3 area)
- The sprite renders moving up, down, left, right, and diagonally
What the uploaded image of movement looks like
The new sprite model will use an atlas style function to run through the image and identify each 32x32 sprite within the image. Each sprite png utilises 32 individual sprites in order to accomplish the walk cycle animation. In order to achieve this feature, 928 individual sprites were created (😮)
Visualisation of player item holding
Overview
- Drawing the sprite holding each item in a certain manner
- The decisions made to draw the sprite holding it in this manner
- What items will be rendered on the player
- How the code was implemented to update the sprite on which item to hold
Option 1
Option 1 shows the sprite holding spherical ingredients above their head.
Option 2
Option 2 shows the sprite holding cylindrical ingredients over one shoulder / held from one arm.
Overview of options
Since different ingredients are better to be portrayed in separate ways (i.e. sliced chocolate on top of the sprite's head instead of in their arms) a combination of both options were used to show the sprite holding different kinds of ingredients.
An example of option 1 being used on spherical ingredients (strawberries)
An example of option 2 being used on cylindrical ingredients (fish)
List of items that will be drawn for the sprite to hold:
Ingredients:
- Raw acai
- Chopped acai
- Raw beef
- Cooked beef
- Burnt beef
- Raw banana
- Chopped banana
- Raw lettuce
- Chopped lettuce
- Raw cucumber
- Chopped cucumber
- Raw tomato
- Chopped tomato
- Raw strawberry
- Chopped strawberry
- Raw chocolate
- Chopped chocolate
- Raw fish
- Cooked fish
Meals:
- Acai Bowl
- Banana Split
- Fruit Salad
- Salad
- Steak
Other Items:
- Fire Extinguisher
- Plates (Dirty and Clean)
How it was implemented
Each atlas was loading into the loaded atlases in ForestGameArea.
In PlayerAnimationController, updateAnimation takes the last part of the atlas's relative path and re-renders the player sprite animation to utilise the passed atlas.
public void updateAnimation(String atlasPath) {
//Removes all animations
animator.removeAnimation("Character_StandDown");
animator.removeAnimation("Character_StandUp");
animator.removeAnimation("Character_StandLeft");
animator.removeAnimation("Character_StandRight");
animator.removeAnimation("Character_DownLeft");
animator.removeAnimation("Character_UpRight");
animator.removeAnimation("Character_Up");
animator.removeAnimation("Character_Left");
animator.removeAnimation("Character_Right");
animator.removeAnimation("Character_Down");
animator.removeAnimation("Character_DownRight");
animator.removeAnimation("Character_UpLeft");
//Updates atlas
animator.updateAtlas(ServiceLocator.getResourceService().getAsset(
"images/player/" + atlasPath, TextureAtlas.class));
//Adds new animations
animator.addAnimation("Character_StandDown", 0.2f);
animator.addAnimation("Character_StandUp", 0.2f);
animator.addAnimation("Character_StandLeft", 0.2f);
animator.addAnimation("Character_StandRight", 0.2f);
animator.addAnimation("Character_DownLeft", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_UpRight", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_Up", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_Left", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_DownRight", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_Down", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_UpLeft", 0.2f, Animation.PlayMode.LOOP);
animator.addAnimation("Character_Right", 0.2f, Animation.PlayMode.LOOP);
}
updateAnimation was then utilised to create a batch of specialised functions (one for each item). These could then be used to add event listeners to the player entity which could be triggered across classes.
//Updates player sprite to the generic sprite (nothing in inventory)
void updateAnimationEmptyInventory(){updateAnimation("player.atlas");}
//Adds event listener that upon trigger will call updateAnimationEmptyInventory (initialised in create() method)
entity.getEvents().addListener("updateAnimationEmptyInventory",
this::updateAnimationEmptyInventory);
The ultimate sprite update was handled through a switch case in updateLabel (in the InventoryDisplay class). Called when the player's inventory is updated, the function checks the first (and only) slot in the player's inventory and triggers the corresponding sprite update event for the correct item. The following are simply cases for each different item which explains the lengthy code:
private void updateLabel(ItemComponent item) {
if (item != null) {
if (item instanceof IngredientComponent) {
switch (item.getItemType()) {
case ItemType.ACAI:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawAcai");
} else {
entity.getEvents().trigger("updateAnimationChoppedAcai");
}
break;
case ItemType.BEEF:
//Updates player sprite back to hold fish (raw, cooked, burnt)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawBeef");
} else if (((IngredientComponent) item).getItemState().equals("cooked")) {
entity.getEvents().trigger("updateAnimationCookedBeef");
} else {
entity.getEvents().trigger("updateAnimationBurntBeef");
}
case ItemType.BANANA:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawBanana");
} else {
entity.getEvents().trigger("updateAnimationChoppedBanana");
}
break;
case ItemType.LETTUCE:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawLettuce");
} else {
entity.getEvents().trigger("updateAnimationChoppedLettuce");
}
break;
case ItemType.CUCUMBER:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawCucumber");
} else {
entity.getEvents().trigger("updateAnimationChoppedCucumber");
}
break;
case ItemType.TOMATO:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawTomato");
} else {
entity.getEvents().trigger("updateAnimationChoppedTomato");
}
break;
case ItemType.STRAWBERRY:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawStrawberry");
} else {
entity.getEvents().trigger("updateAnimationChoppedStrawberry");
}
break;
case ItemType.CHOCOLATE:
//Updates player sprite back to hold fish (raw or chopped)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawChocolate");
} else {
entity.getEvents().trigger("updateAnimationChoppedChocolate");
}
break;
case ItemType.FISH:
//Updates player sprite back to hold fish (raw or cooked)
if (((IngredientComponent) item).getItemState().equals("raw")) {
entity.getEvents().trigger("updateAnimationRawFish");
} else {
entity.getEvents().trigger("updateAnimationCookedFish");
}
break;
case ItemType.ACAIBOWL:
//Updates player sprite back to hold acai bowl
entity.getEvents().trigger("updateAnimationAcaiBowl");
break;
case ItemType.BANANASPLIT:
//Updates player sprite back to hold banana split
entity.getEvents().trigger("updateAnimationBananaSplit");
break;
case ItemType.FRUITSALAD:
//Updates player sprite back to hold fruit salad
entity.getEvents().trigger("updateAnimationFruitSalad");
break;
case ItemType.SALAD:
//Updates player sprite back to hold salad
entity.getEvents().trigger("updateAnimationSalad");
break;
case ItemType.STEAKMEAL:
//Updates player sprite back to hold steak meal
entity.getEvents().trigger("updateAnimationSteak");
break;
default:
//Updates player sprite back to default
entity.getEvents().trigger("updateAnimationEmptyInventory");
break;
}
} else {
switch(item.getItemType()) {
case PLATE:
entity.getEvents().trigger("updateAnimationPlate");
break;
case FIREEXTINGUISHER:
entity.getEvents().trigger(
"updateAnimationFireExtinguisher");
break;
}
}
} else {
//Updates player sprite back to default
entity.getEvents().trigger("updateAnimationEmptyInventory");
}
}
Testing
To confirm that the correct animation is used for each movement, the verify function is used to ensure the correct animation is starting. e.g.
pac.create();
pac.animateLeft();
verify(pac).animateLeft();
verify(animator).startAnimation("Character_Left");
Additionally, intuitive visual testing can be done. When picking up an item, the player sprite should update to reflect this, and the item the sprite is holding should always correspond to the inventory display in the bottom left corner (as shown below)