Graphics ~ Design Document for NPC Graphics and Dialogue - uchicago-cs/chiventure GitHub Wiki

Introduction

This document outlines graphics related to NPCs and NPC dialogue. You'll find ideas on what the graphics could look like, information needed from the NPC struct, and ideas on how to proceed with implementation. When working on this issue the GUI and NPC teams will work hand and hand as they create a game that we the viewer can see what the NPC look visually, while also working to make a visual dialogue.

Graphic Example

These are some general idea for NPC graphic and dialogue. With one being a headshot of the NPC next to their dialogue. The other which is from Pokémon has the NPC full body while the dialogue is below. Both of these can be great options to use.

Pokémon NPC and DialogueNPC headshot and dialogue

Information Needed

  • char npc_id - A string to store graphics of npc's with
  • convo_t *dialogue - Dialogue tree hash table to populate the dialogue box from NPC's

npc_gui.h Design

 #ifndef NPC_GUI_H
 #define NPC_GUI_H

#include "common/ctx.h"
#include "ui/ui_ctx.h"
#include "npc/npc.h"

/* npc_graphic
 * Overlays an image of an NPC that associates with a npc_id on the background.
 *
 * Parameters:
 *    - char *npc_id: A string that is a NPC identifier
 *
 * Returns:
 *    - 0: Failed
 *    - 1: Success
 */
int npc_graphic(char *npc_id);

/* dialogue_graphic
 * Overlays an text box of an NPC dialogue that associates with a npc_id on the background.
 *
 * Parameters:
 *    - char *npc_id: A string that is a NPC identifier
 *
 * Returns:
 *    - 0: Failed
 *    - 1: Success
 */
int dialogue_graphic(char *npc_id);

 #endif

Next Steps

  • Work with NPC team to tie an image to the npc_id which is in inside the NPC struct.
  • Create a game where it calls the npc_id and has the NPC come on the game.
  • Look into the image file to see how to store and utilize given images.
  • Tackle how to handle dialogue options that are larger than the textbox (want all text/box to be uniform for all dialogue). Example could be having a tab or scroll function to look through the rest of the dialogue