AI Game Dev (March 22) – DTC 338: AI in the Arts

To Do This Week

Blog Prompt: Have a Chat in your Research GPT about creating an HTML5 (browser-based) game with a team of 3-4 students. Given your skills and interests in using AI tools, discuss what types or genres of game you would like to work on and what role you would like to play in its design/development. A text game, narrative game, exploratory game (world-building) or physics game (jumping, dodging shooting at obstacles).

In a blog post, share the type/genre, your role (coder, designer, writer) and a general description for a game you would like to collaborate on.

Class

Programming Concepts>Javascript Syntax

Basic Principles:

statements
javascript commenting variables
adding javascript to a page (internal and external methods)
data types: strings, numbers, booleans, arrays

Operators:

Doing Stuff:

Storing Stuff:

variables
arrays
objects / methods / properties :
object literals
object constructors

HTML5 Games:
You can, if you want, explore W3schools HTML5 Games Demo to see how JavaScript can build a game using the Canvas element.

Here is the above example html5-game script with comments

Try to understand how objects are generated and then are animated with speed and gravity properties. Try playing around with values.

Previous Student Canvas Games
Escape the Room
Cube Game
Space Jam
Welcome to Greenhedge
game: inventory
Knight Runner
Undead Outpost

In-class Exercise:

Form groups of 2-3 based on game type or designers/coders.

With your group, discuss what you want to do with your HTML5 Canvas game.
Take notes on basic game mechanics and interaction design.
Each student then enters the game idea and explores questions about what is and what is not possible. Get clarity on how to approach the game development.
Discuss with your group the chat you each had about the game idea, Reevaluate the game mechanics and interaction.
Rewrite the game plan and instructions in ChatGPT and ask to breakdown workflow and tasks based on design and development roles.
Assign roles and tasks for each student in the group.
Clarify deadlines. Plan the workflow. The developers should be the compiler of games code and assets.
In collaboration, use Slack and Zoom to communicate with your group
Define a quick example of an HTML5 game

Interactive Multimodal Game Development (15%)

DUE April 5

Overview

This project you will get into small groups of 2-3 students to design and build an interactive game using HTML5, CSS, and JavaScript. The objective is to create a browser-based game that incorporates user interactivity, challenges, randomness, and AI-generated visual elements and sound design. The project will stretch your creative and technical skills, as you’ll be required to conceptualize, design, and develop a game without the use of external libraries or frameworks. Whether your game is text-based or involves more complex keyboard interactions, the emphasis is on originality, playability, and the seamless integration of AI-generated content.

Goals

Craft a unique game that stands out through its gameplay, challenges, and thematic content.
Use AI to generate compelling visual elements and sound design, enhancing the immersive experience of your game.
Build your game using only HTML5, CSS, and vanilla JavaScript, with the assistance of ChatGPT
Work within your group, drawing on the strengths of each member to contribute to a cohesive and engaging game.

Instructions

Brainstorm game concepts as a group, discussing potential themes, gameplay mechanics, and the role of AI-generated content.
Use ChatGPT to explore the feasibility of your ideas and to brainstorm additional elements like storylines, challenges, and AI integration.
Sketch out a basic structure for your game, including the user interface, game flow, and key interactions.

Setup:

One student in the group should create a new directory for the game files, organizing it with subfolders for assets like images and sound.
Begin with creating the index.html file as the entry point of your game.

Development with ChatGPT:

Work with ChatGPT to define clear, detailed tasks for generating the JavaScript logic, HTML structure, and CSS styling that will bring your game to life.
Insert AI-generated visuals and sounds at appropriate junctures to enrich the gaming experience.
Use CSS for visual design and JavaScript for game mechanics, such as user inputs, game logic, and randomness.

Collaboration:

Assign tasks and roles based on each group member’s strengths and interests, ensuring a balanced workload.
Schedule in-class work sessions and use tools like Slack or Zoom for coordinating and collaborating outside of class.

Testing and Deployment:

Thoroughly test your game for usability, bug-free performance, and overall enjoyment.
Deploy your game by uploading it to a web server, ensuring it is accessible for play and evaluation.

Grading Criteria

You will each submit your own version of the group game to the server and share in a blog post along with a short statement about what your contributed was to the collaboration.

You will each be graded individually for the group project AND your own contribution in the collaboration. Effort is most important for this grade.

Game Concept and Design (30%): Originality and creativity of the game idea, including gameplay mechanics and thematic depth.
AI Integration (25%): Effectiveness in incorporating AI-generated visual and sound elements to enhance the game experience.
Functionality and Interactivity (20%): Smooth gameplay, with responsive controls and error-free operation.
Technical Implementation (15%): Quality of coding, including the use of HTML, CSS, and JavaScript to create a well-structured, efficient game.
Collaboration and Innovation (10%): Demonstrated ability to work as a team and innovate with interactive elements or gameplay features.

Example Prompt for ChatGPT

“Help us break down the development of a HTML5 canvas game that incorporates AI-generated art and sound. We envision a game that includes [describe gameplay mechanics, e.g., puzzles, obstacles, scoring], with a theme centered around [THEME]. We need assistance in generating tasks for coding the game logic in JavaScript, designing the game interface with HTML and CSS, and integrating AI-generated content. Please provide a detailed task list, including suggestions for incorporating the AI elements.”