# Video Store Quiz Show (aiandgames2023) by SM Sith Lord


## Description
A sort of trivia game where the player sees 3 movie covers and an AI character says a movie quote, then the player chooses the right movie.

## Game Jam
The theme of the `AI and Games 2023` game jam is `copycat`. To fulfill the theme, the AI video store guy will be saying movie quotes.

## Overview
**Scene:** A video store clerk desk. (Inspired by Blockbusters in the 90s.)
**Props:** There is a TV behind the desk, and some loose VHS tapes laying around. Clicking them plays an associated video on the TV, on mute (by default.)
**Character:** A video store clerk guy. He loves movies, and he loves turning the volume waaaay up.
**Gamplay:** 3 VHS tapes appear. The clerk says a movie quote. You click on the movie that the quote came from. 1 strike and you're out. Answer 10 questions to win a prize.
**Prize:** A downloadable GLB of the movie pick that won them the game.

## Technical
- PlayCanvas to power the game.
- [x] **ChatGPT assisted JavaScript.**
- [x] **ConvAI for the AI character voice & movie quote knowledge.**
- **BlockcadeLabs for generating an AI skybox.**
- [x] **Stable Diffusion for 2D character & backdrop images.**
- YouTube for playing videos on in-world TV.
- [x] TheMovieDB for the movie selections.
- [x] SoundFX from ZapSplat.com
- Cloudinary for proxy image hosting movie images.
- TheBaseMesh for 3D assets.
- 3ds Max for additional custom 3D assets.
- GameTextures.com for PBR materials.
- Substance Painter for applying materials.
- Mixamo for NPC character model.
- ReadyPlayerMe for animations.

## Design
### AI NPC
- The user never directly interacts with the NPC.
- The NPC greets the user, tells them how to play the game, and reads the movie quotes, all automatically.
- The user interacts by clicking on the movie that the quote came from.
- Prompts to the AI are generated procedurally by a question template, for exmaple: `Tell me a quote from ______, but don't cite the source.`
- When the user choses a response, the prompt sent to the AI is, for example: `That's from the movie _____, correct?`
- If the user fails to respond in time, the prompt is, for example: `I give up. What movie is that from?`
- When the user wins the game, the prompt sent to the AI is, for example: `Tell me I've won the game and that I've won a prize! The prize is the VHS tape for me to take home!`
- The AI tells the user when they reach milestones of question 5 and question 8, and question 10, using similar prompts.

### User Input / Gameplay
- User loads into the scene, but it's in an idle state with a `START GAME` button on the screen.
- When the user starts the game, the AI greets them & starts the game. (As decribed in the AI section.)
- Each round is 3 large VHS cases w/ movie posters on them float in front of the user, and the AI randomly says a quote from 1 of.
- A timer starts counting down from 5 (movie-style.)
- The user clicks on the correct VHS tape to win the round.
- The next round then begins.
- After winning the game (10 rounds), they are told their sore (x/10) and can click a button to download their GLB prize. Or click CONTINUE to go back to IDLE state.

## Stretch Goals
- ~~Achievement images for getting N rounds correct in a row, etc.~~ (Replaced w/ HINTS.)
- Be able to click on loose VHS tapes laying on the desk to play them on the video screen.
- Let the user choose movie genres themselves (via TheMovieDb.org) instead of movie selections being hard-coded.
- Be able to chat with the AI directly, between games.
- Be able to ask the AI to control the TV for you.
- [o] Be mobile compatible.
- [o] Work on iPhones.
- ~~VR support.~~ (Out of scope.)

## TODO
### Gameplay & Rounds Logic
- [x] Look into if the AI could give 3 "hints" to the player w/o revealing which movie the quote is from.
- [x] Pull 200 popular movies from TheMovieDB to build a pre-processed list of movies. (Stretch goal is to let user choose genres & release years themselves & live-build this list during runtime w/ TheMovieDB API.)
- [x] Create core gameplay w/o any AI usage. (Still only console output, no frontend.)
- [x] Implement AI testbed.
- [x] Add the AI telling the player they are half-way to the finish, and on the final question.
- [x] Make the AI say something special in response to getting question 10 correct, prior to going to PLAYER WON state.
- [x] Add various game states that are missing: [x] INTRO, [x] PRESS START, [x] PLAYER LOST, [x] PLAYER WON.
- [x] Add soundfx for: `Game start, Round start, Tock tick, Clock expired, Correct, Incorrect, Player lost, Hint used, Points added, Game paused.`
- [x] Move the menu button to top z-index so it's always active.
- [x] Add a menu.
- [x] Add a rules page to the menu.
- [x] Add a credits page to the menu.
- [x] Replace video store guy w/ AI-generated videos store guy.
- [x] Replace empty grey background image w/ AI-generated Blockbuster Video-inspired image.
- [x] Finishing creating 2D frontend.
- [x] Deploy 2D version to site for testing: smsithlord.com/aiandgames2023
- [x] Start planning 3D frontend.
- [ ] Fire "app" events at key moments, so that the game state could be represented in a 3D scene in parallel to the 2D scene. (ie. start preparing for 3D frontend.)

## Dev Log
### Time Sheet
- Around 2-3 hours Friday writing design doc.
- Around 11-12 hours Saturday doing tests & developing 2D frontend up to only missing some extra screens for edge case game states.
- Around 11-12 hours on Sunday finishing the 2D frontend.
- Around 7-8 hours on Monday troubleshooting Convai server requests & white-boxing 3D scene in PlayCanvas.
- Around 12-13 hours on Tuesday finishing the 3D scene in 3ds Max, Substance Painter, Blockade, RPM, PlayCanvas.

### ChatGPT prompts for developing TheMovieDb and ConvAI API usage, plus API references
- https://docs.convai.com/api-docs/reference/core-api-reference/character-tool-api/character-api#interact-with-a-character
- https://developer.themoviedb.org/docs/authentication-application
- https://developer.themoviedb.org/reference/discover-movie

### 2D Frontend Mockup
**Desktop**

**Mobile**

### 2D Frontend Implementation

### Intro Screen
- Just a title screen fade-in is needed for 2D frontend.
- This is where a camera pan in sequence will occur in 3D.

### Press Start Screen
- The title has finished fading in and the user must interact to continue. (Press Start)
- In 3D, this will occur after the camera finishes its intro pan. (And the camera can snap to this position later too, w/o the intro pan.)
- Sound is currently **required** for this app to work, so unless that changes, the player may have to do a short device setup to make sure their sound is playable. (Sound not playing literally impacts scripts, because no "ended" event occurs on audio sources.)

### Player Lost Screen

- Shown when the player gets a question wrong, or runs out of time.
- It adds up their score as the AI says something funny.
- It has a `continue` button on it, which goes back to the Press Start Screen.

### Player Won Screen
- Similar to Player Lost screen (shown above.)
- Siimlar to the lost screen, but confetti and cheers too.
- In 3D, this is where a GLB of the movie case would be generated & downloaded.
- In 2D, a PNG is generated that has their score on it & the movie that won them the game - which they can download.
- There is a Continue button which goes back to the Press Start screen.

### Stable Diffusion Character

### Stable Diffusion Backdrop