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.
• ChatGPT assisted JavaScript.
• ConvAI for the AI character voice & movie quote knowledge.
• BlockcadeLabs for generating an AI skybox.
• Stable Diffusion for 2D character & backdrop images.
• YouTube for playing videos on in-world TV.
• TheMovieDB for the movie selections.
• 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

• Look into if the AI could give 3 "hints" to the player w/o revealing which movie the quote is from.
• 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.)
• Create core gameplay w/o any AI usage. (Still only console output, no frontend.)
• Implement AI testbed.
• Add the AI telling the player they are half-way to the finish, and on the final question.
• Make the AI say something special in response to getting question 10 correct, prior to going to PLAYER WON state.
• Add various game states that are missing: [x] INTRO, [x] PRESS START, [x] PLAYER LOST, [x] PLAYER WON.
• Add soundfx for: Game start, Round start, Tock tick, Clock expired, Correct, Incorrect, Player lost, Hint used, Points added, Game paused.
• Move the menu button to top z-index so it's always active.
• Add a menu.
• Add a rules page to the menu.
• Add a credits page to the menu.
• Replace video store guy w/ AI-generated videos store guy.
• Replace empty grey background image w/ AI-generated Blockbuster Video-inspired image.
• Finishing creating 2D frontend.
• Deploy 2D version to site for testing: smsithlord.com/aiandgames2023
• 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